form

src/components/KidsWelcome.jsx

@@ -11,20 +11,22 @@ function KidsWelcome({ kidName, handleKidAge, kidAge }) {
   return (
     <>
       <div className="generalContainer">
-        <div>
-          <h3>Hello!!</h3>
-          <p>{kidName}</p>
-
-          <p>How old are you?</p>
+        <h3>Hello!!</h3>
+        <p>
+          <strong>{kidName}</strong>
+        </p>
+        <form className="login__form">
+          <label>How old are you?</label>
           <input
             minLength={1}
             maxLength={2}
             type="number"
             placeholder="5"
             value={kidAge}
             onChange={handleChange}
+            required
           />
-        </div>
+        </form>
       </div>
     </>
   );

src/components/Login.jsx

@@ -16,7 +16,7 @@ function Login({ kidName, handleKidName }) {
         <label htmlFor="email">Email</label>
         <input
           id="email"
-          type="text"
+          type="email"
           name="email"
           placeholder="[email protected]"
           required
@@ -32,6 +32,7 @@ function Login({ kidName, handleKidName }) {
             handleKidName(ev.target.value);
           }}
         />
+        <input type="reset" value="Clean" />
       </form>
     </div>
   );