HTML - JAVASCRİPT,CSS Kullanarak şifre onaylama projesi oluşturuyoruz.
Projemizin amacı sitemize üye olmak isteyen bireyler için güçlü bir şekilde şifre oluşturmalarıdır.
Eğer yapmaya çalıştıkları şifre istediğimiz parametreleri içermiyor ise sistem buna engel olucaktır.
Sistemin belirttiği şekilde şifre girilmediği halde onaylanmayacaktır örnek olarak ;
İstenilen parametleri girdiğimizde ise sistem şifremizi onaylayacaktır ;
Şifremizin gözüküp gözükmeyeceğinide göz simgesine tıklayarak ayarlayabiliriz ;
Gelelim kaynak kodlarımıza
HTML
Projemizin amacı sitemize üye olmak isteyen bireyler için güçlü bir şekilde şifre oluşturmalarıdır.
Eğer yapmaya çalıştıkları şifre istediğimiz parametreleri içermiyor ise sistem buna engel olucaktır.
Sistemin belirttiği şekilde şifre girilmediği halde onaylanmayacaktır örnek olarak ;
İstenilen parametleri girdiğimizde ise sistem şifremizi onaylayacaktır ;
Şifremizin gözüküp gözükmeyeceğinide göz simgesine tıklayarak ayarlayabiliriz ;
Gelelim kaynak kodlarımıza
HTML
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>github/ogehantr</title>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css">
<script src="script.js" defer></script>
</head>
<body>
<div class="wrapper">
<div class="pass-field">
<input type="password" placeholder="Şifre Oluştur">
<i class="fa-solid fa-eye"></i>
</div>
<div class="content">
<p>Şifreniz bunları içermelidir ;</p>
<ul class="requirement-list">
<li>
<i class="fa-solid fa-circle"></i>
<span>En az 8 karakter</span>
</li>
<li>
<i class="fa-solid fa-circle"></i>
<span>En az 1 sayi (0..9)</span>
</li>
<li>
<i class="fa-solid fa-circle"></i>
<span>En az 1 küçük harf (a..z)</span>
</li>
<li>
<i class="fa-solid fa-circle"></i>
<span>En az 1 büyük harf (A..Z)</span>
</li>
<li>
<i class="fa-solid fa-circle"></i>
<span>En az 1 özel sombel (!..$)</span>
</li>
</ul>
</div>
</div>
</body>
</html>CSS
CSS:
/* Import Google font - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body{
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background-image: url(1.jpg);
}
.wrapper{
width: 450px;
overflow: hidden;
background: #fff;
padding: 28px;
border-radius: 8px;
box-shadow: 0 10px 25px rgba(0,0,0,0.6);
}
.wrapper .pass-field{
height: 65px;
width: 100%;
position: relative;
}
.pass-field input{
width: 100%;
height: 100%;
outline: none;
padding: 0 17px;
font-size: 1.3rem;
border-radius: 5px;
border: 1px solid #999;
}
.pass-field input:focus{
padding: 0 16px;
border: 2px solid #4285F4;
}
.pass-field i{
right: 18px;
top: 50%;
font-size: 1.2rem;
color: #999;
cursor: pointer;
position: absolute;
transform: translateY(-50%);
}
.wrapper .content{
margin: 20px 0 10px;
}
.content p{
color: #333;
font-size: 1.3rem;
}
.content .requirement-list{
margin-top: 20px;
}
.requirement-list li{
font-size: 1.3rem;
list-style: none;
display: flex;
align-items: center;
margin-bottom: 15px;
}
.requirement-list li i{
width: 20px;
color: #aaa;
font-size: 0.6rem;
}
.requirement-list li.valid i{
font-size: 1.2rem;
color: #4285F4;
}
.requirement-list li span{
margin-left: 12px;
color: #333;
}
.requirement-list li.valid span{
color: #999
}JAVASCRİPT(JS)
JavaScript:
const passwordInput = document.querySelector(".pass-field input");
const eyeIcon = document.querySelector(".pass-field i");
const requirementList = document.querySelectorAll(".requirement-list li");
const requirements = [
{ regex: /.{8,}/, index: 0 },
{ regex: /[0-9]/, index: 1 },
{ regex: /[a-z]/, index: 2 },
{ regex: /[A-Z]/, index: 3 },
{ regex: /[^A-Za-z0-9]/, index: 4},
]
passwordInput.addEventListener("keyup", (e) =>{
requirements.forEach(item => {
const isValid = item.regex.test(e.target.value);
const requirementItem = requirementList[item.index];
if(isValid){
requirementItem.classList.add("valid");
requirementItem.firstElementChild.className = "fa-solid fa-check";
}
else{
requirementItem.classList.remove("valid")
requirementItem.firstElementChild.className = "fa-solid fa-circle";
}
});
});
eyeIcon.addEventListener("click", () =>{
passwordInput.type = passwordInput.type === 'password' ? "text" : "password";
eyeIcon.className = `fa-solid fa-eye${passwordInput.type === "password" ? "" : "-slash"}`;
});GİTHUB üzerinden isterseniz projeleri indirebilirsiniz veya forumda paylaştığım şekillerdeki kodları kopyalabilirsiniz.
OgehanTR - Overview
Hello, I am Ogehan, I am a part-time software developer and graphic designer and I will share my projects on this platform. - OgehanTR
github.com
