This is Mercy Bamisaye Assignment

src/App.css

@@ -0,0 +1,43 @@
+#root {
+    max-width: 1280px;
+    margin: 0 auto;
+    padding: 2rem;
+    text-align: center;
+  }
+
+  .logo {
+    height: 6em;
+    padding: 1.5em;
+    will-change: filter;
+    transition: filter 300ms;
+  }
+  .logo:hover {
+    filter: drop-shadow(0 0 2em #646cffaa);
+  }
+  .logo.react:hover {
+    filter: drop-shadow(0 0 2em #61dafbaa);
+  }
+
+  @keyframes logo-spin {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    a:nth-of-type(2) .logo {
+      animation: logo-spin infinite 20s linear;
+    }
+  }
+
+  .card {
+    padding: 2em;
+  }
+
+  .read-the-docs {
+    color: #888;
+  }
+

src/App.jsx

@@ -1,28 +1,33 @@
-import { React, useState } from "react";
-import CurrencySwitcher from "./Components/CurrencySwitcher";
-import Display from "./Components/Display";
+import { React, useState } from 'react'
+import CurrencySwitcher from './components/CurrencySwitcher';
+import Display from './components/Display';
+import Form from './components/forms';
 
 import "./App.css";
 
 function App() {
   const [currency, setCurrency] = useState("EUR");
 
   const handleCurrencyChange = () => {
-    //TODO: using traditional if else statement determine the new currency
-    setCurrency(currency === "EUR" ? "USD" : "EUR");
+    if (currency === "EUR") {
+      setCurrency("USD");
+    } else {
+      setCurrency("EUR");
+    }
   };
 
+
   return (
     <div>
       <Display currency={currency} />
       <CurrencySwitcher
         handleChangeCurrency={handleCurrencyChange}
         currency={currency}
       />
+      <Form />
     </div>
+
   );
 }
 
-export default App;
-
-
+export default App;

src/Components/CurrencySwitcher.jsx

@@ -1,12 +1,11 @@
 import React from "react";
 
 function CurrencySwitcher(props) {
-    return (
-        <button onClick={props.handleChangeCurrency}>
-          Current currency is {props.currency}. Change it!
-        </button>
-      )
+  return (
+    <button onClick={props.handleChangeCurrency}>
+      Current currency is {props.currency}. Change it!
+    </button>
+  );
 }
 
-export default CurrencySwitcher;
-
+export default CurrencySwitcher;

src/Components/Display.jsx

@@ -4,7 +4,7 @@ import React from "react";
 function Display(props) {
   return (
     <div>
-      <p>Current currency  is {props.currency}</p>
+      <p> Current currency is {props.currency}</p>
     </div>
   );
 }

src/Components/Forms.jsx

@@ -0,0 +1,29 @@
+import React, { useState } from "react";
+
+
+export default function Form() {
+    const [userName, setUsername] = useState('')
+    const [userDetails, setUserDetails] = useState('')
+
+    const handleChange = (e) => {
+        setUsername(e.target.value)
+    }
+
+    const handleUserDetailsChange = (e) => {
+        setUserDetails(e.target.value)
+    }
+
+    return (
+        <div>
+            <form>
+                <input type="text" name="Username" value={userName} onChange={handleChange} />
+                {/* {display the name in the input field on the screen once the user type in the input field} */}
+                <p>username is: {userName}</p>
+
+                <textarea name="User-Details" cols="30" row="10" value={userDetails} onChange={handleUserDetailsChange}></textarea>
+                {/* {display the user details in the textarea on the screen once the user type in the input field} */}
+                <p>user Details are: {userDetails}</p>
+            </form>
+        </div>
+    )
+}

src/index.css

@@ -0,0 +1,70 @@
+:root {
+    font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+    line-height: 1.5;
+    font-weight: 400;
+
+    color-scheme: light dark;
+    color: rgba(255, 255, 255, 0.87);
+    background-color: #201212;
+
+    font-synthesis: none;
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-text-size-adjust: 100%;
+  }
+
+  a {
+    font-weight: 500;
+    color: #646cff;
+    text-decoration: inherit;
+  }
+  a:hover {
+    color: #535bf2;
+  }
+
+  body {
+    margin: 0;
+    display: flex;
+    place-items: center;
+    min-width: 320px;
+    min-height: 100vh;
+  }
+
+  h1 {
+    font-size: 3.2em;
+    line-height: 1.1;
+  }
+
+  button {
+    border-radius: 8px;
+    border: 1px solid transparent;
+    padding: 0.6em 1.2em;
+    font-size: 1em;
+    font-weight: 500;
+    font-family: inherit;
+    background-color: #3f06aa;
+    cursor: pointer;
+    transition: border-color 0.25s;
+  }
+  button:hover {
+    border-color: #646cff;
+  }
+  button:focus,
+  button:focus-visible {
+    outline: 4px auto -webkit-focus-ring-color;
+  }
+
+  @media (prefers-color-scheme: light) {
+    :root {
+      color: #213547;
+      background-color: #ffffff;
+    }
+    a:hover {
+      color: #747bff;
+    }
+    button {
+      background-color: #f9f9f9;
+    }
+  }
+

src/main.jsx

@@ -6,5 +6,5 @@ import './index.css'
 ReactDOM.createRoot(document.getElementById('root')).render(
   <React.StrictMode>
     <App />
-  </React.StrictMode>
+  </React.StrictMode>,
 )