drkeefy.github.io/passwords.html at main · drkeefy/drkeefy.github.io · GitHub

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
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <script src="script.js" defer></script>
  <link rel="stylesheet" href="styles.css">
  <title>Password Generator</title>
</head>
<body>
  <div class="container">
    <h1 class="title">Password Generator</h1>
    <h3 class="password-display" id="passwordDisplay">password</h3>
    <form id="passwordGeneratorForm" class="form">
      <label for="characterAmountNumber">Number Of Characters</label>
      <div class="character-amount-container">
        <input type="range" min="1" max="50" value="10" id="characterAmountRange">
        <input class="number-input" type="number" min="1" max="50" value="10" id="characterAmountNumber">
      </div>

      <label for="includeUppercase">Include Uppercase</label>
      <input type="checkbox" id="includeUppercase">

      <label for="includeNumbers">Include Numbers</label>
      <input type="checkbox" id="includeNumbers">

      <label for="includeSymbols">Include Symbols</label>
      <input type="checkbox" id="includeSymbols">

      <button type="submit" class="btn">Generate Password</button>
    </form>
x<style>body {
  background-color: #333;
  margin: 0;
  color: white;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'Courier New', Courier, monospace;
}

.container {
  background-color: #006699;
  padding: 3rem;
  border-radius: 1rem;
  border: 2px solid black;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.form {
  display: grid;
  grid-template-columns: auto auto;
  row-gap: 1rem;
  column-gap: 3rem;
  justify-content: center;
  align-items: center;
}

.title {
  margin: 0;
  text-align: center;
}

label {
  font-weight: bold;
}

.character-amount-container {
  display: flex;
  align-items: center;
}

.number-input {
  width: 2rem;
}

.password-display {
  background-color: white;
  color: black;
  padding: 1rem;
  border: 1px solid #333;
  height: 2rem;
  width: 350px;
  display: flex;
  justify-content: center;
  align-items: center;
  word-break: break-all;
  border-radius: .5rem;
}

.btn {
  grid-column: span 2;
  background-color: transparent;
  border: 2px solid white;
  color: white;
  padding: .5rem 1rem;
  font-weight: bold;
  cursor: pointer;
  border-radius: 1rem;
}

.btn:hover {
  background-color: #FFFFFF33;
}</style>

  </div>

  <script>
    const characterAmountRange = document.getElementById('characterAmountRange')
const characterAmountNumber = document.getElementById('characterAmountNumber')
const includeUppercaseElement = document.getElementById('includeUppercase')
const includeNumbersElement = document.getElementById('includeNumbers')
const includeSymbolsElement = document.getElementById('includeSymbols')
const form = document.getElementById('passwordGeneratorForm')
const passwordDisplay = document.getElementById('passwordDisplay')

const UPPERCASE_CHAR_CODES = arrayFromLowToHigh(65, 90)
const LOWERCASE_CHAR_CODES = arrayFromLowToHigh(97, 122)
const NUMBER_CHAR_CODES = arrayFromLowToHigh(48, 57)
const SYMBOL_CHAR_CODES = arrayFromLowToHigh(33, 47).concat(
  arrayFromLowToHigh(58, 64)
).concat(
  arrayFromLowToHigh(91, 96)
).concat(
  arrayFromLowToHigh(123, 126)
)

characterAmountNumber.addEventListener('input', syncCharacterAmount)
characterAmountRange.addEventListener('input', syncCharacterAmount)

form.addEventListener('submit', e => {
  e.preventDefault()
  const characterAmount = characterAmountNumber.value
  const includeUppercase = includeUppercaseElement.checked
  const includeNumbers = includeNumbersElement.checked
  const includeSymbols = includeSymbolsElement.checked
  const password = generatePassword(characterAmount, includeUppercase, includeNumbers, includeSymbols)
  passwordDisplay.innerText = password
})

function generatePassword(characterAmount, includeUppercase, includeNumbers, includeSymbols) {
  let charCodes = LOWERCASE_CHAR_CODES
  if (includeUppercase) charCodes = charCodes.concat(UPPERCASE_CHAR_CODES)
  if (includeSymbols) charCodes = charCodes.concat(SYMBOL_CHAR_CODES)
  if (includeNumbers) charCodes = charCodes.concat(NUMBER_CHAR_CODES)

  const passwordCharacters = []
  for (let i = 0; i < characterAmount; i++) {
    const characterCode = charCodes[Math.floor(Math.random() * charCodes.length)]
    passwordCharacters.push(String.fromCharCode(characterCode))
  }
  return passwordCharacters.join('')
}

function arrayFromLowToHigh(low, high) {
  const array = []
  for (let i = low; i <= high; i++) {
    array.push(i)
  }
  return array
}

function syncCharacterAmount(e) {
  const value = e.target.value
  characterAmountNumber.value = value
  characterAmountRange.value = value
}
  </script>
</body>
</html>