-
Browse Challenges
-
Sign Up
+
diff --git a/src/script.js b/src/script.js
index 529f585..3108fc3 100644
--- a/src/script.js
+++ b/src/script.js
@@ -1,42 +1,50 @@
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
+ // DONE: Show Correct Status Messages on Signup Form
// 1. successful signup
// 2. empty email
// 3. taken email
// 4. repeat email
+ if (email === '') {
+ renderEmailEmptyError();
+ } else if (usersTable.some((user) => user.username === email)) {
+ renderEmailTakenError();
+ } else {
+ usersTable.push({ username: email });
+ 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..87176ff 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -669,7 +669,8 @@ form > span {
#jumbo-image {
max-height: 20rem;
- /* TODO: Invert banner colors using CSS */
+ /* DONE: Invert banner colors using CSS */
+ filter: invert(100%);
}
@media (max-width: 600px) {
@@ -876,8 +877,8 @@ form > span {
#challenge-grid {
display: grid;
- /* TODO: Fix Issue, Tiles Need to be 2x2 Grid. Change only grid-template-columns */
- grid-template-columns: none;
+ /* DONE: Fix Issue, Tiles Need to be 2x2 Grid. Change only grid-template-columns */
+ grid-template-columns: 1fr 1fr;
grid-auto-rows: 10rem;
gap: 1rem;
padding-top: 2rem;