From 1aae374e82a4c8d48e18d6292aa478fedd3b3720 Mon Sep 17 00:00:00 2001
From: Lucky Khoza <84252978+LuckyKhoza-crypto@users.noreply.github.com>
Date: Mon, 10 Feb 2025 12:35:03 -0800
Subject: [PATCH] fixed all issues

---
 src/index.html | 12 ++++++------
 src/script.js  | 37 ++++++++++++++++++++++++++++++-------
 src/styles.css |  3 ++-
 3 files changed, 38 insertions(+), 14 deletions(-)

diff --git a/src/index.html b/src/index.html
index 04bd19e..20506da 100644
--- a/src/index.html
+++ b/src/index.html
@@ -15,7 +15,7 @@
     <nav class="top">
       <div class="bar blue card left-align large">
         <a
-          class="bar-item button hide-medium hide-large right padding-large hover-white large blue"
+          class="bar-item button  hide-large right padding-large hover-white  large blue"
           href="javascript:void(0);"
           id="hamburger-button"
           onclick="toggleNav()"
@@ -24,14 +24,14 @@
         ></a>
         <!-- TODO: Fix Issue, Desktop Nav Is Visible on Mobile -->
         <a id="nav-logo" class="bar-item button padding-large white">JobSimulator.Dev</a>
-        <a id="nav-challenges" class="bar-item button padding-large hover-white">Browse Challenges</a>
-        <a id="nav-signup" class="bar-item button padding-large hover-white">Sign Up</a>
+        <a id="nav-challenges" href="#challenges" class="bar-item button hide-medium hide-small padding-large hover-white">Browse Challenges</a>
+        <a id="nav-signup" href="#signup" class="bar-item button hide-medium hide-small padding-large hover-white">Sign Up</a>
       </div>
 
       <!-- Navbar on small screens -->
-      <div id="mobile-nav" class="bar-block white hide hide-large hide-medium large">
-        <a id="mobile-nav-challenges" class="bar-item button padding-large">Browse Challenges</a>
-        <a id="mobile-nav-signup" class="bar-item button padding-large">Sign Up</a>
+      <div id="mobile-nav" class="bar-block white hide hide-large large">
+        <a id="mobile-nav-challenges" href="#challenges" class="bar-item button padding-large">Browse Challenges</a>
+        <a id="mobile-nav-signup" href="#signup" class="bar-item button padding-large">Sign Up</a>
       </div>
     </nav>
 
diff --git a/src/script.js b/src/script.js
index 529f585..2bcc1c8 100644
--- a/src/script.js
+++ b/src/script.js
@@ -19,18 +19,41 @@ let resetMessage = () => {
   document.getElementById("empty-error-message").hidden = true;
 };
 
-addEventListener("submit", (event) => {
-  event.preventDefault();
-  resetMessage();
+let repeat_email = "";
 
-  let email = document.getElementById("email").value;
+addEventListener(
+  "submit",
+  (event) => {
+    event.preventDefault();
+    resetMessage();
 
-  // TODO: Show Correct Status Messages on Signup Form
-  // 1. successful signup
+    let email = document.getElementById("email").value;
+
+    // TODO: Show Correct Status Messages on Signup Form
+    // 1. successful signup
+
+    if (email.length < 1) {
+      renderEmailEmptyError();
+      return;
+    }
+    if (email === repeat_email) {
+      renderEmailTakenError();
+      return;
+    }
+    for (let item of usersTable) {
+      if (email === item.username) {
+        renderEmailTakenError();
+        return;
+      }
+    }
+    renderSuccess();
+
+    repeat_email = email;
+  }
   // 2. empty email
   // 3. taken email
   // 4. repeat email
-});
+);
 
 let toggleNav = () => {
   var nav = document.getElementById("mobile-nav");
diff --git a/src/styles.css b/src/styles.css
index 2cbb72e..584b17a 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(85%);
 }
 
 @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;