 |
| Password Generator using HTML CSS JS |
In this article, we given a Password Generator using HTML CSS JS as a project. Password Generator is used to generate the random and safe password that can't easily understand and better for security. In this project, we created a password generator using html css and javascript. It contains the uppercases, lowercases, numbers and symbols, so user can add them to make a secure password.
So, Must try this project for practice and use in vs code to check how it works. We have given a complete source code of Password Generator using HTML CSS JS. Let's go and check the source code as given below -
To add this project in vs code, follow the given process :-
1) Create a New folder in file manager name as - Password-Generator.
2) Open the folder in VS code.
3) Add file name as - index.html and copy the html code as given.
4) Add another file name as - style.css and copy the css code as given.
5) Add next file name as - script.js and copy the javascript code as given.
6) Then run the code or check the preview with code preview extension in vs code.
Password Generator using HTML CSS JS source code
Here we given a html, css and js source code of Password Generator project as given -
HTML
In HTML, we created a structure by adding a area where we added heading, input to show the password, checkboxes for checking the choices for adding uppercases, lowercases, numbers and symbols. Linked css, js file to add styling and functionality to the code. Copy the html code and paste it into index.html file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Password Generator</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>Password Generator</h1>
<div class="password-box">
<input type="text" id="password" readonly>
<button onclick="generatePassword()">Generate Password</button>
</div>
<div class="options">
<label>Password Length:</label>
<input type="number" id="length" min="8" max="20" value="12">
<br>
<div class="checkbox-group">
<input type="checkbox" id="uppercase" checked>
<label for="uppercase">Include Uppercase Letters</label>
<br>
<input type="checkbox" id="lowercase" checked>
<label for="lowercase">Include Lowercase Letters</label>
<br>
<input type="checkbox" id="numbers" checked>
<label for="numbers">Include Numbers</label>
<br>
<input type="checkbox" id="special" checked>
<label for="special">Include Special Characters</label>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>CSS
In css, we added a styling to the structure to make it better for user experience. Added css properties to make it responsive design. Copy the given css code and paste it into style.css file.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: Arial, sans-serif;
background-color: #a3c4ee;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container {
text-align: center;
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 400px;
}
h1 {
color: #333;
margin-bottom: 20px;
}
.password-box {
margin-bottom: 20px;
}
.password-box input {
width: 100%;
padding: 10px;
font-size: 18px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 4px;
}
.password-box button {
width: 100%;
padding: 10px;
font-size: 18px;
cursor: pointer;
background-color: #4c56af;
color: white;
border: none;
border-radius: 4px;
transition: background-color 0.3s ease;
}
.password-box button:hover {
background-color: #3864f5;
}
.options {
text-align: left;
}
.options label {
font-size: 16px;
margin-right: 10px;
}
.options input[type="number"] {
width: 60px;
padding: 5px;
font-size: 16px;
margin-right: 10px;
}
.checkbox-group {
margin-top: 10px;
}
.checkbox-group input[type="checkbox"] {
margin-right: 5px;
}Javascript
In javascript, we added a functionality to generate the password as given conditions like uppercase, lowercase, number and symbols. It helps to generate the password with random() function. Copy the given javascript code and paste it into script.js file.
function generatePassword() {
var length = document.getElementById("length").value;
var uppercase = document.getElementById("uppercase").checked;
var lowercase = document.getElementById("lowercase").checked;
var numbers = document.getElementById("numbers").checked;
var special = document.getElementById("special").checked;
var charset = "";
if (uppercase) charset += "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
if (lowercase) charset += "abcdefghijklmnopqrstuvwxyz";
if (numbers) charset += "0123456789";
if (special) charset += "!@#$%^&*()_+~`|}{[]:;?><,./-=";
var password = "";
for (var i = 0; i < length; i++) {
var randomChar = charset.charAt(Math.floor(Math.random() * charset.length));
password += randomChar;
}
document.getElementById("password").value = password;
}Output
Check this output of Password Generator project -
Also see this -
Hope this helps you to know about Password Generator using HTML CSS JS with source code. If you have any confusion or query then you can contact us on our coding community.
Checkout others projects on our website for more and join our coding community on telegram to get knowledge about coding with proper material such as notes, tutorials, projects and more.
Tags:
projects