Yo! what’s up, it’s your boy Tweaks PH here! We’re about to embark on an exciting journey into the world of web development. By the end of this tutorial, you’ll have built a Password Generator website from scratch using HTML, CSS, and JavaScript. Even if you’re new to coding, don’t worry – we’ll break down each step into bite-sized pieces, making it easy for you to follow along and create your very own Password Generator.
Setting Up the HTML Structure
Let’s begin by setting up the basic HTML structure for our Password Generator website. HTML, or Hypertext Markup Language, is the foundation of web pages. It defines the structure and content of a webpage. Here’s what our HTML looks like:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Password Generator</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Password Generator</h1>
<div class="container">
<!-- Password options -->
<label for="length">Password Length:</label>
<input type="number" id="length" min="6" value="12">
<br><br>
<label for="uppercase">Include Uppercase Letters:</label>
<input type="checkbox" id="uppercase" checked>
<br><br>
<label for="numbers">Include Numbers:</label>
<input type="checkbox" id="numbers" checked>
<br><br>
<label for="symbols">Include Symbols:</label>
<input type="checkbox" id="symbols">
<br><br>
<!-- Generate button -->
<button id="generate">Generate Password</button>
<!-- Display generated password -->
<div id="password"></div>
</div>
<script src="script.js"></script>
</body>
</html>
Explanation:
<!DOCTYPE html>: This declaration specifies the document type and version of HTML used in the document.<html lang="en">: The opening<html>tag signifies the beginning of the HTML document. Thelangattribute is set to “en” (English) to indicate the language of the content.<head>: This section contains metadata about the webpage, such as character encoding, viewport settings, and the title that appears in the browser tab.<title>Password Generator</title>: The title element defines the title of the webpage, which is displayed in the browser tab.<link rel="stylesheet" type="text/css" href="style.css">: This line links an external CSS file named “style.css” to style the webpage.<body>: The<body>tag encloses the visible content of the webpage.<h1>Password Generator</h1>: This is the main heading of the webpage.<div class="container">: A<div>element with the class “container” is used to create a container for organizing and styling the content.- Labels and Inputs: These HTML elements allow users to specify password options such as length, inclusion of uppercase letters, numbers, and symbols.
<button id="generate">Generate Password</button>: This button element is used to trigger the password generation process.<div id="password"></div>: This<div>element with the id “password” will display the generated password.<script src="script.js"></script>: This line links an external JavaScript file named “script.js,” which contains the code for generating passwords.
Styling with CSS
Now, let’s make our website visually appealing using CSS (Cascading Style Sheets). CSS allows us to control the layout and design of our webpage. Here’s our CSS code:
CSS:
body {
font-family: Arial, sans-serif;
text-align: center;
}
h1 {
color: #333;
}
.container {
margin: 20px;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
}
label {
font-weight: bold;
}
input[type="number"] {
width: 50px;
}
button {
padding: 10px 20px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
#password {
font-size: 20px;
margin-top: 10px;
word-wrap: break-word;
}
Explanation:
body: Styling for the entire webpage, including font family and text alignment.h1: Styling for the main heading, including text color..container: Styling for the container that holds the password options.label: Styling for labels, making them bold.input[type="number"]: Styling for the number input field, setting its width.button: Styling for the “Generate Password” button, including padding, background color, and cursor style.#password: Styling for the password display area, including font size and margin.
Adding Functionality with JavaScript
Now, let’s make our Password Generator website functional using JavaScript. JavaScript is a powerful programming language that allows us to add interactivity and behavior to web pages. Here’s our JavaScript code:
JS/JAVASCRIPT:
const uppercaseChars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
const lowercaseChars = 'abcdefghijklmnopqrstuvwxyz';
const numberChars = '0123456789';
const symbolChars = '!@#$%^&*()-_+=<>?';
function generatePassword() {
const length = parseInt(document.getElementById('length').value);
const includeUppercase = document.getElementById('uppercase').checked;
const includeNumbers = document.getElementById('numbers').checked;
const includeSymbols = document.getElementById('symbols').checked;
let charset = lowercaseChars;
if (includeUppercase) {
charset += uppercaseChars;
}
if (includeNumbers) {
charset += numberChars;
}
if (includeSymbols) {
charset += symbolChars;
}
let password = '';
for (let i = 0; i < length; i++) {
const randomIndex = Math.floor(Math.random() * charset.length);
password += charset.charAt(randomIndex);
}
document.getElementById('password').textContent = password;
}
document.getElementById('generate').addEventListener('click', generatePassword);
Explanation:
const uppercaseChars,const lowercaseChars,const numberChars,const symbolChars: These constants define character sets for uppercase letters, lowercase letters, numbers, and symbols, which will be used to generate passwords.generatePassword(): This is a JavaScript function that generates passwords based on user preferences.- The function retrieves user input from the HTML elements, such as password length, inclusion of uppercase letters, numbers, and symbols.
- It constructs a character set (
charset) based on user preferences. - Using a loop, the function randomly selects characters from the character set to create a password of the desired length.
- Finally, it displays the generated password on the webpage.
document.getElementById('generate').addEventListener('click', generatePassword);: This code adds an event listener to the “Generate Password” button. When the button is clicked, it triggers thegeneratePassword()function, generating a password and displaying it on the webpage.
Conclusion: You Did It!
Congratulations, you’ve just created your very own Password Generator website using HTML, CSS, and JavaScript! You’ve not only built a functional tool but also gained valuable coding skills along the way.
Now that you have this foundation, feel free to customize and enhance your Password Generator further. You could add more options, improve the user interface, or even deploy it online for others to use.
Remember, the best way to learn coding is by doing, so keep experimenting, building, and exploring. Happy coding, and may your passwords always be strong and secure!
