07 Haziran 2022, 09:58
|
#1 |
| |  JavaScript'te Parola Gücünü Kontrol Edin | şifre gücü denetleyicisi
HTML Kodu
PHP- Kodu <main>
<form action="#">
<div>
<label for="password">Password</label>
<input id="password" class="js--password" type="password" placeholder="Enter your password here.">
<div class="password-meter">
<div class="password-meter__bar"> <div class="password-meter__bar__inner js--password-bar">
</div>
</div>
<p class="password-meter__label">Password Strength: <span class="js--password-text"></span></p>
</div>
</div>
<div>
<input type="submit" value="Submit">
</div>
</form>
</main>
Çıktı;
CSS code
PHP- Kodu *::before,
*::after {
box-sizing: border-box;
transition: all 0.1s;
margin: 0;
}
html,
body {
margin: 0;
padding: 0;
}
html {
font-size: 62.5%;
}
body {
color: [URL=https://www.ircrehberi.net/usertag.php?do=list&action=hash&hash=222]#222[/URL]
background: [URL=https://www.ircrehberi.net/usertag.php?do=list&action=hash&hash=fafafa]#fafafa[/URL]
font-family: sans-serif;
font-size: 1.6rem;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
main {
width: 90%;
max-width: 80rem;
margin: 0 auto;
padding: 3rem 0;
}
form {
width: 100%;
background: [URL=https://www.ircrehberi.net/usertag.php?do=list&action=hash&hash=fff]#fff[/URL]
box-shadow: 0 0.3rem 2rem -0.5rem rgba( 0, 0, 0, 0.2 );
padding: 3rem;
}
form > div:not( :last-child ) {
margin-bottom: 3rem;
}
form label {
display: block;
color: [URL=https://www.ircrehberi.net/usertag.php?do=list&action=hash&hash=4b7bec]#4b7bec[/URL]
margin-bottom: 1rem;
font-size: 1.2rem;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 0.05rem;
}
form input {
width: 100%;
display: block;
margin: 0 auto;
border: 0;
font-size: 1.3rem;
}
form input[type="password"] {
padding: 1.5rem 0;
border-bottom: 0.1rem solid [URL=https://www.ircrehberi.net/usertag.php?do=list&action=hash&hash=999]#999[/URL]
margin-bottom: 1.5rem;
}
form input[type="password"]:hover {
border-bottom-color: [URL=https://www.ircrehberi.net/usertag.php?do=list&action=hash&hash=444]#444[/URL]
}
form input[type="password"]:focus {
border-bottom-color: [URL=https://www.ircrehberi.net/usertag.php?do=list&action=hash&hash=4b7bec]#4b7bec[/URL]
}
form input[type="submit"] {
max-width: 15rem;
border-radius: 2rem;
color: [URL=https://www.ircrehberi.net/usertag.php?do=list&action=hash&hash=fff]#fff[/URL]
background: [URL=https://www.ircrehberi.net/usertag.php?do=list&action=hash&hash=4b7bec]#4b7bec[/URL]
line-height: 4rem;
font-size: 1.5rem;
font-weight: bold;
cursor: pointer;
}
form input[type="submit"]:hover,
form input[type="submit"]:focus {
background: [URL=https://www.ircrehberi.net/usertag.php?do=list&action=hash&hash=3867d6]#3867d6[/URL]
}
.password-meter {
width: 100%;
}
.password-meter__bar {
width: 33.333%;
height: 1rem;
background: [URL=https://www.ircrehberi.net/usertag.php?do=list&action=hash&hash=eee]#eee[/URL]
margin-bottom: 1rem;
position: relative;
}
.password-meter__bar__inner {
width: 0;
height: 100%;
display: block;
position: absolute;
top: 0;
left 0;
}
.password-meter__label {
color: [URL=https://www.ircrehberi.net/usertag.php?do=list&action=hash&hash=666]#666[/URL]
font-size: 1.2rem;
}
.password-meter__label span {
font-weight: bold;
Çıktı;
JavaScript kodu
PHP- Kodu /**
* Parse a password string into a numeric value.
*
* @param {string} password
* [MENTION=253]Return[/MENTION] {number}
*/
let evaluatePassword = ( password ) => {
let score = 0;
score = password.length;
score = ( password.match( /[!]/gmi ) ) ? score + ( password.match( /[!]/gmi ).length * 3 ) : score;
score = ( password.match( /[A-Z]/gm ) ) ? score + 3 : score;
score = ( password.match( /[0-9]/gmi ) ) ? score + 3 : score;
return score;
};
/**
* Convert a numeric score into an object of 'DOM update' data.
*
* @param {number} score
* [MENTION=253]Return[/MENTION] {Object}
*/
let scoreToData = ( score ) => {
if ( score >= 30 ) {
return {
width: '100%',
color: '#26de81',
label: 'Strong',
};
} else if ( score >= 20 ) {
return {
width: '66%',
color: '#fd9644',
label: 'Medium',
};
} else {
return {
width: '33%',
color: '#fc5c65',
label: 'Weak',
};
}
};
window.addEventListener( 'DOMContentLoaded', () => {
// Get element refs.
let p = document.querySelector( '.js--password' );
let b = document.querySelector( '.js--password-bar' );
let t = document.querySelector( '.js--password-text' );
// Listen for updates to password field.
p.addEventListener( 'input', () => {
// Convert current value to data.
let data = scoreToData( evaluatePassword( p.value ) );
// Update DOM.
b.style.width = data.width;
b.style.background = data.color;
t.innerText = data.label;
} );
} );
} )();
Sonuç;
Alıntı:
Written by - Code With Random/Anki
Code by - Jesse Mykolyn
| |
|
| |
Hybrid-Şeklinde
