Fixed issues attempt #1

src/index.html

@@ -23,15 +23,15 @@
           ><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 href="#header" id="nav-logo" class="bar-item button padding-large white">JobSimulator.Dev</a>
+        <a href="#challenges" id="nav-challenges" class="bar-item button padding-large hover-white hide-small">Browse Challenges</a>
+        <a href="#signup" id="nav-signup" class="bar-item button padding-large hover-white hide-small">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>
+        <a href="#challenges" id="mobile-nav-challenges" class="bar-item button padding-large">Browse Challenges</a>
+        <a href="#signup" id="mobile-nav-signup" class="bar-item button padding-large">Sign Up</a>
       </div>
     </nav>
 
@@ -44,7 +44,7 @@ <h1 class="margin jumbo">Want to test your software dev skills?</h1>
 
     <section id="challenges" class="row-padding pink padding-256 container">
       <div class="content">
-        <h1>Browse Our Challenges</h1>
+        <h1 class="header">Browse Our Challenges</h1>
         <div id="challenge-grid">
           <a
             class="challenge-tile"

src/script.js

@@ -1,4 +1,4 @@
-const usersTable = [
+let usersTable = [
   // Note: This is a fake table for educational purposes. Never store user credentials in plain text.
   { username: "[email protected]" },
   { username: "[email protected]" },
@@ -22,9 +22,26 @@ let resetMessage = () => {
 addEventListener("submit", (event) => {
   event.preventDefault();
   resetMessage();
-
+  let validUser = false;
+  let takenUser = false;
   let email = document.getElementById("email").value;
+  for (const user of usersTable) {
+    if (email === user.username) {
+      document.getElementById("taken-error-message").hidden = false;
+      takenUser = true;
+    }
+  }
 
+  if (email === '') {
+    document.getElementById("empty-error-message").hidden = false;
+    } else if (email && takenUser === false) {
+    document.getElementById("success-message").hidden = false;
+    validUser = true;
+  }
+
+  if (validUser) {
+    usersTable = [...usersTable, {username: email}];
+  }
   // TODO: Show Correct Status Messages on Signup Form
   // 1. successful signup
   // 2. empty email

src/styles.css

@@ -670,6 +670,8 @@ form > span {
 #jumbo-image {
   max-height: 20rem;
   /* TODO: Invert banner colors using CSS */
+  -webkit-filter: invert(1);
+  filter: invert(1);
 }
 
 @media (max-width: 600px) {
@@ -684,7 +686,7 @@ form > span {
   .dropdown-click.mobile .dropdown-content {
     position: relative;
   }
-  .hide-small {
+  .hide-medium{
     display: none !important;
   }
   .mobile {
@@ -725,7 +727,7 @@ form > span {
   }
 }
 @media (max-width: 992px) and (min-width: 601px) {
-  .hide-medium {
+  .hide-small {
     display: none !important;
   }
 }
@@ -877,7 +879,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: auto auto;
   grid-auto-rows: 10rem;
   gap: 1rem;
   padding-top: 2rem;
@@ -1477,4 +1479,4 @@ form > span {
 
 .success-message {
   color: green;
-}
+}