c-lene
diff --git a/‎user-input-with-forms/chapter-examples-CT/form-validation/index.html
Lines changed: 58 additions & 3 deletions b/‎user-input-with-forms/chapter-examples-CT/form-validation/index.html
Lines changed: 58 additions & 3 deletions
diff --git a/‎user-input-with-forms/chapter-examples-CT/input-with-DOM.html
Lines changed: 32 additions & 0 deletions b/‎user-input-with-forms/chapter-examples-CT/input-with-DOM.html
Lines changed: 32 additions & 0 deletions
@@ -10,22 +10,77 @@
   </head>
 
 
-  <script>
+  <!-- ORIGINAL Exampler -->
+  <!-- <script>
     window.addEventListener("load", function() {
       let form = document.querySelector("form");
+      
       form.addEventListener("submit", function(event) {
         alert("submit clicked");
       });
     });
+  </script> -->
+
+
+  <!-- Add Validation - Get Reference to Inputs -->
+  <!-- <script>
+    window.addEventListener("load", function() {
+      let form = document.querySelector("form");
+      
+      form.addEventListener("submit", function(event) {
+        let usernameInput = document.querySelector("input[name=username]");
+        // Alert the Current Value found in the Username Input
+        alert("username: " + usernameInput.value);
+      });
+    });
+  </script> -->
+
+  <!-- Add Validation - Alert the Input Values When Submitted -->
+  <!-- <script>
+    window.addEventListener("load", function() {
+      let form = document.querySelector("form");
+      
+      form.addEventListener("submit", function(event) {
+        let usernameInput = document.querySelector("input[name=username]");
+        let teamName = document.querySelector("input[name=team]");
+
+        
+        // Uses a Conditional statement to verify ALL fields are filled
+        if (usernameInput.value === "" || teamName.value === "") {
+          alert("ALL fields are required!");
+        }
+      });
+    });
+  </script> -->
+
+  <!-- PREVENT Form Submission until ALL inputs have Valid values -->
+  <script>
+    window.addEventListener("load", function() {
+      let form = document.querySelector("form");
+      
+      form.addEventListener("submit", function(event) {
+        let usernameInput = document.querySelector("input[name=username]");
+        let teamName = document.querySelector("input[name=team]");
+
+        
+        // Uses a Conditional statement to verify ALL fields are filled
+        if (usernameInput.value === "" || teamName.value === "") {
+          alert("ALL fields are required!");
+
+          // STOPS the Form Submission
+          event.preventDefault();
+        }
+      });
+    });
   </script>
 
   <body>
     <form 
       method="POST" 
       action="https://handlers.education.launchcode.org/request-parrot">
 
-      <label>Username </label>
-      <input type="text" name="username">
+      <label>Username <input type="text" name="username"></label>
+      
 
       <label>Team Name <input type="text" name="team"></label>
       <button>Submit</button>
 
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Check Input Value with DOM</title>
+</head>
+
+<body>
+    <form>
+        <label>Language
+            <input type="text" name="language" id="language" value="JavaScript">
+        </label>
+    </form>
+
+    <button id="update">Update Input Value</button>
+
+    <script>
+        let button = document.getElementById("update");
+
+        // Add Event Handler for when button clicked
+        button.addEventListener("click", function() {
+            let input = document.getElementById("language");
+            console.log(input.value);
+
+            // Now Update the value in the Input
+            input.value = input.value + " rocks!";
+            console.log(input.value);
+        });
+    </script>
+</body>
+</html>