From 20ff8e220fe219f825175edb8ad549d65d2ad4fe Mon Sep 17 00:00:00 2001
From: shuhailycasan <shuhayly12@gmail.com>
Date: Sat, 14 Jan 2023 15:57:11 +0800
Subject: [PATCH] Update index.html, script.js, style.css

---
 src/index.html |  8 ++++----
 src/script.js  | 24 ++++++++++++++++++++++--
 src/styles.css | 10 ++++++++--
 3 files changed, 34 insertions(+), 8 deletions(-)

diff --git a/src/index.html b/src/index.html
index 04bd19e..eaf6fca 100644
--- a/src/index.html
+++ b/src/index.html
@@ -23,9 +23,9 @@
           ><i class="fa fa-bars"></i
         ></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-logo" class="bar-item button padding-large white" href="#header">JobSimulator.Dev</a>
+        <a id="nav-challenges" class="bar-item button padding-large hover-white" href="#browse">Browse Challenges</a>
+        <a id="nav-signup" class="bar-item button padding-large hover-white" href="#signup">Sign Up</a>
       </div>
 
       <!-- Navbar on small screens -->
@@ -42,7 +42,7 @@ <h1 class="margin jumbo">Want to test your software dev skills?</h1>
       <a href="#signup" class="button blue padding-large large margin-top">Sign Up</a>
     </header>
 
-    <section id="challenges" class="row-padding pink padding-256 container">
+    <section id="browse" class="row-padding pink padding-256 container">
       <div class="content">
         <h1>Browse Our Challenges</h1>
         <div id="challenge-grid">
diff --git a/src/script.js b/src/script.js
index 529f585..ee89cc4 100644
--- a/src/script.js
+++ b/src/script.js
@@ -24,19 +24,39 @@ addEventListener("submit", (event) => {
   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
+  if (!email) {
+    renderEmailEmptyError();
+  } else {
+    // check for taken email
+    const takenEmail = usersTable.some(user => user.username === email);
+    if (takenEmail) {
+      renderEmailTakenError();
+    } else {
+      // check for repeat email
+      if(sessionStorage.getItem('email')=== email){
+        renderEmailTakenError();
+      }else{
+      // add the email to the users table
+      usersTable.push({username: email});
+      sessionStorage.setItem('email',email)
+      // log success message
+      renderSuccess();
+      }
+    }
+  }
+
 });
 
 let toggleNav = () => {
   var nav = document.getElementById("mobile-nav");
   if (nav.className.indexOf("show") == -1) {
     nav.className += " show";
-  } else {
+  } else {  
     nav.className = nav.className.replace(" show", "");
   }
 };
diff --git a/src/styles.css b/src/styles.css
index 2cbb72e..c675417 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -670,9 +670,14 @@ form > span {
 #jumbo-image {
   max-height: 20rem;
   /* TODO: Invert banner colors using CSS */
+    filter: invert(100%);
 }
 
 @media (max-width: 600px) {
+  #nav-challenges,
+  #nav-signup{
+    display: none;
+  }
   .modal-content {
     margin: 0 10px;
     width: auto !important;
@@ -694,7 +699,8 @@ form > span {
   .bar-item.mobile,
   .dropdown-hover.mobile,
   .dropdown-click.mobile {
-    text-align: center;
+    text-align: right;
+
   }
   .dropdown-hover.mobile,
   .dropdown-hover.mobile .btn,
@@ -877,7 +883,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: 2fr 2fr;
   grid-auto-rows: 10rem;
   gap: 1rem;
   padding-top: 2rem;