diff --git a/src/index.html b/src/index.html
index 04bd19e..195c1fd 100644
--- a/src/index.html
+++ b/src/index.html
@@ -11,7 +11,6 @@
-
diff --git a/src/script.js b/src/script.js
index 529f585..94654c9 100644
--- a/src/script.js
+++ b/src/script.js
@@ -25,11 +25,31 @@ addEventListener("submit", (event) => {
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
+ // Check if the email is empty, and if is, render empty error.
+ if (!email) {
+ renderEmailEmptyError();
+ } else {
+ // If it is not empty, check if already exists.
+ // This is just a boolean flag.
+ let emailExists = false;
+ // Check if the email already existe in the usersTable array.
+ for (const obj of usersTable) {
+ if (obj.username === email) {
+ // If the email exists, toggle flag and break cycle.
+ emailExists = true;
+ break;
+ }
+ }
+
+ // If the email exists, render error.
+ if (emailExists) {
+ renderEmailTakenError();
+ } else {
+ // Otherwise, save the email to the usersTable array and render success.
+ usersTable.push({ username: email });
+ renderSuccess();
+ }
+ }
});
let toggleNav = () => {
diff --git a/src/styles.css b/src/styles.css
index 2cbb72e..72dfcad 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -669,7 +669,7 @@ form > span {
#jumbo-image {
max-height: 20rem;
- /* TODO: Invert banner colors using CSS */
+ filter: invert(1);
}
@media (max-width: 600px) {
@@ -876,8 +876,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);
grid-auto-rows: 10rem;
gap: 1rem;
padding-top: 2rem;