creocodigo
Random Password Generator using javaScript

Random Password Generator using javaScript

Shikhar Baniya's photo
Shikhar Baniya
·

3 min read

Hello Coders! Welcome to another JavaScript Blog. In this, we're going to see how to create a Random Password Generator using JavaScript. This comes under the mini-project series which teach you various DOM Manipulation and String manipulation. This project also comes in handy while deciding a password for any signup purpose. The password will contain symbols, number and alphabets(Uppercase and Lowercase).

Here's a preview -

screen-capture_1.gif

That being said, let us get started.

Step - 1: Like always, create 3 files - index.html, style.css and script.js.

Step - 2: Copy the below HTML code and paste it into your code editor.

HTML

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Random Password Generator</title>
  <link rel="stylesheet" href="./style.css">

</head>
<body>

<div class="container">
    <div class="text">Random Password Generator</div>
    <div class="input-data">
      <div class="display">
        <input type="text">
        <span class="far fa-copy" onclick="copy()"></span>
        <span class="fas fa-copy" onclick="copy()"></span>
      </div>
      <button>Generate Password</button>
    </div>
  </div>
</body>


  <script  src="./script.js"></script>

</body>
</html>

Step - 3: Below is the CSS code for styling.

CSS

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
html,body{
  display: grid;
  height: 100%;
  place-items: center;
  background: #f6f7fc;
  text-align: center;
}
.container{
  width: 450px;
  background: #111;
  border: 1px solid #444;
  border-radius: 20px;
  box-shadow: 2px 31px 35px -15px rgba(0,0,0,0.64);
  padding: 20px 25px;
}
.container .text{
  color: #ccc;
  font-weight: 600;
  font-size: 26px;
  line-height: 35px;
}
.container .input-data{
  margin: 20px 5px 15px 5px;
}
.input-data .display{
  height: 45px;
  width: 100%;
  display: flex;
  position: relative;
}
.input-data .display input{
  height: 100%;
  width: 100%;
  outline: none;
  color: #eee;
  border: 1px solid #333;
  background: #222;
  padding: 10px;
  font-size: 17px;
  pointer-events: none;
  user-select: none;
}
.input-data .display span{
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 25px;
  color: grey;
  z-index: 999;
  display: none;
  cursor: pointer;
}
.input-data button{
  display: block;
  height: 45px;
  width: 100%;
  margin-top: 15px;
  border: 1px solid #444;
  outline: none;
  background: #1b1b1b;
  color: #999;
  font-size: 17px;
  font-weight: 500;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s ease;
}
.input-data button:hover{
  background: #222;
}

Step - 4: Below is the JavaScript code which is the most important part in this Password Generator. It has a variable chars which is basically a string containing all the characters like number, symbols and alphabets. Whenever we click the "Generate Password" button, it will call a function which will generate combination of characters using Math.floor() and Math.random() methods and then display it on the screen. This also contains the functionality of copy function. Let's see the code.

JS


const display = document.querySelector("input"),
  button = document.querySelector("button"),
  copyBtn = document.querySelector("span.far"),
  copyActive = document.querySelector("span.fas");
let chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$%^&*()_+~`|}{[]:;?><,./-=";
button.onclick = () => {
  let i,
    randomPassword = "";
  copyBtn.style.display = "block";
  copyActive.style.display = "none";
  for (i = 0; i < 16; i++) {
    randomPassword = randomPassword + chars.charAt(
      Math.floor(Math.random() * chars.length)
    );
  }
  display.value = randomPassword;
}
function copy() {
  copyBtn.style.display = "none";
  copyActive.style.display = "block";
  display.select();
  document.execCommand("copy");
}

And that's it. You're done.

Let me know in the comments if you have any doubt related to this.

Follow @creocodigo for more projects and web related content.

If you find this useful, below are some other posts that I am sure you'll love.

CSSJavaScriptprojectswebdevWeb Development