-
Notifications
You must be signed in to change notification settings - Fork 0
/
Password Generator.html
113 lines (93 loc) · 2.38 KB
/
Password Generator.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<!DOCTYPE html>
<html>
<head>
<title>Password Generator</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<!--------------------------------------CSS STRATS----------------------------------->
<style>
body,html{
border: 15px solid green;
background-color: lightgrey;
}
#content {
display:flex;
flex-direction: column;
justify-content: space-between;
}
#h1{
text-align: center;
text-decoration: underline;
margin-top:30px;
}
.single {
display: flex;
justify-content: space-between;
padding: 20px;
}
#length {
width: 100px;
margin-left: 30px;
margin-right:30px;
background-color: white;
color: black;
border: 5px solid #e7e7e7;
}
#output {
flex: 1;
margin-right: 20px;
padding: 10px;
background-color: white;
color: black;
border: 5px solid #e7e7e7;
}
#output:hover {
background-color: #555555;
color: white;
}
#go {
margin: 20px;
background-color: white;
color: black;
border: 5px solid #e7e7e7;
padding: 10px;
}
#go:hover {
background-color: #555555;
color: white;
}
</style>
<!--------------------------------------CSS ENDED------------------------------------>
</head>
<body>
<div>
<div id='h1'>
<h1>Password Generator</h1>
</div>
<div id='content'>
<div class='single'><input id='output' class="btn btn-primary btn-lg" type='text'/><span ><h3>Length:</h3></span><input id='length' type='number' value='8' /></div>
<input id='go' type='button' class="btn btn-primary btn-lg" value='Generate Password' />
</div>
</div>
</body>
<!------------------------------JavaScript Starts------------------------------------->
<script>
const $ = s => document.querySelector(s)
let $output
let $input
let $length
const rand = (max=94, offset=33) => (Math.floor(Math.random() * max)) + offset
const generate = x => {
let chars = "", nums = [], length = $length.value
while(length--)
chars += String.fromCharCode(rand())
$('#output').value = chars
}
window.onload = x => {
$output = $('#output')
$input = $('#go')
$length = $('#length')
$input.onclick = x => generate()
}
</script>
<!--------------------------------JavaScript Ended------------------------------------>
</html>