n this step-by-step tutorial, we’ll guide you through the process of creating a sophisticated password generator using HTML, CSS, and JavaScript. This sleek design incorporates the Poppins font and a dark color scheme for a clean and modern aesthetic.
The generator allows users to easily adjust password length with a slider and provides a convenient copy button for quick access to generated passwords.
Key Features
1. Intuitive Interface
The HTML structure ensures an organized and intuitive interface. Users can effortlessly navigate through the password generation process with clearly defined sections.
2. Modern Styling with Google Fonts
Leveraging the Poppins font from Google Fonts adds a touch of modernity to the design, enhancing readability and visual appeal.
3. Adjustable Password Length
The password length slider empowers users to customize the generated passwords according to their security needs, providing flexibility and control.
4. Clipboard Copy Functionality
The copy button, represented by a sleek icon, facilitates seamless copying of generated passwords to the clipboard, streamlining the user experience.
HTML Structure
Let’s start by examining the HTML structure. The document is well-organized with key elements like the password input field, the length-adjustable slider, and a button to trigger password generation.
htmlCopy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css" />
</head>
<body>
<div class="container">
<h3>Password Generator</h3>
<div class="password-field">
<input type="text" disabled>
<i class="uil uil-copy copy-icon"></i>
</div>
<div class="slider">
<input type="range" value="5", min="3", max="18">
<span class="range-value">6</span>
</div>
<div class="button"><button>Generate Password</button></div>
</div>
<script src="script.js"></script>
</body>
</html>CSS Styling
Moving on to the CSS styling, we’ll explore the use of Google Fonts for a modern look and establish a dark-themed container with rounded corners and subtle shadows. The styles ensure a visually appealing and user-friendly interface.
cssCopy code
/* Google Fonts - Poppins */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
:root{
--mainColor: rgb(244, 146, 0);
}
body{
background: rgb(254, 254, 254);
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container{
background: rgb(71, 71, 71);
width: 480px;
border-radius: 10px;
padding: 17px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}
.container h3{
padding: 10px;
/* padding-top: 10px; */
font-size: 25px;
color: white;
text-align: center;
border-bottom: 1px solid rgb(193, 193, 193);
}
.container .password-field{
margin-top: 13px;
display: flex;
justify-content: center;
position: relative;
}
.container .password-field i{
position: absolute;
font-size: 28px;
top: 30px;
right: 50px;
cursor: pointer;
}
.container .password-field input{
margin: 25px;
width: 80%;
height: 56px;
border: 1px solid rgb(193, 193, 193);
border-radius: 8px;
padding: 15px;
font-size: 17px;
background-color: white;
}
.slider{
display: flex;
justify-content: center;
gap: 10px;
}
.slider input{
width: 75%;
color: black;
}
.slider span{
font-size: 18px;
color: white;
}
.button{
display: flex;
justify-content: center;
margin: 20px;
}
.button button{
width: 80%;
height: 50px;
font-size: 17px;
background: white;
color: black;
border-radius: 10px;
border: none;
cursor: pointer;
transition: all 0.6s ease;
}
.button button:hover{
background: rgb(237, 237, 237);
}
input[type="range"] {
accent-color: white;
}
JavaScript Functionality
Now, let’s dive into the JavaScript functionality. The script handles the generation of random passwords, allows for easy copying to the clipboard, and dynamically updates the password length based on the slider’s position.
const inputBox = document.querySelector(".password-field input");
const slider = document.querySelector(".slider input");
const sliderValue = document.querySelector(".range-value")
const generateButton = document.querySelector(".button button");
const copyIcon = document.querySelector(".password-field i");
let allCharacters = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789^!$%&|[](){}:;.,*+-#@<>~";
const generatePassword = () =>{
let newPassword = "";
for (let index = 0; index < slider.value; index++) {
let randomNumbers = Math.floor(Math.random() * allCharacters.length);
newPassword += allCharacters[randomNumbers];
}
inputBox.value = newPassword;
}
copyIcon.addEventListener("click", ()=>{
navigator.clipboard.writeText(inputBox.value);
copyIcon.classList.replace("uil-copy","uil-file-check-alt");
setTimeout(() => {
copyIcon.classList.replace("uil-file-check-alt","uil-copy");
}, 1000);
})
generateButton.addEventListener("click", ()=>{
generatePassword();
});
slider.addEventListener("input",() =>{
sliderValue.innerHTML = `${slider.value}`
generatePassword();
})
generatePassword();
Conclusion
This tutorial provides a comprehensive guide to building a stylish and functional password generator. Whether you’re a beginner or an experienced developer, the combination of HTML, CSS, and JavaScript creates an elegant and user-friendly web application.
By incorporating key features such as an intuitive interface, adjustable password length, and clipboard copy functionality, this generator offers a seamless experience for users seeking secure and personalized passwords.
Feel free to customize the design and functionality to suit your preferences, and enjoy the process of creating a tool that combines both style and substance.
