Add js

index.html

@@ -28,7 +28,7 @@ <h1 class="title">The pet of my dreams</h1>
             class="field"
             name="name"
             id="name"
-            requerid
+            required
             placeholder="Name"
           />
           <label for="email" class="label">Email*:</label>
@@ -37,11 +37,11 @@ <h1 class="title">The pet of my dreams</h1>
             class="field"
             name="email"
             id="email"
-            requerid
+            required
             placeholder="Email"
           />
           <label for="age" class="label">Age*:</label>
-          <input type="text" class="field" name="age" id="age" requerid
+          <input type="text" class="field" name="age" id="age"  min="18"required
           placeholder="Age"
         </fieldset>
         <fieldset class="fieldset">
@@ -62,5 +62,6 @@ <h1 class="title">The pet of my dreams</h1>
       </form>
       <small class="copyright">by Juliana Comin</small>
     </main>
+    <script src="./js/script.js"></script>
   </body>
 </html>

js/script.js

@@ -0,0 +1,48 @@
+let inputs = document.querySelectorAll('.field[required]')
+console.log(inputs)
+
+window.addEventListener('load', inputs[0].focus())
+
+inputs.forEach(function(input) {
+  input.addEventListener('input', function() {
+    console.log(`user typed ${input.value}`)
+    //console.log('user typed'+ input)
+  })
+
+  input.addEventListener('blur', function(event) {
+    const element = event.target
+    element.setCustomValidity('')
+    let isValid = element.checkValidity()
+
+    if (!isValid) {
+      element.setCustomValidity(setErrorMsg(element))
+      element.classList.add('invalid')
+    } else {
+      element.setCustomValidity(setErrorMsg(''))
+      element.classList.remove('invalid')
+    }
+  })
+})
+
+const setErrorMsg = element => {
+  let errorMsg = ''
+  switch (element.name) {
+    case 'mane':
+      errorMsg = 'This field must be your name!'
+      break
+    case 'email':
+      errorMsg = 'We need your email to avoid duplication!'
+      break
+    case 'age':
+      if (element.value < 18) {
+        errorMsg = 'Sorry, we can not accept your aplication!'
+      } else if (element.validity.valueMissing) {
+        errorMsg = 'We need to know your age!'
+      }
+
+    default:
+      errorMsg = 'Please verify this field'
+      break
+  }
+  return errorMsg
+}

styles/style.css

@@ -19,3 +19,6 @@ body {
 .title {
   font-family: 'Luckiest Guy', cursive;
 }
+.field[required].invalid{
+  border-color.
+}