// * * * * * PRAISE * * * * *
// FUNCTIONALITY:
// - generates passwords
// CODE FORMATTING:
// - easy to read and follow 
// NAMING CONVENTIONS:
// -  self-explanatory
// CONSISTENCY: 
// - declaring constants globally
// SIMPLICITY:
// - short and sweet!

// * * * * * SUGGESTIONS * * * * *
// FUNCTIONALITY:
// - if you click on the generate passwords button immediately after it's clicked,
// the additional passwords displayed are concatenated
// - 
// use of let vs. const

// CSS:
// - max-width and center within the body

const characters = ["A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z","a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z", "0", "1", "2", "3", "4", "5", "6", "7", "8", "9","~","`","!","@","#","$","%","^","&","*","(",")","_","-","+","=","{","[","}","]",",","|",":",";","<",">",".","?",
"/"];

//✅take control of the button
//✅when clicked generate two passwords
//✅enter the passwords in the two fields provided

const generateBtn = document.getElementById("generate-btn")
const resetBtn = document.getElementById("reset-btn")
const pwOne = document.getElementById("pw-1")
const pwTwo = document.getElementById("pw-2")

generateBtn.addEventListener("click", function() {
    for (let i = 0; i < 15; i++) {
    let randomNumber1 = Math.floor(Math.random() * characters.length)
    let randomNumber2 = Math.floor(Math.random() * characters.length)
       pwOne.textContent += characters[randomNumber1]
       pwTwo.textContent += characters[randomNumber2]
    //    console.log(randomNumber1)
    //    console.log(characters[randomNumber1])
    } 
    pwOne.classList.add("border")
    pwTwo.classList.add("border")
})

resetBtn.addEventListener("click", function() {
     pwOne.textContent = ""
     pwTwo.textContent = ""
     pwOne.classList.remove("border")
     pwTwo.classList.remove("border")
})