Abhishek Gurjar

Posted on Aug 25

Build a Password Generator Website

#html #css #javascript #passwordgenerator

Introduction

Hello, developers! I'm excited to present my latest project: a Password Generator. This tool is designed to help you create secure and random passwords with ease. Whether you need strong passwords for your online accounts or want to practice your JavaScript skills, this Password Generator is a great addition to your toolkit.

Project Overview

The Password Generator is a web-based application that allows users to generate passwords with various configurations. You can customize the password length and include or exclude specific character types like lowercase letters, uppercase letters, numbers, and symbols. This project showcases how to build a dynamic password generator using JavaScript, coupled with a clean and user-friendly interface built with HTML and CSS.

Features

Customizable Password Length: Adjust the length of the generated password using a slider.
Character Type Selection: Choose which types of characters (lowercase, uppercase, numbers, symbols) to include in the password.
Generate and Copy: Generate a random password and easily copy it to your clipboard.

Technologies Used

HTML: Provides the structure and layout for the Password Generator.
CSS: Styles the interface, ensuring a modern and responsive design.
JavaScript: Handles the password generation logic, including user interactions and password copying.

Project Structure

Here's an overview of the project structure:

Password-Generator/
├── index.html
├── style.css
└── script.js

index.html: Contains the HTML structure for the Password Generator.
style.css: Includes CSS styles to create an attractive and responsive design.
script.js: Manages the password generation functionality and user interactions.

Installation

To get started with the project, follow these steps:

Clone the repository:

git clone https://github.com/abhishekgurjar-in/Password-Generator.git

Open the project directory:
```
cd Password-Generator
```
Run the project:
- Open the index.html file in a web browser to use the Password Generator.

Usage

Open the website in a web browser.
Adjust the password length using the slider.
Select or deselect the types of characters you want to include.
Generate a password by clicking the "Generate Password" button.
Copy the password to your clipboard by clicking the copy icon.

Code Explanation

HTML

The index.html file defines the structure of the Password Generator, including the input fields, controls, and the display area. Here’s a snippet:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <link
      href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet"
    />
    <script src="script.js" defer></script>
    <title>Password Generator</title>
  </head>
  <body>
    <div class="container">
      <h1>Password Generator</h1>

      <div class="inputBox">
        <input type="text" class="passBox" id="passBox" disabled />
        <span class="material-icons" id="copyIcon">content_copy</span>
      </div>

      <input type="range" min="1" max="30" value="8" id="inputSlider" />

      <div class="row">
        <p>Password Length</p>
        <span id="sliderValue"></span>
      </div>

      <div class="row">
        <label for="lowercase">Include Lowercase Letters (a-z)</label>
        <input type="checkbox" name="lowercase" id="lowercase" checked/>
      </div>

      <div class="row">
        <label for="uppercase">Include Uppercase Letters (A-Z)</label>
        <input type="checkbox" name="uppercase" id="uppercase" checked/>
      </div>

      <div class="row">
        <label for="numbers">Include Numbers (0-9)</label>
        <input type="checkbox" name="numbers" id="numbers" checked/>
      </div>

      <div class="row">
        <label for="symbols">Include Symbols (@-*)</label>
        <input type="checkbox" name="symbols" id="symbols" checked/>
      </div>

      <button type="button" class="genBtn" id="genBtn">
        Generate Password
      </button>
    </div>
    <div class="footer">
      <p>Made with ❤️ by Abhishek Gurjar</p>
    </div>
  </body>
</html>

CSS

The style.css file styles the Password Generator, making it visually appealing and responsive. Below are some key styles:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: sans-serif;
}

body {
  max-width: 100vw;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #000;
  color: #fff;
  font-weight: 600;
  flex-direction: column;
}

.container {
  border: 0.5px solid #fff;
  border-radius: 10px;
  padding: 28px 32px;
  display: flex;
  flex-direction: column;
  background: transparent;
  box-shadow: 8px 8px 4px #909090, 8px 8px 0px #575757;
}

.container h1 {
  font-size: 1.4rem;
  margin-block: 8px;
}

.inputBox {
  position: relative;
}

.inputBox span {
  position: absolute;
  top: 16px;
  right: 6px;
  color: #000;
  font-size: 28px;
  cursor: pointer;
  z-index: 2;
}

.passBox {
  background-color: #fff;
  border: none;
  outline: none;
  padding: 10px;
  width: 300px;
  border-radius: 4px;
  font-size: 20px;
  margin-block: 8px;
  text-overflow: ellipsis;
}

.row {
  display: flex;
  margin-block: 8px;
}

.row p, .row label {
  flex-basis: 100%;
  font-size: 18px;
}

.row input[type="checkbox"] {
  width: 20px;
  height: 20px;
}

.genBtn {
  border: none;
  outline: none;
  background-color: #2c619e;
  padding: 12px 24px;
  color: #fff;
  font-size: 18px;
  margin-block: 8px;
  font-weight: 700;
  cursor: pointer;
  border-radius: 4px;
}

.genBtn:hover {
  background-color: #0066ff;
}

.footer {
  color: white;
  margin-top: 150px;
  text-align: center;
}

.footer p {
  font-size: 16px;
  font-weight: 200;
}

JavaScript

The script.js file contains the logic for generating passwords, managing user interactions, and copying passwords to the clipboard. Here's a snippet:

let inputSlider = document.getElementById("inputSlider");
let sliderValue = document.getElementById("sliderValue");
let passBox = document.getElementById("passBox");
let lowercase = document.getElementById("lowercase");
let uppercase = document.getElementById("uppercase");
let numbers = document.getElementById("numbers");
let symbols = document.getElementById("symbols");
let genBtn = document.getElementById("genBtn");
let copyIcon = document.getElementById("copyIcon");

// Showing input slider value 
sliderValue.textContent = inputSlider.value;
inputSlider.addEventListener("input", () => {
  sliderValue.textContent = inputSlider.value;
});

genBtn.addEventListener("click", () => {
  passBox.value = generatePassword();
});

let lowerChars = "abcdefghijklmnopqrstuvwxyz";
let upperChars = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
let allNumbers = "0123456789";
let allSymbols = "~!@#$%^&*";

// Function to generate Password
function generatePassword() {
  let genPassword = "";
  let allChars = "";

  allChars += lowercase.checked ? lowerChars : "";
  allChars += uppercase.checked ? upperChars : "";
  allChars += numbers.checked ? allNumbers : "";
  allChars += symbols.checked ? allSymbols : "";

  if (allChars === "") {
    return genPassword;
  }

  let i = 1;
  while (i <= inputSlider.value) {
    genPassword += allChars.charAt(Math.floor(Math.random() * allChars.length));
    i++;
  }

  return genPassword;
}

copyIcon.addEventListener("click", () => {
  if (passBox.value !== "") {
    navigator.clipboard.writeText(passBox.value);
    copyIcon.innerText = "check";
    copyIcon.title = "Password Copied";

    setTimeout(() => {
      copyIcon.innerHTML = "content_copy";
      copy

Icon.title = "";
    }, 3000);
  }
});

Live Demo

You can check out the live demo of the Password Generator project here.

Conclusion

Creating the Password Generator was an enjoyable project that allowed me to apply my front-end development skills. This tool is useful for generating strong passwords and can be a great addition to your web development projects. I hope you find it as helpful as I do. Happy coding!

Credits

This project was developed as part of my journey to enhance my JavaScript skills and create practical web tools.

Author

Abhishek Gurjar
- GitHub Profile

Top comments (4)

King Triton • Aug 26

Great

KooiInc • Aug 25

Nice. If you want to check the password strength use kooiinc.github.io/es-web-component...

Puneet-Kumar2010 • Aug 26 • Edited

Great! If you want to create an account using that password 😅...
Then try Lemon Teams It has different services like color palette, lemon library, etc.
you can make your palettes and libraries.
If you want to contribute in Lemon teams: github.com/DeveloperPuneet/Lemon-T...

Mykhailo Toporkov 🇺🇦 • Aug 26

Sooooo, it is password validator??? Correct me if I'm wrong, generator it is something that was started and then works on its own. Like I pressed a button and got a random password.

DEV Community