PHP- Kodu

**Mix** · 07 Haziran 2022, 09:58

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ı;

[Üye Olmadan Linkleri Göremezsiniz. Üye Olmak için TIKLAYIN...]

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ı;

[Üye Olmadan Linkleri Göremezsiniz. Üye Olmak için TIKLAYIN...]

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; } ); } ); } )();