Untitled

"use strict";

window.addEventListener("load", Init);
let boxCount,newGame,card,big;

function Init()
{
    boxCount = document.getElementById("boxes");
    newGame = document.getElementById("resetbtn");
    const generate = document.getElementById("start-button");
    generate.addEventListener("click", GenerateBoxes);
    newGame.addEventListener("click", newGameBtn);
    const clickedCards = document.querySelectorAll("div.card");
    CardGuess(clickedCards);
}

function GenerateBoxes()
{
    for (let index = 0; index < boxCount.value; index++) 
    {
        card = document.createElement("div");
        card.className = "card";
        const rows = document.getElementsByClassName("row");
        rows[0].appendChild(card);
        big = document.createElement("p");
        big.className = "big";
        big.textContent = "?";
        card.appendChild(big);    
        
    }
    InvisibleMenu();
    GameStats();
}

function InvisibleMenu()
{
   const menu = document.getElementById("start-game");
   menu.style.visibility = "hidden";
}

function GameStats()
{
    const stats = document.getElementsByClassName("stats");
    let attempts = document.createElement("p");
    attempts.textContent = `Aantal vakjes in het speelveld :  ${+ boxCount.value}`;
    stats[0].appendChild(attempts);
}

function newGameBtn()
{
    location.reload();
    
}

function CardGuess(cards)
{
    for(let i = 0; i < cards.length; i++) {

        cards[i].addEventListener("click", changeCardColor);      
    }
}

function changeCardColor()
{
    if(this.className != "clicked")
    {
        this.className = "clicked";
    }
}