removed my unnecessary CSS selectors

src/index.html

@@ -22,16 +22,17 @@
           title="Toggle Navigation Menu"
           ><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="#challenges">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 -->
-      <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 hide-medium large" href="#header" >
+        <a id="mobile-nav-challenges" class="bar-item button padding-large" href="#challenges">Browse Challenges</a>
+        <a id="mobile-nav-signup" class="bar-item button padding-large" href="#signup">Sign Up</a>
       </div>
     </nav>
 

src/script.js

@@ -4,21 +4,27 @@ const usersTable = [
   { username: "[email protected]" },
   { username: "[email protected]" },
 ];
+
 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();
@@ -30,6 +36,68 @@ addEventListener("submit", (event) => {
   // 2. empty email
   // 3. taken email
   // 4. repeat 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 {
+
+                 // 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
+
+                 }
+
+
+           }
+
+        }
+
+
+});
+
+
+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 = () => {
@@ -40,3 +108,11 @@ let toggleNav = () => {
     nav.className = nav.className.replace(" show", "");
   }
 };
+
+
+
+
+
+
+
+

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 */
 }
 
+
 @media (max-width: 600px) {
   .modal-content {
     margin: 0 10px;
@@ -723,6 +724,8 @@ form > span {
   .sidebar.collapse {
     display: block !important;
   }
+
+
 }
 @media (max-width: 992px) and (min-width: 601px) {
   .hide-medium {
@@ -876,8 +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: repeat(2, 1fr); /* Creates a 2-column grid with equal width columns */
   grid-auto-rows: 10rem;
   gap: 1rem;
   padding-top: 2rem;
@@ -1478,3 +1480,4 @@ form > span {
 .success-message {
   color: green;
 }
+