From 622c36b2124128d67225ca8ae65546db5e356128 Mon Sep 17 00:00:00 2001
From: Mahnoor Afteb <mahnoor.afteb@uconn.edu>
Date: Tue, 16 Mar 2021 03:36:53 -0400
Subject: [PATCH] modified wk 8

---
 week-8/mdn-events-1/index.html                |  12 +--
 week-8/mdn-events-2/index.html                |  10 +--
 week-8/mdn-events-3/index.html                |  12 +--
 week-8/web-form/.DS_Store                     | Bin 6148 -> 6148 bytes
 week-8/web-form/css/.DS_Store                 | Bin 0 -> 6148 bytes
 .../css/{payment-form.css => form.css}        |  10 ++-
 week-8/web-form/index.html                    |  78 ++++++++++++++----
 7 files changed, 84 insertions(+), 38 deletions(-)
 create mode 100644 week-8/web-form/css/.DS_Store
 rename week-8/web-form/css/{payment-form.css => form.css} (87%)

diff --git a/week-8/mdn-events-1/index.html b/week-8/mdn-events-1/index.html
index 0db8552..36df5e4 100644
--- 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
index b081f82..44faf92 100644
--- 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
index 17cd1ba..120f733 100644
--- a/week-8/mdn-events-3/index.html
+++ b/week-8/mdn-events-3/index.html
@@ -44,12 +44,12 @@
 
     // 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";
@@ -57,8 +57,8 @@
        });
 
        /* 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
index ac62434bd68dc89c7fe38946c22e1c02ad441437..54c8eefc96c047866d3a394e587259af62e66ca5 100644
GIT binary patch
delta 302
zcmZoMXfc=|#>B)qu~2NHo+2a1#DLw4KQJ;fa!lr7G^kH1FD^*R$xmWnU^tmnkds+l
zVqkEck%^gwm5rT)69{=ZVuLgC%Y#c2OG=BK5{sfiynw`#j3g*KBtJg~&Q44U%S<hg
z7Z7pI&nrpH%u6i-YtBqb1uBUN&&*57FL%l>%}Xf;n-d%ckpWr6880AFU2SG=prc@7
zVpyxAP;Cxo8=KYEa&m~P8rpg$<W^Qy*VNX{1iBUo7#Sfn13#38QL`o+F&0nuXJqFo
u3ogpb$<Ip%souPZv4CYWI|n}pFf=wlWc<!NnP0?`184}?oXr6uTbKb~e^LMd

delta 71
zcmZoMXfc=|#>B`mu~2NHo+2aL#DLw5Y?FDI3?@r6XKtRwoXfKL0rOYJ&Fmcf96)88
aFEW2;p3E;|$-w{wj0_A+n*&6)FarR)_Yxrh

diff --git a/week-8/web-form/css/.DS_Store b/week-8/web-form/css/.DS_Store
new file mode 100644
index 0000000000000000000000000000000000000000..e4e3f2f0629a6c70f9813adc581e559340f6e305
GIT binary patch
literal 6148
zcmeHKyG{c^44j1&C()#&+>!<)YMN6N3Tl1;5}*oPM4+I%j&I>BVa7Hn$ARc5z?SUU
z^?G*irq~C7GJCu_2BrWSx)9F_W7D{NWIK@&7MtS;OKh+?TXoA(_16h;8{DA7J#MkZ
zU#z+X$Mj(*^n+J3wv=1r5>KqZ#vLAT_yhmt6W=DukP4&%sX!`_3j9+AcxKC*J;#ix
zKq`<5d?=v(q0)tIVDD&K2ZOHf8lMPdY};FcSfk$t_KqB(6{ixNTH=XOoX&iWx;C(P
zbUKQy%z0wv5-*fut21A%9Hn*4m<pr<Lj`udJJtDrO8@5lKO|)@6-WjClmcZkKcCO|
zOL4Z2eokj?rC-qBjkQ+JFt`M;qoa6#tFEfex;C(PG&=J}C+0;!x}>E7zoEbz{39y-

literal 0
HcmV?d00001

diff --git a/week-8/web-form/css/payment-form.css b/week-8/web-form/css/form.css
similarity index 87%
rename from week-8/web-form/css/payment-form.css
rename to week-8/web-form/css/form.css
index 50a2754..8b276fd 100644
--- a/week-8/web-form/css/payment-form.css
+++ b/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);
 }
\ No newline at end of file
diff --git a/week-8/web-form/index.html b/week-8/web-form/index.html
index 7dc8e63..8c1cc3d 100644
--- 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>
\ No newline at end of file