Security comes to our mind when we hear the word password, but do we take any steps for proper security. Let's face it, creating a strong password is a pain. Do you want something that will generate passwords for you in a secure and unpredictable way? Then today's tutorial is for you.
Most of us use "password123" or "Phone number", which provide very weak security. But what if there was a way to avoid the headache and get a great password with just one click? So let's create a random password generator, using HTML, CSS, and a little JS.
Please note that a strong password alone does not provide you with complete security. Along with providing a strong password, you must enable "2 step verification" and other security features, which will provide you with proper security.
HTML:
We will first start by creating a div element, its class name will be "container". And like the class name, this will be the main container. Inside this container we have created a heading using h2 tag, and this heading is "Random Password Generator". Then we will create an input element with id "length" below the h2 tag and inside the main container. With the help of this input we will set the length of the password, that is, how many characters the password will be generated. So we have set the type of this input to number, along with the default value to 12 and the minimum, maximum values to 4, 32.
To create a password, we need to call javascript, so we need a button. For this we have created a buuton element named "Generate" and set the attribute generatePassword() function of the HTML onclick event. As a result, when the user clicks this button, the function called "generatePassword" in javascript will run and create a password in the background. But just creating a password will not work, we need to display it. So we will again create an input element with an id of "password" whose type will be text and set the readonly attribute, which will destroy the ability to type from the element. Then we will end our html coding by setting the placeholder attribute of this input element with "Your password will appear here".
<div class="container">
<h2>Random Password Generator</h2>
<input type="number" id="length" value="12" min="4" max="32">
<button onclick="generatePassword()">Generate</button>
<input type="text" id="password" readonly="" placeholder="Your password will appear here">
</div>
Stylesheet (CSS):
setup the bodyFirst we will do some basic settings for the document body, such as centering our main container. We have used a simple flexbox method to center the main container. You can read more about the flexbox method here.
Almost all web applications have a writing style that helps users understand clearly. So we will set the font-family css property to "Arial" and the default to "sans-serif". And to make the container stand out in the middle of the screen, we set the body background color to hex code #8282ff.
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
font-family: Arial, sans-serif;
background-color: #8282ff;
}
Next, we'll style the main container where everything will happen, i.e. it will be the main and only box. We'll give it a clean white background so that it stands out nicely against the page. To make the content inside look comfortable and well-spaced, we'll add some padding, its value is 30px vertically and 40px horizontally.
We've also rounded the corners of the container slightly by setting the border-radius CSS property to 12px, which gives it a smooth look. For a subtle 3D effect, we'll apply a gentle box-shadow CSS property so that it rises slightly above the background and the interface feels less flat.
Finally, we use the center-align css property for all text inside the container to keep everything organized and easy to read. We'll limit the width of the container to a maximum of 400px so that it doesn't stretch too much on large screens and the design stays clean and focused.
.container {
background-color: white;
padding: 30px 40px;
border-radius: 12px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
text-align: center;
max-width: 400px;
}
Are you interested in CSS art? Cat Animation using HTML and CSSstyling the title
Now, let's style the title inside our container. We want the title to have some breathing room, so we add a margin-bottom of 20 pixels. This creates space between the title and the elements below it, making the layout look well structured.
For the text color, we use dark gray (hex code #333) instead of pure black. This makes the title easier on the eyes while still keeping it readable.
h2 {
margin-bottom: 20px;
color: #333;
}
We will style the number input field, where the user will specify the desired password length. First, we add 10px of padding so that are easy to read and click.
Then we set the width to 80px, which gives the user enough room to comfortably enter the numbers without making the input too big. To leave some space between the input and the side button, we apply a margin-right css property of 10px. For the border, we use a light gray color (hex code #ddd) with a 1px solid line, which gives the input a clear outline.
We also add a small border-radius css property of 6px to give the input rounded corners, which makes the design more friendly. Finally, we set the font-size css property to 1em so that the numbers are easily readable.
input[type="number"] {
padding: 10px;
width: 80px;
margin-right: 10px;
border: 1px solid #ddd;
border-radius: 6px;
font-size: 1em;
}
let us style the Generate button, which the user clicks to create a new password. We start by adding 10px of vertical padding and 20px of horizontal padding, so that the button is easy to click and looks nicely proportioned.
The background color is set to a bright blue (hex code #007bff), which gives the button an attractive look, while the text color is set to white to ensure easy readability.
We remove the default border by setting the border CSS property to none for a clean look. To also keep the button accessible, we add a border-radius CSS property of 6px, which gives the button rounded corners. The font size is set to 1em to match the rest of the text in the box, which makes everything look consistent.
For ease of use, we change the cursor to a pointer when the user hovers over the button, which provides a clear visual indication that it is clickable.
Before we finish styling the button, we add a smooth transition effect(0.3 seconds) to the background color so that when the user hovers over the button, the color slowly changes to dark blue (hex code #0056b3).
button {
padding: 10px 20px;
background-color: #007bff;
color: white;
border: none;
border-radius: 6px;
font-size: 1em;
cursor: pointer;
transition: background-color 0.3s ease;
}
button:hover {
background-color: #0056b3;
}
Finally, let's style the password output field, where the generated password is displayed. We add a 20px margin-top to create some space between the button and the password field. We then use a 10px padding so that the displayed password doesn't get squeezed. The width is set to 100%, which causes the input field to stretch across the entire width of the container, making it easy to see the entire password without it feeling small.
To keep the text readable, we set the font size to 1em, which matches the style of the rest of the container. The border is light gray (hex code #ddd) and a 1px solid line, which gives the field a subtle outline. We also apply a border-radius CSS property of 6px, which gives it rounded corners.
#password {
margin-top: 20px;
padding: 10px;
width: 100%;
font-size: 1em;
border: 1px solid #ddd;
border-radius: 6px;
text-align: center;
}
Javascript:
create the functionNow the most important thing is to generate a random password every time the user clicks the button. If you understand how this JavaScript works? Then it will not be difficult to create a random property in your web project in the future, so let's start with the Javascript function.
First we create a function called generatePassword() and inside the function, we set a constant variable called length. We get the value of length using document.getElementById('length').value, which holds the number that the user entered in the number input field. This tells us how many characters the generated password should have.
Next, we created another constant called characters. This is a long string that contains all the possible characters that we want in our password. Such as uppercase letters (A-Z), lowercase letters (a-z), numbers (0-9), and special characters like !@#$%^&*.,;/[]().
function generatePassword() {
const length = document.getElementById('length').value;
const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*,./;";[]()';
let password = '';
for (let i = 0; i < length; i++) {
const randomIndex = Math.floor(Math.random() * characters.length);
password += characters[randomIndex];
}
document.getElementById('password').value = password;
}
Then, we created a variable called password and set it to an empty string. This will save the generated password as it is generated character by character. Now, how do we generate random characters? We will use a for loop that runs exactly length times (depending on the number the user types in the length input element).
Inside this for loop, we calculate a random number using Math.floor(Math.random() * characters.length which gives us a random index from 0 to the total number of characters available.
Then we add the character at that random position to the password variable. In this way, one character at a time, our password grows until it reaches the desired length. And finally, we display the generated password in HTML.
Are you interested in CSS art? CSS Pig Drawing | CSS Art
Today we are ending the Random Password Generator tutorial here, and if you have any questions about the Random Password Generator, you can share your feelings in the comments. You can follow our YouTube channel to get more updates about the CODEHEMU tutorial. I ended the tutorial by saying Nomoskar to the you.
Post a Comment