Password-Generator

// 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";
    }

};