IRCRehberi.Net- Türkiyenin En iyi IRC ve Genel Forum Sitesi - JavaScript'te Parola Gücünü Kontrol Edin

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;  

   } );  

  } );  

 } )();

Sonuç;

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

Alıntı:

Written by - Code With Random/Anki
Code by - Jesse Mykolyn