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 @@ - + 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;