Hello everyone, I will give you all free code, in learning "Password Strength Check using HTML CSS & JavaScript". Good luck, don't forget to keep learning and repeat until you can, happy coding and Spirit on.
This is my post for the previous one, you just have to learn it properly, and I will provide the latest updates about teaching web design quickly and easily
The best way is to always learn and practice directly, don't get hung up on confusing code, if you enter the wrong code, don't panic
This is the code HTML and CSS you need learn :
1. HTML CODE
<!DOCTYPE html>
<html lang="en">
<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>password strenght</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h2 class="heading">P A S S W O R D</h2>
<div class="password-style">
<div class="input-password">
<input type="password" id="password" placeholder="Your Password">
<p id="message"><span id="lookup"></span></p>
<div class="indicator">
<span class="easy"></span>
<span class="medium"></span>
<span class="awesome"></span>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
2. CSS
* {
padding: 0; margin: 0;
font-family: 'poppins',sans-serif;
box-sizing: border-box;
}
.password-style {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.input-password {
width: 30rem;
max-width: 90%;
border-radius: .5rem;
}
.input-password input {
width: 100%;
height: 4rem;
padding: 0 2rem;
border: .15rem solid #333;
outline: none;
color: #333;
border-radius: .5rem;
}
.heading {
text-align: center;
padding: 5rem 0 1rem;
color: #9b0c5f;
}
#message {
color: #333;
font-size: 20px;
display: none;
margin: auto;
text-align: center;
background: transparent;
padding-top: 1rem;
}
::placeholder {
font-size: 1rem;
}
3. JAVASCRIPT
let pwr = document.getElementById('password');
let lup = document.getElementById('lookup');
let mes = document.getElementById('message');
pwr.addEventListener('input', () => {
if(pwr.value.length > 0){
mes.style.display = 'block';
}else{
mes.style.display = 'none';
}
if(pwr.value.length < 4) {
lup.innerHTML = 'No!, Your Password is too Weak :-(';
mes.style.color = '#ff4757';
}
else if(pwr.value.length >= 5 && pwr.value.length < 8) {
lup.innerHTML = 'Hmm.. Your Password is Medium :-|';
mes.style.color = 'orange';
}
else if(pwr.value.length >= 10){
lup.innerHTML = 'Yess.. Your Password is Awesome :-)';
mes.style.color = '#1c914d';
}
});
For more details, you can see the Video tutorial and Click link Channel below :
Support my channel by comment, like and subscribe, success for all of us, happy world hereafter. Amin, Good Luck. 😀
Belum ada tanggapan untuk "Password Strength Check using HTML CSS & JavaScript"
Post a Comment