Build Your Own Password Generator Easy HTML, CSS, & JavaScript Tutorial

Published on May 4, 2024

Welcome to our YouTube tutorial on creating a simple password generator using HTML, CSS, and JavaScript. In this video, we’ll walk you through the process step by step, making it easy for you to follow along and create your own password generator.

HTML

Let’s start by taking a look at the HTML code. Here, we have the basic structure of our web page. The <!DOCTYPE html> declaration tells the browser that this is an HTML5 document.

In the <head> section, we have the character set defined as UTF-8 to ensure proper encoding of our content. The viewport meta tag is set to control the layout on different devices. We’ve also included a title for our webpage, which is “Password Generator”.

Moving on to the body of our HTML document, we have everything contained within a <div> element with the class “container” for styling purposes.

Inside the container, we have the main content of our password generator. We have a heading <h1> titled “Password Generator” to give users a clear understanding of the purpose of this page.

Below the heading, we have a form where users can input their preferences for the generated password. The first form group consists of a label “Password Length” followed by an input field of type number with the id “length”. Users can specify the length of the password they want, with a minimum of 6 characters and a maximum of 20 characters, set by the min and max attributes.

Next, we have another form group with a label “Include Symbols” followed by a checkbox input with the id “includeSymbols”. Users can choose whether they want to include symbols in their generated password by checking this box.

Moving on, we have two buttons: “Generate Password” and “Copy to Clipboard”. The “Generate Password” button, with the id “generator”, triggers the JavaScript function to generate the password based on the user’s input. The “Copy to Clipboard” button, with the id “copy”, allows users to copy the generated password to their clipboard for easy access.

Finally, we have a textarea element with the id “password” where the generated password will be displayed. This field is set to readonly so that users cannot edit the password directly but can still select and copy it.

CSS

Starting with the body selector, we’re setting the font family to Arial or sans-serif as a fallback. We’re also removing any default margins and padding and setting the background colour to a soft greenish-blue shade to create a pleasant backdrop for our generator.

Moving on to the .container class, we’re defining the maximum width of our container to 440 pixels and centering it on the page using auto margins. We’ve added some padding to give our content some breathing room, and the background colour is a light grey for contrast. The border-radius creates rounded corners, and the box-shadow adds a subtle depth effect.

Inside the container, the .cont class is responsible for styling the form groups. We’re using flexbox to align items horizontally with space between them, giving our form a balanced layout.

The .form-group class further styles the individual form elements. Again, we’re using flexbox to centre the items horizontally with a small gap between them for better spacing.

The h1 selector styles the heading “Password Generator”. It’s centred on the page with a bottom margin for spacing and coloured in a dark grey shade for contrast against the light background.

Labels for form elements are styled to have a larger font size, semi-bold weight, and dark grey colour for better readability.

Input fields are given padding for spacing, centred text alignment, and no border to keep the design clean and minimalistic.

When an input field is focused, it gains a thin outline in the soft greenish-blue colour to indicate focus without being too intrusive.

Checkboxes are customised to have a smaller size, hidden default appearance, and a custom outline for better styling. When checked, they adopt the same background colour as the container for visual feedback.

Moving to the .buttons class, we’re using flexbox to evenly space our buttons horizontally for a balanced layout.

Buttons are styled with padding, a medium font size, bold weight, rounded corners, and a cursor pointer to indicate interactivity. The background colour is the same as the container’s background colour for consistency, and the text colour is white for contrast.

On hover, buttons change their background colour to a slightly darker shade for a subtle visual effect.

The .pass class styles the password field, centering it within its container.

The password field has padding, a border, and rounded corners for styling. It’s set to a soft greenish-blue background colour with dark grey text for contrast. The font size is larger and bold to make the password stand out.

When focused, the password field loses its border and gains an outline to indicate focus without disrupting the design.

JAVASCRIPT

Starting with the document ready function, this ensures that our JavaScript code only runs once the HTML document is fully loaded and ready for manipulation.

When the “Generate Password” button with the id “generator” is clicked, this event listener triggers. It retrieves the length of the password and whether symbols should be included from the input fields. Then, it calls the generatePassword function with these parameters, generates a password, and displays it in the password field. Additionally, it enables the “Copy to Clipboard” button.

Next, we have an event listener for the “Copy to Clipboard” button with the id “copy”. When clicked, it selects the text in the password field, copies it to the clipboard using document.execCommand(“copy”), and displays an alert confirming that the password has been copied.

The generatePassword function takes two parameters: the length of the password and whether symbols should be included. It initialises a charset containing lowercase and uppercase letters and numbers. If symbols are included, it appends special characters to the charset. Then, it generates a random password by looping through the charset and appending random characters until reaching the specified length.

And that wraps up our JavaScript code, empowering our password generator with essential functionality. Now, users can effortlessly generate secure passwords with a simple click. In the upcoming segments of this tutorial series, we’ll delve deeper into refining our password generator, unlocking even more features and capabilities. So, make sure to stay tuned for the next instalment!

Our Latest Blog

Build Strong Front-End Skills with the LSET Angular Developer Exam

Build Strong Front-End Skills with the LSET Angular Developer Exam

In today’s fast-paced digital world, front-end development is a crucial skill for building dynamic and...
Read More
Get Expert Help Anytime with HyperLearn from LSET

Get Expert Help Anytime with HyperLearn from LSET

Learning to code or solving technical challenges doesn’t have to be a lonely and frustrating...
Read More
Transform Your Coding Journey with HyperLearn by LSET

Transform Your Coding Journey with HyperLearn by LSET

In today’s fast-paced tech landscape, staying ahead in coding and software development is essential for...
Read More