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 clipboard = document.getElementById('clipboard'); const randomFunc = { lower: getRandomLower, upper: getRandomUpper, number: getRandomNumber, symbol: getRandomSymbol } clipboard.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'); }); generate.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]); // Doesn't have a selected type if(typesCount === 0) { return ''; } // create a loop for(let i=0; i
{ 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)]; } // SOCIAL PANEL JS const floating_btn = document.querySelector('.floating-btn'); const close_btn = document.querySelector('.close-btn'); const social_panel_container = document.querySelector('.social-panel-container'); floating_btn.addEventListener('click', () => { social_panel_container.classList.toggle('visible') }); close_btn.addEventListener('click', () => { social_panel_container.classList.remove('visible') });
@import url('https://fonts.googleapis.com/css?family=Muli&display=swap'); * { box-sizing: border-box; } body { background-color: #3B3B98; color: #fff; display: flex; font-family: 'Muli', sans-serif; flex-direction: column; align-items: center; justify-content: center; padding: 10px; min-height: 100vh; } p { margin: 5px 0; } h2 { margin: 10px 0 20px; text-align: center; } input[type=checkbox] { margin-right: 0; } .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 { font-size: 20px; position: absolute; top: 5px; right: 5px; height: 40px; width: 40px; } .btn { border: none; color: #fff; cursor: pointer; font-size: 16px; padding: 8px 12px; background-color: #3B3B98; } .btn-large { display: block; width: 100%; } .setting { display: flex; justify-content: space-between; align-items: center; margin: 15px 0; } @media screen and (max-width: 400px) { .result-container { font-size: 14px; } } /* SOCIAL PANEL CSS */ .social-panel-container { position: fixed; right: 0; bottom: 80px; transform: translateX(100%); transition: transform 0.4s ease-in-out; } .social-panel-container.visible { transform: translateX(-10px); } .social-panel { background-color: #fff; border-radius: 16px; box-shadow: 0 16px 31px -17px rgba(0,31,97,0.6); border: 5px solid #001F61; display: flex; flex-direction: column; justify-content: center; align-items: center; font-family: 'Muli'; position: relative; height: 169px; width: 370px; max-width: calc(100% - 10px); } .social-panel button.close-btn { border: 0; color: #97A5CE; cursor: pointer; font-size: 20px; position: absolute; top: 5px; right: 5px; } .social-panel button.close-btn:focus { outline: none; } .social-panel p { background-color: #001F61; border-radius: 0 0 10px 10px; color: #fff; font-size: 14px; line-height: 18px; padding: 2px 17px 6px; position: absolute; top: 0; left: 50%; margin: 0; transform: translateX(-50%); text-align: center; width: 235px; } .social-panel p i { margin: 0 5px; } .social-panel p a { color: #FF7500; text-decoration: none; } .social-panel h4 { margin: 20px 0; color: #97A5CE; font-family: 'Muli'; font-size: 14px; line-height: 18px; text-transform: uppercase; } .social-panel ul { display: flex; list-style-type: none; padding: 0; margin: 0; } .social-panel ul li { margin: 0 10px; } .social-panel ul li a { border: 1px solid #DCE1F2; border-radius: 50%; color: #001F61; font-size: 20px; display: flex; justify-content: center; align-items: center; height: 50px; width: 50px; text-decoration: none; } .social-panel ul li a:hover { border-color: #FF6A00; box-shadow: 0 9px 12px -9px #FF6A00; } .floating-btn { border-radius: 26.5px; background-color: #001F61; border: 1px solid #001F61; box-shadow: 0 16px 22px -17px #03153B; color: #fff; cursor: pointer; font-size: 16px; line-height: 20px; padding: 12px 20px; position: fixed; bottom: 20px; right: 20px; z-index: 999; } .floating-btn:hover { background-color: #ffffff; color: #001F61; } .floating-btn:focus { outline: none; } .floating-text { background-color: #001F61; border-radius: 10px 10px 0 0; color: #fff; font-family: 'Muli'; padding: 7px 15px; position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); text-align: center; z-index: 998; } .floating-text a { color: #FF7500; text-decoration: none; } @media screen and (max-width: 480px) { .social-panel-container.visible { transform: translateX(0px); } .floating-btn { right: 10px; } }
Password Generator
Password length
Include uppercase letters
Include lowercase letters
Include numbers
Include symbols
Generate password
Created with
by
Florin Pop
Get in touch on
Get in Touch
Part of
#100Days100Projects
Site header
Site Content