Password-Generator
javascript
2 months ago
3.6 kB
2
Indexable
Never
// window.onload = function() { //Input Range och Counter const sliderElement = document.querySelector('#lengthRange'); // Detta hämtar jag från HTML (Input Range) const sliderValue = document.querySelector('#lengthCounter'); // Detta hämtar jag från HTML (Räknaren) const btn = document.querySelector('#btn'); sliderElement.addEventListener('input', (event) => { const tempSliderValue = event.target.value; //Event integrera med HTML och gör så att en en text ändras om man t.ex //trycker på en knapp. Target är det som utlöste händelsen i HTML, när knappen trycks så ändras det. //Value är ett attribut för HTML, textrutor, lösenordsfält är ett slags "value" som personen skriver i. sliderValue.textContent = tempSliderValue; //Här ändrar (kan hämta) texten som finns från början i HTML. Vi gör //ändring efter vad slidern befinner sig för att få antalet karaktärer. const progress = (tempSliderValue / sliderElement.max) * 20; sliderElement.style.background = 'linear-gradient(#A638F6, 100%)'; }) //Lösenordet, alla checkbox och generara lösenord function generatePassword() { const length = document.getElementById('lengthRange').value; const useUppercase = document.getElementById('check-upper').checked; const useLowercase = document.getElementById('check-lower').checked; const useNumbers = document.getElementById('check-numbers').checked; const useSymbols = document.getElementById('check-symbol').checked; const uppercaseChars = "ABCDEFGIJHLMNOPQRSTVWXZÅÄÖ" const lowercaseChars = "abcdefgijhlmnopqrstvwxzåäö" const numberChars = "0123456789" const symbolChars = "!><|@#£¤$%&/{([)]=}?+'*¨^-_.:,;" let characters = ''; if (useUppercase) characters += uppercaseChars; if (useLowercase) characters += lowercaseChars; if (useNumbers) characters += numberChars; if (useSymbols) characters += symbolChars; if (!characters) { alert("Vänligen välj minst en av kategorierna!"); return; } let password = ""; for( let i = 0; i < length; i++) { password += characters[Math.floor(Math.random() * characters.length)]; } document.getElementById("generatedPassword").textContent = password; } //Styrka på lösenordet sliderElement.addEventListener('input', checkPasswordStrength); const box1 = document.querySelector("#bar1"); const box2 = document.querySelector("#bar2"); const box3 = document.querySelector("#bar3"); const box4 = document.querySelector("#bar4"); function checkPasswordStrength() { const passwordStr = document.querySelector("#generatedPassword").value; const passwordLength = passwordStr.length; if (passwordLength >= 20) { box1.style.backgroundColor = "#37FD12"; box2.style.backgroundColor = "#37FD12"; box3.style.backgroundColor = "#37FD12"; box4.style.backgroundColor = "#37FD12"; } else if (passwordLength >= 15) { box1.style.backgroundColor = "yellow"; box2.style.backgroundColor = "yellow"; box3.style.backgroundColor = "yellow"; } else if (passwordLength >= 10) { box1.style.backgroundColor = "orange"; box2.style.backgroundColor = "orange"; } else if (passwordLength >= 5) { box1.style.backgroundColor = "red"; } };