diff --git a/src/index.html b/src/index.html index 04bd19e..8a891f8 100644 --- a/src/index.html +++ b/src/index.html @@ -23,15 +23,15 @@ > - - Browse Challenges - Sign Up + + Browse Challenges + Sign Up
- Browse Challenges - Sign Up + Browse Challenges + Sign Up
@@ -44,7 +44,7 @@

Want to test your software dev skills?

-

Browse Our Challenges

+

Browse Our Challenges

{ 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 diff --git a/src/styles.css b/src/styles.css index 2cbb72e..b65f24d 100644 --- a/src/styles.css +++ b/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; -} +} \ No newline at end of file