Shulou(Shulou.com)06/03 Report--

This article mainly introduces how to use HTML, CSS and JS to make a random password generator. It is very detailed and has a certain reference value. Interested friends must read it!

A random password generator made using HTML, CSS and JavaScript

Written in front of

The random password generator is a simple JavaScript application that automatically generates passwords. This type of application uses a variety of numbers, symbols, letters, and so on to create more complex and more secure passwords.

In this article, I'll show you how to easily build a random password generator system using HTML, CSS, and JavaScript code. I'm not using any JQuery plug-ins or JavaScript libraries here.

However, this is the first time I have made such a random password generator. I use JavaScript's Math.floor and Math.random methods to create it. I added numbers, different symbols and letters to this password. Here we use different types of loops, creating different passwords each time.

As shown in the picture above, I first painted the background of the web page blue. Then I made a small box on that page. First, I added a text to that box. Here is a small display or input that can generate a password. I also made two buttons at the bottom. One of these buttons will generate the password and the other will copy the password.

Here is a live demonstration to help you understand how it works (JavaScript password generator): http://haiyong.site/random-password-generator

You can copy and use this source code in your project. If you are a beginner, you must follow the tutorial below to learn how I make it.

How to build a random password generator

First, you create a HTML file (index.html) and a CSS file (index.css). I didn't create any separate JavaScript files (index.js) here. However, you can create separate JavaScript files as needed.

Step 1: create a box in the web page

This box is created on everyone's first web page. It will be created using the following HTML and CSS code. Here I use the background color of # 0581ca. You can use any other background color if necessary. I use white as the background color of the box. In this case, we do not specify the specific height or size of the box, which will depend on the amount of content.

HTML

CSS

* {margin: 0; padding: 0; user-select: none; box-sizing: border-box;} body {background-color: # 0581ca; justify-content: center; align-items: center; display: flex; min-height: 100vh;} .box {background-color: white; padding-top: 30px; padding: 30px;}

Effect display

Step 2: add heading or title

Now we will add a title to the box. To do this, I used the following HTML and CSS code. I have used the font size of this title as 26px and the color as # 015a96. Use text-align: center to place the text in the middle of the box.

HTML

Sea embrace | Random password Generator

CSS

.box h3 {margin-bottom: 40px; text-align: center; font-size: 26px; color: # 015a96; font-family: sans-serif;}

Effect display

Step 3: create a display using input

I use the input to make a small display that will see the location where a different password is generated each time. I used the height 50px and width 400px of this input. Border-radius: 6px is used to make it slightly round. Border used: border: 2px solid rgb (13,152,245) to make it brighter.

HTML

CSS

Input {padding: 20px; user-select: none; height: 50px; width: 400px; border-radius: 6px; border: none; border: 2px solid rgb (13,152,245); outline: none; font-size: 22px;} input::placeholder {font-size: 23px;}

Effect display:

Step 4: create two buttons using Html and CSS

I made the following two buttons to generate and copy passwords, and set the height of the two buttons to 50px and the width to 150px. Use the background color blue and the text color white. I use margin-left: 85px to create the distance between the two buttons.

HTML

Generate

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.