From c28b3b6cb54920cc3330e5a7fcb125091e8cba86 Mon Sep 17 00:00:00 2001 From: juhdakd <227450758@qq.com> Date: Fri, 11 Oct 2024 11:34:28 +0800 Subject: [PATCH] Fix Login Form Validation --- frontend/index.html | 245 +++++++++++++++++++++----------------------- frontend/script.js | 78 +++++++++++--- frontend/styles.css | 52 +++++++++- 3 files changed, 235 insertions(+), 140 deletions(-) diff --git a/frontend/index.html b/frontend/index.html index 6afc72b..fd9dc57 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -1,140 +1,133 @@ - - - - codeX100 - Learn Programming - - - - + + + + codeX100 - Learn Programming - - - - - + + + + - -
-

Welcome to codeX100

-

Master programming with live classes and curated content

- Explore Courses -
+ + - -
-

Your Courses

-
- -

You haven't bought any courses yet.

-
- -

Recommended Courses

-
- -
- Basics of C++ -
-

Basics of C++

-

Learn the fundamentals of C++ programming.

- -
-
-
- Data Structures in Java -
-

Data Structures in Java

-

Master DSA with Java from basics to advanced.

- -
-
-
- Basics of C++ -
-

Basics of C++

-

Learn the fundamentals of C++ programming.

- -
+ + + + + +
+

Welcome to codeX100

+

Master programming with live classes and curated content

+ Explore Courses +
+ + +
+

Your Courses

+
+ +

You haven't bought any courses yet.

+
+ +

Recommended Courses

+
+ +
+ Basics of C++ +
+

Basics of C++

+

Learn the fundamentals of C++ programming.

+
-
- Data Structures in Java -
-

Data Structures in Java

-

Master DSA with Java from basics to advanced.

- -
+
+
+ Data Structures in Java +
+

Data Structures in Java

+

Master DSA with Java from basics to advanced.

+
-
-
+ - - - - - +
+

Connect With Us

+
+ + + +
+
+ +
+

© 2024 codeX100. All rights reserved.

+
+ + +
+
+

Login

+
+ + + +
+
+ + + \ No newline at end of file diff --git a/frontend/script.js b/frontend/script.js index ca89860..acacbb6 100644 --- a/frontend/script.js +++ b/frontend/script.js @@ -12,18 +12,70 @@ function signup() { // add functionality to hamburger // Select the hamburger icon and navigation links -document.getElementById('hamburger').addEventListener('click', function() { - const navLinks = document.querySelector('.nav-links'); - const icon = this.querySelector('i'); - - navLinks.classList.toggle('active'); - - if (navLinks.classList.contains('active')) { - icon.classList.remove('fa-bars'); - icon.classList.add('fa-times'); // Change to cross icon - } else { - icon.classList.remove('fa-times'); - icon.classList.add('fa-bars'); // Revert to hamburger icon - } +document.getElementById('hamburger').addEventListener('click', function () { + const navLinks = document.querySelector('.nav-links'); + const icon = this.querySelector('i'); + + navLinks.classList.toggle('active'); + + if (navLinks.classList.contains('active')) { + icon.classList.remove('fa-bars'); + icon.classList.add('fa-times'); // Change to cross icon + } else { + icon.classList.remove('fa-times'); + icon.classList.add('fa-bars'); // Revert to hamburger icon + } }); +//login + +const loginModal = document.getElementById('loginModal'); +const overlay = document.getElementById('overlay'); +const loginBtn = document.getElementById('loginBtn'); + +loginBtn.addEventListener('click', () => { + loginModal.style.display = 'block'; + overlay.style.display = 'block'; +}); + +overlay.addEventListener('click', () => { + loginModal.style.display = 'none'; + overlay.style.display = 'none'; +}); + +// Email validation +function isValidEmail(email) { + const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; + return re.test(email); +} + +function handleLogin() { + const email = document.getElementById('email').value; + const password = document.getElementById('password').value; + + // Empty ? + if (!email || !password) { + alert('Email and password cannot be empty!'); + return; + } + + // Email Validation + if (!isValidEmail(email)) { + alert('Please enter a valid email address!'); + return; + } + + // password length Validation + if (password.length < 8) { + alert('Password must be at least 8 characters long!'); + return; + } + + // Success + alert('Login successful!'); + + // Close modal + loginModal.style.display = 'none'; + overlay.style.display = 'none'; +} + diff --git a/frontend/styles.css b/frontend/styles.css index 400e704..07b47dd 100644 --- a/frontend/styles.css +++ b/frontend/styles.css @@ -499,4 +499,54 @@ body { width: 100%; } } - } \ No newline at end of file + } + + .login-modal { + display: none; + position: fixed; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + background-color: #fff; + padding: 20px; + border-radius: 10px; + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); + z-index: 1000; +} + +.login-modal h2 { + margin-bottom: 20px; +} + +.login-modal input { + width: 100%; + padding: 10px; + margin: 10px 0; + border: 1px solid #ccc; + border-radius: 5px; +} + +.login-modal button { + width: 100%; + padding: 10px; + background-color: #4CAF50; + color: white; + border: none; + border-radius: 5px; + cursor: pointer; +} + +.login-modal button:hover { + background-color: #45a049; +} + +.overlay { + display: none; + position: fixed; + left: 0; + top: 0; + width: 100%; + height: 100%; + background: rgba(0, 0, 0, 0.7); + z-index: 999; +} \ No newline at end of file