PASSWORD GENERATOR SCRIPT

by29 Earn And Learn -
0

 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;
}

Post a Comment

Previous Post Next Post