HTML:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Random Password Generator</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>Random Password Generator</h1>
<div id="passwordDisplay"></div>
<div id="options">
<label for="length">Password Length:</label>
<input type="range" id="length" min="1" max="100" value="12">
<span id="lengthValue">12</span>
<br>
<span id="passwordLength">Length of Password: <span id="passwordLengthValue">12</span></span>
<br>
<label for="uppercase">Include Uppercase:</label>
<input type="checkbox" id="uppercase">
<br>
<label for="numbers">Include Numbers:</label>
<input type="checkbox" id="numbers">
<br>
<label for="symbols">Include Symbols:</label>
<input type="checkbox" id="symbols">
</div>
<button id="generateButton">Generate Password</button>
</div>
<script src="script.js"></script>
</body>
</html>
CSS:-
body {
font-family: Arial, sans-serif;
text-align: center;
margin: 0;
background-color: #f0f0f0; /* Set a light background color */
background-image: linear-gradient(to bottom, #f0f0f0, #c0c0c0); /* Add a gradient effect */
}
.container {
background-color: #fff; /* Set a white container background */
color: #333; /* Set text color for the container */
padding: 20px;
border-radius: 10px; /* Add rounded corners to the container */
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); /* Add a subtle box shadow */
}
#passwordDisplay {
margin: 20px 0;
padding: 10px;
border: 2px solid #333;
background-color: #ffffff;
text-align: center;
font-size: 20px;
font-weight: bold;
color: #3498db; /* Change color of the generated password */
}
#options {
margin: 20px auto;
width: 80%;
padding: 10px;
border: 2px solid #333;
background-color: #ffffff;
}
button {
padding: 10px 20px;
font-size: 16px;
background-color: #007bff;
color: #fff;
border: none;
cursor: pointer;
border-radius: 4px;
}
input[type="range"] {
width: 80%;
margin: 5px 0;
}
/* Change color of checkbox labels */
label[for="uppercase"], label[for="numbers"], label[for="symbols"] {
color: #3498db;
}
/* Additional styling for the password length */
#passwordLength {
font-size: 12px;
color: #000; /* Set font color to black */
}
/* Rest of the CSS remains unchanged */
Javascript:-
const passwordDisplay = document.getElementById('passwordDisplay');
const generateButton = document.getElementById('generateButton');
const lengthSlider = document.getElementById('length');
const lengthValue = document.getElementById('lengthValue');
const passwordLengthValue = document.getElementById('passwordLengthValue');
lengthSlider.addEventListener('input', () => {
const sliderValue = lengthSlider.value;
lengthValue.textContent = sliderValue;
passwordLengthValue.textContent = sliderValue;
lengthValue.setAttribute('data-length', sliderValue);
});
generateButton.addEventListener('click', () => {
const length = parseInt(lengthSlider.value);
const includeUppercase = document.getElementById('uppercase').checked;
const includeNumbers = document.getElementById('numbers').checked;
const includeSymbols = document.getElementById('symbols').checked;
const password = generatePassword(length, includeUppercase, includeNumbers, includeSymbols);
passwordDisplay.textContent = password;
});
function generatePassword(length, includeUppercase, includeNumbers, includeSymbols) {
const lowercaseChars = "abcdefghijklmnopqrstuvwxyz";
const uppercaseChars = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
const numberChars = "0123456789";
const symbolChars = "!@#$%^&*()_+";
let charset = lowercaseChars;
if (includeUppercase) charset += uppercaseChars;
if (includeNumbers) charset += numberChars;
if (includeSymbols) charset += symbolChars;
let password = '';
for (let i = 0; i < length; i++) {
const randomIndex = Math.floor(Math.random() * charset.length);
password += charset[randomIndex];
}
return password;
}
