From cd3070f80b334f2e15fe3acff575e5ddd7c755bb Mon Sep 17 00:00:00 2001 From: Lucky Khoza <84252978+LuckyKhoza-crypto@users.noreply.github.com> Date: Mon, 10 Feb 2025 10:55:56 -0800 Subject: [PATCH] solved the problem --- src/index.html | 12 ++++++------ src/script.js | 13 +++++++++++++ src/styles.css | 29 +++++++++++++++++++++++++---- 3 files changed, 44 insertions(+), 10 deletions(-) diff --git a/src/index.html b/src/index.html index e7c4417..7461598 100644 --- a/src/index.html +++ b/src/index.html @@ -9,16 +9,16 @@
- + - + - - + + - - + +
diff --git a/src/script.js b/src/script.js index 4e3be16..6cdbb60 100644 --- a/src/script.js +++ b/src/script.js @@ -24,6 +24,19 @@ addEventListener("submit", (event) => { console.log(`email submitted: ${email}`); console.log(`password submitted: ${password}`); + + for (let item of usersTable) { + console.log("the items is " + item.username); + if (item.username === email && item.password === password) { + renderSuccess(); + console.log("success"); + return; + } + } + + renderError(); + console.log("fail"); + /* TODO: 1. Check if the email and password are valid (using the usersTable) diff --git a/src/styles.css b/src/styles.css index 25969e5..bac7725 100644 --- a/src/styles.css +++ b/src/styles.css @@ -3,14 +3,24 @@ body { display: flex; /* TODO: Adjust CSS so that form is centered on page */ align-items: center; + justify-content: center; + background-color: #497d74; + font-family: Arial, Helvetica, sans-serif; + letter-spacing: 0.3em; +} + +.label { + font-weight: bold; + padding-bottom: 1em; } form { display: flex; + justify-content: center; flex-direction: column; - border: 1px solid black; - padding: 2rem; + padding: 2.5rem; border-radius: 2rem; + background-color: #efe9d5; } form > img { @@ -24,13 +34,24 @@ label { } input { - width: 100%; + /* width: 100%; */ + border-radius: 1em; + border: 1px solid black; + padding: 1em; +} + +input:focus { + border: 2px solid #71bbb2; + outline: none; + box-shadow: 0 0 5px rgba(113, 187, 178, 0.8); Adds a subtle glow effect } button { + background-color: #27445d; + border: none; + border-radius: 1em; margin: 1rem 0 0 0; } - #success-message { color: green; }