HomeCSSPassword Strength Background

Password Strength Background

Introduction:

In today’s tutorial, we will learn how to create an interactive password strength meter using HTML, CSS, and JavaScript. This project will not only enhance your web development skills but also provide a practical and visually appealing user experience. We’ll guide you through each step, and you can also watch the video tutorial on our YouTube channel for a visual walkthrough.

Things You Will Learn:

By following this tutorial, you will gain knowledge and experience in the following areas:

  • HTML: You’ll create the structure of the password strength meter interface using HTML.
  • CSS: You’ll style the HTML elements to make the meter visually engaging.
  • JavaScript: You’ll implement the logic for the password strength meter to update dynamically as the user types.

Video Tutorial:

Here is the video tutorial for this project. If you like the tutorial subscribe to my YouTube channel. I post new projects based on HTML, CSS, and Javascript on my channel regularly.

Project Folder Structure:

Before we start coding we take a look at the project folder structure. We start by creating a folder called – ”Password Strength Background”. Inside this folder, we have 3 files. These files are :

  • index.html
  • style.css
  • script.js
  • background image

HTML:

We begin with the HTML code. Copy the code below and paste it into your HTML document.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Password Strength Background</title>
    <!-- Google Fonts -->
    <link
      href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap"
      rel="stylesheet"
    />
    <!-- Stylesheet -->
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="background" id="background"></div>
    <div class="input-container">
      <h1>Image Password Strength</h1>
      <div class="input-box">
        <label for="password">Password</label>
        <input type="password" id="password" placeholder="Enter Password" />
      </div>
    </div>

    <!-- Script -->
    <script src="script.js"></script>
  </body>
</html>

 

CSS:

Next, we style our game using CSS. For this copy, the code provided to you below and paste it into your stylesheet.

body {
  margin: 0;
  padding: 0;
  font-family: "Poppins", sans-serif;
  overflow: hidden;
}
.input-container {
  display: flex;
  flex-direction: column;
  place-items: center;
  background-color: #ffffff;
  width: min(90%, 500px);
  position: absolute;
  transform: translate(-50%, -50%);
  padding: 3em 0;
  top: 50%;
  left: 50%;
  border-radius: 1em;
}
input {
  border: 1px solid black;
  padding: 0.5em;
  border-radius: 0.2em;
}
.background {
  background: url(sunflowers-bg.jpg) no-repeat center;
  background-size: cover;
  height: 100vh;
  width: 100vw;
  position: absolute;
  z-index: -1;
  filter: blur(30px);
}

 

JS:

Finally, we add functionality using Javascript. For this once again copy the code below and paste it into your script file.

const password = document.getElementById("password");
const background = document.getElementById("background");
password.addEventListener("input", () => {
  const input = password.value;
  const blurValue = 16 - input.length;
  background.style.filter = `blur(${blurValue}px)`;
});

 

Conclusion:

Congratulations! You’ve successfully created an interactive password strength meter using HTML, CSS, and JavaScript. Users can now see the background blur change as they type their password, giving them a visual indicator of their password’s strength.

Previous articleImage Accordion
Next articleStacked Photo Carousel
RELATED ARTICLES

3 COMMENTS

LEAVE A REPLY

Please enter your comment!
Please enter your name here

seven + three =

Most Popular

Dynamic color changer

Fruit Fall Game Javascript

Butterfly CSS Art