Simple Random Password Generator using JavaScript

Simple Random Password Generator using JavaScript

JavaScript Random Password Generator will help you to easily create random passwords. Although this type of project is not used much. 

However, this type of Random Password Generator JavaScript will help you to know more about JavaScript. This is a Random Password Generator so the password cannot be customized here. 


Before that, I shared a tutorial on Advanced Password Generator. If you want to customize the password then you can watch that tutorial.

Random Password Generator JavaScript

Here you can create a password with a single click. If you are a beginner and want to create a password generator using just a little bit of JavaScript then this random password generator tutorial will help you completely.

Below is a demo section that will help you get a preview of this project. However, I have shared all the step-by-step tutorials here.

See the Pen Untitled by Foolish Developer (@foolishdevweb) on CodePen.


As you can see above, a box has been created at the top of the webpage. At the top of the box is a display that is made using input. 

Then there is a button. Clicking on that button will generate a password. All design work is done by HTML and CSS. JavaScript Help to activate this JavaScript Password Generator.

How to Generate Random Password in Javascript

Hope you enjoyed the above preview and would like to create this Random Password Generator using JavaScript. 

Of course, this requires you to have a basic idea about JavaScript. Below the article is a button to download the code that you can use.

1. Basic structure of Password Generator

Using the following HTML and CSS codes, we first created a box in which all the information can be found.


<div class="container">
 
</div>

I have designed the HTML page using the following CSS code. The blue color is used in the background of the page here.


* {
margin: 0;
padding: 0;
border: none;
outline: none;
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
}

html,
body {
height: 100%;
}

body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: "Open Sans", sans-serif;
background: #1767f6;
}

Now the basic design of the box has been done. White color and max-width: 26rem is used in the background of the box.


.container{
background: white;
max-width: 26rem;
padding: 16px;
}


Basic structure of Password Generator

2. Create a display using input

Now created a display using HTML's input function. Calculated passwords can be found in this display.


<input type="text" placeholder=" " disabled>


input {
font-family: "Open Sans", sans-serif;
font-size: 19px;
color: #0fbb2c;
background: transparent;
padding: 1rem 1.2rem;
min-width: 24rem;
border-radius: 0.2rem;
border: 3px solid #085cdb;
transition: border-color 0.2s;
}

Create a display using input

3. Button to generate password

Now I have created a button that will generate the password. For this button, I have used the button function of Simple's HTML.


<button> Generate Password </button>


button {
font-family: inherit;
font-weight: inherit;
font-size: 20px;
user-select: none;
margin-top: 1.2rem;
padding: 1rem 1.2rem;
min-width: 24rem;
border-radius: 0.2rem;
background: #194667;
color: #ffffff;
transition: opacity 0.2s;
}

button:hover {
cursor: pointer;
opacity: 0.6;
}

Button to generate password

4. Activate Password Generator with JavaScript

Now you need to use some JavaScript to activate this Random Password Generator. First, the constant of some HTML functions is determined. 

Here the constant of the display and the button is determined. Because I can't use any HTML element directly in JavaScript. So we need to determine a global constant.


const input = document.querySelector("input");
const button = document.querySelector("button");

Now I have implemented it using some JavaScript. I have given the necessary explanation for each line. Hopefully, the explanations will help you understand the JavaScript lines below.


function GeneratePassword(length = 16) {

  //These characters are used to generate the password @type {String}

  const charset =
    "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789@#$";

  let password = "";

   //Running the for loop x times

   //x = length

   //using ++ in front of i to increase the i value before the block gets executed

   //the first character would be always a (0)

  for (let i = 0; i < length; ++i) {
 
     //Generating a random number
     //between 0 and the charset length to get a random character from the whole string @type {Number}

    let at = Math.floor(Math.random() * (charset.length + 1));

    //Getting a random char from the charset and append it to the password variable

    password += charset.charAt(at);
  }

  //returning the password

  return password;
}

//Generate a random password on button click and set it as value of the input

button.addEventListener("click", () => {
  input.value = GeneratePassword(16);
});


Password Generator with JavaScript

Random Password Generator (Source Code)

If you only want the source code then there is no reason to worry. Below I have given a box containing all the source code to create this JavaScript Random Password Generator. 

You must first create an HTML file. Then add those codes to your HTML file. Here all the code is assembled together. 

As a result, you do not have to create a separate file. Just add these codes by creating an HTML file.

See the Pen Untitled by Foolish Developer (@foolishdevweb) on CodePen.

But if you only want to download the code, you can use the download button below. Clicking on that button will download the code of the Random Password Generator directly. Please comment on how you like this Password Generator.






Comments

Post a Comment

Tell me what you think ??😎

Popular posts from this blog

Splash Image Mask Using HTML and CSS (Free Code)

Image
Here you will learn how to create Splash Image Mask using HTML CSS . The CSS mask image is a kind of simple design where there will be a background color on the image.  Some parts of that background will be transparent. As a result, we get to see some of the images in the background. You can use this CSS Splash Image Mask in any background image.  Here I used HTML in Aklin which added image. Then I designed it with CSS. You can use this CSS mask background image in the background of any project. Below is a preview that will help you to know how this Splash Image Mask CSS was created. See the Pen Splash Image Mask using Html CSS by Shantanu Jana ( @shantanu-jana ) on CodePen . Here HTML and CSS are used to create this CSS mask-image property . For this, you create an HTML and CSS file.  Copy all the code given below and add it to your file. Or use the download button at the bottom of the article to download the code for this Splash Image Mask . HTML Code: The following
Read more

Simple Day Night Toggle Button Using HTML and CSS

Image
Day-Night Toggle Button is a common web element that is often found on websites. This Day Night Toggle Switch in the navigation bar helps to choose the dark and light theme of the website. Currently, the Day And Night Toggle Switch can be seen on almost all major websites starting from Facebook and Instagram. Demo Download This article will help you to know step by step how to create Day Night Toggle Button using CSS . This type of CSS Toggle Button is used to create HTML checkboxes . Here's how to easily create a Toggle Switch using the checkboxes. CSS Day Night Toggle Button Although there are many such tutorials on the Internet. But here I will tell you how to make Day Night Toggle Button and how to implement it in your project. A check box was first created using HTML input to create this button. Then that checkbox is shaped like a button by CSS. To make CSS Day Night Toggle Switch you must have some idea about HTML and CSS. This is not the first time I ha
Read more

Simple RGB Color Generator Using JavaScript & CSS

Image
In this article, you will learn how to create RGB Color Generator using JavaScript. Earlier I shared with you the project of different types of JavaScript color generators . Some projects create background colors, some gradient colors, and some generate random colors.  Using this simple RGB Color Generator you can manually generate RGB color . It is much more modern and professional than other color generators. Here you can mix different colors together and create gradients.  This JavaScript RGB Color Generator project has various control buttons. With the help of which you can create gradients by adding colors in different ways.  JavaScript RGB Color Generator Many times I use different applications or websites to create my gradient color . In that case, such a project will help you. You can get the required code of the color you have created from here. Which you can copy directly and use as CSS code. Below I have given a demo that will help you to know how this project (RGB Color
Read more