Giriş Formu

Coddy'nin HTML Journey'sinin JavaScript in Action bölümünün bir parçası — ders 25 / 27.

Görev

Kolay

Kimlik bilgilerini doğrulayan bir Giriş Formu oluşturun.

Kullanıcı adı ve şifre alanları olan bir giriş formumuz var. Kullanıcı adı "admin" olarak önceden doldurulmuştur. Göreviniz, giriş düğmesine tıklandığında şifreyi doğrulamaktır.

Adımlar:

JavaScript'te:
- Şifre girişi, giriş düğmesi ve mesaj öğesi için değişkenler oluşturun
- Giriş düğmesine bir tıklama olayı dinleyicisi (click event listener) ekleyin
Giriş düğmesine tıklandığında:
- Şifrenin "admin123" değerine eşit olup olmadığını kontrol edin
- Eğer doğruysa, şunu gösterin: "Logged in successfully!" ve mesaj sınıfını "success" olarak ayarlayın
- Eğer yanlışsa, şunu gösterin: "Invalid password" ve mesaj sınıfını "error" olarak ayarlayın

Kendin dene

<!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>