Secure Password Maker Using JavaScript with Simple Code Guide

Google Advertisement

Learn how to create a random password generator using JavaScript with easy-to-understand code examples and explanations. Perfect for beginners!

Published on 21 May 2025

🔐 Create a Random Password Generator using JavaScript

In today's digital world, using strong and unique passwords is very important to protect your online accounts. In this tutorial, we’ll build a random password generator using JavaScript. This will help you generate secure passwords with just one click!

🔥 Read with Full Features on Our Website

Whether you’re a beginner or brushing up your JavaScript skills, this simple project will help you understand core concepts like arrays, functions, event handling, and randomization.

✅ What We’ll Build

A web app that:

Lets users choose password length
Optionally includes uppercase letters, lowercase letters, numbers, and symbols
Generates a secure, random password when a button is clicked

🧱 Step-by-Step Guide

1. 🖼️ Create the HTML Structure

Google Advertisement

Let’s start with a basic layout:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Random Password Generator</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <h1>Password Generator</h1>

    <label>Password Length:
      <input type="number" id="length" min="4" max="32" value="12">
    </label>

    <label><input type="checkbox" id="uppercase" checked> Include Uppercase Letters</label>
    <label><input type="checkbox" id="lowercase" checked> Include Lowercase Letters</label>
    <label><input type="checkbox" id="numbers" checked> Include Numbers</label>
    <label><input type="checkbox" id="symbols" checked> Include Symbols</label>

    <button onclick="generatePassword()">Generate Password</button>

    <input type="text" id="password" readonly placeholder="Your Password Will Appear Here">
  </div>

  <script src="script.js"></script>
</body>
</html>

What it does:

Has options to select password length and types of characters.
A button to generate the password.
An input box to display the result.

2. 🎨 Add CSS for Styling (Optional but Recommended)

/* style.css */
body {
  font-family: Arial, sans-serif;
  background: #f5f5f5;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.container {
  background: white;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  width: 300px;
}

h1 {
  text-align: center;
  margin-bottom: 20px;
}

label {
  display: block;
  margin: 10px 0;
}

input[type="text"] {
  width: 100%;
  padding: 10px;
  margin-top: 15px;
  font-size: 16px;
}

button {
  width: 100%;
  padding: 10px;
  background: #007bff;
  color: white;
  border: none;
  margin-top: 15px;
  cursor: pointer;
  font-size: 16px;
}

3. 🧠 JavaScript Logic (Main Functionality)

// script.js

function generatePassword() {
  const length = document.getElementById('length').value;
  const includeUpper = document.getElementById('uppercase').checked;
  const includeLower = document.getElementById('lowercase').checked;
  const includeNumbers = document.getElementById('numbers').checked;
  const includeSymbols = document.getElementById('symbols').checked;

  const upperCaseChars = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
  const lowerCaseChars = "abcdefghijklmnopqrstuvwxyz";
  const numberChars = "0123456789";
  const symbolChars = "!@#$%^&*()_+[]{}<>?/";

  let allChars = "";
  let password = "";

  // Combine selected character sets
  if (includeUpper) allChars += upperCaseChars;
  if (includeLower) allChars += lowerCaseChars;
  if (includeNumbers) allChars += numberChars;
  if (includeSymbols) allChars += symbolChars;

  if (allChars === "") {
    alert("Please select at least one option!");
    return;
  }

  // Create the password
  for (let i = 0; i < length; i++) {
    const randomIndex = Math.floor(Math.random() * allChars.length);
    password += allChars[randomIndex];
  }

  document.getElementById("password").value = password;
}

🧾 Code Explanation (Step by Step)

Step 1: Get User Input

This gets the number of characters the user wants in the password.

Step 2: Check Which Options Are Selected

Checks whether the checkbox for uppercase letters is ticked.

Step 3: Define Character Sets

These strings are the sources of characters for your password.

Step 4: Build a Pool of All Allowed Characters

Google Advertisement

If the user has selected uppercase, it adds those characters to the pool.

Step 5: Generate Random Characters

Selects random characters one by one from the pool and adds them to the password.

Step 6: Display the Password

Puts the generated password into the text box.

💡 Final Result

Once everything is set up, open your HTML file in a browser. You’ll see a neat password generator interface where you can:

Choose the length of the password
Select what types of characters to include
Click a button and instantly get a secure, random password!

🎁 Bonus Tip

Google Advertisement

You can even add a “Copy to Clipboard” button using:

📌 Conclusion

You’ve just created a fully functional random password generator using just HTML, CSS, and JavaScript! This is a perfect beginner project to improve your web development skills and understand how real-world apps work.

Keep experimenting by adding more features like:

Strength indicator
Auto copy button
Dark mode switch

Google Advertisement

Secure Password Maker Using JavaScript with Simple Code Guide

🔐 Create a Random Password Generator using JavaScript

✅ What We’ll Build

🧱 Step-by-Step Guide

1. 🖼️ Create the HTML Structure

What it does:

2. 🎨 Add CSS for Styling (Optional but Recommended)

3. 🧠 JavaScript Logic (Main Functionality)

🧾 Code Explanation (Step by Step)

Step 1: Get User Input

Step 2: Check Which Options Are Selected

Step 3: Define Character Sets

Step 4: Build a Pool of All Allowed Characters

Step 5: Generate Random Characters

Step 6: Display the Password

💡 Final Result

🎁 Bonus Tip

📌 Conclusion

Recommended Posts

भारत में कोरोना अपडेट 25 मई 2025: 257 सक्रिय मामले, नए वैरिएंट की पहचान, लक्षण हल्के

Build a Simple Quiz App Using JavaScript – Step-by-Step Guide for Beginners

Sucess Story : राजस्थान के मयंक पुरोहित ने देश में रचा इतिहास, आईएफएस परीक्षा पहले ही प्रयास में हासिल की सातवीं रैंक

Easily Create Dark and Light Mode with localStorage in JavaScript

Secure Password Maker Using JavaScript with Simple Code Guide

कौन हैं Banu Mushtaq, जिनकी शॉर्ट स्टोरी कलेक्शन ‘Heart Lamp’ को मिला International Booker Prize