diff --git a/src/index.html b/src/index.html index e7c4417..1913d61 100644 --- a/src/index.html +++ b/src/index.html @@ -4,21 +4,30 @@ JobSimulator.dev -
- - + + + - + + - - + + + +
+ + +
+ +
+ diff --git a/src/script.js b/src/script.js index 4e3be16..fc45568 100644 --- a/src/script.js +++ b/src/script.js @@ -15,6 +15,16 @@ let resetMessage = () => { document.getElementById("error-message").hidden = true; }; +document.getElementById("show-password").addEventListener("change", function () { + var password = document.getElementById("password"); + + if (this.checked) { + password.type = "text"; + } else { + password.type = "password"; + } +}); + addEventListener("submit", (event) => { event.preventDefault(); resetMessage(); @@ -25,9 +35,19 @@ addEventListener("submit", (event) => { console.log(`email submitted: ${email}`); console.log(`password submitted: ${password}`); /* - TODO: + done: 1. Check if the email and password are valid (using the usersTable) 2. If they are, call renderSuccess() 3. If they are not, call renderError() */ + const user = usersTable.find( + (user) => user.username === email && user.password === password + ); + + if (user) { + renderSuccess(); + } else { + renderError(); + } }); + diff --git a/src/styles.css b/src/styles.css index 25969e5..bb5d10f 100644 --- a/src/styles.css +++ b/src/styles.css @@ -1,8 +1,10 @@ body { height: 100vh; display: flex; - /* TODO: Adjust CSS so that form is centered on page */ - align-items: center; + justify-content: center; /* Center the form horizontally */ + align-items: center; /* Center the form vertically */ + margin: 0; /* Remove default body margin */ + } form { @@ -23,14 +25,14 @@ label { padding: 1rem 0 0 0; } -input { - width: 100%; -} - button { margin: 1rem 0 0 0; } +.checkbox-container{ + padding: 1rem 0 0 0; + text-align: center; +} #success-message { color: green; }