diff --git a/README.md b/README.md index 8f7078d..ed2507a 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ -![](Vanilla-Login-Form-by-Jobsimulator.svg) +# (Vanilla-Login-Form-by-Jobsimulator.svg) -# JavaScript Login Form by Jobsimulator.Dev +## JavaScript Login Form by Jobsimulator.Dev ![Discord](https://img.shields.io/discord/968893691769000027?color=7289da&label=Discord&logo=discord&logoColor=white&style=for-the-badge) @@ -40,4 +40,3 @@ The best way to ask for help is to ask our Discord community. ## Want more challenges? Browse our [challenges](https://jobsimulator.dev/) and [join our Discord](https://discord.gg/6VsSMZaM7q) to get notified when new challenges are released. - diff --git a/Vanilla-Login-Form-by-Jobsimulator.svg b/src/images/Vanilla-Login-Form-by-Jobsimulator.svg similarity index 100% rename from Vanilla-Login-Form-by-Jobsimulator.svg rename to src/images/Vanilla-Login-Form-by-Jobsimulator.svg diff --git a/src/logo.svg b/src/images/logo.svg similarity index 100% rename from src/logo.svg rename to src/images/logo.svg diff --git a/src/index.html b/src/index.html index e7c4417..020cb23 100644 --- a/src/index.html +++ b/src/index.html @@ -4,21 +4,24 @@ JobSimulator.dev - +
- + +
- + - + +
+ diff --git a/src/script.js b/src/script.js index 4e3be16..81fcb7d 100644 --- a/src/script.js +++ b/src/script.js @@ -1,26 +1,26 @@ const usersTable = [ // Note: This is a fake table for educational purposes. Never store user credentials in plain text. - { id: 1, username: "hello@world.com", password: "badpassword" }, - { id: 2, username: "test@user.com", password: "badpassword" }, - { id: 3, username: "email@domain.com", password: "badpassword" }, + { id: 1, username: 'hello@world.com', password: 'badpassword' }, + { id: 2, username: 'test@user.com', password: 'badpassword' }, + { id: 3, username: 'email@domain.com', password: 'badpassword' }, ]; let renderSuccess = () => { - document.getElementById("success-message").hidden = false; + document.getElementById('success-message').hidden = false; }; let renderError = () => { - document.getElementById("error-message").hidden = false; + document.getElementById('error-message').hidden = false; }; let resetMessage = () => { - document.getElementById("success-message").hidden = true; - document.getElementById("error-message").hidden = true; + document.getElementById('success-message').hidden = true; + document.getElementById('error-message').hidden = true; }; -addEventListener("submit", (event) => { +addEventListener('submit', (event) => { event.preventDefault(); resetMessage(); - let email = document.getElementById("email").value; - let password = document.getElementById("password").value; + let email = document.getElementById('email').value; + let password = document.getElementById('password').value; console.log(`email submitted: ${email}`); console.log(`password submitted: ${password}`); @@ -30,4 +30,15 @@ addEventListener("submit", (event) => { 2. If they are, call renderSuccess() 3. If they are not, call renderError() */ + + /*The find method iterates through the usersTable array and checks if there’s an object where both username (email) and password match.*/ + 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..21d0344 100644 --- a/src/styles.css +++ b/src/styles.css @@ -1,34 +1,65 @@ body { + padding: 0; + margin: 0; height: 100vh; display: flex; + flex-direction: column; + /* TODO: Adjust CSS so that form is centered on page */ + justify-content: center; align-items: center; + /*outline: 2px dashed blue;*/ } form { display: flex; + justify-content: center; flex-direction: column; border: 1px solid black; padding: 2rem; border-radius: 2rem; + /*outline: 2px solid red;*/ +} + +.logo { + margin: 0 auto 10px auto; + max-width: 5%; } -form > img { +form>img { margin: auto; + max-width: 100%; +} + +.input-box { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; } label { - text-align: left; + text-align: center; width: 100%; padding: 1rem 0 0 0; } input { - width: 100%; + width: 30%; + padding: 10px 20px; + border-radius: 5px; + outline: none; + } button { + width: 20%; margin: 1rem 0 0 0; + padding: 10px 20px; + border: none; + border-radius: 5px; + background-color: darkorange; + color: snow; } #success-message {