Close Menu
    JavaScript

    How to make Password Generator in HTML CSS & JavaScript

    Coding StellaBy Updated:No Comments6 Mins Read

    Let’s make a Password Generator 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 Generator. 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 for a password generator interface. It includes a container with a heading, input fields, a password strength indicator, length options, and checkboxes for password settings. There’s also a button to generate passwords. The document links to an external CSS file for styling and an external JavaScript file for functionality. The fonts “Material Symbols Rounded” and “Montserrat” are imported from Google Fonts.

    <!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Password Generator</title>
  <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200'>
<link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500&amp;display=swap'><link rel="stylesheet" href="./style.css">

</head>
<body>
<!-- partial:index.partial.html -->
<div class="container">
  <h2>Password Generator</h2>
  <div class="wrapper">
    <div class="input-box">
      <input type="text" disabled>
      <span class="material-symbols-rounded">copy_all</span>
    </div>
    <div class="pass-indicator"></div>
    <div class="pass-length">
      <div class="details">
        <label class="title">Password Length</label>
        <span></span>
      </div>
      <input type="range" min="1" max="30" value="15" step="1">
    </div>
    <div class="pass-settings">
      <label class="title">Password Settings</label>
      <ul class="options">
        <li class="option">
          <input type="checkbox" id="lowercase" checked>
          <label for="lowercase">Lowercase (a-z)</label>
        </li>
        <li class="option">
          <input type="checkbox" id="uppercase">
          <label for="uppercase">Uppercase (A-Z)</label>
        </li>
        <li class="option">
          <input type="checkbox" id="numbers">
          <label for="numbers">Numbers (0-9)</label>
        </li>
        <li class="option">
          <input type="checkbox" id="symbols">
          <label for="symbols">Symbols (!-$^+)</label>
        </li>
        <li class="option">
          <input type="checkbox" id="exc-duplicate">
          <label for="exc-duplicate">Exclude Duplicate</label>
        </li>
        <li class="option">
          <input type="checkbox" id="spaces">
          <label for="spaces">Include Spaces</label>
        </li>
      </ul>
    </div>
    <button class="generate-btn">Generate Password</button>
  </div>
</div>
<!-- partial -->
  <script  src="./script.js"></script>

</body>
</html>

    CSS :

    This CSS code styles a password generator interface with a modern look. It uses the “Montserrat” font and a gradient background. Input fields, a password strength indicator, length options, and checkboxes for settings are styled. The generate button has hover and active effects. The design is responsive for smaller screens.

    * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Montserrat", sans-serif;
  color: #fff;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: linear-gradient(180deg, #070807 50%, #dca314 50%);
}

.container {
  width: 430px;
  background: #222;
  border-radius: 7px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
}

.container h2 {
  font-weight: 600;
  font-size: 21px;
  padding: 16px 30px;
  border-bottom: 1px solid #444;
  text-align: center;
}

.wrapper {
  margin: 20px 30px;
}

.input-box {
  position: relative;
}

.input-box input {
  width: 100%;
  height: 53px;
  color: #fff;
  background: none;
  font-size: 17px;
  font-weight: 500;
  border-radius: 4px;
  letter-spacing: 1.4px;
  border: 1px solid #555;
  padding: 0 48px 0 16px;
}

.input-box span {
  position: absolute;
  right: 13px;
  cursor: pointer;
  line-height: 53px;
  color: #aaa;
}

.input-box span:hover {
  color: #4285f4 !important;
}

.pass-indicator {
  width: 100%;
  height: 4px;
  position: relative;
  background: #333;
  margin-top: 12px;
  border-radius: 25px;
}

.pass-indicator::before {
  position: absolute;
  content: "";
  height: 100%;
  width: 0;
  border-radius: inherit;
  transition: width 0.3s ease;
}

.pass-indicator#weak::before {
  width: 20%;
  background: #e64a4a;
}

.pass-indicator#medium::before {
  width: 50%;
  background: #f1c80b;
}

.pass-indicator#strong::before {
  width: 100%;
  background: #27c468;
}

.pass-length {
  margin: 25px 0 20px;
}

.pass-length .details {
  display: flex;
  justify-content: space-between;
}

.pass-length input {
  width: 100%;
  height: 5px;
}

.pass-settings .options {
  display: flex;
  list-style: none;
  flex-wrap: wrap;
  margin-top: 20px;
}

.pass-settings .options .option {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  width: 50%;
}

.options .option:first-child {
  pointer-events: none;
}

.options .option:first-child input {
  opacity: 0.7;
}

.options .option input {
  height: 16px;
  width: 16px;
  cursor: pointer;
}

.options .option label {
  cursor: pointer;
  color: #aaa;
  padding-left: 16px;
}

.generate-btn {
  width: 100%;
  color: #fff;
  border: none;
  outline: none;
  cursor: pointer;
  background: #444;
  font-size: 17px;
  padding: 15px 0;
  border-radius: 5px;
  text-transform: uppercase;
  margin: 15px 0 20px;
  transition: background 0.3s ease, transform 0.2s ease;
}

.generate-btn:hover {
  background: #333;
}

.generate-btn:active {
  transform: scale(0.95);
}

@media (max-width: 768px) {
  .container {
    width: 90%;
  }
}

    JavaScript:

    The provided code is a JavaScript code snippet that creates a password generator functionality. It includes event listeners, functions, and variables to generate a random password based on user-selected options.

    The event listeners are set up to trigger the corresponding functions when certain events occur, such as clicking the copy icon, changing the password length slider, or clicking the generate button.

    Overall, this code provides a functional password generator interface with options for customizing the password length and character types.

    const lengthSlider = document.querySelector(".pass-length input"),
  options = document.querySelectorAll(".option input"),
  copyIcon = document.querySelector(".input-box span"),
  passwordInput = document.querySelector(".input-box input"),
  passIndicator = document.querySelector(".pass-indicator"),
  generateBtn = document.querySelector(".generate-btn");

const characters = {
  lowercase: "abcdefghijklmnopqrstuvwxyz",
  uppercase: "ABCDEFGHIJKLMNOPQRSTUVWXYZ",
  numbers: "0123456789",
  symbols: "^!$%&|[](){}:;.,*+-#@<>~"
};

const generatePassword = () => {
  let staticPassword = "",
    randomPassword = "",
    excludeDuplicate = false,
    passLength = lengthSlider.value;

  options.forEach((option) => {
    if (option.checked) {
      if (option.id !== "exc-duplicate" && option.id !== "spaces") {
        staticPassword += characters[option.id];
      } else if (option.id === "spaces") {
        staticPassword += `  ${staticPassword}  `;
      } else {
        excludeDuplicate = true;
      }
    }
  });

  for (let i = 0; i < passLength; i++) {
    let randomChar =
      staticPassword[Math.floor(Math.random() * staticPassword.length)];
    if (excludeDuplicate) {
      !randomPassword.includes(randomChar) || randomChar == " "
        ? (randomPassword += randomChar)
        : i--;
    } else {
      randomPassword += randomChar;
    }
  }
  passwordInput.value = randomPassword;
};

const updatePassIndicator = () => {
  passIndicator.id =
    lengthSlider.value <= 8
      ? "weak"
      : lengthSlider.value <= 16
      ? "medium"
      : "strong";
};

const updateSlider = () => {
  document.querySelector(".pass-length span").innerText = lengthSlider.value;
  generatePassword();
  updatePassIndicator();
};
updateSlider();

const copyPassword = () => {
  navigator.clipboard.writeText(passwordInput.value);
  copyIcon.innerText = "check";
  copyIcon.style.color = "#4285F4";
  setTimeout(() => {
    copyIcon.innerText = "copy_all";
    copyIcon.style.color = "#707070";
  }, 1500);
};

copyIcon.addEventListener("click", copyPassword);
lengthSlider.addEventListener("input", updateSlider);
generateBtn.addEventListener("click", generatePassword);

    In conclusion, creating a Password Generator 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!

    Share.

    Related Posts

    Add A Comment
    Leave A Reply