טופס התחברות

חלק מהיחידה JavaScript בפעולה במסלול ה-HTML של Coddy. שיעור 25 מתוך 27.

אתגר

קל

צרו טופס התחברות המאמת פרטי התחברות.

יש לנו טופס התחברות עם שדות לשם משתמש ולסיסמה. שם המשתמש מוזן מראש בתור "admin". המשימה שלכם היא לאמת את הסיסמה כאשר לוחצים על כפתור ההתחברות.

שלבים:

ב-JavaScript:
- צרו משתנים עבור שדה הסיסמה, כפתור ההתחברות ורכיב ההודעה
- הוסיפו מאזין לאירוע לחיצה לכפתור ההתחברות
כאשר לוחצים על כפתור ההתחברות:
- בדקו אם הסיסמה שווה ל-"admin123"
- אם הסיסמה נכונה, הציגו: "Logged in successfully!" והגדירו את המחלקה של ההודעה ל-"success"
- אם הסיסמה שגויה, הציגו: "Invalid password" והגדירו את המחלקה של ההודעה ל-"error"

נסו בעצמכם

<!DOCTYPE html>
<html>
<head>
    <title>Login Form</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="login-container">
        <h2>Login</h2>
        <form id="loginForm">
            <div class="form-group">
                <label for="username">Username:</label>
                <input type="text" id="username" value="admin" readonly>
            </div>
            <div class="form-group">
                <label for="password">Password:</label>
                <input type="password" id="password" placeholder="Enter password">
            </div>
            <button type="button" id="loginBtn">Login</button>
            <p id="loginMsg"></p>
        </form>
    </div>
    <script src="script.js"></script>
</body>
</html>