Skip to content

Commit 42fa2b2

Browse files
tajulafreentajulafreen
committed
solve linter issues
1 parent 4a7685d commit 42fa2b2

File tree

3 files changed

+109
-110
lines changed

3 files changed

+109
-110
lines changed

‎Source-Code/PasswordGenerator/index.html

+46-46
Original file line numberDiff line numberDiff line change
@@ -1,55 +1,55 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8">
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
7-
integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog=="
8-
crossorigin="anonymous" />
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<link
7+
rel="stylesheet"
8+
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
9+
integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog=="
10+
crossorigin="anonymous"
11+
/>
912
<link rel="stylesheet" href="style.css" />
10-
13+
1114
<title>Password Generator</title>
12-
</head>
13-
<body>
15+
</head>
16+
<body>
1417
<div class="card">
15-
<div class="container">
16-
<h2>Password Generator</h2>
17-
<div class="result-container">
18-
<span id="result"></span>
19-
<button class="btn" id="clipboard">
20-
<i class="far fa-clipboard"></i>
21-
</button>
22-
</div>
23-
<div class="settings">
24-
<div class="setting">
25-
<label>Password Length</label>
26-
<input type="number" id="length" min="4" max="20" value="20">
27-
</div>
28-
<div class="setting">
29-
<label>Include uppercase letters</label>
30-
<input type="checkbox" id="uppercase" checked>
31-
</div>
32-
<div class="setting">
33-
<label>Include lowercase letters</label>
34-
<input type="checkbox" id="lowercase" checked>
35-
</div>
36-
<div class="setting">
37-
<label>Include numbers</label>
38-
<input type="checkbox" id="numbers" checked>
39-
</div>
40-
<div class="setting">
41-
<label>Include symbols</label>
42-
<input type="checkbox" id="symbols" checked>
43-
</div>
44-
</div>
18+
<div class="container">
19+
<h2>Password Generator</h2>
20+
<div class="result-container">
21+
<span id="result"></span>
22+
<button class="btn" id="clipboard">
23+
<i class="far fa-clipboard"></i>
24+
</button>
4525
</div>
46-
<button class="btn btn-large" id="generate">
47-
Generate Password
48-
</button>
49-
26+
<div class="settings">
27+
<div class="setting">
28+
<label>Password Length</label>
29+
<input type="number" id="length" min="4" max="20" value="20" />
30+
</div>
31+
<div class="setting">
32+
<label>Include uppercase letters</label>
33+
<input type="checkbox" id="uppercase" checked />
34+
</div>
35+
<div class="setting">
36+
<label>Include lowercase letters</label>
37+
<input type="checkbox" id="lowercase" checked />
38+
</div>
39+
<div class="setting">
40+
<label>Include numbers</label>
41+
<input type="checkbox" id="numbers" checked />
42+
</div>
43+
<div class="setting">
44+
<label>Include symbols</label>
45+
<input type="checkbox" id="symbols" checked />
46+
</div>
47+
</div>
48+
</div>
49+
<button class="btn btn-large" id="generate">Generate Password</button>
5050
</div>
51-
51+
5252
<script src="https://cdnjs.cloudflare.com/ajax/libs/vanilla-tilt/1.7.0/vanilla-tilt.min.js"></script>
5353
<script src="script.js"></script>
54-
</body>
55-
</html>
54+
</body>
55+
</html>

‎Source-Code/PasswordGenerator/script.js

+51-52
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,15 @@
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 generateEl = document.getElementById("generate");
8-
const clipboardEl = document.getElementById("clipboard");
1+
/* eslint-disable no-loop-func */
2+
const resultEl = document.getElementById('result');
3+
const lengthEl = document.getElementById('length');
4+
const uppercaseEl = document.getElementById('uppercase');
5+
const lowercaseEl = document.getElementById('lowercase');
6+
const numbersEl = document.getElementById('numbers');
7+
const symbolsEl = document.getElementById('symbols');
8+
const generateEl = document.getElementById('generate');
9+
const clipboardEl = document.getElementById('clipboard');
910

10-
const randomFunc = {
11-
lower: getRandomLower,
12-
upper: getRandomUpper,
13-
number: getRandomNumber,
14-
symbol: getRandomSymbol,
15-
};
16-
17-
clipboardEl.addEventListener("click", () => {
18-
const textarea = document.createElement("textarea");
11+
clipboardEl.addEventListener('click', () => {
12+
const textarea = document.createElement('textarea');
1913
const password = resultEl.innerText;
2014

2115
if (!password) {
@@ -25,36 +19,43 @@ clipboardEl.addEventListener("click", () => {
2519
textarea.value = password;
2620
document.body.appendChild(textarea);
2721
textarea.select();
28-
document.execCommand("copy");
22+
document.execCommand('copy');
2923
textarea.remove();
30-
alert("Password copied to clipboard!");
24+
alert('Password copied to clipboard!');
3125
});
3226

33-
generateEl.addEventListener("click", () => {
34-
const length = +lengthEl.value;
35-
const hasLower = lowercaseEl.checked;
36-
const hasUpper = uppercaseEl.checked;
37-
const hasNumber = numbersEl.checked;
38-
const hasSymbol = symbolsEl.checked;
27+
function getRandomLower() {
28+
return String.fromCharCode(Math.floor(Math.random() * 26) + 97);
29+
}
3930

40-
resultEl.innerText = generatePassword(
41-
hasLower,
42-
hasUpper,
43-
hasNumber,
44-
hasSymbol,
45-
length
46-
);
47-
});
31+
function getRandomUpper() {
32+
return String.fromCharCode(Math.floor(Math.random() * 26) + 65);
33+
}
34+
35+
function getRandomNumber() {
36+
return String.fromCharCode(Math.floor(Math.random() * 10) + 48);
37+
}
38+
39+
function getRandomSymbol() {
40+
const symbols = '!@#$%^&*(){}[]=<>/,.';
41+
return symbols[Math.floor(Math.random() * symbols.length)];
42+
}
4843

44+
const randomFunc = {
45+
lower: getRandomLower,
46+
upper: getRandomUpper,
47+
number: getRandomNumber,
48+
symbol: getRandomSymbol,
49+
};
4950
function generatePassword(lower, upper, number, symbol, length) {
50-
let generatedPassword = "";
51+
let generatedPassword = '';
5152
const typesCount = lower + upper + number + symbol;
5253
const typesArr = [{ lower }, { upper }, { number }, { symbol }].filter(
53-
(item) => Object.values(item)[0]
54+
(item) => Object.values(item)[0],
5455
);
5556

5657
if (typesCount === 0) {
57-
return "";
58+
return '';
5859
}
5960

6061
for (let i = 0; i < length; i += typesCount) {
@@ -68,20 +69,18 @@ function generatePassword(lower, upper, number, symbol, length) {
6869

6970
return finalPassword;
7071
}
72+
generateEl.addEventListener('click', () => {
73+
const length = +lengthEl.value;
74+
const hasLower = lowercaseEl.checked;
75+
const hasUpper = uppercaseEl.checked;
76+
const hasNumber = numbersEl.checked;
77+
const hasSymbol = symbolsEl.checked;
7178

72-
function getRandomLower() {
73-
return String.fromCharCode(Math.floor(Math.random() * 26) + 97);
74-
}
75-
76-
function getRandomUpper() {
77-
return String.fromCharCode(Math.floor(Math.random() * 26) + 65);
78-
}
79-
80-
function getRandomNumber() {
81-
return String.fromCharCode(Math.floor(Math.random() * 10) + 48);
82-
}
83-
84-
function getRandomSymbol() {
85-
const symbols = "!@#$%^&*(){}[]=<>/,.";
86-
return symbols[Math.floor(Math.random() * symbols.length)];
87-
}
79+
resultEl.innerText = generatePassword(
80+
hasLower,
81+
hasUpper,
82+
hasNumber,
83+
hasSymbol,
84+
length,
85+
);
86+
});

‎Source-Code/PasswordGenerator/style.css

+12-12
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
body {
88
background: linear-gradient(to right, #e762ea, #b3f4f0);
99
color: rgb(255, 255, 255);
10-
font-family: 'Muli';
10+
font-family: 'Courier New', Courier, monospace;
1111
font-weight: 500;
1212
display: flex;
1313
flex-direction: column;
@@ -27,7 +27,7 @@ h2 {
2727

2828
.container {
2929
background-color: #2bd3df;
30-
box-shadow: 0px 2px 10px rgba(255, 255, 255, 0.2);
30+
box-shadow: 0 2px 10px rgba(255, 255, 255, 0.2);
3131
padding: 20px;
3232
width: 350px;
3333
max-width: 100%;
@@ -52,15 +52,6 @@ h2 {
5252
max-width: calc(100% - 40px);
5353
}
5454

55-
.result-container .btn {
56-
position: absolute;
57-
top: 5px;
58-
right: 5px;
59-
width: 40px;
60-
height: 40px;
61-
font-size: 20px;
62-
}
63-
6455
.btn {
6556
border: none;
6657
background-color: #2c085c;
@@ -70,6 +61,15 @@ h2 {
7061
cursor: pointer;
7162
}
7263

64+
.result-container .btn {
65+
position: absolute;
66+
top: 5px;
67+
right: 5px;
68+
width: 40px;
69+
height: 40px;
70+
font-size: 20px;
71+
}
72+
7373
.btn-large {
7474
display: block;
7575
width: 100%;
@@ -80,4 +80,4 @@ h2 {
8080
justify-content: space-between;
8181
align-items: center;
8282
margin: 15px 0;
83-
}
83+
}

0 commit comments

Comments
 (0)