Password Generator
Password Generator

Hy Everyone, In this tutorial we will create a Password Generator using JavaScript. It is a strong random password generator, which creates a secure password.

Our password generator will contain a password copy box, Password input length selector, and four checkboxes for the need to include uppercase letters, lowercase letters, numbers, and symbols.
Our UI is glassmorphism based, It gives a stunning glass look with beautiful city ocean background scenery.

Random Password Generator

For creating this random password generator we need to create three files called, index.html, style.css, and script.js. Let’s start with our script.js file.

index.html

<!DOCTYPE html>
<head>
  <title>Password Generator</title>
  <link rel="stylesheet" href="style.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/all.min.css">
</head>
<body>
  <!-- INSERT HTML HERE -->
  <div class="container">
    <h2>Password Generator</h2>
    <div class="result-container" onclick="showText()">
      <span id="result"></span>
      <button class="btn" id="clipboard">
        <i class="far fa-clipboard"></i>
      </button>
    </div>
    <div class="settings">
      <div class="setting">
        <label>Password length</label>
        <input type="number" id="length" min='6' max='15' value='15' />
      </div>
      <div class="setting">
        <label>Include uppercase letters</label> 
        <input type="checkbox" id="uppercase" checked />
      </div>
      <div class="setting">
        <label>Include lowercase letters</label> 
        <input type="checkbox" id="lowercase" checked />
      </div>
      <div class="setting">
        <label>Include numbers</label> 
        <input type="checkbox" id="numbers" checked />
      </div>
      <div class="setting">
        <label>Include symbols</label> 
        <input type="checkbox" id="symbols" checked />
      </div>
    </div>
    <button class="btn btn-large" id="generate">
      Generate password
    </button>
    <p class="copiedText " id="copyTxt">Text Copied To Clipboard!</p>
  </div>

  </div>
  <script type="text/javascript" src="script.js"></script>
</body>
</html>


Here we are using two CDNs, one for jQuery and another for our copy icon as Font Awesome.

jQuery CDN

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

Font Awesome icon CDN

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

In the index.html, we are using divs to create the basic structure of our password generator.

style.css

@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');

* {
  box-sizing: border-box;
}

body {
  background-image: url('https://images.unsplash.com/photo-1535320404287-416e2c6d2b41?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8M3x8fGVufDB8fHx8&w=1000&q=80');
  background-repeat: no-repeat;
  background-size: cover;
  color: #fff;
  display: flex;
  font-family: 'Muli', sans-serif;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px;
  min-height: 100vh;
}

p {
  margin: 5px 0;
}

h2 {
  margin: 10px 0 20px;
  text-align: center;
}

input[type=checkbox] {
  margin-right: 0;
}

.container {
  color: #fff;
  margin: 40px auto;
  background-color: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  width: 350px;
  border-radius: 15px;
  padding: 32px;
  backdrop-filter: blur(10px);
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.5);
}

.result-container {
  background-color: rgba(0, 0, 0, 0.4);
  display: flex;
  justify-content: flex-start;
  align-items: center;
  position: relative;
  font-size: 18px;
  letter-spacing: 1px;
  padding: 12px 10px;
  height: 50px;
  width: 100%;
}

.result-container #result {
    word-wrap: break-word;
  max-width: calc(100% - 40px);
}

#length{
  width: 40px;
  padding: 3px;
  border: 0px;
  color: black;
}

.result-container .btn {
  font-size: 20px;
  position: absolute;
  height: 50px;
  top: 0;
  right: 0;
  width: 100%;
  text-align: right;
}

.btn {
  border: none;
  color: white;
  cursor: pointer;
  font-size: 16px;
  padding: 8px 12px;
  background-color: transparent;
}

.btn-large {
  display: block;
  width: 100%;
  color: white;
  background-color: rgba(255, 255, 255, 0.2);
}

.btn-large:hover{
  background-color: rgba(0, 0, 0, 0.1);
}

.setting {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 15px 0;
}

.copiedText{
  opacity: 0;
  color: white;
  text-align: center;
  margin: auto auto;
  margin-top: 20px;
  font-size: 13px;
  background-color: rgba(0, 0, 0, 0.3);
  padding: 7px 0px;
  width: 70%;
  border-radius: 40px;
}

.active{
  animation: ShowCopyText 2s linear forwards;
}

@keyframes ShowCopyText{
  0%{
    opacity: 0;
  }
  10%{
    opacity: 1;
  }
  90%{
    opacity: 1;
  }
  100%{
    opacity: 0;
  }
}

@media screen and (max-width: 400px) {
  .result-container {
    font-size: 14px;
  }
}


The background image, we have used is taken from Unsplash. Click Here!

.copiedText{
  opacity: 0;
  color: white;
  text-align: center;
  margin: auto auto;
  margin-top: 20px;
  font-size: 13px;
  background-color: rgba(0, 0, 0, 0.3);
  padding: 7px 0px;
  width: 70%;
  border-radius: 40px;
}

.active{
  animation: ShowCopyText 2s linear forwards;
}

@keyframes ShowCopyText{
  0%{
    opacity: 0;
  }
  10%{
    opacity: 1;
  }
  90%{
    opacity: 1;
  }
  100%{
    opacity: 0;
  }
}


When a user clicks on the copy icon, It displays the Copied to clipboard text below the password generator button. That is displayed through this code. When a user clicks the copy button javascript adds a ‘.active’ class to that copy text. Default opacity is 0 when we click it turns into 1 to make it visible for a few seconds then it again turns it into 0 to hide the notification.

Here is all our HTML and CSS is successfully created. Now we need to create our script.js file. Let’s do that!

script.js

const resultEl = document.getElementById('result');
const lengthEl = document.getElementById('length');
const uppercaseEl = document.getElementById('uppercase');
const lowercaseEl = document.getElementById('lowercase');
const numbersEl = document.getElementById('numbers');
const symbolsEl = document.getElementById('symbols');
const generateEl = document.getElementById('generate');
const clipboard = document.getElementById('clipboard');

const randomFunc = {
  lower: getRandomLower,
  upper: getRandomUpper,
  number: getRandomNumber,
  symbol: getRandomSymbol
}

clipboard.addEventListener('click', () => {
  const textarea = document.createElement('textarea');
  const password = resultEl.innerText;
  
  if(!password) { return; }
  
  textarea.value = password;
  document.body.appendChild(textarea);
  textarea.select();
  document.execCommand('copy');
  textarea.remove();
});

generate.addEventListener('click', () => {
  const length = +lengthEl.value;
  const hasLower = lowercaseEl.checked;
  const hasUpper = uppercaseEl.checked;
  const hasNumber = numbersEl.checked;
  const hasSymbol = symbolsEl.checked;
  
  resultEl.innerText = generatePassword(hasLower, hasUpper, hasNumber, hasSymbol, length);
});

function generatePassword(lower, upper, number, symbol, length) {
  let generatedPassword = '';
  const typesCount = lower + upper + number + symbol;
  const typesArr = [{lower}, {upper}, {number}, {symbol}].filter(item => Object.values(item)[0]);
  
  // Doesn't have a selected type
  if(typesCount === 0) {
    return '';
  }
  
  // create a loop
  for(let i=0; i<length; i+=typesCount) {
    typesArr.forEach(type => {
      const funcName = Object.keys(type)[0];
      generatedPassword += randomFunc[funcName]();
    });
  }
  
  const finalPassword = generatedPassword.slice(0, length);
  
  return finalPassword;
}

function getRandomLower() {
  return String.fromCharCode(Math.floor(Math.random() * 26) + 97);
}

function getRandomUpper() {
  return String.fromCharCode(Math.floor(Math.random() * 26) + 65);
}

function getRandomNumber() {
  return +String.fromCharCode(Math.floor(Math.random() * 10) + 48);
}

function getRandomSymbol() {
  const symbols = '[email protected]#$%^&*(){}[]=<>/,.'
  return symbols[Math.floor(Math.random() * symbols.length)];
}

function showText()
{
var header = $('#copyTxt');
header.addClass('active');
setTimeout(function() {
    header.removeClass('active');
}, 2000);
}


Now we will explain the important parts of our code.

function showText()
{
var header = $('#copyTxt');
header.addClass('active');
setTimeout(function() {
    header.removeClass('active');
}, 2000);
}


In this section we are using jQuery, first, we initialized the #copyText to our header variable. So it can do any operation on this specific tag using its id. then we added a class ‘active’ to it with a setTimeout function to remove the ‘active’ class after 2 seconds.

Oh, hi there 👋 It’s nice to meet you.

Sign up to receive awesome content in your inbox, every week.

We don’t spam! Read our privacy policy for more info.

Leave a Reply