AIM: To make a dynamic password generator using javascript and the basic web technologies(HTML & CSS). This tutorial is targeted towards the beginners who are just learning the language.
For those of us who have no idea what's going on here:
HTML(Hypertext Markup Language) is a language that defines how texts, images, videos and other items on a webpage are arranged on a website.
CSS(Cascading Style Sheets) as the name goes is a document that contains how elements look like on a webpage, this can often be a file located somewhere else (even another website).
JAVASCRIPT(not an acronym :) )Some people might refer to this language as the main language of the web. This is the language that makes a website interactive, for example when you click a button on the page and something pops up from nowhere, JavaScript is responsible for how a website behave and we will be using this very powerful language to create a simple password generator.. So lets's get to it.
- First off we need to create a html document that we can run in the browser to make our JavaScript work, Did i mention that mention that these three languages go hand in hand, In order to get through this tutorial you need to know the basics of HTML and CSS.
Below is a starter template for our HTML, We will be writing our JavaScript inside our HTML document using the <script></script> tags. Why?, well because we can and secondly because this is a very small project so there is no need to make the JavaScript code external. We will also be styling our page internally.
<!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>
</head>
<body>
</body>
</html>
Next we start by filling our code with some HTML.
<!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>
</head>
<body>
<!---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>
</body>
</html>
Now we add some style to beautify our HTML, Don't worry i'll explain later..
<!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 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>
</body>
</html>
Okay so let me explain, The HTML code i added earlier defines what and what is on our page, if you copy that to a text editor and save it as a .html file and open it in a browser, you'll likely see a boring, not so nice looking web page, and after i added the styles for the elements inside the<style></style> tags, when you update your HTML code with the one above you'll see that our web page now looks nice and clean. If you skim through the CSS you'll probably notice that some of the words that appear be for the curly braces are quite similar to the tags in the HTML, well, that' because they are (in a way), these words are called "selectors" and they are used to reach out to a specific HTML tag and apply some styles to them. Magical right?, And now it is time to add the main functionality to our static web page..
Here you've learned how to create the layout of the password generator and add styling to the page, In my next post i'll discuss how to add the JavaScript to handle the password generation. Stay tuned!
Go to my next post here