codemediaweb.com

Code Media

hire me

Simple Password Generator with JavaScript (Free Code)

by

If you want to create Password Generator using JavaScript then this tutorial is for you. Here I will discuss with you what is JavaScript Password Generator and how it is created.

The design I will show you here is a random password generator. In the case of Random Password Generator, you will not be able to customize the password. 

However, it is very difficult to create a project to create a password manually. Here I will tell you everything about how this project creates different passwords each time.

Password Generator with JavaScript
Demo
Download

It has a small display and two buttons that are absolutely simple. One button to generate the password and the other to copy the generated password. Very little JavaScript has been used here. JavaScript uses the Math.random method to create passwords.

Password Generator Using HTML CSS JavaScript

This Simple Password Generator is designed as a neumorphism design. Already using neumorphism design I have created many types of elements.

As you can see I have created a box on the webpage. This box contains the first display in which the generated password can be seen. Then there are the two buttons. The first button will create a different password each time. 

A strong password will be generated automatically whenever you click on the button. It also has a button to copy. When you click on that button, the text or password you see in the display will be copied.

Step 1:

Create a box for Password Generator

Here I have shared a step-by-step tutorial for you. So there is no reason to worry. The possible explanations of each line I have given here. However, if you find it boring to read the tutorial, you can download the source code.

<div class=”form”>
</div>
body {
  font-family: ‘Walter Turncoat’, cursive;
  background: #f2f2f2;
}
.form {
  background: #f2f2f2;
  box-shadow: 0px -6px 10px rgba(255, 255, 255, 14), 0px 1px 15px rgba(0, 0, 0, 0.25);
  border-radius: 10px;
  position: absolute;
  top: 50%;
  left:50%;
  padding: 30px;
  transform: translate(-50%,-50%);
}
Create a box for Password Generator

Step 2:

Password viewing input box

Now a display is created using HTML input. However, you can not input anything in this input. Because “readonly” is used in the input. 

So you can only read the value in the input box. Height: 50px, width: 360px, and in this case the background color is equal to the background color of the webpage.

<input placeholder=”Password” id=”password” readonly>
input {
  font-family: sans-serif;
  background: #f2f2f2;
  height: 50px;
  width: 360px;
  text-align: center;
  box-shadow: 0px -6px 10px rgba(255, 255, 255, 41), 0px 4px 15px rgba(0, 0, 0, 0.25);
  border: none;
  padding: 3px;
  margin-left: 15px;
  border-radius: 10px;
  font-size: 20px;
}
Password viewing input box

Step 3:

Password Generator’s control button

Now two buttons have been created. The first button is for creating a password and the second is for copying. 

The width of this button: 150px, height: 45px has been used and shadow has been used all around. display: flex has been used so the two buttons can be seen side by side. Then the hover effect has been added.

<table>
  <th><div id=”button” onclick=”create()”>Create</div></th>
  <th><a  id=”button” class=”copy” onclick=”copyPass()”>Copy</a></th>
</table>
#button {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  margin-top: 30px;
  background: #f2f2f2;
  box-shadow: 0px -6px 10px rgba(255, 255, 255, 1), 0px 4px 15px rgba(0, 0, 0, 0.25);
  border: none;
  width: 150px;
  height: 45px;
  color: black;
  text-align: center; 
  cursor: pointer;
  border-radius: 10px;
}
#button:hover {
  box-shadow: inset 5px 6px 10px rgba(255, 255, 255, 0.3), 
inset -5px 4px 10px rgba(0, 0, 0, 0.15);
}
.copy {
  margin-left: 85px
}
Password Generator with JavaScript

Step 4:

Password Generator’s JavaScript code

So far we have only designed by HTML and CSS. This Simple Password Generator has not been activated yet. 

Of course, we need to use some JavaScript to activate. First, by some JavaScript, random passwords have been created. Then the copy button is activated using some more code.

var password = document.getElementById(“password”);
function create() {
//Password creation character
  var use = “0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ!@#$%^&*”;
//The length of the password
  var lengthx = 10;
  var password = “”;
  for (var i = 0; i <= lengthx; i++) {
//Math. floor() method rounds a number DOWNWARDS to the nearest integer
    var random = Math.floor(Math.random() * use.length);
//SUBSTRING is a string manipulation function that manipulates all string data types
    password += use.substring(random, random +1);
  }
  document.getElementById(“password”).value = password;
}
//Active copy button
function copyPass() {
  var c = document.getElementById(“password”);
  c.select();
  document.execCommand(“copy”);
}
Simple Password Generator

This JavaScript Password Generator you can use for personal work or any project. Be sure to let us know how you like this Random Password Generator. 

If you know advanced javascript, you can create a customizable password generator from my previous article.

Leave a comment