Week 8 Event Listeners/EmailForm/ColorChanger With Local Storage

plb18001 · Mar 21, 2022 · ac9b814 · ac9b814
1 parent 20b87e2
commit ac9b814
Show file tree

Hide file tree

Showing 8 changed files with 287 additions and 0 deletions.
diff --git a/week-8/part-1/event-1.html b/week-8/part-1/event-1.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8"/>
+    <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>
+    <link rel="stylesheet" href="../styles.css" />
+  </head>
+
+  <body>
+
+    <section class="preview">
+    </section>
+
+    <button class="off">Machine is off</button>
+
+  <script>
+    const btn = document.querySelector('.off');
+
+    // Add your code here
+        btn.addEventListener('click', function() {
+        if (btn.innerHTML === 'Machine is off'){
+            btn.innerHTML = 'Machine is on';
+        }else{
+            btn.innerHTML = 'Machine is off';
+        }
+
+        })
+
+
+
+  </script>
+
+  </body>
+</html>
diff --git a/week-8/part-1/event-2.html b/week-8/part-1/event-2.html
@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8"/>
+    <title>Events: Task 2</title>
+    <style>
+      p {
+        color: purple;
+        margin: 0.5em 0;
+      }
+
+      * {
+        box-sizing: border-box;
+      }
+
+      canvas {
+        border: 1px solid black;
+      }
+    </style>
+    <link rel="stylesheet" href="../styles.css" />
+  </head>
+
+  <body>
+
+    <section class="preview">
+    </section>
+
+    <canvas width="480" height="320" tabindex="0">
+
+    </canvas>
+
+  <script>
+    const canvas = document.querySelector('canvas');
+    const 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
+    document.addEventListener('keydown', event =>{
+        if(event.keyCode == 65) {
+            // Move ('left');
+            x -= 1;
+            console.log(x);
+        }
+        else if(event.keyCode == 68) {
+            // Move ('right');
+            x += 1;
+            console.log(x);
+        }
+        else if(event.keyCode == 87) {
+            // Move ('up');
+            y -= 1;
+            console.log(y);
+        }
+        else if(event.keyCode == 83) {
+            // Move ('down');
+            y += 1;
+            console.log(y);
+        }
+        drawCircle(x, y, size);
+    });
+  </script>
+  </body>
+
+</html>
diff --git a/week-8/part-1/event-3.html b/week-8/part-1/event-3.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8"/>
+    <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>
+    <link rel="stylesheet" href="../styles.css" />
+  </head>
+
+  <body>
+
+    <section class="preview">
+    </section>
+
+    <div class="button-bar">
+      <button data-color="red">Red</button>
+      <button data-color="yellow">Yellow</button>
+      <button data-color="green">Green</button>
+      <button data-color="purple">Purple</button>
+    </div>
+
+  <script>
+
+  const buttonBar = document.querySelector('.button-bar');
+
+  // Add your code here
+    function color(e){
+        if (e.target.dataset && e.target.dataset.color) {
+            buttonBar.style.backgroundColor = e.target.dataset.color;
+        } 
+    }
+    buttonBar.addEventListener('click', color);
+  </script>
+  </body>
+</html>
diff --git a/week-8/part-2/emailForm.html b/week-8/part-2/emailForm.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Week 8 Part 2</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <form id="emailForm">
+        <input type="text" name="name" placeholder="Name"><br>
+        <input type="text" name="email" placeholder="Email"><br>
+        <input type="text" name="subject" placeholder="Subject"><br>
+        <input type="text" name="message" placeholder="Message"><br>
+
+
+
+        <input type="submit" value="Send Message">
+    </form>
+
+
+
+    <script src="emailForm.js"></script>
+</body>
+</html>
diff --git a/week-8/part-2/emailForm.js b/week-8/part-2/emailForm.js
@@ -0,0 +1,22 @@
+let emailForm = document.querySelector('#emailForm')
+
+emailForm.addEventListener('submit', function(event){
+
+    let name = document.querySelector('input[name=name]')
+    let email = document.querySelector('input[name=email]')
+    let subject = document.querySelector('input[name=subject]')
+    let message = document.querySelector('input[name=message]')
+
+
+
+
+    if (name.value == null || name.value == "", email.value == null || email.value == "", subject.value == null || subject.value == "", message.value == null || message.value == ""){
+        alert("Please enter valid text");
+        event.preventDefault();
+    } else {
+        console.log(name.value, email.value, subject.value, message.value)
+        alert("Thanks for Submitting Properly!")
+    }
+
+
+})
diff --git a/week-8/part-3/index.html b/week-8/part-3/index.html
@@ -0,0 +1,21 @@
+<!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>Color Picker</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <p>Choose your background-color:</p>
+
+    <div>
+        <input type="color" id="input" name="input" value="#ffffff">
+        <label for="input">Color</label>
+    </div>
+
+
+    <script src="main.js"></script>
+</body>
+</html>
diff --git a/week-8/part-3/main.js b/week-8/part-3/main.js
@@ -0,0 +1,30 @@
+let localStorage = window.localStorage;
+let defaultColor = "#FFFFFF";
+
+
+let input = document.querySelector('#input');
+const C = localStorage.getItem('lastColor');
+
+
+window.addEventListener('load', function(){false;});
+
+document.addEventListener('DOMContentLoaded', (event) => {
+    defaultColor = C;
+    input.value = C;
+    document.body.style.backgroundColor = defaultColor;
+
+    console.log('DOM fully loaded and parsed');
+});
+
+    input.addEventListener('input', color);
+    input.addEventListener('change', color);
+
+
+function color(){
+    //setInterval(()=>{
+    document.body.style.backgroundColor = input.value;
+    //}, 200);
+    localStorage.removeItem('lastColor');
+    localStorage.setItem('lastColor', input.value);
+    console.log(C);
+}
diff --git a/week-8/part-3/style.css b/week-8/part-3/style.css
@@ -0,0 +1,8 @@
+p,
+label {
+    font: 1rem 'Fira Sans', sans-serif;
+}
+
+input {
+    margin: .4rem;
+}