Hello readers, Today in this blog you'll learn how to create a Random Password Generator App using HTML CSS & JavaScript. Earlier I have shared a blog on how to check Email Validation using JavaScript. Now it's time to create Random Password Generator.
Random Password Generator is a program that automatically generates a password randomly. Those generated passwords are mix with numbers, alphabets, and punctuations. This type of program helps the user to create a strong password.
Today in this program, I'll share with you this program (Random Password Generator). In this program, there is a container with an input field, a copy icon, and a button. When you click on the generate password button each time this program automatically generated a random password and, there is shown a copy button which copies that generated password when you click on that button.
If you're feeling difficult to understand what I am saying. You can watch a full video tutorial on this program (Random Password Generator).
Video Tutorial of Random Password Generator App
As you have seen, the Random Password Generator Program in the video. This program generates a random password with the help of JavaScript Math.random() random function. Without JavaScript, this program won't generate a random password. And therein video, you have also seen, the copy button which copies generated password. It is possible with the JavaScript document.execCommand("copy").
If you like this program (Random Password Generator) and want to get source codes. You can easily get the source codes of this program. To get the source codes you just need to scroll down.
You might like this:
Random Password Generator App [Source Codes]
As always, before sharing the codes of this program (Random Password Generator). Let's a few talk about the main tags and codes of this program. In the HTML File, first I created <div> with the class name "container" and placed all other tags inside it. Then I created <input> and <button> tag. And remember that I used the font-awesome icon. Before using the font-awesome icon first you need to link the font awesome CDN link in your HTML File. Font Awesome is a website that provides thousands of icons for free.
In the CSS File, first I placed all elements at the center. I used google-font (Poppins) in this program. Then I created a container of specific height-width. After that, I did some styling to the input tag, a copy icon, and, a button. After styling the all elements properly I have hidden the copy button and only show when the user generates a password.
In the JavaScript File, first I called all the required elements or tags using their tag name or class name. Then I created a var with the var name chars and insert all characters inside it. Then I created a onclick function and inside this function, I created a for loop. Inside this loop, I created math.random() function. This function generates random characters each time from our given characters when we click on the button.
After that, using the JavaScript document.execCommand("copy") method I copy the generated password on copy button click.
To create this program (Random Password Generator). First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste these following codes in your file.
CSS FILE:
my thing only works with html lol so i cant style it
ReplyDeleteI didn't understand!
DeleteHi, very nice work. Is there a way to define the length of the passwort? How this should be handled. Thanks and again nice work!
ReplyDeleteYes you can also do this with JavaScript. If you don't know how then contact me on Email - codingnepalweb@gmail.com
DeletePost a Comment
We welcome relevant and respectful comments. Off-topic or spam comments may be removed.