Uygulama 3 farklı dosyadan oluşuyor.
İlk dosya index adındaki html dosyasıdır. Şifre göster veya gizle uygulaması için kullanıcı adı ve şifre için input elementleri kullanılmıştır. Şifre göster ve gizle için checbox elementi kullanılmıştır. Bu elementler id’si giris olan div içine ekranın üstten ve yandan ortalanacak şekilde yerleştirilmiştir.
İkinci dosya style adındaki css dosyasıdır. index adlı html dosyasına harici olarak eklenmiştir. Koyu tema renkleri kullanılmıştır.
Üçüncü dosya ise script adındaki java script dosyasıdır. Değişkenler tanımlanmıştır. Daha sonra id’si goster olan chexbox elementine tıklanınca ne olacağı tıklanmadığında ne olacağı if else ile yapılmıştır.
index.html dosyası aşağıdaki gibidir.
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Anasayfa</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="ana">
<div class="giris">
<input type="password" id="sifre" placeholder="Şifrenizi giriniz">
<div class="sifregizle"><input type="checkbox" id="goster"><p>Şifreyi göster</p></div>
</div>
<script src="script.js">
</script>
</div>
</body>
</html>style.css dosyası aşağıdaki gibidir.
*{
padding: 0;
margin: 0;
}
.ana {
width: 100%;
height: 100vh;
position: relative;
background-color: #181818;
}
.giris {
width: 350px;
height: auto;
top: 50%;
left: 50%;
transform: translate(-50% , -50%);
position: absolute;
background-color: #242424;
padding: 20px 25px;
color: #E0E0E0;
}
#sifre {
width: 100%;
font-size: 30px;
padding: 8px 0px;
outline: none;
border-width: 0px 0px 2px 0px;
color: #E0E0E0;
}
.sifregizle {
display: flex;
margin-top: 10px;
}
.sifregizle p {
margin-left: 10px;
font-size: 18px;
color: #E0E0E0;
}
.sifregizle input[type="checkbox"] {
width: 16px;
}script.js dosyası aşağıdaki gibidir.
let sifre = document.getElementById('sifre');
let goster = document.getElementById('goster');
goster.onclick = function() {
if(goster.checked) {
sifre.type = 'text';
}else {
sifre.type = 'password';
}
};