-
Browse Challenges
-
Sign Up
+
diff --git a/src/script.js b/src/script.js
index 529f585..bbf79f8 100644
--- a/src/script.js
+++ b/src/script.js
@@ -4,21 +4,27 @@ const usersTable = [
{ username: "test@user.com" },
{ username: "email@domain.com" },
];
+
let renderSuccess = () => {
document.getElementById("success-message").hidden = false;
};
+
let renderEmailTakenError = () => {
document.getElementById("taken-error-message").hidden = false;
};
+
let renderEmailEmptyError = () => {
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;
};
+let lastSubmittedEmail = null; // Initialize a variable to store the last successfully submitted email
+
addEventListener("submit", (event) => {
event.preventDefault();
resetMessage();
@@ -30,6 +36,68 @@ addEventListener("submit", (event) => {
// 2. empty email
// 3. taken email
// 4. repeat email
+
+ // 2. Check if the email is empty
+ if (email.trim() === "") {
+ renderEmailEmptyError();
+ } else {
+ // 3. Check if the email is already taken
+ if (usersTable.some((user) => user.username === email)) {
+ renderEmailTakenError();
+ lastTakenEmail = email; // Update the last email that triggered "already taken" error
+ } else {
+
+ // 4. Check if the email is the same as the last email that triggered "already taken" error (repeat email)
+ if (email === lastSubmittedEmail)
+ renderEmailTakenError();
+
+ else{
+ // 1. If not empty, not taken, and not a repeat, it's a successful signup
+ renderSuccess();
+ lastSubmittedEmail = email; // Update the last successfully submitted email
+
+ }
+
+
+ }
+
+ }
+
+
+});
+
+
+document.addEventListener("DOMContentLoaded", function () {
+
+var navChallenges = document.getElementById("nav-challenges");
+var navSignup = document.getElementById("nav-signup");
+
+// Function to hide the navigation buttons on small screens
+function hideNavigationButtons() {
+ navChallenges.style.display = "none";
+ navSignup.style.display = "none";
+}
+
+// Function to show the navigation buttons on larger screens
+function showNavigationButtons() {
+ navChallenges.style.display = "inline-block";
+ navSignup.style.display = "inline-block";
+}
+
+// Check the screen size and initially hide/show the navigation buttons
+if (window.innerWidth <= 798) { // Adjust the screen width as needed
+ hideNavigationButtons();
+}
+
+// Add an event listener to check and toggle visibility on window resize
+window.addEventListener("resize", function () {
+ if (window.innerWidth <= 798) { // Adjust the screen width as needed
+ hideNavigationButtons();
+ } else {
+ showNavigationButtons();
+ }
+});
+
});
let toggleNav = () => {
@@ -40,3 +108,11 @@ let toggleNav = () => {
nav.className = nav.className.replace(" show", "");
}
};
+
+
+
+
+
+
+
+
diff --git a/src/styles.css b/src/styles.css
index 2cbb72e..20cc46d 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -669,9 +669,10 @@ form > span {
#jumbo-image {
max-height: 20rem;
- /* TODO: Invert banner colors using CSS */
+ filter: invert(100%); /* Inverts all colors */
}
+
@media (max-width: 600px) {
.modal-content {
margin: 0 10px;
@@ -723,6 +724,8 @@ form > span {
.sidebar.collapse {
display: block !important;
}
+
+
}
@media (max-width: 992px) and (min-width: 601px) {
.hide-medium {
@@ -876,8 +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: repeat(2, 1fr); /* Creates a 2-column grid with equal width columns */
grid-auto-rows: 10rem;
gap: 1rem;
padding-top: 2rem;
@@ -1478,3 +1480,4 @@ form > span {
.success-message {
color: green;
}
+