week 8

alm17008 · Mar 16, 2020 · 7cf6faf · 7cf6faf
1 parent f59c43e
commit 7cf6faf
Show file tree

Hide file tree

Showing 50 changed files with 259 additions and 0 deletions.
diff --git a/.vscode/._settings.json b/.vscode/._settings.json
diff --git a/.vscode/settings.json b/.vscode/settings.json
diff --git a/README.md b/README.md
diff --git a/dom-playground-master/.gitignore b/dom-playground-master/.gitignore
diff --git a/dom-playground-master/README.md b/dom-playground-master/README.md
diff --git a/dom-playground-master/css/style.css b/dom-playground-master/css/style.css
diff --git a/dom-playground-master/css/style.orig.css b/dom-playground-master/css/style.orig.css
diff --git a/dom-playground-master/images/archives.gif b/dom-playground-master/images/archives.gif
diff --git a/dom-playground-master/images/menu.gif b/dom-playground-master/images/menu.gif
diff --git a/dom-playground-master/images/resources.gif b/dom-playground-master/images/resources.gif
diff --git a/dom-playground-master/images/select.gif b/dom-playground-master/images/select.gif
diff --git a/dom-playground-master/images/tag.gif b/dom-playground-master/images/tag.gif
diff --git a/dom-playground-master/images/trees.jpg b/dom-playground-master/images/trees.jpg
diff --git a/dom-playground-master/index.html b/dom-playground-master/index.html
diff --git a/dom-playground-master/index.orig.html b/dom-playground-master/index.orig.html
diff --git a/dom-playground-master/js/fix-the-page.js b/dom-playground-master/js/fix-the-page.js
diff --git a/mocking-sponge/.gitignore b/mocking-sponge/.gitignore
diff --git a/mocking-sponge/README.md b/mocking-sponge/README.md
diff --git a/mocking-sponge/img/spongebob.jpg b/mocking-sponge/img/spongebob.jpg
diff --git a/mocking-sponge/index.html b/mocking-sponge/index.html
diff --git a/mocking-sponge/js/main.js b/mocking-sponge/js/main.js
diff --git a/tip-calculator-master/.gitignore b/tip-calculator-master/.gitignore
diff --git a/tip-calculator-master/README.md b/tip-calculator-master/README.md
diff --git a/tip-calculator-master/css/main.css b/tip-calculator-master/css/main.css
diff --git a/tip-calculator-master/images/brooke-lark-pGM4sjt_BdQ-unsplash.jpg b/tip-calculator-master/images/brooke-lark-pGM4sjt_BdQ-unsplash.jpg
diff --git a/tip-calculator-master/images/camila-melim-yHQfZ9TuZn4-unsplash.jpg b/tip-calculator-master/images/camila-melim-yHQfZ9TuZn4-unsplash.jpg
diff --git a/tip-calculator-master/images/claudia-crespo-ewOrvEa87j4-unsplash.jpg b/tip-calculator-master/images/claudia-crespo-ewOrvEa87j4-unsplash.jpg
diff --git a/tip-calculator-master/index.html b/tip-calculator-master/index.html
diff --git a/tip-calculator-master/js/script.js b/tip-calculator-master/js/script.js
diff --git a/week-1/index.html b/week-1/index.html
diff --git a/week-3/index.html b/week-3/index.html
diff --git a/week-3/js/main.js b/week-3/js/main.js
diff --git a/week-4/css/style.css b/week-4/css/style.css
diff --git a/week-4/index.html b/week-4/index.html
diff --git a/week-4/js/main.js b/week-4/js/main.js
diff --git a/week-5/bean.js b/week-5/bean.js
diff --git a/week-5/index.html b/week-5/index.html
diff --git a/week-5/minimum.js b/week-5/minimum.js
diff --git a/week-5/recursion.js b/week-5/recursion.js
diff --git a/week-6/index.html b/week-6/index.html
diff --git a/week-6/js/main.js b/week-6/js/main.js
diff --git a/week-6/js/reverse.js b/week-6/js/reverse.js
diff --git a/week-6/js/sum.js b/week-6/js/sum.js
diff --git a/week-6/reverse.html b/week-6/reverse.html
diff --git a/week-6/sum.html b/week-6/sum.html
diff --git a/week-8/events1.html b/week-8/events1.html
@@ -0,0 +1,47 @@
+<!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>
+
+  </body>
+  <script>
+    let btn = document.querySelector('.off');
+    btn.addEventListener('click', updateButton)
+    let off = true;
+    function updateButton() {
+        if (off) {
+            btn.innerHTML = 'Machine is on';
+            off = false;
+        } else {
+            btn.innerHTML = 'Machine is off'
+            off = true;
+        }
+    }
+  </script>
+
+</html>
diff --git a/week-8/events2.html b/week-8/events2.html
@@ -0,0 +1,83 @@
+<!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">
+
+    </canvas>
+
+
+  </body>
+  <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
+    document.addEventListener('keypress', moveCircle);
+
+    function moveCircle(e) {
+        let keyPressed = e.key.toLowerCase()
+        console.log(keyPressed);
+        switch (keyPressed) {
+            case 'w':
+                y -= 10
+                drawCircle(x, y, size)
+                break;
+            case 's':
+                y += 10
+                drawCircle(x, y, size)
+                break;
+            case 'a':
+                x -= 10
+                drawCircle(x, y, size)
+                break;
+            case 'd':
+                x += 10
+                drawCircle(x, y, size)
+                break;    
+            default:
+                break;
+        }
+    }
+  </script>
+
+</html>
diff --git a/week-8/events3.html b/week-8/events3.html
@@ -0,0 +1,54 @@
+<!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>
+
+  </body>
+  <script>
+
+  let buttonBar = document.querySelector('.button-bar');
+  let section = document.querySelector('section');
+
+  // Add your code here
+  buttonBar.addEventListener('click', changeColor)
+  function changeColor(e) {
+      let color = e.target.dataset.color
+      buttonBar.style.background = color
+  }
+  </script>
+
+</html>
diff --git a/week-8/index.html b/week-8/index.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Web Form</title>
+</head>
+<body>
+    <h1>Contact Me!</h1>
+    <form id="myform">
+        <input type="text" name="name" id="name" placeholder="Name">
+        <span id="name-error"></span>
+        <input type="email" name="email" id="email" placeholder="Email">
+        <span id="email-error"></span>
+        <input type="text" name="subject" id="subject" placeholder="Subject">
+        <span id="subject-error"></span>
+        <textarea name="message" id="message" cols="30" rows="10" form="myform" placeholder="Message"></textarea>
+        <span id="message-error"></span>
+        <button type="submit">Submit</button>
+    </form>
+    <style>
+        form {
+            display: flex;
+            flex-direction: column;
+            align-items: flex-start;
+        }
+        textarea {
+            margin: 0;
+        }
+    </style>
+    <script src="js/form.js"></script>
+</body>
+</html>
diff --git a/week-8/js/form.js b/week-8/js/form.js
@@ -0,0 +1,42 @@
+let form = document.querySelector('#myform');
+form.addEventListener('submit', validate);
+
+let name = document.querySelector('#name');
+let email = document.querySelector('#email');
+let subject = document.querySelector('#subject');
+let message = document.querySelector('#message');
+let inputList = [name, email, subject, message];
+
+
+
+inputList.forEach(input => {
+   input.addEventListener('blur', findInputError)
+});
+
+function findInputError(e) {
+    let input = e.currentTarget.id
+    let errorMessage = document.querySelector(`#${input}-error`)
+    console.log(input)
+    if (e.currentTarget.value) {
+        errorMessage.innerHTML = ''
+    } else {
+        errorMessage.innerHTML = `${input} must be filled out.`
+    }
+}
+
+function validate(e) {
+    if (name.value && email.value && subject.value && message.value) {
+        console.log("hooray");
+    } else {
+        inputList.forEach(input => {
+            let inputName = input.id;
+            let errorMessage = document.querySelector(`#${inputName}-error`);
+            if (input.value) {
+                errorMessage.innerHTML = '';    
+            } else {
+                 errorMessage.innerHTML = `${inputName} must be filled out.`;
+            }
+        });
+        e.preventDefault();
+    }
+}