basicloginpage/script.js at main · adityaj0412/basicloginpage · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
document.getElementById('login-form').addEventListener('submit', function(e) {
    e.preventDefault(); // Prevent page refresh

    const userInp = document.getElementById('username');
    const passInp = document.getElementById('password');
    const userErr = document.getElementById('user-error');
    const passErr = document.getElementById('pass-error');

    let isValid = true;

    // Reset errors
    userErr.textContent = "";
    passErr.textContent = "";
    userInp.style.borderColor = "#eee";
    passInp.style.borderColor = "#eee";

    // Validation Logic
    if (userInp.value.trim() === "") {
        userErr.textContent = "Username is required";
        userInp.style.borderColor = "#e74c3c";
        isValid = false;
    }

    if (passInp.value.length < 6) {
        passErr.textContent = "Password must be at least 6 characters";
        passInp.style.borderColor = "#e74c3c";
        isValid = false;
    }

    // Interactive Redirect Simulation
    if (isValid) {
        const btn = document.getElementById('login-btn');
        btn.textContent = "Signing in...";
        btn.style.opacity = "0.7";

        setTimeout(() => {
            document.getElementById('login-card').classList.add('hidden');
            document.getElementById('welcome-page').classList.remove('hidden');
            document.getElementById('display-user').textContent = userInp.value;
        }, 1500); // Simulate network delay
    }
});