From 7c26510df8bd84bde61a545f48741ea087a4176a Mon Sep 17 00:00:00 2001
From: Awinti Amin <awintiamine@gmail.com>
Date: Wed, 10 May 2023 11:21:53 +0100
Subject: [PATCH 1/4] fixing landing page issues

---
 src/index.html | 89 ++++++++++++++++++++++++++++++++++++++++----------
 src/script.js  | 41 ++++++++++++-----------
 src/styles.css | 45 +++++++++++++------------
 3 files changed, 115 insertions(+), 60 deletions(-)
diff --git a/src/index.html b/src/index.html
index 04bd19e..90c057a 100644
--- a/src/index.html
+++ b/src/index.html
@@ -4,14 +4,19 @@
     <meta charset="utf-8" />
     <title>JobSimulator.Dev</title>
     <link rel="stylesheet" href="styles.css" />
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato" />
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css?family=Lato"
+    />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
+    />
     <script src="script.js"></script>
   </head>
 
   <body>
     <!-- Navbar -->
-    <!-- TODO: Fix Issue, Nav Buttons Don't Work (Desktop & Mobile) -->
     <nav class="top">
       <div class="bar blue card left-align large">
         <a
@@ -22,24 +27,57 @@
           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"
+          href="#header"
+          class="bar-item button padding-large white"
+          >JobSimulator.Dev</a
+        >
+        <a
+          id="nav-challenges"
+          href="#challenges"
+          class="bar-item button padding-large hover-white"
+          >Browse Challenges</a
+        >
+        <a
+          id="nav-signup"
+          href="#signup"
+          class="bar-item button 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 hide-medium 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>
 
     <!-- Header -->
-    <header id="header" class="container white center" style="padding: 128px 16px">
+    <header
+      id="header"
+      class="container white center"
+      style="padding: 128px 16px"
+    >
       <img id="jumbo-image" src="./banner-image.png" />
       <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>
+      <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">
@@ -52,13 +90,22 @@ <h1>Browse Our Challenges</h1>
             href="https://github.com/developer-job-simulation/vanilla-login-form"
             >Vanilla Login Form</a
           >
-          <a target="_blank" class="challenge-tile" href="https://github.com/developer-job-simulation/vanilla-table"
+          <a
+            target="_blank"
+            class="challenge-tile"
+            href="https://github.com/developer-job-simulation/vanilla-table"
             >Vanilla Table</a
           >
-          <a target="_blank" class="challenge-tile" href="https://github.com/developer-job-simulation/react-ecommerce"
+          <a
+            target="_blank"
+            class="challenge-tile"
+            href="https://github.com/developer-job-simulation/react-ecommerce"
             >React Ecommerce</a
           >
-          <a target="_blank" class="challenge-tile" href="https://github.com/developer-job-simulation/react-mui-table"
+          <a
+            target="_blank"
+            class="challenge-tile"
+            href="https://github.com/developer-job-simulation/react-mui-table"
             >React Table</a
           >
         </div>
@@ -70,9 +117,15 @@ <h1>Browse Our Challenges</h1>
         <div id="signup-form">
           <h1>Sign Up & Get Started</h1>
           <form>
-            <span id="success-message" class="success-message" hidden="true">Success!</span>
-            <span id="taken-error-message" class="error-message" hidden="true">Error: Email Already Taken</span>
-            <span id="empty-error-message" class="error-message" hidden="true">Error: Email Address Empty.</span>
+            <span id="success-message" class="success-message" hidden="true"
+              >Success!</span
+            >
+            <span id="taken-error-message" class="error-message" hidden="true"
+              >Error: Email Already Taken</span
+            >
+            <span id="empty-error-message" class="error-message" hidden="true"
+              >Error: Email Address Empty.</span
+            >
             <input id="email" type="email" placeholder="Enter your email" />
             <button>Submit</button>
           </form>
diff --git a/src/script.js b/src/script.js
index 529f585..5cbd896 100644
--- a/src/script.js
+++ b/src/script.js
@@ -1,42 +1,41 @@
 const usersTable = [
-  // Note: This is a fake table for educational purposes. Never store user credentials in plain text.
-  { username: "hello@world.com" },
-  { username: "test@user.com" },
-  { username: "email@domain.com" },
+  { username: 'hello@world.com' },
+  { username: 'test@user.com' },
+  { username: 'email@domain.com' },
 ];
 let renderSuccess = () => {
-  document.getElementById("success-message").hidden = false;
+  document.getElementById('success-message').hidden = false;
 };
 let renderEmailTakenError = () => {
-  document.getElementById("taken-error-message").hidden = false;
+  document.getElementById('taken-error-message').hidden = false;
 };
 let renderEmailEmptyError = () => {
-  document.getElementById("empty-error-message").hidden = false;
+  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;
+  document.getElementById('success-message').hidden = true;
+  document.getElementById('taken-error-message').hidden = true;
+  document.getElementById('empty-error-message').hidden = true;
 };
 
-addEventListener("submit", (event) => {
+addEventListener('submit', (event) => {
   event.preventDefault();
   resetMessage();
 
-  let email = document.getElementById("email").value;
+  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 || email.length === 0) renderEmailEmptyError();
+  else if (usersTable.some((user) => user.username === email))
+    renderEmailTakenError();
+  else renderSuccess();
 });
 
 let toggleNav = () => {
-  var nav = document.getElementById("mobile-nav");
-  if (nav.className.indexOf("show") == -1) {
-    nav.className += " show";
+  var nav = document.getElementById('mobile-nav');
+
+  if (nav.className.indexOf('show') == -1) {
+    nav.className += ' show';
   } else {
-    nav.className = nav.className.replace(" show", "");
+    nav.className = nav.className.replace(' show', '');
   }
 };
diff --git a/src/styles.css b/src/styles.css
index 2cbb72e..b8b28f7 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -55,22 +55,22 @@ select {
   text-transform: none;
 }
 button,
-[type="button"],
-[type="reset"],
-[type="submit"] {
+[type='button'],
+[type='reset'],
+[type='submit'] {
   -webkit-appearance: button;
 }
 button::-moz-focus-inner,
-[type="button"]::-moz-focus-inner,
-[type="reset"]::-moz-focus-inner,
-[type="submit"]::-moz-focus-inner {
+[type='button']::-moz-focus-inner,
+[type='reset']::-moz-focus-inner,
+[type='submit']::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 button:-moz-focusring,
-[type="button"]:-moz-focusring,
-[type="reset"]:-moz-focusring,
-[type="submit"]:-moz-focusring {
+[type='button']:-moz-focusring,
+[type='reset']:-moz-focusring,
+[type='submit']:-moz-focusring {
   outline: 1px dotted ButtonText;
 }
 fieldset {
@@ -88,19 +88,19 @@ legend {
 textarea {
   overflow: auto;
 }
-[type="checkbox"],
-[type="radio"] {
+[type='checkbox'],
+[type='radio'] {
   padding: 0;
 }
-[type="number"]::-webkit-inner-spin-button,
-[type="number"]::-webkit-outer-spin-button {
+[type='number']::-webkit-inner-spin-button,
+[type='number']::-webkit-outer-spin-button {
   height: auto;
 }
-[type="search"] {
+[type='search'] {
   -webkit-appearance: textfield;
   outline-offset: -2px;
 }
-[type="search"]::-webkit-search-decoration {
+[type='search']::-webkit-search-decoration {
   -webkit-appearance: none;
 }
 ::-webkit-file-upload-button {
@@ -153,7 +153,7 @@ h3,
 h4,
 h5,
 h6 {
-  font-family: "Lato", Arial, sans-serif;
+  font-family: 'Lato', Arial, sans-serif;
   font-weight: 400;
   margin: 10px 0;
 }
@@ -487,7 +487,7 @@ form > span {
 .clear:before,
 .bar:before,
 .bar:after {
-  content: "";
+  content: '';
   display: table;
   clear: both;
 }
@@ -669,7 +669,7 @@ form > span {
 
 #jumbo-image {
   max-height: 20rem;
-  /* TODO: Invert banner colors using CSS */
+  filter: invert(1);
 }
 
 @media (max-width: 600px) {
@@ -704,6 +704,10 @@ form > span {
   .dropdown-click.mobile .button {
     width: 100%;
   }
+  #nav-signup,
+  #nav-challenges {
+    display: none !important;
+  }
 }
 @media (max-width: 768px) {
   .modal-content {
@@ -870,14 +874,13 @@ form > span {
 }
 .code,
 .codespan {
-  font-family: Consolas, "courier new";
+  font-family: Consolas, 'courier new';
   font-size: 16px;
 }
 
 #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;

From 4251fc60bdb57a87e8d9b344ef65757fae23e358 Mon Sep 17 00:00:00 2001
From: Awinti Amin <awintiamine@gmail.com>
Date: Wed, 10 May 2023 11:43:36 +0100
Subject: [PATCH 2/4] fixing landing page issues

---
 src/script.js | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/script.js b/src/script.js
index 5cbd896..2c4fa3b 100644
--- a/src/script.js
+++ b/src/script.js
@@ -24,10 +24,16 @@ addEventListener('submit', (event) => {
 
   let email = document.getElementById('email').value;
 
-  if (!email || email.length === 0) renderEmailEmptyError();
-  else if (usersTable.some((user) => user.username === email))
+  console.log(email);
+
+  if (!email || email.length === 0) {
+    renderEmailEmptyError();
+  } else if (usersTable.some((user) => user.username === email)) {
     renderEmailTakenError();
-  else renderSuccess();
+  } else {
+    renderSuccess();
+    usersTable.push({ username: email });
+  }
 });
 
 let toggleNav = () => {

From 42559def468c86154187f0a4087fcc3119feedd2 Mon Sep 17 00:00:00 2001
From: Awinti Amin <awintiamine@gmail.com>
Date: Wed, 10 May 2023 12:30:26 +0100
Subject: [PATCH 3/4] fixing landing page issues

---
 src/index.html |  2 +-
 src/script.js  | 40 ++++++++++++++++++++++++++++++++++++++++
 src/styles.css |  4 ++--
 3 files changed, 43 insertions(+), 3 deletions(-)

diff --git a/src/index.html b/src/index.html
index 90c057a..045e99f 100644
--- a/src/index.html
+++ b/src/index.html
@@ -12,7 +12,7 @@
       rel="stylesheet"
       href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
     />
-    <script src="script.js"></script>
+    <script defer src="script.js"></script>
   </head>
 
   <body>
diff --git a/src/script.js b/src/script.js
index 2c4fa3b..97ca1b1 100644
--- a/src/script.js
+++ b/src/script.js
@@ -36,9 +36,49 @@ addEventListener('submit', (event) => {
   }
 });
 
+// var nav = document.getElementById('mobile-nav');
+// console.log(nav);
+
+// nav.addEventListener('change', (event) => {
+//   event.preventDefault();
+
+//   console.log('HERE!!!');
+
+//   let signupEl = document.getElementById('nav-signup');
+//   let challengesEl = document.getElementById('nav-challenges');
+
+//   console.log(signupEl);
+//   console.log(challengesEl);
+// });
+
+const signupEl = document.getElementById('nav-signup');
+const challengesEl = document.getElementById('nav-challenges');
+
+// console.log(signupEl);
+// console.log(challengesEl);
+const mql = window.matchMedia('(max-width: 600px)');
+
+function screenTest(e) {
+  if (e.matches) {
+    signupEl.classList.add('hide');
+    challengesEl.classList.add('hide');
+    console.log(signupEl.classList);
+    console.log(challengesEl.classList);
+  } else {
+    signupEl.classList.remove('hide');
+    challengesEl.classList.remove('hide');
+    console.log(signupEl.classList);
+    console.log(challengesEl.classList);
+  }
+}
+
+mql.addEventListener('change', screenTest);
+
 let toggleNav = () => {
   var nav = document.getElementById('mobile-nav');
 
+  // console.log(nav);
+
   if (nav.className.indexOf('show') == -1) {
     nav.className += ' show';
   } else {
diff --git a/src/styles.css b/src/styles.css
index b8b28f7..44bb901 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -704,10 +704,10 @@ form > span {
   .dropdown-click.mobile .button {
     width: 100%;
   }
-  #nav-signup,
+  /* #nav-signup,
   #nav-challenges {
     display: none !important;
-  }
+  } */
 }
 @media (max-width: 768px) {
   .modal-content {

From 1907bc2868385a782b622b98677855669787d3e8 Mon Sep 17 00:00:00 2001
From: Awinti Amin <awintiamine@gmail.com>
Date: Wed, 10 May 2023 12:55:47 +0100
Subject: [PATCH 4/4] fixing landing page issues

---
 src/index.html |  4 ++--
 src/script.js  | 40 ----------------------------------------
 2 files changed, 2 insertions(+), 42 deletions(-)

diff --git a/src/index.html b/src/index.html
index 045e99f..2f40adb 100644
--- a/src/index.html
+++ b/src/index.html
@@ -36,13 +36,13 @@
         <a
           id="nav-challenges"
           href="#challenges"
-          class="bar-item button padding-large hover-white"
+          class="hide-small bar-item button padding-large hover-white"
           >Browse Challenges</a
         >
         <a
           id="nav-signup"
           href="#signup"
-          class="bar-item button padding-large hover-white"
+          class="hide-small bar-item button padding-large hover-white"
           >Sign Up</a
         >
       </div>
diff --git a/src/script.js b/src/script.js
index 97ca1b1..2c4fa3b 100644
--- a/src/script.js
+++ b/src/script.js
@@ -36,49 +36,9 @@ addEventListener('submit', (event) => {
   }
 });
 
-// var nav = document.getElementById('mobile-nav');
-// console.log(nav);
-
-// nav.addEventListener('change', (event) => {
-//   event.preventDefault();
-
-//   console.log('HERE!!!');
-
-//   let signupEl = document.getElementById('nav-signup');
-//   let challengesEl = document.getElementById('nav-challenges');
-
-//   console.log(signupEl);
-//   console.log(challengesEl);
-// });
-
-const signupEl = document.getElementById('nav-signup');
-const challengesEl = document.getElementById('nav-challenges');
-
-// console.log(signupEl);
-// console.log(challengesEl);
-const mql = window.matchMedia('(max-width: 600px)');
-
-function screenTest(e) {
-  if (e.matches) {
-    signupEl.classList.add('hide');
-    challengesEl.classList.add('hide');
-    console.log(signupEl.classList);
-    console.log(challengesEl.classList);
-  } else {
-    signupEl.classList.remove('hide');
-    challengesEl.classList.remove('hide');
-    console.log(signupEl.classList);
-    console.log(challengesEl.classList);
-  }
-}
-
-mql.addEventListener('change', screenTest);
-
 let toggleNav = () => {
   var nav = document.getElementById('mobile-nav');
 
-  // console.log(nav);
-
   if (nav.className.indexOf('show') == -1) {
     nav.className += ' show';
   } else {
