added wk 8

maa17019 · Mar 15, 2021 · 4d4526c · 4d4526c
1 parent 36fc564
commit 4d4526c
Show file tree

Hide file tree

Showing 9 changed files with 357 additions and 0 deletions.
diff --git a/week-8/.DS_Store b/week-8/.DS_Store
diff --git a/week-8/background-changer/index.html b/week-8/background-changer/index.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Background Changer</title>
+</head>
+<body>
+
+    <input type="color" id="colorPickerButton" name="color">
+
+
+    <script>
+
+        let colorPicker = document.querySelector("input");
+
+            colorPicker.addEventListener("change", function() {
+                document.body.style.backgroundColor = this.value;
+            });
+
+
+    </script>
+</body>
+</html>
diff --git a/week-8/mdn-events-1/index.html b/week-8/mdn-events-1/index.html
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Events: Task 1</title>
+    <style>
+        p {
+          color: purple;
+          margin: 0.5em 0;
+        }
+
+        * {
+          box-sizing: border-box;
+        }
+
+        button {
+          display: block;
+          margin: 20px 0 20px 20px;
+        }
+      </style>
+</head>
+<body>
+
+    <section class="preview">
+    </section>
+
+    <button class="off">Machine is off</button>
+
+    <script>
+        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";
+
+        } else {
+          e.target.innerHTML = "Machine is off"
+          e.target.style.backgroundColor = "";
+        }
+
+      });
+
+    //Another way of writing the event handler function which is separate from the eventListener line
+
+      /*function textChange() {
+        if (btn.innerHTML === "Machine is off"){
+          btn.innerHTML = "Machine is on";
+        } else {
+          btn.innerHTML = "Machine is off"
+        }
+      
+      }
+      btn.addEventListener("click", textChange);*/
+
+
+    //Alternate Event Handler Properties method
+
+        /*btn.onclick = function(){
+          if (btn.textContent === "Machine is off")
+        {
+          btn.textContent = "Machine is on";
+        } else{
+          btn.textContent = "Machine is off";
+        }
+        };*/
+
+    </script>
+</body>
+</html>
diff --git a/week-8/mdn-events-2/index.html b/week-8/mdn-events-2/index.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Events: Task 2</title>
+    <style>
+        p {
+          color: purple;
+          margin: 0.5em 0;
+        }
+
+        * {
+          box-sizing: border-box;
+        }
+
+        canvas {
+          border: 1px solid black;
+        }
+      </style>
+</head>
+<body>
+
+    <section class="preview">
+    </section>
+
+    <canvas width="480" height="320" tabindex="0">
+
+    </canvas>
+
+
+    <script>
+        let canvas = document.querySelector('canvas');
+        let ctx = canvas.getContext('2d');
+
+        function drawCircle(x, y, size) {
+          ctx.fillStyle = 'white';
+          ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+          ctx.beginPath();
+          ctx.fillStyle = 'black';
+          ctx.arc(x, y, size, 0, 2 * Math.PI);
+          ctx.fill();
+        }
+
+        let x = 50;
+        let y = 50;
+        const size = 30;
+
+        drawCircle(x, y, size);
+
+        // Add your code here
+
+        window.addEventListener("keydown", function(e) {
+            if (e.key === "a") {
+               x -=10;
+            } else if (e.key === "d") {
+                x +=10;
+            } else if (e.key === "w") {
+                y -=10;
+            } else if (e.key === "s") {
+                y +=10;
+            }
+            drawCircle(x, y, size);
+
+        });
+
+      </script>
+
+</body>
+</html>
diff --git a/week-8/mdn-events-3/index.html b/week-8/mdn-events-3/index.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Events: Task 3</title>
+    <style>
+        p {
+          color: purple;
+          margin: 0.5em 0;
+        }
+
+        * {
+          box-sizing: border-box;
+        }
+
+        button {
+          display: block;
+          margin: 20px 0 20px 20px;
+        }
+
+        .button-bar {
+          padding: 20px 0;
+        }
+      </style>
+</head>
+<body>
+
+    <section class="preview">
+    </section>
+
+    <div class="button-bar">
+      <button class="red">Red</button>
+      <button class="yellow">Yellow</button>
+      <button class="green">Green</button>
+      <button class="purple">Purple</button>
+    </div>
+
+
+    <script>
+
+        let buttonBar = document.querySelector('.button-bar');
+
+    // Add your code here
+    //Event listener and event objects method
+       buttonBar.addEventListener("click", function(e) {
+         if (e.target.matches(".red")) {
+          buttonBar.style.backgroundColor = "red";
+         } else if (e.target.matches(".yellow")) {
+           buttonBar.style.backgroundColor = "yellow";
+         } else if (e.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');
+    });*/
+
+    </script>
+
+  </body>
+
+
+</html>
diff --git a/week-8/web-form/.DS_Store b/week-8/web-form/.DS_Store
diff --git a/week-8/web-form/.vscode/settings.json b/week-8/web-form/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
diff --git a/week-8/web-form/css/payment-form.css b/week-8/web-form/css/payment-form.css
@@ -0,0 +1,70 @@
+h1 {
+    margin-top: 0;
+}
+
+ul {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+form {
+    margin: 0 auto;
+    width: 400px;
+    padding: 1em;
+    border: 1px solid #CCC;
+    border-radius: 1em;
+}
+
+div+div {
+    margin-top: 1em;
+}
+
+label span {
+    display: inline-block;
+    width: 120px;
+    text-align: right;
+}
+
+input, textarea {
+    font: 1em sans-serif;
+    width: 250px;
+    box-sizing: border-box;
+    border: 1px solid #999;
+}
+
+input[type=checkbox], input[type=radio] {
+    width: auto;
+    border: none;
+}
+
+input:focus, textarea:focus {
+    border-color: #000;
+}
+
+textarea {
+    vertical-align: top;
+    height: 5em;
+    resize: vertical;
+}
+
+fieldset {
+    width: 250px;
+    box-sizing: border-box;
+    margin-left: 136px;
+    border: 1px solid #999;
+}
+
+button {
+    margin: 20px 0 0 124px;
+}
+
+label {
+  position: relative;
+}
+
+label em {
+  position: absolute;
+  right: 5px;
+  top: 20px;
+}
diff --git a/week-8/web-form/index.html b/week-8/web-form/index.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <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">
+</head>
+<body>
+
+    <form>
+        <h1>Web form</h1>
+
+        <section>
+
+            <p>
+              <label for="name">
+                <span>Name: </span>
+              </label>
+              <input type="text" id="name" name="username">
+            </p>
+            <p>
+              <label for="mail">
+                <span>E-mail: </span>
+              </label>
+              <input type="email" id="mail" name="usermail">
+            </p>
+            <p>
+              <label for="subject">
+                <span>Subject </span>
+              </label>
+              <input type="text" id="subject" name="subject">
+            </p>
+            <p>
+              <label for="message">
+                <span>Message</span>
+              </label>
+              <input type="text" id="message" name="message">
+            </p>
+            <p> <button type="submit">Submit</button> </p>
+        </section>
+    </form>
+</body>
+</html>