diff --git a/src/index.html b/src/index.html
index 04bd19e..32feb7a 100644
--- a/src/index.html
+++ b/src/index.html
@@ -11,11 +11,11 @@
<body>
<!-- Navbar -->
- <!-- TODO: Fix Issue, Nav Buttons Don't Work (Desktop & Mobile) -->
+ <!-- Done: Fix Issue, Nav Buttons Don't Work (Desktop & Mobile) -->
<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()"
@@ -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>
+ <div id="mobile-nav" class="bar-block white hide hide-large large">
+ <a href="#challenges" id="mobile-nav-challenges" class="bar-item button padding-large mobile">Browse Challenges</a>
+ <a href="#signup" id="mobile-nav-signup" class="bar-item button padding-large mobile">Sign Up</a>
</div>
</nav>
diff --git a/src/script.js b/src/script.js
index 529f585..ae5703f 100644
--- a/src/script.js
+++ b/src/script.js
@@ -24,8 +24,25 @@ addEventListener("submit", (event) => {
resetMessage();
let email = document.getElementById("email").value;
+
+ // if empty give error
+ if (email.length === 0){
+ renderEmailEmptyError();
+ return null;
+ }
+
+ const user = usersTable.find(user => user.username === email);
+
+ if (user){
+ // if taken already taken, repeat also same case
+ renderEmailTakenError();
+ }else{
+ // succesful signup where email doesnt exist and is correct, add user
+ renderSuccess();
+ usersTable.push({username: email});
+ }
- // TODO: Show Correct Status Messages on Signup Form
+ // Done: Show Correct Status Messages on Signup Form
// 1. successful signup
// 2. empty email
// 3. taken email
diff --git a/src/styles.css b/src/styles.css
index 2cbb72e..fb1f060 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -665,11 +665,13 @@ form > span {
.auto {
max-width: 95%;
}
+
}
#jumbo-image {
max-height: 20rem;
/* TODO: Invert banner colors using CSS */
+ filter: invert(1);
}
@media (max-width: 600px) {
@@ -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: 1fr 1fr;
grid-auto-rows: 10rem;
gap: 1rem;
padding-top: 2rem;