From 7cf6fafdf8754f53be72dd8056cfda3ee0bca1fd Mon Sep 17 00:00:00 2001 From: Alex Mueller Date: Sun, 15 Mar 2020 21:16:37 -0400 Subject: [PATCH] week 8 --- .vscode/._settings.json | Bin .vscode/settings.json | 0 README.md | 0 dom-playground-master/.gitignore | 0 dom-playground-master/README.md | 0 dom-playground-master/css/style.css | 0 dom-playground-master/css/style.orig.css | 0 dom-playground-master/images/archives.gif | Bin dom-playground-master/images/menu.gif | Bin dom-playground-master/images/resources.gif | Bin dom-playground-master/images/select.gif | Bin dom-playground-master/images/tag.gif | Bin dom-playground-master/images/trees.jpg | Bin dom-playground-master/index.html | 0 dom-playground-master/index.orig.html | 0 dom-playground-master/js/fix-the-page.js | 0 mocking-sponge/.gitignore | 0 mocking-sponge/README.md | 0 mocking-sponge/img/spongebob.jpg | Bin mocking-sponge/index.html | 0 mocking-sponge/js/main.js | 0 tip-calculator-master/.gitignore | 0 tip-calculator-master/README.md | 0 tip-calculator-master/css/main.css | 0 .../brooke-lark-pGM4sjt_BdQ-unsplash.jpg | Bin .../camila-melim-yHQfZ9TuZn4-unsplash.jpg | Bin .../claudia-crespo-ewOrvEa87j4-unsplash.jpg | Bin tip-calculator-master/index.html | 0 tip-calculator-master/js/script.js | 0 week-1/index.html | 0 week-3/index.html | 0 week-3/js/main.js | 0 week-4/css/style.css | 0 week-4/index.html | 0 week-4/js/main.js | 0 week-5/bean.js | 0 week-5/index.html | 0 week-5/minimum.js | 0 week-5/recursion.js | 0 week-6/index.html | 0 week-6/js/main.js | 0 week-6/js/reverse.js | 0 week-6/js/sum.js | 0 week-6/reverse.html | 0 week-6/sum.html | 0 week-8/events1.html | 47 ++++++++++ week-8/events2.html | 83 ++++++++++++++++++ week-8/events3.html | 54 ++++++++++++ week-8/index.html | 33 +++++++ week-8/js/form.js | 42 +++++++++ 50 files changed, 259 insertions(+) mode change 100755 => 100644 .vscode/._settings.json mode change 100755 => 100644 .vscode/settings.json mode change 100755 => 100644 README.md mode change 100755 => 100644 dom-playground-master/.gitignore mode change 100755 => 100644 dom-playground-master/README.md mode change 100755 => 100644 dom-playground-master/css/style.css mode change 100755 => 100644 dom-playground-master/css/style.orig.css mode change 100755 => 100644 dom-playground-master/images/archives.gif mode change 100755 => 100644 dom-playground-master/images/menu.gif mode change 100755 => 100644 dom-playground-master/images/resources.gif mode change 100755 => 100644 dom-playground-master/images/select.gif mode change 100755 => 100644 dom-playground-master/images/tag.gif mode change 100755 => 100644 dom-playground-master/images/trees.jpg mode change 100755 => 100644 dom-playground-master/index.html mode change 100755 => 100644 dom-playground-master/index.orig.html mode change 100755 => 100644 dom-playground-master/js/fix-the-page.js mode change 100755 => 100644 mocking-sponge/.gitignore mode change 100755 => 100644 mocking-sponge/README.md mode change 100755 => 100644 mocking-sponge/img/spongebob.jpg mode change 100755 => 100644 mocking-sponge/index.html mode change 100755 => 100644 mocking-sponge/js/main.js mode change 100755 => 100644 tip-calculator-master/.gitignore mode change 100755 => 100644 tip-calculator-master/README.md mode change 100755 => 100644 tip-calculator-master/css/main.css mode change 100755 => 100644 tip-calculator-master/images/brooke-lark-pGM4sjt_BdQ-unsplash.jpg mode change 100755 => 100644 tip-calculator-master/images/camila-melim-yHQfZ9TuZn4-unsplash.jpg mode change 100755 => 100644 tip-calculator-master/images/claudia-crespo-ewOrvEa87j4-unsplash.jpg mode change 100755 => 100644 tip-calculator-master/index.html mode change 100755 => 100644 tip-calculator-master/js/script.js mode change 100755 => 100644 week-1/index.html mode change 100755 => 100644 week-3/index.html mode change 100755 => 100644 week-3/js/main.js mode change 100755 => 100644 week-4/css/style.css mode change 100755 => 100644 week-4/index.html mode change 100755 => 100644 week-4/js/main.js mode change 100755 => 100644 week-5/bean.js mode change 100755 => 100644 week-5/index.html mode change 100755 => 100644 week-5/minimum.js mode change 100755 => 100644 week-5/recursion.js mode change 100755 => 100644 week-6/index.html mode change 100755 => 100644 week-6/js/main.js mode change 100755 => 100644 week-6/js/reverse.js mode change 100755 => 100644 week-6/js/sum.js mode change 100755 => 100644 week-6/reverse.html mode change 100755 => 100644 week-6/sum.html create mode 100644 week-8/events1.html create mode 100644 week-8/events2.html create mode 100644 week-8/events3.html create mode 100644 week-8/index.html create mode 100644 week-8/js/form.js diff --git a/.vscode/._settings.json b/.vscode/._settings.json old mode 100755 new mode 100644 diff --git a/.vscode/settings.json b/.vscode/settings.json old mode 100755 new mode 100644 diff --git a/README.md b/README.md old mode 100755 new mode 100644 diff --git a/dom-playground-master/.gitignore b/dom-playground-master/.gitignore old mode 100755 new mode 100644 diff --git a/dom-playground-master/README.md b/dom-playground-master/README.md old mode 100755 new mode 100644 diff --git a/dom-playground-master/css/style.css b/dom-playground-master/css/style.css old mode 100755 new mode 100644 diff --git a/dom-playground-master/css/style.orig.css b/dom-playground-master/css/style.orig.css old mode 100755 new mode 100644 diff --git a/dom-playground-master/images/archives.gif b/dom-playground-master/images/archives.gif old mode 100755 new mode 100644 diff --git a/dom-playground-master/images/menu.gif b/dom-playground-master/images/menu.gif old mode 100755 new mode 100644 diff --git a/dom-playground-master/images/resources.gif b/dom-playground-master/images/resources.gif old mode 100755 new mode 100644 diff --git a/dom-playground-master/images/select.gif b/dom-playground-master/images/select.gif old mode 100755 new mode 100644 diff --git a/dom-playground-master/images/tag.gif b/dom-playground-master/images/tag.gif old mode 100755 new mode 100644 diff --git a/dom-playground-master/images/trees.jpg b/dom-playground-master/images/trees.jpg old mode 100755 new mode 100644 diff --git a/dom-playground-master/index.html b/dom-playground-master/index.html old mode 100755 new mode 100644 diff --git a/dom-playground-master/index.orig.html b/dom-playground-master/index.orig.html old mode 100755 new mode 100644 diff --git a/dom-playground-master/js/fix-the-page.js b/dom-playground-master/js/fix-the-page.js old mode 100755 new mode 100644 diff --git a/mocking-sponge/.gitignore b/mocking-sponge/.gitignore old mode 100755 new mode 100644 diff --git a/mocking-sponge/README.md b/mocking-sponge/README.md old mode 100755 new mode 100644 diff --git a/mocking-sponge/img/spongebob.jpg b/mocking-sponge/img/spongebob.jpg old mode 100755 new mode 100644 diff --git a/mocking-sponge/index.html b/mocking-sponge/index.html old mode 100755 new mode 100644 diff --git a/mocking-sponge/js/main.js b/mocking-sponge/js/main.js old mode 100755 new mode 100644 diff --git a/tip-calculator-master/.gitignore b/tip-calculator-master/.gitignore old mode 100755 new mode 100644 diff --git a/tip-calculator-master/README.md b/tip-calculator-master/README.md old mode 100755 new mode 100644 diff --git a/tip-calculator-master/css/main.css b/tip-calculator-master/css/main.css old mode 100755 new mode 100644 diff --git a/tip-calculator-master/images/brooke-lark-pGM4sjt_BdQ-unsplash.jpg b/tip-calculator-master/images/brooke-lark-pGM4sjt_BdQ-unsplash.jpg old mode 100755 new mode 100644 diff --git a/tip-calculator-master/images/camila-melim-yHQfZ9TuZn4-unsplash.jpg b/tip-calculator-master/images/camila-melim-yHQfZ9TuZn4-unsplash.jpg old mode 100755 new mode 100644 diff --git a/tip-calculator-master/images/claudia-crespo-ewOrvEa87j4-unsplash.jpg b/tip-calculator-master/images/claudia-crespo-ewOrvEa87j4-unsplash.jpg old mode 100755 new mode 100644 diff --git a/tip-calculator-master/index.html b/tip-calculator-master/index.html old mode 100755 new mode 100644 diff --git a/tip-calculator-master/js/script.js b/tip-calculator-master/js/script.js old mode 100755 new mode 100644 diff --git a/week-1/index.html b/week-1/index.html old mode 100755 new mode 100644 diff --git a/week-3/index.html b/week-3/index.html old mode 100755 new mode 100644 diff --git a/week-3/js/main.js b/week-3/js/main.js old mode 100755 new mode 100644 diff --git a/week-4/css/style.css b/week-4/css/style.css old mode 100755 new mode 100644 diff --git a/week-4/index.html b/week-4/index.html old mode 100755 new mode 100644 diff --git a/week-4/js/main.js b/week-4/js/main.js old mode 100755 new mode 100644 diff --git a/week-5/bean.js b/week-5/bean.js old mode 100755 new mode 100644 diff --git a/week-5/index.html b/week-5/index.html old mode 100755 new mode 100644 diff --git a/week-5/minimum.js b/week-5/minimum.js old mode 100755 new mode 100644 diff --git a/week-5/recursion.js b/week-5/recursion.js old mode 100755 new mode 100644 diff --git a/week-6/index.html b/week-6/index.html old mode 100755 new mode 100644 diff --git a/week-6/js/main.js b/week-6/js/main.js old mode 100755 new mode 100644 diff --git a/week-6/js/reverse.js b/week-6/js/reverse.js old mode 100755 new mode 100644 diff --git a/week-6/js/sum.js b/week-6/js/sum.js old mode 100755 new mode 100644 diff --git a/week-6/reverse.html b/week-6/reverse.html old mode 100755 new mode 100644 diff --git a/week-6/sum.html b/week-6/sum.html old mode 100755 new mode 100644 diff --git a/week-8/events1.html b/week-8/events1.html new file mode 100644 index 0000000..9281a47 --- /dev/null +++ b/week-8/events1.html @@ -0,0 +1,47 @@ + + + + + Events: Task 1 + + + + + + +
+
+ + + + + + + \ No newline at end of file diff --git a/week-8/events2.html b/week-8/events2.html new file mode 100644 index 0000000..94d7e2a --- /dev/null +++ b/week-8/events2.html @@ -0,0 +1,83 @@ + + + + + Events: Task 2 + + + + + + +
+
+ + + + + + + + + + \ No newline at end of file diff --git a/week-8/events3.html b/week-8/events3.html new file mode 100644 index 0000000..4cc9b06 --- /dev/null +++ b/week-8/events3.html @@ -0,0 +1,54 @@ + + + + + Events: Task 3 + + + + + + +
+
+ +
+ + + + +
+ + + + + \ No newline at end of file diff --git a/week-8/index.html b/week-8/index.html new file mode 100644 index 0000000..4acc709 --- /dev/null +++ b/week-8/index.html @@ -0,0 +1,33 @@ + + + + + + Web Form + + +

Contact Me!

+
+ + + + + + + + + +
+ + + + \ No newline at end of file diff --git a/week-8/js/form.js b/week-8/js/form.js new file mode 100644 index 0000000..f983e87 --- /dev/null +++ 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(); + } +} \ No newline at end of file