Password Generator using HTMl | CSS | JS

byAltafAlam Shaikh •
0

 Password Generator using HTMl | CSS | JS

preview

Hello! Let's learn how to make Advance Password generator app using Html, Css and JavaScript.

About project

This app allows you generate secure passwords in just one click. You can choose what you want to include in your password like uppercase, lowercase, numbers and symbols. This app also allows you to select a length of password between 6-32.

Please follow the below code and get stared.

HTML Code 

<!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>Advanced Password Generator</title>

  <!-- font awesome -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" />

  <!-- google font -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">

  <!-- stylesheet -->
  <link rel="stylesheet" href="./style.css">
</head>

<body>
  <div class="container">
    <!-- title -->
    <h1 class="title">
      Password Generator
    </h1>
    <form id="form">

      <div class="password-box box">
        <!-- display password -->
        <input type="text" id="input-password" class="input-password" placeholder="Click Generate" readonly>
        <!-- copy-to-clipboard button -->
        <button type="button" class="btn btn-copy" id="copy-to-clipboard">
          <i class="fa-regular fa-copy"></i>
        </button>
      </div>

      <div class="range-box">
        <h3 class="box-title">Password Length</h3>
        <div class="length-box box">
          <!-- range slider -->
          <input type="range" id="password-length" class="password-length" value="8" min="6" max="32">
          <!-- show password length -->
          <span id="display-length"></span>
        </div>
      </div>

      <div class="settings-box">
        <h3 class="box-title">Settings</h3>
        <div class="includes-box box">
          <!-- uppercase -->
          <div class="uppercase row">
            <input type="checkbox" id="check-ucase" class="checkbox">
            <label for="check-ucase">
              Include Uppercase letters
              <span class="checkmark"></span>
            </label>
          </div>
          <!-- lowercase -->
          <div class="lowercase row">
            <input type="checkbox" id="check-lcase" class="checkbox">
            <label for="check-lcase">
              Include Lowercase letters
              <span class="checkmark"></span>
            </label>
          </div>
          <!-- numbers -->
          <div class="number row">
            <input type="checkbox" id="check-number" class="checkbox">
            <label for="check-number">
              Include Numbers
              <span class="checkmark"></span>
            </label>
          </div>
          <!-- symbols -->
          <div class="uppercase row">
            <input type="checkbox" id="check-symbol" class="checkbox">
            <label for="check-symbol">
              Include Symbols
              <span class="checkmark"></span>
            </label>
          </div>
        </div>
      </div>

      <!-- click to generate button -->
      <div class="button-box">
        <button class="btn btn-generate">
          Generate Password
          <span>
            <i class="fa-solid fa-arrow-right"></i>
          </span>
        </button>
      </div>
    </form>
  </div>

  <!-- javascript -->
  <script src="./app.js"></script>
</body>

</html>

CSS Code 

:root {
  --dark-blue: #15143F;
  --light-blue: #2A2887;
  --white: #fff;

  --border-radius: 10px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  background-image: linear-gradient(90deg, rgb(190, 90, 247), rgb(22, 91, 145));
  color: var(--white);
  font-family: 'Poppins', monospace;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn {
  background: none;
  border: 0;
  outline: 0;
  cursor: pointer;
}

.btn:active {
  transform: scale(.97);
}

.container {
  position: relative;
  width: 450px;
  max-width: 100%;
  background: var(--dark-blue);
  padding: 1.5rem 1rem;
  border-radius: var(--border-radius);
}

.box {
  background: var(--light-blue);
  padding: .6rem;
  border-radius: var(--border-radius);
  margin-bottom: 1.25rem;
}

.box-title {
  font-weight: 100;
  font-size: 1rem;
  margin-bottom: .25rem;
}

.title {
  font-size: 1.5rem;
  margin-bottom: 1.5rem;
}

.password-box {
  width: 100%;
  display: flex;
  align-items: center;
  gap: .6rem;
  height: 64px;
}

.input-password {
  flex: 1;
  background: none;
  border: 0;
  outline: 0;
  font-size: 1rem;
  font-family: 'Poppins', monospace;
  color: var(--white);
}

.btn-copy,
#display-length {
  color: var(--white);
  font-size: 1.25rem;
  background: var(--dark-blue);
  width: 70px;
  height: 100%;
  border-radius: var(--border-radius);
}

/* password length */
.length-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  height: 64px;
}

#display-length {
  display: flex;
  align-items: center;
  justify-content: center;
}

.password-length {
  -webkit-appearance: none;
  flex: 1;
  height: 8px;
  background: var(--dark-blue);
  outline: none;
}

.password-length::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--white);
  cursor: pointer;
}


/* settings */
.settings-box {
  width: 100%;
}

.includes-box .row {
  position: relative;
  display: flex;
  align-items: center;
  padding: 1rem 0;
  border-bottom: 1px solid var(--dark-blue);
}

.row:first-child {
  padding-top: .5rem;
}

.row:last-child {
  border: 0;
  padding-bottom: .5rem;
}

label {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* cutom toggle button */
.checkmark {
  position: relative;
  width: 45px;
  height: 25px;
  display: inline-block;
  background: var(--white);
  border-radius: 30px;
  transition: .25s ease;
}

.checkmark::before {
  position: absolute;
  content: '';
  top: 50%;
  left: 4px;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  background: var(--light-blue);
  border-radius: 50%;
  transition: all .25s ease;
}

.checkbox {
  position: absolute;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.checkbox:checked+label .checkmark {
  background: rgb(37, 187, 213);
}

.checkbox:checked+label .checkmark::before {
  left: 23px;
  background: var(--white);
}

/* generate password button */
.btn-generate {
  background-image: linear-gradient(37deg, rgb(37, 187, 213), rgb(40, 21, 236));
  color: var(--white);
  width: 100%;
  height: 50px;
  border-radius: var(--border-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  font-family: 'Poppins', monospace;
  font-weight: 600;
  font-size: 1rem;
}

.btn-generate:hover {
  border: 2px solid var(--white);
  color: var(--white);
  background: none;
}


JavaScript Code 

// selectors
const sliderEle = document.getElementById('password-length')

const formEle = document.getElementById('form')

const inputEle = document.getElementById('input-password')
const copyEle = document.getElementById('copy-to-clipboard')

const passLengthEle = document.getElementById('password-length')
const upperCaseEle = document.getElementById('check-ucase')
const lowerCaseEle = document.getElementById('check-lcase')
const numberEle = document.getElementById('check-number')
const symbolEle = document.getElementById('check-symbol')

const LOWERCASE_STRING = getCharactersString(97, 122)
const UPPERCASE_STRING = getCharactersString(65, 90)
const NUMBER_STRING = getCharactersString(48, 57)
const SYMBOL_STRING = `!@#$%^&*()_-+={[}]|\:;"'<,>.?/`

// display length onload and on range input
window.addEventListener('DOMContentLoaded', displayLength)
sliderEle.addEventListener('input', displayLength)


function displayLength() {
  document.getElementById('display-length').innerText = sliderEle.value;
}

// action on form submit
formEle.addEventListener('submit', e => {
  e.preventDefault()

  let passwordLength = passLengthEle.value
  let checkedUppercase = upperCaseEle.checked
  let checkedLowercase = lowerCaseEle.checked
  let checkedNumber = numberEle.checked
  let checkedSymbol = symbolEle.checked

  let finalPassword = generatePassword(passwordLength, checkedUppercase, checkedLowercase, checkedNumber, checkedSymbol)

  inputEle.value = finalPassword

})

// get characters string
function getCharactersString(low, high) {
  let string = '';
  for (let i = low; i <= high; i++) {
    string = string.concat(String.fromCharCode(i))
  }

  return string
}

// generate password
function generatePassword(passwordLength, checkedUppercase, checkedLowercase, checkedNumber, checkedSymbol) {
  // show alert if none of the checkboxes is checked
  if (!checkedUppercase && !checkedLowercase && !checkedNumber && !checkedSymbol) {
    alert('Please check atleast one checkbox')
    window.location = '/'
  }

  console.log(checkedUppercase + checkedLowercase + checkedNumber + checkedSymbol)

  let selectedCharacters = ''

  if (checkedUppercase) selectedCharacters = selectedCharacters.concat(UPPERCASE_STRING)
  if (checkedLowercase) selectedCharacters = selectedCharacters.concat(LOWERCASE_STRING)
  if (checkedNumber) selectedCharacters = selectedCharacters.concat(NUMBER_STRING)
  if (checkedSymbol) selectedCharacters = selectedCharacters.concat(SYMBOL_STRING)

  let randomCharacters = ''

  for (let i = 0; i <= passwordLength; i++) {
    randomCharacters = randomCharacters.concat(selectedCharacters.charAt(Math.floor(Math.random() * selectedCharacters.length)))
  }

  return randomCharacters

}

// function copy to clipboard
copyEle.addEventListener('click', () => {
  if (inputEle.value.length != 0) {
    inputEle.select();
    document.execCommand('Copy');
  }
  else
    alert("Password not Generated");
})

Result
result

That is all!! 


Thank you, I hope you find this helpful. Keep learning:)
Tags:
Post a Comment (0)
Previous Post Next Post