Crafting Strong Passwords: A Simple HTML, CSS, and JavaScript

Welcome to the realm of password security! In this guide, we’ll take you through the process of creating a user-friendly password validation system using just three essential files: HTML, CSS, and JavaScript. Our objective is to make the process simple, interactive, and visually appealing, ensuring that users can create strong and secure passwords effortlessly.

Setting the Stage: HTML Structure

Our HTML provides the foundational structure for our password validation system. Let’s take a closer look:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8" />
    <title>Password Validation Check</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css"
    />
  </head>
  <body>
    <div class="password-container">
      <div class="password-field">
        <input type="password" placeholder="Create password" />
        <i class="fa-solid fa-eye"></i>
      </div>
      <div class="content">
        <p>Password must contain</p>
        <ul class="requirement-list">
          <li>
            <i class="fa-solid fa-circle"></i>
            <span>At least 8 characters length</span>
          </li>
          <li>
            <i class="fa-solid fa-circle"></i>
            <span>At least 1 number (0...9)</span>
          </li>
          <li>
            <i class="fa-solid fa-circle"></i>
            <span>At least 1 lowercase letter (a...z)</span>
          </li>
          <li>
            <i class="fa-solid fa-circle"></i>
            <span>At least 1 special symbol (!...$)</span>
          </li>
          <li>
            <i class="fa-solid fa-circle"></i>
            <span>At least 1 uppercase letter (A...Z)</span>
          </li>
        </ul>
      </div>
    </div>
  </body>
</html>

HTML

Styling for User-Friendly Design: CSS Magic

Now, let’s add some visual appeal using CSS:

@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@500&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Outfit", sans-serif;
}
body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background-color: #1e1d29;
}
.password-container {
  width: 450px;
  overflow: hidden;
  padding: 28px;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06);
}
.password-container .password-field {
  height: 65px;
  width: 100%;
  position: relative;
}
.password-field input {
  width: 100%;
  height: 100%;
  outline: none;
  padding: 0 17px;
  font-size: 1.3rem;
  border-radius: 5px;
  border: 1px solid #999;
}
.password-field input:focus {
  padding: 0 16px;
  border: 2px solid #4285f4;
}
.password-field i {
  right: 18px;
  top: 50%;
  font-size: 1.2rem;
  color: #999;
  cursor: pointer;
  position: absolute;
  transform: translateY(-50%);
}
.password-container .content {
  margin: 20px 0 10px;
}
.content p {
  color: #333;
  font-size: 1.3rem;
}
.content .requirement-list {
  margin-top: 20px;
}
.requirement-list li {
  font-size: 1.3rem;
  list-style: none;
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}
.requirement-list li i {
  width: 20px;
  color: #aaa;
  font-size: 0.6rem;
}
.requirement-list li.valid i {
  font-size: 1.2rem;
  color: #4285f4;
}
.requirement-list li span {
  margin-left: 12px;
  color: #333;
}
.requirement-list li.valid span {
  color: #999;
}

@media screen and (max-width: 500px) {
  body,
  .password-container {
    padding: 15px;
  }
  .password-container .password-field {
    height: 55px;
  }
  .password-field input,
  .content p {
    font-size: 1.15rem;
  }
  .password-field i,
  .requirement-list li {
    font-size: 1.1rem;
  }
  .requirement-list li span {
    margin-left: 7px;
  }
}

CSS

Real-Time Validation: JavaScript Magic

Our JavaScript script will provide real-time feedback on password strength:

const passwordInput = document.querySelector(".password-field input");
const eyeIcon = document.querySelector(".password-field i");
const requirementList = document.querySelectorAll(".requirement-list li");

const requirements = [
  { regex: /.{8,}/, index: 0 }, // Minimum of 8 characters
  { regex: /[0-9]/, index: 1 }, // At least one number
  { regex: /[a-z]/, index: 2 }, // At least one lowercase letter
  { regex: /[^A-Za-z0-9]/, index: 3 }, // At least one special character
  { regex: /[A-Z]/, index: 4 }, // At least one uppercase letter
];
passwordInput.addEventListener("keyup", (e) => {
  requirements.forEach((item) => {
    const isValid = item.regex.test(e.target.value);
    const requirementItem = requirementList[item.index];
    if (isValid) {
      requirementItem.classList.add("valid");
      requirementItem.firstElementChild.className = "fa-solid fa-check";
    } else {
      requirementItem.classList.remove("valid");
      requirementItem.firstElementChild.className = "fa-solid fa-circle";
    }
  });
});

eyeIcon.addEventListener("click", () => {
  passwordInput.type =
    passwordInput.type === "password" ? "text" : "password";
  eyeIcon.className = `fa-solid fa-eye${
    passwordInput.type === "password" ? "" : "-slash"
  }`;
});

JavaScript

Breaking Down the Magic

HTML Structure: Sets up a clean and user-friendly interface with a password input field and a dynamic requirements list.

CSS Styling: Enhances the visual appeal, ensuring a responsive design for various devices.

JavaScript Validation: Provides real-time feedback on password requirements, guiding users to create strong passwords.

Real-Time Validation Explained

Our JavaScript code dynamically checks the entered password against specified criteria. Each criterion is represented by an item in the requirements array, containing a regular expression to validate a specific aspect of the password. As users type, the script evaluates and updates the UI to reflect whether each requirement is met.

Styling the User Experience

The CSS styles contribute to the overall user experience. The chosen color scheme, font, and layout make the password creation process visually engaging. The responsive design ensures that the experience is seamless across various devices.

Testing Your Creation

Open the HTML file in your preferred web browser.
Enter different passwords in the input field.
Observe the real-time feedback on the password requirements.

Conclusion: Secure and Stylish

Congratulations! You’ve just crafted a simple yet effective password validation system. This combination of HTML, CSS, and JavaScript not only ensures the security of user passwords but also provides a visually appealing and user-friendly experience.

Feel free to integrate this system into your web projects and share the knowledge of creating strong and secure passwords with your users.

Happy Coding!