modified wk 8

maa17019 · Mar 16, 2021 · 622c36b · 622c36b
1 parent 4d4526c
commit 622c36b
Show file tree

Hide file tree

Showing 7 changed files with 84 additions and 38 deletions.
diff --git a/week-8/mdn-events-1/index.html b/week-8/mdn-events-1/index.html
@@ -32,14 +32,14 @@
         let btn = document.querySelector('.off');
 
     //Event listener and event objects method (anonymous function)
-      btn.addEventListener("click", function(e){
-        if (e.target.innerHTML === "Machine is off"){
-          e.target.innerHTML = "Machine is on";
-          e.target.style.backgroundColor = "pink";
+      btn.addEventListener("click", function(event){
+        if (event.target.innerHTML === "Machine is off"){
+          event.target.innerHTML = "Machine is on";
+          event.target.style.backgroundColor = "pink";
 
         } else {
-          e.target.innerHTML = "Machine is off"
-          e.target.style.backgroundColor = "";
+          event.target.innerHTML = "Machine is off"
+          event.target.style.backgroundColor = "";
         }
 
       });

diff --git a/week-8/mdn-events-2/index.html b/week-8/mdn-events-2/index.html
@@ -52,14 +52,14 @@
 
         // Add your code here
 
-        window.addEventListener("keydown", function(e) {
-            if (e.key === "a") {
+        document.addEventListener("keydown", function(event) {
+            if (event.key === "a") {
                x -=10;
-            } else if (e.key === "d") {
+            } else if (event.key === "d") {
                 x +=10;
-            } else if (e.key === "w") {
+            } else if (event.key === "w") {
                 y -=10;
-            } else if (e.key === "s") {
+            } else if (event.key === "s") {
                 y +=10;
             }
             drawCircle(x, y, size);

diff --git a/week-8/mdn-events-3/index.html b/week-8/mdn-events-3/index.html
@@ -44,21 +44,21 @@
 
     // Add your code here
     //Event listener and event objects method
-       buttonBar.addEventListener("click", function(e) {
-         if (e.target.matches(".red")) {
+       buttonBar.addEventListener("click", function(event) {
+         if (event.target.matches(".red")) {
           buttonBar.style.backgroundColor = "red";
-         } else if (e.target.matches(".yellow")) {
+         } else if (event.target.matches(".yellow")) {
            buttonBar.style.backgroundColor = "yellow";
-         } else if (e.target.matches(".green")) {
+         } else if (event.target.matches(".green")) {
            buttonBar.style.backgroundColor = "green";
          } else {
            buttonBar.style.backgroundColor = "purple";
          }
        });
 
        /* Alternate method
-       buttonBar.addEventListener('click', function(e) {
-       buttonBar.style.backgroundColor = e.target.getAttribute('data-color');
+       buttonBar.addEventListener('click', function(event) {
+       buttonBar.style.backgroundColor = event.target.getAttribute('data-color');
     });*/
 
     </script>

diff --git a/week-8/web-form/.DS_Store b/week-8/web-form/.DS_Store
diff --git a/week-8/web-form/css/.DS_Store b/week-8/web-form/css/.DS_Store
diff --git a/week-8/web-form/css/payment-form.css → week-8/web-form/css/form.css b/week-8/web-form/css/payment-form.css → week-8/web-form/css/form.css
@@ -10,7 +10,7 @@ ul {
 
 form {
     margin: 0 auto;
-    width: 400px;
+    width: 350px;
     padding: 1em;
     border: 1px solid #CCC;
     border-radius: 1em;
@@ -22,8 +22,8 @@ div+div {
 
 label span {
     display: inline-block;
-    width: 120px;
-    text-align: right;
+    width: 80px;
+    text-align: left;
 }
 
 input, textarea {
@@ -67,4 +67,8 @@ label em {
   position: absolute;
   right: 5px;
   top: 20px;
+}
+#warning {
+    text-align: center;
+    color:rgb(190, 0, 0);
 }
diff --git a/week-8/web-form/index.html b/week-8/web-form/index.html
@@ -5,41 +5,83 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Web Form</title>
-    <link href="css/payment-form.css" rel="stylesheet">
+    <link href="css/form.css" rel="stylesheet">
 </head>
 <body>
 
     <form>
         <h1>Web form</h1>
-
-        <section>
-
+        <h4>*Fill in all fields</h2>
             <p>
-              <label for="name">
-                <span>Name: </span>
-              </label>
+              <label for="name"><span>Name:* </span></label> <!--Name-->
               <input type="text" id="name" name="username">
             </p>
             <p>
-              <label for="mail">
-                <span>E-mail: </span>
-              </label>
+              <label for="mail"><span>E-mail:* </span></label> <!--Email-->
               <input type="email" id="mail" name="usermail">
             </p>
             <p>
-              <label for="subject">
-                <span>Subject </span>
-              </label>
+              <label for="subject"><span>Subject:* </span></label> <!--Subject-->
               <input type="text" id="subject" name="subject">
             </p>
             <p>
-              <label for="message">
-                <span>Message</span>
-              </label>
+              <label for="message"><span>Message:* </span></label> <!--Message-->
               <input type="text" id="message" name="message">
             </p>
-            <p> <button type="submit">Submit</button> </p>
-        </section>
+
+            <strong><p id= "warning"></p></strong> <!--Warning to fill in all fields-->
+
+            <button type="submit">Submit</button>
     </form>
+
+    <script>
+      let form = document.querySelector("form");
+      let namee = document.getElementById("name");
+      let mail = document.getElementById("mail");
+      let subject = document.getElementById("subject");
+      let message = document.getElementById("message");
+
+      let warning = document.querySelector("#warning");
+      let input = document.querySelectorAll("input")
+
+     /*let allValues = [
+        namee.value === "",
+        mail.value === "",
+        subject.value === "",
+        message.value === ""
+      ];*/
+
+      form.addEventListener("submit", function (event) {
+        if ((namee.value === "" || mail.value === "") && (subject.value === "" || message.value === "")){
+           event.preventDefault();
+          warning.innerHTML = "You must fill ALL fields!" ;
+          namee.style.borderColor = "red";
+          mail.style.borderColor = "red";
+          subject.style.borderColor = "red";
+          message.style.borderColor = "red";
+        }
+      else if (namee.value === "") {
+          event.preventDefault();
+          warning.innerHTML = "You must fill the NAME field!" ;
+          form.style.borderColor = "red";
+          namee.style.borderColor = "red";
+        } else if (mail.value === "") {
+          event.preventDefault();
+          warning.innerHTML = "You must fill the EMAIL field!"; 
+          form.style.borderColor = "red";
+          mail.style.borderColor = "red";
+        } else if (subject.value === "") {
+          event.preventDefault();
+          warning.innerHTML = "You must fill the SUBJECT field!"; 
+          form.style.borderColor = "red";
+          subject.style.borderColor = "red";
+        } else if (message.value === "") {
+          event.preventDefault();
+          warning.innerHTML = "You must fill the MESSAGE field!"; 
+          form.style.borderColor = "red";
+          message.style.borderColor = "red";
+        } 
+      });
+    </script>
 </body>
 </html>