PasswordGenerator

// 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

const box1 = document.querySelector("#bar1");
const box2 = document.querySelector("#bar2");
const box3 = document.querySelector("#bar3");
const box4 = document.querySelector("#bar4");

// Funktion för att beräkna styrkan baserat på valda alternativ
function calculateStrength() {
    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 totalOptions = useUppercase + useLowercase + useNumbers + useSymbols;

    return totalOptions;
}

// Uppdatera styrkabalkarnas färg baserat på antalet valda alternativ
function updateStrengthBars() {
    const strength = calculateStrength();

    if (strength === 0) {
        box1.style.backgroundColor = "transparent";
        box2.style.backgroundColor = "transparent";
        box3.style.backgroundColor = "transparent";
        box4.style.backgroundColor = "transparent";
    } else if (strength === 1) {
        box1.style.backgroundColor = "red";
        box2.style.backgroundColor = "transparent";
        box3.style.backgroundColor = "transparent";
        box4.style.backgroundColor = "transparent";
    } else if (strength === 2) {
        box1.style.backgroundColor = "orange";
        box2.style.backgroundColor = "orange";
        box3.style.backgroundColor = "transparent";
        box4.style.backgroundColor = "transparent";
    } else if (strength === 3) {
        box1.style.backgroundColor = "yellow";
        box2.style.backgroundColor = "yellow";
        box3.style.backgroundColor = "yellow";
        box4.style.backgroundColor = "transparent";
    } else if (strength === 4) {
        box1.style.backgroundColor = "#37FD12";
        box2.style.backgroundColor = "#37FD12";
        box3.style.backgroundColor = "#37FD12";
        box4.style.backgroundColor = "#37FD12";
    }
};


// Eventlyssnare för checkboxar, uppdatera styrkabalkarna när checkboxar ändras
const checkboxes = document.querySelectorAll('.item-checkbox input');
checkboxes.forEach(checkbox => {
    checkbox.addEventListener('change', updateStrengthBars);
});