From 150e1c1e6490055819e08d4ef3255e1ce5a9c02e Mon Sep 17 00:00:00 2001 From: Lisa <113562541+lisaphamtaylor@users.noreply.github.com> Date: Fri, 30 Jun 2023 14:29:13 -0700 Subject: [PATCH 1/3] fixes nav buttons, inverted banner, CSS grid tiles, signup errors --- src/index.html | 10 +++++----- src/script.js | 38 +++++++++++++++++++++++--------------- src/styles.css | 3 ++- 3 files changed, 30 insertions(+), 21 deletions(-) diff --git a/src/index.html b/src/index.html index 04bd19e..1ac9e17 100644 --- a/src/index.html +++ b/src/index.html @@ -23,15 +23,15 @@ > - - Browse Challenges - Sign Up + + Browse Challenges + Sign Up
- Browse Challenges - Sign Up + Browse Challenges + Sign Up
diff --git a/src/script.js b/src/script.js index 529f585..865290c 100644 --- a/src/script.js +++ b/src/script.js @@ -1,42 +1,50 @@ const usersTable = [ // Note: This is a fake table for educational purposes. Never store user credentials in plain text. - { username: "hello@world.com" }, - { username: "test@user.com" }, - { username: "email@domain.com" }, + { username: 'hello@world.com' }, + { username: 'test@user.com' }, + { username: 'email@domain.com' }, ]; let renderSuccess = () => { - document.getElementById("success-message").hidden = false; + document.getElementById('success-message').hidden = false; }; let renderEmailTakenError = () => { - document.getElementById("taken-error-message").hidden = false; + document.getElementById('taken-error-message').hidden = false; }; let renderEmailEmptyError = () => { - document.getElementById("empty-error-message").hidden = false; + document.getElementById('empty-error-message').hidden = false; }; let resetMessage = () => { - document.getElementById("success-message").hidden = true; - document.getElementById("taken-error-message").hidden = true; - document.getElementById("empty-error-message").hidden = true; + document.getElementById('success-message').hidden = true; + document.getElementById('taken-error-message').hidden = true; + document.getElementById('empty-error-message').hidden = true; }; -addEventListener("submit", (event) => { +addEventListener('submit', (event) => { event.preventDefault(); resetMessage(); - let email = document.getElementById("email").value; + let email = document.getElementById('email').value; // TODO: Show Correct Status Messages on Signup Form // 1. successful signup // 2. empty email // 3. taken email // 4. repeat email + if (email === '') { + renderEmailEmptyError(); + } else if (usersTable.some((user) => user.username === email)) { + renderEmailTakenError(); + } else { + usersTable.push({ username: email }); + renderSuccess(); + } }); let toggleNav = () => { - var nav = document.getElementById("mobile-nav"); - if (nav.className.indexOf("show") == -1) { - nav.className += " show"; + var nav = document.getElementById('mobile-nav'); + if (nav.className.indexOf('show') == -1) { + nav.className += ' show'; } else { - nav.className = nav.className.replace(" show", ""); + nav.className = nav.className.replace(' show', ''); } }; diff --git a/src/styles.css b/src/styles.css index 2cbb72e..251a2e1 100644 --- a/src/styles.css +++ b/src/styles.css @@ -670,6 +670,7 @@ form > span { #jumbo-image { max-height: 20rem; /* TODO: Invert banner colors using CSS */ + filter: invert(100%); } @media (max-width: 600px) { @@ -877,7 +878,7 @@ form > span { #challenge-grid { display: grid; /* TODO: Fix Issue, Tiles Need to be 2x2 Grid. Change only grid-template-columns */ - grid-template-columns: none; + grid-template-columns: 1fr 1fr; grid-auto-rows: 10rem; gap: 1rem; padding-top: 2rem; From 4c70ee50aef0243794715f7a7b924dbfbe74b00e Mon Sep 17 00:00:00 2001 From: Lisa <113562541+lisaphamtaylor@users.noreply.github.com> Date: Fri, 30 Jun 2023 14:38:41 -0700 Subject: [PATCH 2/3] bug: fixed mobile nav view --- src/index.html | 14 +++++++------- src/script.js | 2 +- src/styles.css | 4 ++-- 3 files changed, 10 insertions(+), 10 deletions(-) diff --git a/src/index.html b/src/index.html index 1ac9e17..724e07c 100644 --- a/src/index.html +++ b/src/index.html @@ -11,11 +11,11 @@ - + diff --git a/src/script.js b/src/script.js index 865290c..3108fc3 100644 --- a/src/script.js +++ b/src/script.js @@ -25,7 +25,7 @@ addEventListener('submit', (event) => { let email = document.getElementById('email').value; - // TODO: Show Correct Status Messages on Signup Form + // DONE: Show Correct Status Messages on Signup Form // 1. successful signup // 2. empty email // 3. taken email diff --git a/src/styles.css b/src/styles.css index 251a2e1..87176ff 100644 --- a/src/styles.css +++ b/src/styles.css @@ -669,7 +669,7 @@ form > span { #jumbo-image { max-height: 20rem; - /* TODO: Invert banner colors using CSS */ + /* DONE: Invert banner colors using CSS */ filter: invert(100%); } @@ -877,7 +877,7 @@ form > span { #challenge-grid { display: grid; - /* TODO: Fix Issue, Tiles Need to be 2x2 Grid. Change only grid-template-columns */ + /* DONE: Fix Issue, Tiles Need to be 2x2 Grid. Change only grid-template-columns */ grid-template-columns: 1fr 1fr; grid-auto-rows: 10rem; gap: 1rem; From 747244ef7467371b3a6720e63cc7361c9666e2cd Mon Sep 17 00:00:00 2001 From: Lisa <113562541+lisaphamtaylor@users.noreply.github.com> Date: Fri, 30 Jun 2023 14:43:14 -0700 Subject: [PATCH 3/3] fixed typo moving hide-small into class for #nav-signup --- src/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/index.html b/src/index.html index 724e07c..e3bd4b5 100644 --- a/src/index.html +++ b/src/index.html @@ -25,7 +25,7 @@ Browse Challenges - Sign Up + Sign Up