Login form feature added

index.html

@@ -30,7 +30,7 @@ <h1>codeX100</h1>
         <li><a href="#">IDE</a></li>
         <li><a href="#">Contact Us</a></li>
         <li><a href="#" class="btn">Sign Up</a></li>
-        <li><a href="#" class="btn">Login</a></li>
+        <li><a onclick="openForm()" class="btn">Login</a></li>
       </ul>
     </nav>
 
@@ -63,6 +63,27 @@ <h4>Data Structures in Java</h4>
           <button class="btn-secondary">View Course</button>
         </div>
       </div>
+
+      <div id="backdrop" class="backdrop">
+        <div class="login-form">
+          <span class="close-btn" onclick="closeForm()">&times;</span>
+          <h2>Login</h2>
+          <form id="loginForm" onsubmit="return validateForm()">
+            <input type="email" id="email" name="email" placeholder="Email">
+
+            <small id="emailError" class="error"></small>
+
+
+            <input type="password" id="password" name="password" placeholder="Password">
+            <small id="passwordError" class="error"></small>
+
+            <button class="submit" type="submit">Login</button>
+            <button class="google" type="submit">Sign In with Google&nbsp;<img src="./google.png" height="25" width="25"/></button>
+            <button class="github" type="submit">Sign In with Github <i class="fa-brands fa-github"></i></button>
+            <p>don't have an account yet? <span>Sign Up</span></p>
+          </form>
+        </div>
+      </div>
     </section>
     <footer class="site-footer">
       <div class="footer-container">

script.js

@@ -1,15 +1,42 @@
-// JavaScript to handle future interactions
-
-// Placeholder for login function
-function login() {
-    alert('Login functionality coming soon!');
-}
-
-// Placeholder for sign-up function
-function signup() {
-    alert('Sign-up functionality coming soon!');
-}
-
+function openForm() {
+    document.getElementById('backdrop').style.display = 'flex';
+  }
+
+  function closeForm() {
+    document.getElementById('backdrop').style.display = 'none';
+  }
+
+  function validateForm() {
+    // Get input values
+    const email = document.getElementById('email').value;
+    const password = document.getElementById('password').value;
+
+    // Get error message elements
+    const emailError = document.getElementById('emailError');
+    const passwordError = document.getElementById('passwordError');
+
+    // Reset error messages
+    emailError.textContent = '';
+    passwordError.textContent = '';
+
+    let isValid = true;
+
+    // Email validation using regex
+    const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
+    if (!emailPattern.test(email)) {
+      emailError.textContent = 'Please enter a valid email address.';
+      isValid = false;
+    }
+
+    // Password validation (minimum 8 characters)
+    if (password.length < 8) {
+      passwordError.textContent = 'Password must be at least 8 characters long.';
+      isValid = false;
+    }
+
+    return isValid;  // If true, the form will submit; if false, the form won't submit.
+  }
+
 // add functionality to  hamburger 
 // Select the hamburger icon and navigation links
 document.getElementById('hamburger').addEventListener('click', function() {

styles.css

@@ -172,6 +172,139 @@ body {
     background-color: #555;
 }
 
+.backdrop {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.6);
+  display: none;
+  justify-content: center;
+  align-items: center;
+}
+
+.login-form {
+  background-color: white;
+  padding: 20px;
+  width: 100%;
+  max-width: 400px;
+  border-radius: 8px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+  text-align: center;
+  position: relative;
+}
+
+.login-form form #email,#password{
+  height: 3rem;
+}
+
+
+.login-form form #email,#password::placeholder{
+  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+  font-weight: 700;
+  color: #777777a4;
+  font-size: medium;
+}
+
+.login-form form .submit{
+  width: 100%;
+  height: 3rem;
+  background-color: #007bff;
+  font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+  font-size: medium;
+  font-weight: 700;
+}
+.login-form form .google{
+  position: relative;
+  margin-top: 1rem;
+  width: 100%;
+  height: 3rem; background-color: white;
+  border:1px solid rgba(181, 176, 176, 0.763);
+  color: #333;
+  font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+  font-size: medium;
+  font-weight: 700;
+}
+
+.login-form form .google img{
+  position: absolute;
+  top:12px;
+}
+
+.login-form form .github{
+  width: 100%;
+  height: 3rem;
+  margin-top: 1rem;
+  background-color: white;
+  border:1px solid rgba(181, 176, 176, 0.763);
+  color: #333;
+  font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+  font-size: medium;
+  font-weight: 700;
+}
+
+
+.login-form form .github i{
+  font-size: 25px;
+}
+.login-form h2 {
+  margin-bottom: 20px;
+}
+.login-form form p{
+  margin-top:1rem;
+  color: rgba(125, 121, 121, 0.763) ;
+}
+
+.login-form form p span{
+  color: #0056b3;
+}
+.login-form label {
+  display: block;
+  text-align: left;
+  margin: 10px 0 5px;
+}
+
+.login-form input {
+  width: 100%;
+  padding: 10px;
+  margin-bottom: 5px;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+}
+
+.error {
+  color: red;
+  font-size: 14px;
+  display: block;
+  margin-bottom: 10px;
+}
+
+.login-form button {
+  padding: 10px 15px;
+  font-size: 16px;
+  background-color: #28a745;
+  color: white;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+.login-form .close-btn {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  font-size: 24px;
+  cursor: pointer;
+}
+
+@media (max-width: 500px) {
+  .login-form {
+    width: 90%;
+  }
+}
+
+
 /* Footer  */
 
 .site-footer {