From 43a8767cf45cda818d41ebdf70c2f4bf8d9d0de0 Mon Sep 17 00:00:00 2001 From: Brad Traversy Date: Fri, 6 Nov 2020 16:25:45 -0500 Subject: [PATCH] Password generator --- password-generator/index.html | 48 +++++++++++++++++++++ password-generator/script.js | 77 +++++++++++++++++++++++++++++++++ password-generator/style.css | 80 +++++++++++++++++++++++++++++++++++ 3 files changed, 205 insertions(+) create mode 100644 password-generator/index.html create mode 100644 password-generator/script.js create mode 100644 password-generator/style.css diff --git a/password-generator/index.html b/password-generator/index.html new file mode 100644 index 0000000..d28270e --- /dev/null +++ b/password-generator/index.html @@ -0,0 +1,48 @@ + + + + + + + + Password Generator + + +
+

Password Generator

+
+ + +
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+ + + diff --git a/password-generator/script.js b/password-generator/script.js new file mode 100644 index 0000000..ee4fe2b --- /dev/null +++ b/password-generator/script.js @@ -0,0 +1,77 @@ +const resultEl = document.getElementById('result') +const lengthEl = document.getElementById('length') +const uppercaseEl = document.getElementById('uppercase') +const lowercaseEl = document.getElementById('lowercase') +const numbersEl = document.getElementById('numbers') +const symbolsEl = document.getElementById('symbols') +const generateEl = document.getElementById('generate') +const clipboardEl = document.getElementById('clipboard') + +const randomFunc = { + lower: getRandomLower, + upper: getRandomUpper, + number: getRandomNumber, + symbol: getRandomSymbol +} + +clipboardEl.addEventListener('click', () => { + const textarea = document.createElement('textarea') + const password = resultEl.innerText + + if(!password) { return } + + textarea.value = password + document.body.appendChild(textarea) + textarea.select() + document.execCommand('copy') + textarea.remove() + alert('Password copied to clipboard!') +}) + +generateEl.addEventListener('click', () => { + const length = +lengthEl.value + const hasLower = lowercaseEl.checked + const hasUpper = uppercaseEl.checked + const hasNumber = numbersEl.checked + const hasSymbol = symbolsEl.checked + + resultEl.innerText = generatePassword(hasLower, hasUpper, hasNumber, hasSymbol, length) +}) + +function generatePassword(lower, upper, number, symbol, length) { + let generatedPassword = '' + const typesCount = lower + upper + number + symbol + const typesArr = [{lower}, {upper}, {number}, {symbol}].filter(item => Object.values(item)[0]) + + if(typesCount === 0) { + return '' + } + + for(let i = 0; i < length; i += typesCount) { + typesArr.forEach(type => { + const funcName = Object.keys(type)[0] + generatedPassword += randomFunc[funcName]() + }) + } + + const finalPassword = generatedPassword.slice(0, length) + + return finalPassword +} + +function getRandomLower() { + return String.fromCharCode(Math.floor(Math.random() * 26) + 97) +} + +function getRandomUpper() { + return String.fromCharCode(Math.floor(Math.random() * 26) + 65) +} + +function getRandomNumber() { + return String.fromCharCode(Math.floor(Math.random() * 10) + 48) +} + +function getRandomSymbol() { + const symbols = '!@#$%^&*(){}[]=<>/,.' + return symbols[Math.floor(Math.random() * symbols.length)] +} \ No newline at end of file diff --git a/password-generator/style.css b/password-generator/style.css new file mode 100644 index 0000000..c30058d --- /dev/null +++ b/password-generator/style.css @@ -0,0 +1,80 @@ +@import url('https://fonts.googleapis.com/css?family=Muli&display=swap'); + +* { + box-sizing: border-box; +} + +body { + background-color: #3b3b98; + color: #fff; + font-family: 'Muli', sans-serif; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + height: 100vh; + overflow: hidden; + padding: 10px; + margin: 0; +} + +h2 { + margin: 10px 0 20px; + text-align: center; +} + +.container { + background-color: #23235b; + box-shadow: 0px 2px 10px rgba(255, 255, 255, 0.2); + padding: 20px; + width: 350px; + max-width: 100%; +} + +.result-container { + background-color: rgba(0, 0, 0, 0.4); + display: flex; + justify-content: flex-start; + align-items: center; + position: relative; + font-size: 18px; + letter-spacing: 1px; + padding: 12px 10px; + height: 50px; + width: 100%; +} + +.result-container #result { + word-wrap: break-word; + max-width: calc(100% - 40px); +} + +.result-container .btn { + position: absolute; + top: 5px; + right: 5px; + width: 40px; + height: 40px; + font-size: 20px; +} + +.btn { + border: none; + background-color: #3b3b98; + color: #fff; + font-size: 16px; + padding: 8px 12px; + cursor: pointer; +} + +.btn-large { + display: block; + width: 100%; +} + +.setting { + display: flex; + justify-content: space-between; + align-items: center; + margin: 15px 0; +}