Skip to content

Add a Random Password Generator along with its README.md #25

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Tejas-Santosh-Nalawade merged 1 commit into from
Oct 19, 2025
Merged

Add a Random Password Generator along with its README.md #25

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
65 changes: 65 additions & 0 deletions Domains/Frontend/MiniProjects/RandomPasswordGenrator/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
# 🔐 Secure Password Generator

**Contributor:** [Sanjeev Deori](https://github.com/SanjeevDeori)

## 🧾 Description
A **secure and customizable password generator** web app that helps users create strong passwords for online accounts. Includes options for password length, character types, live strength estimation, and the ability to save passwords locally.

---

## 🚀 Features
- Generate passwords of user-defined length
- Include options for:
- Uppercase letters (A–Z)
- Lowercase letters (a–z)
- Numbers (0–9)
- Symbols (!@#$%^&*)
- Copy password to clipboard
- Display password strength visually
- Save generated passwords locally
- Responsive layout for desktop and mobile

---

## 💡 Bonus Features
- Dark/Light mode toggle
- Save passwords with custom labels
- Manage saved passwords: Copy, Use, Delete
- LocalStorage-backed saved password list

---

## 🧩 Tech Stack
- **HTML5** – Structure and layout
- **CSS3** – Styling, responsiveness, and dark/light theme
- **JavaScript (Vanilla)** – Password generation logic, clipboard functionality, localStorage

---

## 🕹️ How to Use
1. Open `index.html` in your browser.
2. Select the desired password length and character options.
3. Click **Generate** to create a new password.
4. Use the **Copy** button to copy it to the clipboard.
5. Optionally, save the password with a label using the **Save** button.
6. View, use, or delete saved passwords in the saved passwords section.

---

## 📸 Screenshots
*(Add screenshots or GIFs here to showcase the UI, dark/light mode, and saved passwords feature.)*

---

## 🏗️ Setup & Run Locally
1. Clone the repository:
```bash
git clone https://github.com/SanjeevDeori/password-generator.git

2. Open the project folder:
```bash

cd password-generator


3. Open index.html in your browser to use the app.
78 changes: 78 additions & 0 deletions Domains/Frontend/MiniProjects/RandomPasswordGenrator/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,78 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Password Generator</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<main class="container" id="app">
<header class="header">
<h1>Secure Password Generator</h1>
<div class="controls-header">
<label class="theme-toggle">
<input type="checkbox" id="themeToggle" />
<span>Dark</span>
</label>
</div>
</header>

<section class="generator card" aria-labelledby="generator-heading">
<h2 id="generator-heading">Create a password</h2>

<div class="output-row">
<input id="passwordOutput" class="password-output" readonly aria-label="Generated password" />
<div class="output-actions">
<button id="copyBtn" class="btn small" title="Copy password">Copy</button>
<button id="saveBtn" class="btn small" title="Save password">Save</button>
</div>
</div>

<div class="controls">
<div class="control">
<label for="lengthRange">Length: <span id="lengthValue">16</span></label>
<input id="lengthRange" type="range" min="6" max="64" value="16" />
</div>

<fieldset class="checkboxes" aria-label="Password options">
<legend>Include</legend>
<label><input type="checkbox" id="upper" checked /> Uppercase (A–Z)</label>
<label><input type="checkbox" id="lower" checked /> Lowercase (a–z)</label>
<label><input type="checkbox" id="numbers" checked /> Numbers (0–9)</label>
<label><input type="checkbox" id="symbols" checked /> Symbols (!@#...)</label>
</fieldset>

<div class="control">
<button id="generateBtn" class="btn primary">Generate</button>
</div>

<div class="meter-row">
<div class="strength-meter" aria-hidden="true">
<div id="meterFill" class="meter-fill"></div>
</div>
<div id="strengthLabel" class="strength-label">—</div>
</div>
</div>
</section>

<section class="saved card" aria-labelledby="saved-heading">
<h2 id="saved-heading">Saved Passwords</h2>
<form id="saveForm" class="save-form" aria-label="Save password">
<input id="saveLabel" type="text" placeholder="Label (e.g., Gmail account)" />
<button id="saveSubmit" class="btn">Save Current</button>
</form>
<ul id="savedList" class="saved-list" aria-live="polite"></ul>
<div class="saved-actions">
<button id="clearAllBtn" class="btn danger">Clear All</button>
</div>
</section>

<footer class="footer">
<small>Built with ❤️ • HTML • CSS • JavaScript</small>
</footer>
</main>

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