From 8f0c1c986e4e222836397a9c3ddb2f56e2619418 Mon Sep 17 00:00:00 2001 From: Ralph Date: Sun, 3 Sep 2023 00:02:30 +0800 Subject: [PATCH 1/8] Finished all tasks --- src/index.html | 12 ++++++------ src/script.js | 16 ++++++++++++++++ src/styles.css | 23 ++++++++++++++++++++--- 3 files changed, 42 insertions(+), 9 deletions(-) diff --git a/src/index.html b/src/index.html index 04bd19e..85a268a 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 + diff --git a/src/script.js b/src/script.js index 529f585..384e0d7 100644 --- a/src/script.js +++ b/src/script.js @@ -25,11 +25,27 @@ addEventListener("submit", (event) => { 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 + + // Check if the email is empty + if (email.trim() === "") { + renderEmailEmptyError(); + } else { + // Check if the email is already taken + if (usersTable.some(user => user.username === email)) { + renderEmailTakenError(); + } else { + // If not empty and not taken, it's a successful signup + renderSuccess(); + + } + + } }); let toggleNav = () => { diff --git a/src/styles.css b/src/styles.css index 2cbb72e..f7ea923 100644 --- a/src/styles.css +++ b/src/styles.css @@ -669,9 +669,10 @@ form > span { #jumbo-image { max-height: 20rem; - /* TODO: Invert banner colors using CSS */ + filter: invert(100%); /* Inverts all colors to create a color-negative effect */ } + @media (max-width: 600px) { .modal-content { margin: 0 10px; @@ -876,8 +877,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: repeat(2, 1fr); /* Creates a 2-column grid with equal width columns */ grid-auto-rows: 10rem; gap: 1rem; padding-top: 2rem; @@ -1478,3 +1478,20 @@ form > span { .success-message { color: green; } + +.nav-logo { + display: inline-block; +} + +@media screen and (max-width: 768px) { + #nav-challenges { + display: none; + } +} + +@media screen and (max-width: 768px) { + #nav-signup { + display: none; + } +} + From b6796e3b9d34ce9db1798b0aef01c9e7b3f4961a Mon Sep 17 00:00:00 2001 From: Ralph Date: Sun, 3 Sep 2023 00:53:08 +0800 Subject: [PATCH 2/8] fixed the repeat email --- src/script.js | 48 ++++++++++++++++++++++++++++-------------------- 1 file changed, 28 insertions(+), 20 deletions(-) diff --git a/src/script.js b/src/script.js index 384e0d7..ca2c88a 100644 --- a/src/script.js +++ b/src/script.js @@ -4,55 +4,63 @@ const usersTable = [ { username: "test@user.com" }, { username: "email@domain.com" }, ]; + let renderSuccess = () => { document.getElementById("success-message").hidden = false; }; + let renderEmailTakenError = () => { document.getElementById("taken-error-message").hidden = false; }; + let renderEmailEmptyError = () => { 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; }; +let lastSubmittedEmail = null; // Initialize a variable to store the last successfully submitted email + addEventListener("submit", (event) => { event.preventDefault(); resetMessage(); 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 - // Check if the email is empty - if (email.trim() === "") { - renderEmailEmptyError(); - } else { - // Check if the email is already taken - if (usersTable.some(user => user.username === email)) { + // 2. Check if the email is empty + if (email.trim() === "") { + renderEmailEmptyError(); + } else { + // 3. Check if the email is already taken + if (usersTable.some((user) => user.username === email)) { renderEmailTakenError(); + lastTakenEmail = email; // Update the last email that triggered "already taken" error } else { - // If not empty and not taken, it's a successful signup + + // 4. Check if the email is the same as the last email that triggered "already taken" error (repeat email) + if (email === lastSubmittedEmail) + renderEmailTakenError(); + + else{ + // 1. If not empty, not taken, and not a repeat, it's a successful signup renderSuccess(); - - } + lastSubmittedEmail = email; // Update the last successfully submitted email + + } + + + } - } + } + }); - -let toggleNav = () => { - var nav = document.getElementById("mobile-nav"); - if (nav.className.indexOf("show") == -1) { - nav.className += " show"; - } else { - nav.className = nav.className.replace(" show", ""); - } -}; From 1327516ad6e1c0bfb41f34f6bc2fd41a3f239b62 Mon Sep 17 00:00:00 2001 From: Ralph Date: Sun, 3 Sep 2023 01:03:04 +0800 Subject: [PATCH 3/8] Fixed them again --- src/index.html | 12 ++++++------ src/script.js | 12 ++++++++++++ 2 files changed, 18 insertions(+), 6 deletions(-) diff --git a/src/index.html b/src/index.html index 85a268a..a783660 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 + diff --git a/src/script.js b/src/script.js index ca2c88a..370ec71 100644 --- a/src/script.js +++ b/src/script.js @@ -64,3 +64,15 @@ addEventListener("submit", (event) => { } }); + + +let toggleNav = () => { + var nav = document.getElementById("mobile-nav"); + if (nav.className.indexOf("show") == -1) { + nav.className += " show"; + } else { + nav.className = nav.className.replace(" show", ""); + } +}; + + From 8bfad656120abae8d9883a255c89b38c1f5968dc Mon Sep 17 00:00:00 2001 From: Ralph Date: Sun, 3 Sep 2023 01:23:18 +0800 Subject: [PATCH 4/8] Working --- src/styles.css | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/styles.css b/src/styles.css index f7ea923..c1c225d 100644 --- a/src/styles.css +++ b/src/styles.css @@ -1479,10 +1479,6 @@ form > span { color: green; } -.nav-logo { - display: inline-block; -} - @media screen and (max-width: 768px) { #nav-challenges { display: none; From b9b58b19a17cdb26bafce1823475dd8d59fdd39e Mon Sep 17 00:00:00 2001 From: Ralph Date: Sun, 3 Sep 2023 11:08:13 +0800 Subject: [PATCH 5/8] #2 done --- src/script.js | 5 +++++ src/styles.css | 21 +++++++++------------ 2 files changed, 14 insertions(+), 12 deletions(-) diff --git a/src/script.js b/src/script.js index 370ec71..8d21da2 100644 --- a/src/script.js +++ b/src/script.js @@ -66,6 +66,7 @@ addEventListener("submit", (event) => { }); + let toggleNav = () => { var nav = document.getElementById("mobile-nav"); if (nav.className.indexOf("show") == -1) { @@ -76,3 +77,7 @@ let toggleNav = () => { }; + + + + diff --git a/src/styles.css b/src/styles.css index c1c225d..ccfed01 100644 --- a/src/styles.css +++ b/src/styles.css @@ -713,6 +713,13 @@ form > span { .modal { padding-top: 50px; } + #nav-challenges { + display:none + } + #nav-signup { + display:none + } + } @media (min-width: 993px) { .modal-content { @@ -724,6 +731,8 @@ form > span { .sidebar.collapse { display: block !important; } + + } @media (max-width: 992px) and (min-width: 601px) { .hide-medium { @@ -1479,15 +1488,3 @@ form > span { color: green; } -@media screen and (max-width: 768px) { - #nav-challenges { - display: none; - } -} - -@media screen and (max-width: 768px) { - #nav-signup { - display: none; - } -} - From dbaac6aed2538fe63158c13b3fa089cc8b1db65a Mon Sep 17 00:00:00 2001 From: Ralph Date: Sun, 3 Sep 2023 11:15:22 +0800 Subject: [PATCH 6/8] hmm --- src/index.html | 2 -- src/styles.css | 6 ------ 2 files changed, 8 deletions(-) diff --git a/src/index.html b/src/index.html index a783660..3b13025 100644 --- a/src/index.html +++ b/src/index.html @@ -30,8 +30,6 @@ diff --git a/src/styles.css b/src/styles.css index ccfed01..e9e0e9e 100644 --- a/src/styles.css +++ b/src/styles.css @@ -713,12 +713,6 @@ form > span { .modal { padding-top: 50px; } - #nav-challenges { - display:none - } - #nav-signup { - display:none - } } @media (min-width: 993px) { From bf27292aa14546a64a18f1ff5a70b04062cf4db9 Mon Sep 17 00:00:00 2001 From: Ralph Date: Sun, 3 Sep 2023 13:25:14 +0800 Subject: [PATCH 7/8] Attempt for checking --- src/index.html | 8 +++++--- src/script.js | 2 -- src/styles.css | 6 ++++++ 3 files changed, 11 insertions(+), 5 deletions(-) diff --git a/src/index.html b/src/index.html index 3b13025..3dba72b 100644 --- a/src/index.html +++ b/src/index.html @@ -23,13 +23,15 @@ > - - Browse Challenges + + Browse Challenges Sign Up
-
+ diff --git a/src/script.js b/src/script.js index 8d21da2..60cd951 100644 --- a/src/script.js +++ b/src/script.js @@ -65,8 +65,6 @@ addEventListener("submit", (event) => { }); - - let toggleNav = () => { var nav = document.getElementById("mobile-nav"); if (nav.className.indexOf("show") == -1) { diff --git a/src/styles.css b/src/styles.css index e9e0e9e..ccfed01 100644 --- a/src/styles.css +++ b/src/styles.css @@ -713,6 +713,12 @@ form > span { .modal { padding-top: 50px; } + #nav-challenges { + display:none + } + #nav-signup { + display:none + } } @media (min-width: 993px) { From d56d66f3d14ba8e7052633274b04dc0569239c3d Mon Sep 17 00:00:00 2001 From: Ralph Date: Fri, 15 Sep 2023 18:37:54 +0800 Subject: [PATCH 8/8] Some fixes --- src/index.html | 5 +++-- src/script.js | 37 +++++++++++++++++++++++++++++++++++++ src/styles.css | 9 +-------- 3 files changed, 41 insertions(+), 10 deletions(-) diff --git a/src/index.html b/src/index.html index 3dba72b..d8735aa 100644 --- a/src/index.html +++ b/src/index.html @@ -22,15 +22,16 @@ title="Toggle Navigation Menu" > + - Browse Challenges + Browse Challenges Sign Up
- Browse Challenges + Browse Challenges Sign Up
diff --git a/src/script.js b/src/script.js index 60cd951..bbf79f8 100644 --- a/src/script.js +++ b/src/script.js @@ -63,6 +63,41 @@ addEventListener("submit", (event) => { } + +}); + + +document.addEventListener("DOMContentLoaded", function () { + +var navChallenges = document.getElementById("nav-challenges"); +var navSignup = document.getElementById("nav-signup"); + +// Function to hide the navigation buttons on small screens +function hideNavigationButtons() { + navChallenges.style.display = "none"; + navSignup.style.display = "none"; +} + +// Function to show the navigation buttons on larger screens +function showNavigationButtons() { + navChallenges.style.display = "inline-block"; + navSignup.style.display = "inline-block"; +} + +// Check the screen size and initially hide/show the navigation buttons +if (window.innerWidth <= 798) { // Adjust the screen width as needed + hideNavigationButtons(); +} + +// Add an event listener to check and toggle visibility on window resize +window.addEventListener("resize", function () { + if (window.innerWidth <= 798) { // Adjust the screen width as needed + hideNavigationButtons(); + } else { + showNavigationButtons(); + } +}); + }); let toggleNav = () => { @@ -79,3 +114,5 @@ let toggleNav = () => { + + diff --git a/src/styles.css b/src/styles.css index ccfed01..20cc46d 100644 --- a/src/styles.css +++ b/src/styles.css @@ -669,7 +669,7 @@ form > span { #jumbo-image { max-height: 20rem; - filter: invert(100%); /* Inverts all colors to create a color-negative effect */ + filter: invert(100%); /* Inverts all colors */ } @@ -713,13 +713,6 @@ form > span { .modal { padding-top: 50px; } - #nav-challenges { - display:none - } - #nav-signup { - display:none - } - } @media (min-width: 993px) { .modal-content {