Random Password Generator Using Html, CSS, And Javascript

Random Password Generator Using Html, CSS, And Javascript

Random Password Generator Using HTML, CSS, and Javascript– A password generator is a program that creates passwords for you automatically. Letters, digits, and symbols make up the passwords that are produced. This program assists the user in creating a strong password that is difficult to guess or brute-force.

Random Password Generator is a JavaScript project that can automatically generate secure and unique passwords. A header or title has been utilized. The password can be generated in the input box below the title.

After that, I created buttons to generate the password. Each time you click the Generate button, the unit password will be generated.

We’ll learn how to create a random password generator application using HTML, CSS, and JavaScript in this tutorial.

So Let’s get started. To begin, you must first build an HTML and CSS file.

Random Password Generator Using Html, CSS, And Javascript

See the Pen Random Password Generator by Kundan Kumar (@ambmlipr-the-bold) on CodePen.

You may also like:

Step 1: Make index.html File

First of all, you want to make a file index.html

<!DOCTYPE html>
<html lang="en">

    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Random Password Generator | JS</title>
    <link rel="stylesheet" href="style.css">

    <div class="inputBox">
        <h2>Random <span>Password Generator</span> App</h2>
        <input type="text" placeholder="Create Password" id="password" readonly="">
        <button id="btn" onclick="GetPassword()">
            Generator Password
    <script src="app.js"></script>


Step 2:  Make a File of Style.css

After making the style.css file then paste the code from below.

* {
  margin: 0;
  padding: 0;
  font-family: Consolas, Arial, Helvetica, sans-serif;
  user-select: none;

body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fddbcd;

.inputBox {
  position: relative;
  width: 460px;

.inputBox h2 {
  font-size: 30px;
  color: black;
span {
  color: #ed7966;
  text-shadow: 1.5px 1.5px rgb(51, 51, 51);

::placeholder {
  color: #0000003f;

.inputBox input {
  position: relative;
  width: 100%;
  height: 60px;
  border: none;
  margin: 15px 0 10px;
  background: transparent;
  outline: none;
  padding: 0px 20px;
  font-size: 25px;
  letter-spacing: 4px;
  box-sizing: border-box;
  border-radius: 8px;
  color: #141850;
  box-shadow: -4px -4px 10px #00000042, inset 4px 4px 10px rgb(0, 0, 0, 0.07);
.inputBox input ::placeholder {
  letter-spacing: 0;

button {
  position: relative;
  cursor: pointer;
  color: #fae5df;
  background-color: #303179;
  font-size: 24px;
  display: inline-block;
  padding: 10px 15px;
  border-radius: 8px;

.inputBox #btn:active {
  background-color: #141850;
  transform: scale(0.98);

Step 3: Make a File of app.js

After making HTML and CSS files you need to make JS (Javascript) File To implement an Auto-generate password.

function GetPassword() {
    const chars =
        "[email protected]#$%&*()_+?><:{}[]'";

    let passwordlenght = 16
    let password = '';

    for (let i = 0; i < passwordlenght; i++) {
        let randomNumber = Math.floor(Math.random() * chars.length);

        password += chars.substring(randomNumber, randomNumber + 1);
    document.getElementById('password').value = password;


Hopefully, you learned how to construct a Random Password Generator Using Html, CSS, And Javascript from the preceding tutorial. You can look at more designs if you like this one.

If You have any problem then comment down below.


Leave a Reply

Related Posts