Skip to content

Commit 3ecaa4a

Browse files
0xsarwagya0xsarwagya
authored
Merge pull request #13 from gbasset/passWordGenerator
Strong Password generator
2 parents 7456273 + 37e96b5 commit 3ecaa4a

File tree

5 files changed

+399
-0
lines changed

5 files changed

+399
-0
lines changed

‎Password-generator/README.md

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
# Random Password Generator
2+
3+
**A simple and fun project that generates secure random passwords using HTML, CSS, and JavaScript.**
4+
This project allows users to create customized passwords based on selected criteria.
5+
6+
![Password Generator](img.png)
7+
8+
## Features
9+
- **Customizable Password Generation**: Specify the length and character types (uppercase, lowercase, numbers, and symbols) for the password.
10+
- **Dynamic Content**: The generated password is displayed instantly upon creation.
11+
- **Clipboard Functionality**: Easily copy the generated password to your clipboard with a button click.
12+
- **Error Handling**: Alerts the user if there is an attempt to copy an empty password.
13+
14+
## Description
15+
This project provides a user-friendly interface for generating secure passwords. Users can select options for password length and desired character types, including:
16+
- Lowercase letters
17+
- Uppercase letters
18+
- Numbers
19+
- Symbols
20+
- Text
21+
22+
Upon clicking the "Generate Password" button, a new password is created based on the selected options and displayed on the screen. Users can also copy the generated password to their clipboard with a dedicated button, receiving confirmation via an alert.
23+
24+
The project uses:
25+
- **HTML** for structure
26+
- **CSS** for styling and layout
27+
- **JavaScript** for password generation logic and user interaction management
28+
29+
## Prerequisites
30+
Before running this project, ensure you have a basic understanding of the following technologies:
31+
- **HTML**: For structuring the user interface of the password generator.
32+
- **CSS**: For styling the interface and providing an appealing layout.
33+
- **JavaScript**: For handling password generation and user interactions.
34+
35+
## How to Use
36+
1. Open the `index.html` file in your web browser.
37+
2. Select the desired password length and the types of characters to include.
38+
3. Click the "Generate Password" button to create a new password.
39+
4. The generated password will be displayed on the screen.
40+
5. Click the "Copy to Clipboard" button to copy the password. An alert will confirm the action.
41+
6. If no character types are selected, a default password will be generated based on the specified length.
42+
43+
## Installation
44+
To run this project locally:
45+
1. Clone the repository or download the files.
46+
2. Open `index.html` in any web browser.
47+
48+
### Installation Instructions
49+
1. Clone the repository:
50+
```bash
51+
git clone https://github.com/yourusername/password-generator.git
52+
```
53+
2. Navigate to the project directory:
54+
```bash
55+
cd password-generator
56+
```
57+
3. Open `index.html` in a web browser.
58+
59+
## Author
60+
- Basset Gaëtan (@[gbasset](https://github.com/gbasset))

‎Password-generator/img.png

51.8 KB
Loading

‎Password-generator/index.html

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
7+
<link rel="stylesheet" href="./style.css" />
8+
<title> Password Generator</title>
9+
</head>
10+
<body>
11+
<div class="container">
12+
<h2>Strong password Generator</h2>
13+
<span id="result"></span>
14+
<div class="result-container">
15+
<button class="btn" id="clipboard">
16+
Copy
17+
</button>
18+
</div>
19+
<div class="settings">
20+
<div class="setting ">
21+
<label >Length</label>
22+
<input type="number" id="length" min="4" max="20" value="20" >
23+
</div>
24+
<div class="setting checkbox-wrapper-14">
25+
<label for="uppercase">Include uppercase letters</label>
26+
<input type="checkbox" id="uppercase" checked class="switch">
27+
</div>
28+
<div class="setting checkbox-wrapper-14">
29+
<label for="lowercase">Include lowercase letters</label>
30+
<input type="checkbox" id="lowercase" checked class="switch">
31+
</div>
32+
<div class="setting checkbox-wrapper-14">
33+
<label for="numbers">Include numbers</label>
34+
<input type="checkbox" id="numbers" checked class="switch">
35+
</div>
36+
<div class="setting checkbox-wrapper-14">
37+
<label for="symbols">Include symbols</label>
38+
<input type="checkbox" id="symbols" checked class="switch">
39+
</div>
40+
<div class="text">
41+
<label>Include text</label>
42+
<input type="text" id="text" class="input_class">
43+
</div>
44+
<button class="btn btn-large" id="generate">
45+
Generate Password
46+
</button>
47+
</div>
48+
49+
</div>
50+
<script src="./main.js"></script>
51+
</body>
52+
</html>

‎Password-generator/main.js

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
const resultEl = document.getElementById('result')
2+
const lengthEl = document.getElementById('length')
3+
const uppercaseEl = document.getElementById('uppercase')
4+
const lowercaseEl = document.getElementById('lowercase')
5+
const numbersEl = document.getElementById('numbers')
6+
const symbolsEl = document.getElementById('symbols')
7+
const textEl = document.getElementById('text')
8+
const generateEl = document.getElementById('generate')
9+
const clipboardBtn = document.getElementById('clipboard')
10+
11+
const randomFunc = {
12+
lower: getRandomLower,
13+
upper: getRandomUpper,
14+
number: getRandomNumber,
15+
symbol: getRandomSymbol
16+
}
17+
18+
clipboardBtn.addEventListener('click', () => {
19+
const password = resultEl.innerText
20+
if (!password) return
21+
navigator.clipboard.writeText(password)
22+
resultEl.classList.add('copied')
23+
})
24+
25+
generateEl.addEventListener('click', () => {
26+
const hasLower = lowercaseEl.checked
27+
const hasUpper = uppercaseEl.checked
28+
const hasNumber = numbersEl.checked
29+
const hasSymbol = symbolsEl.checked
30+
const length = +lengthEl.value
31+
const text = textEl.value
32+
33+
resultEl.innerText = generatePassword(hasLower, hasUpper, hasNumber, hasSymbol, text, length)
34+
clipboardBtn.classList.add('visible')
35+
})
36+
37+
function generatePassword(lower, upper, number, symbol, text, length) {
38+
let generatedPassword = text
39+
const typesCount = lower + upper + number + symbol
40+
const typesArr = [{ lower }, { upper }, { number }, { symbol }].filter(item => Object.values(item)[0])
41+
42+
if (typesCount === 0) {
43+
return text.slice(0, length)
44+
}
45+
46+
47+
while (generatedPassword.length < length) {
48+
typesArr.forEach(type => {
49+
const funcName = Object.keys(type)[0]
50+
generatedPassword += randomFunc[funcName]()
51+
})
52+
}
53+
54+
resultEl.classList.remove('copied')
55+
return generatedPassword.slice(0, length)
56+
}
57+
58+
function getRandomLower() {
59+
return String.fromCharCode(Math.floor(Math.random() * 26) + 97)
60+
}
61+
62+
function getRandomUpper() {
63+
return String.fromCharCode(Math.floor(Math.random() * 26) + 65)
64+
}
65+
66+
function getRandomNumber() {
67+
return String.fromCharCode(Math.floor(Math.random() * 10) + 48)
68+
}
69+
70+
function getRandomSymbol() {
71+
const symbols = '!@#$%^&*(){}[]=<>/,.'
72+
return symbols[Math.floor(Math.random() * symbols.length)]
73+
}
74+
75+

0 commit comments

Comments
 (0)