source
Welcome back, in my last post you saw how to create a page and add styling to it internally, In this post we'll talk about the JavaScript aspect where we are making a random password generator. Below is our full code now with JavaScript added.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Password generator</title>
<style>
*{
margin: 0px;
padding: 0px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif
}
body{
max-width:960px;
margin: auto;
word-spacing: 6px;
text-align: center;
padding: 0px 20px;
}
p{
line-height: 30px;
padding-top: 20px;
}
form{
margin-top: 30px;
}
input[type="text"]{
background: white;
color: gray;
padding: 10px;
border: 2px solid crimson;
border-radius: 6px;
cursor: text;
width: auto;
}
button{
color: white;
background-color: crimson;
border: none;
border-radius: 6px;
padding: 7px;
font-size: 20px;
}
button:hover{
color: crimson;
color: white;
}
</style>
</head>
<body>
(html comment removed: -HTML code goes here)
<h1>Password Generator</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur et atque odio odit perferendis! Ad sequi distinctio quam eaque ab? Quis beatae reprehenderit consequatur odit corporis a numquam qui aliquam?</p>
<div>
<form>
Password: <input type="text" name="password" id="password" value="" disabled>
<button type="button" id="button">Get password</button>
</form>
<p id="output"></p>
</div>
<script>
// list of characters in an array
var characters=["A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z","a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z",1,2,3,4,5,6,7,8,9,0,];
//pick a random character in array and return it
function randomCharacter(){
var character=characters[Math.floor(Math.random()*characters.length)]
return character;
}
// password stored here;
var password="";
// Event listener for button
document.getElementById("button").addEventListener("click", function makePassword(){
var numbers=prompt("input password length");
password="";
for(var i=1; i<=numbers; i++){
password=password+randomCharacter();
}
// print password to console
console.log(password);
// displaying password in input box
input=document.getElementById("password");
input.value=password;
// refreshing the password
document.getElementById("button").innerHTML="Change Password";
// showing the password in the document
document.getElementById("output").innerHTML="Your password is "+numbers+" characters long:"+" "+password;
});
</script>
</body>
</html>
Now you should notice that contents have been added inside our <script></script> tags, you'll probably wonder why i added the JavaScript at bottom of the document, That's because a a browser runs an HTML document from the top first and if we add our JS(short term for JavaScript) at the top, there will just be an error because some of the things we told the browser to look out for in our code have not been seen yet so the code might just crash because for there error. It is always a good practice to link JS as the bottom of the page except a specific script is needed for other JavaScript to run so in that case we can make an exception and link it at the top between the <head></head> tags.
What exactly does our JavaScript do?
I'm going to be explaining our JavaScript code step by step.
- In our code, You'll see where i commented
// list of characters in an array, That line of code contains an array with all the alphabets and letters in it, You'll notice that in the array there's uppercase letters, lowercase letters and numbers, and every element in an array has an index number starting from zero that we can use to access them. - Next we make a function that can randomly pick from our array and return that character.
- Then i create a variable to store our password after it has been created so that we can call our password anytime using the variable name.
- After all that i added an Even Listener to actually do something once a user clicks a button, When you read through that line you'll see that the event i added was "click" i.e when the user clicks the get password button, Then the code will do something because of the function i added after the click event. The name of the function
makePassword()first of all asks how long your password should be using thepromptkeyword and then we save it to a variable called numbers. Next we make afor loopto count from one to the number you put into the prompt box. This serves as the length of the password, In the loop we write a code to call the function that picks a random number and returns it, This line now adds every character returned to the password variable. - The next code prints the password to the console(this is where we know if there is something wrong with our code), For instance if you had put a letter inside the box in the console is where you'd have seen the error in our code.
- After that we write code to start displaying the password on the page, where you see the comments
// displaying the password in input box, The lines of code there selects the value input box on the page and changes it to the password. - The next segment is to change the password assuming you want to create a shorter or longer password.
- The last line of code displays the password on the page as a text for you to see clearly and copy.
And now you've got a working password generator using JavaScript, I've uploaded the project on Github here in case you've got some modifications of your own or you want to implement it in your own project. Also please leave a comment below, i would love your feedback.
Go to my previous post here