Hello Future Coders, In this article we are going to learn how to create a random password generator using html, css and javascript. This is going to be a very beginner friendly project. You will be able to build this project by following a step by step video tutorial given below as well as entire source code of this project.
Random Password Generator Using JavaScript | Video Tutorial
Create a Random Password Generator Using HTML, CSS and JavaScript | Source Code
Start by creating three files: index.html, styles.css, script.js
Step 1: Adding HTML
Create a div with id password-container. Inside this create three things. First is an heading, Secondly create a generate password button. When we click on this button, it should generate a new password. Third we will have an input tag where it will display the generated password.
<!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" />
<title>10 Random Password Generator</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div id="password-container">
<h2>Random Password Generator</h2>
<button id="generate-button">Generate Password</button>
<input id="password-input" type="text" readonly />
</div>
<script src="script.js"></script>
</body>
</html>
Step 2: Adding CSS
Refer the below styles to make the project look nice.
body {
background-color: #ebebeb;
max-width: 900px;
margin: 0 auto;
}
#password-container {
text-align: center;
margin: 3.5rem auto;
background-color: #fff;
padding: 2rem;
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}
#generate-button {
padding: 0.5rem 1rem;
font-size: 1rem;
background-color: #4caf50;
color: white;
border: none;
cursor: pointer;
}
#password-input {
width: 10rem;
height: 1rem;
font-size: 1rem;
margin-top: 0.5rem;
padding: 0.5rem;
border: 1px solid #ccc;
border-radius: 0.5rem;
}
Step 3: Adding JavaScript
First lets get all the DOM elements which we are going to use and store them inside generateButton and passwordInput.
Create a function called generatePassword. Inside the function, create a empty variable to hold the password. Another variable called possible to hold all the possible characters that can be added as password.
We will generate a password of length 8. So inside for loop, lets use Math Object to generate a random index and use that index to get character at that index from the possible string and then append it the password variable. Once the loop is complete, add the password to the passwordInput.
Finally now we need to add an event listener to the generateButton for click and call generatePassword function whenever user clicks on the button.
var generateButton = document.querySelector("#generate-button")
var passwordInput = document.querySelector("#password-input")
function generatePassword() {
var password = ""
var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()_+"
for (var i = 0; i < 8; i++) {
password += possible.charAt(Math.floor(Math.random() * possible.length))
}
passwordInput.value = password
}
generateButton.addEventListener("click", generatePassword)
Good! You have completed the project. Also have a look at our other JavaScript Project Tutorials which we have on this website.
