Close Menu

    Subscribe to Updates

    Get the latest creative news from FooBar about art, design and business.

    What's Hot

    How to create Spider Clock Animation using HTML CSS and JS

    26 October 2025

    How to create Interactive 3D Galaxy Animation using HTML CSS and JS

    24 October 2025

    How to create Animated Social Media Card Hover using HTML CSS and JS

    20 October 2025
    Facebook X (Twitter) Instagram YouTube Telegram Threads
    Coding StellaCoding Stella
    • Home
    • Blog
    • HTML & CSS
      • Login Form
    • JavaScript
    • Hire us!
    Coding StellaCoding Stella
    Home - JavaScript - How to make Password Strength Checker using HTML CSS & JavaScript
    JavaScript

    How to make Password Strength Checker using HTML CSS & JavaScript

    Coding StellaBy Coding Stella9 March 2024Updated:9 March 2024No Comments5 Mins Read
    Share Facebook Twitter Pinterest LinkedIn Tumblr Reddit Email WhatsApp Copy Link

    Let’s make a Glowing Password Strength Checker using HTML, CSS, and JavaScript. This project is great for beginners and will help you learn how to create a useful tool.

    We’ll use HTML to set up the basic structure, CSS to make it look nice, and JavaScript to make the generator work. No need for anything fancy – just simple coding!

    Let’s start building this Password Strength Checker. It’s perfect for anyone who wants to learn coding or needs a handy tool. Let’s begin and make generating passwords easy!

    HTML :

    The provided code is an HTML document that creates a password strength checker. It consists of a container with a heading, an input area for entering a password, a show/hide password toggle, and a strength meter. The JavaScript file script.js is responsible for checking the strength of the entered password and updating the strength meter accordingly. The CSS file style.css is used to style the elements in the document.

    <!DOCTYPE html>
    <html lang="en" >
    <head>
      <meta charset="UTF-8">
      <title> Glowing Password Strength Checker</title>
      <link rel="stylesheet" href="./style.css">
    
    </head>
    <body>
    <!-- partial:index.partial.html -->
    <div class="container">
      <h2>Password Strength Checker</h2>
      <div class="inputArea">
        <input type="password" placeholder=" Password" id="YourPassword">
        <div class="show"></div>
      </div>
      <div class="strengthMeter"></div>
    </div>
    <!-- partial -->
      <script  src="./script.js"></script>
    
    </body>
    </html>

    CSS :

    The provided CSS code is responsible for styling the password strength checker HTML document. The container element is styled with a dark background, padding, and border radius. The input area has a dark background and no border, and the strength meter is positioned at the bottom with different styles based on the strength of the password. The show/hide password toggle is positioned at the top right corner. The CSS code also includes styles for different password strength levels and their corresponding messages.

    @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&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: #222;
    }
    
    .container {
      position: relative;
      width: 400px;
      border-radius: 20px 20px 0 0;
      padding: 30px;
      background: #333;
      display: flex;
      justify-content: center;
      /* align-items: center; */
      flex-direction: column;
      border-radius: 1px solid #111;
      gap: 10px;
      padding-bottom: 70px;
      -webkit-box-reflect: below 1px
        linear-gradient(transparent, transparent, #0005);
    }
    .container h2 {
      color: #666;
      font-weight: 500;
    }
    
    .container .inputArea {
      position: relative;
      width: 100%;
    }
    
    .container .inputArea input {
      position: relative;
      width: 100%;
      background: #222;
      border: none;
      outline: none;
      padding: 10px;
      color: aliceblue;
      font-size: 1.1em;
    }
    
    .container .strengthMeter {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 3px;
      background: #222;
    }
    
    .container .strengthMeter::before {
      content: "";
      position: absolute;
      width: 0;
      height: 100%;
      transition: 0.5s;
      background: #f00;
    }
    
    .container.weak .strengthMeter::before {
      width: 10%;
      background: #f00;
      filter: drop-shadow(0 0 5px #f00) drop-shadow(0 0 10px #f00)
        drop-shadow(0 0 20px #f00);
    }
    
    .container.moderate .strengthMeter::before {
      width: 70%;
      background: #eedc3d;
      filter: drop-shadow(0 0 5px #eedc3d) drop-shadow(0 0 10px #eedc3d)
        drop-shadow(0 0 20px #eedc3d);
    }
    
    .container.strong .strengthMeter::before {
      width: 100%;
      background: #18e605;
      filter: drop-shadow(0 0 5px #18e605) drop-shadow(0 0 10px #18e605)
        drop-shadow(0 0 20px #18e605);
    }
    
    .container .strengthMeter::after {
      position: absolute;
      top: -45px;
      left: 30px;
      transition: 0.5s;
      color: aliceblue;
    }
    
    .container.container.weak .strengthMeter::after {
      content: "Weak Password";
      color: #f00;
      filter: drop-shadow(0 0 5px#f00);
    }
    
    .container.container.container.moderate .strengthMeter::after {
      content: "Moderate Password";
      color: #eedc3d;
      filter: drop-shadow(0 0 5px#eedc3d);
    }
    
    .container.container.container.container.strong .strengthMeter::after {
      content: "Strong Password";
      color: #18e605;
      filter: drop-shadow(0 0 5px#18e605);
    }
    
    .show {
      position: absolute;
      top: 0;
      right: 0;
      width: 60px;
      height: 100%;
      background: #333;
      border: 6px solid #222;
      cursor: pointer;
      justify-content: center;
      align-items: center;
      display: flex;
    }
    
    .show::before {
      content: "Show";
      font-size: 0.6em;
      color: aliceblue;
      letter-spacing: 0.15em;
      text-transform: uppercase;
    }
    
    .show.hide::before {
      content: "Hide";
    }

    JavaScript:

    The code adds an event listener to the document that triggers the password strength check whenever a key is released in the password input field. The password strength is calculated using the Strength function, and the container element’s class is updated based on the strength level. The class determines the styling of the strength meter.

    function Strength(password) {
      let i = 0;
      if (password.length > 6) {
        i++;
      }
      if (password.length >= 10) {
        i++;
      }
    
      if (/[A-Z]/.test(password)) {
        i++;
      }
    
      if (/[0-9]/.test(password)) {
        i++;
      }
    
      if (/[A-Za-z0-8]/.test(password)) {
        i++;
      }
    
      return i;
    }
    
    let container = document.querySelector(".container");
    document.addEventListener("keyup", function (e) {
      let password = document.querySelector("#YourPassword").value;
    
      let strength = Strength(password);
      if (strength <= 2) {
        container.classList.add("weak");
        container.classList.remove("moderate");
        container.classList.remove("strong");
      } else if (strength >= 2 && strength <= 4) {
        container.classList.remove("weak");
        container.classList.add("moderate");
        container.classList.remove("strong");
      } else {
        container.classList.remove("weak");
        container.classList.remove("moderate");
        container.classList.add("strong");
      }
    });
    
    let password = document.querySelector("#YourPassword");
    let show = document.querySelector(".show");
    show.onclick = function () {
      if (password.type === "password") {
        password.setAttribute("type", "text");
        show.classList.add("hide");
      } else {
        password.setAttribute("type", "password");
        show.classList.remove("hide");
      }
    };

    In conclusion, creating a Password Strength Checker using HTML, CSS, and JavaScript is a fantastic way to learn coding while building a useful tool. By using simple words and basic coding techniques, beginners can easily follow along and gain valuable skills.

    If your project has problems, don’t worry. Just click to download the source code and face your coding challenges with excitement. Have fun coding!

    Password strength checker
    Share. Copy Link Twitter Facebook LinkedIn Email WhatsApp
    Previous ArticleMaster Frontend in 100 Days Ebook
    Next Article How to make Movie Poster Cards using HTML & CSS
    Coding Stella
    • Website

    Related Posts

    JavaScript

    How to create Spider Clock Animation using HTML CSS and JS

    26 October 2025
    JavaScript

    How to create Interactive 3D Galaxy Animation using HTML CSS and JS

    24 October 2025
    JavaScript

    How to create Animated Social Media Card Hover using HTML CSS and JS

    20 October 2025
    Add A Comment
    Leave A Reply Cancel Reply

    Trending Post

    Master Frontend in 100 Days Ebook

    2 March 202429K Views

    How to make Modern Login Form using HTML & CSS | Glassmorphism

    11 January 202427K Views

    How to make I love you Animation in HTML CSS & JavaScript

    14 February 202422K Views

    How to make Valentine’s Day Card using HTML & CSS

    13 February 202414K Views
    Follow Us
    • Instagram
    • Facebook
    • YouTube
    • Twitter
    ads
    Featured Post

    How to create Spider Clock Animation using HTML CSS and JS

    26 October 2025

    How to make Glowing Animated Login Form using HTML & CSS

    25 February 2025

    How to make Cool Loading Animation using HTML & CSS

    18 April 2025

    How to make Awesome Search Bar 2 using HTML & CSS

    4 April 2025
    Latest Post

    How to create Spider Clock Animation using HTML CSS and JS

    26 October 2025

    How to create Interactive 3D Galaxy Animation using HTML CSS and JS

    24 October 2025

    How to create Animated Social Media Card Hover using HTML CSS and JS

    20 October 2025

    How to create Animated LogOut Button using HTML CSS and JS

    18 October 2025
    Facebook X (Twitter) Instagram YouTube
    • About Us
    • Privacy Policy
    • Return and Refund Policy
    • Terms and Conditions
    • Contact Us
    • Buy me a coffee
    © 2025 Coding Stella. Made with 💙 by @coding.stella

    Type above and press Enter to search. Press Esc to cancel.

    Ad Blocker Enabled!
    Ad Blocker Enabled!
    Looks like you're using an ad blocker. We rely on advertising to help fund our site.
    Okay! I understood