HTML Password Generator

By Srihariharasudhan V,

Security is an important aspect in today's world. To ensure security you need to have a strong password and this website provides that strong password. length >= 8 is advisable.

CODE EXPLANATION:

HTML:

link rel="stylesheet" type="text/css" href="pass.css"

This line links the external Cascading Style Sheet pass.css to the html file.

div class="passgen"
input type="number" id="len"
input type="button" id="btn" onclick="generate()" value="GENERATE"
input type="text" id="password"

div tag takes up a amount of space where the the length of password is received from user and the password of the specified length will be generated.

the input type number only gets the length of password in the numerical value.

the next input type is button when pressed a password of the specified length is generated.

the next input type is password to display the password that is generated.

JAVASCRIPT:

function generate()

var text ="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*";
var pass="";
var length= document.getElementById("len").value;
for(var i=0;i<length;i++)

pass +=text.charAt(Math.floor(Math.random() * text.length));

document.getElementById("password").value = pass;

the javascript function generate generates the password.
all the necessary chacaracters along with numbers and special characters are stored in a text variable to make the password strong special characters and numericals are added.
the length of password is stored in the variable length.

the for loop runs for as many times as the length specified by user and for each time its run an random character from the variable text is chosen and the password is displayed in the password element.

Math.random()- invokes random number
Math.floor()- takes the floor value of the numerical.

CSS:

body
{
background-color:gray;
background-image: url("bw.jpg");
background-repeat: no-repeat;
background-size: cover;
}

the background coloris set to gray.
background image is the image that is going to appear as background.
the background repeat is set to no and background size is cover.

.passgen{
width: 320px;
height: 320px;
background: black;
color: #fff;
top: 50%;
left: 50%;
position: absolute;
transform: translate(-50%,-50%);
box-sizing: border-box;
padding: 30px 30px;
}

passgen is the classname of the div tag.
the width and height of the space that its gonna take is set. #fff-light shades of gray. the position that its suited from the place top and left is set to 50%. the position is absolute. The transform property applies a 2D or 3D transformation to an element.
The box-sizing property allows us to include the padding and border in an element's total width and height. If you set box-sizing: border-box; on an element, padding and border are included in the width and height.

.passgen input[type="button"]
{
border: none;
outline:none;
height: 30px;
background: #fb2525;
color:#fff;
font-size: 15px;
border-radius:20px;
}

the above parameters are set for the button element.
.passgen input[type="button"]:hover
{
cursor:pointer;
backgroound: #ffc107;
color: #8b0000;
}
button:hover indicates that whenever the user moves the mouse over the button the cursor changes from arrow to pointer and the color is changed to dark red(#8b0000).