From ac9b81451733528a19da4d06667051ae99c66f32 Mon Sep 17 00:00:00 2001 From: Paolo Bautista Date: Sun, 20 Mar 2022 22:00:56 -0400 Subject: [PATCH] Week 8 Event Listeners/EmailForm/ColorChanger With Local Storage --- week-8/part-1/event-1.html | 49 ++++++++++++++++++++++ week-8/part-1/event-2.html | 79 ++++++++++++++++++++++++++++++++++++ week-8/part-1/event-3.html | 53 ++++++++++++++++++++++++ week-8/part-2/emailForm.html | 25 ++++++++++++ week-8/part-2/emailForm.js | 22 ++++++++++ week-8/part-3/index.html | 21 ++++++++++ week-8/part-3/main.js | 30 ++++++++++++++ week-8/part-3/style.css | 8 ++++ 8 files changed, 287 insertions(+) create mode 100644 week-8/part-1/event-1.html create mode 100644 week-8/part-1/event-2.html create mode 100644 week-8/part-1/event-3.html create mode 100644 week-8/part-2/emailForm.html create mode 100644 week-8/part-2/emailForm.js create mode 100644 week-8/part-3/index.html create mode 100644 week-8/part-3/main.js create mode 100644 week-8/part-3/style.css diff --git a/week-8/part-1/event-1.html b/week-8/part-1/event-1.html new file mode 100644 index 0000000..6290c79 --- /dev/null +++ b/week-8/part-1/event-1.html @@ -0,0 +1,49 @@ + + + + + Events: Task 1 + + + + + + +
+
+ + + + + + + \ No newline at end of file diff --git a/week-8/part-1/event-2.html b/week-8/part-1/event-2.html new file mode 100644 index 0000000..7396b6b --- /dev/null +++ b/week-8/part-1/event-2.html @@ -0,0 +1,79 @@ + + + + + Events: Task 2 + + + + + + +
+
+ + + + + + + + + \ No newline at end of file diff --git a/week-8/part-1/event-3.html b/week-8/part-1/event-3.html new file mode 100644 index 0000000..9923967 --- /dev/null +++ b/week-8/part-1/event-3.html @@ -0,0 +1,53 @@ + + + + + Events: Task 3 + + + + + + +
+
+ +
+ + + + +
+ + + + \ No newline at end of file diff --git a/week-8/part-2/emailForm.html b/week-8/part-2/emailForm.html new file mode 100644 index 0000000..7e6cd00 --- /dev/null +++ b/week-8/part-2/emailForm.html @@ -0,0 +1,25 @@ + + + + + + Week 8 Part 2 + + + +
+
+
+
+
+ + + + +
+ + + + + + \ No newline at end of file diff --git a/week-8/part-2/emailForm.js b/week-8/part-2/emailForm.js new file mode 100644 index 0000000..c2140e6 --- /dev/null +++ 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!") + } + + +}) \ No newline at end of file diff --git a/week-8/part-3/index.html b/week-8/part-3/index.html new file mode 100644 index 0000000..eabce81 --- /dev/null +++ b/week-8/part-3/index.html @@ -0,0 +1,21 @@ + + + + + + + Color Picker + + + +

Choose your background-color:

+ +
+ + +
+ + + + + \ No newline at end of file diff --git a/week-8/part-3/main.js b/week-8/part-3/main.js new file mode 100644 index 0000000..36aaa97 --- /dev/null +++ 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); +} \ No newline at end of file diff --git a/week-8/part-3/style.css b/week-8/part-3/style.css new file mode 100644 index 0000000..1782276 --- /dev/null +++ b/week-8/part-3/style.css @@ -0,0 +1,8 @@ +p, +label { + font: 1rem 'Fira Sans', sans-serif; +} + +input { + margin: .4rem; +} \ No newline at end of file