function gameOver() {
    clearInterval(timerInterval);
    headerDisplay.textContent = "Game Over!";
    answersEl.textContent = "";

    pText.textContent = "Your Score: " + secondsLeft;

    pText.setAttribute("class", "fontFun");
    timeDisplay.textContent = "";

    const newInput = document.createElement("input");
    newInput.setAttribute('type', 'text');
    feedbackEl.textContent = "Your Initials: ";
    feedbackEl.appendChild(newInput);
    const newBtn = document.createElement("button");
    newBtn.textContent = "SUBMIT";
    newBtn.setAttribute('class', 'btnFlavor');
    feedbackEl.appendChild(newBtn);


    // used click event on a submit button because I couldn't get the 'submit' event to work, I think due to creating an input dynamically
    // tried creating a form in the html, but couldn't get submit to work when the enter key was pressed
    newBtn.addEventListener("click", function (event) {
        event.preventDefault();

        const hsObj = {
            initials: newInput.value.trim(),
            score: secondsLeft
        }
        if (newInput.value === '') {
            return;
        }

        hsArr.push(hsObj);
        newInput.value = '';

        localStorage.setItem('gameData', JSON.stringify(hsArr));

        for (let i = 0; i < hsArr.length; i++) {
            const liElToo = document.createElement('li');
            liElToo.setAttribute('class', 'fontFun');

            //Sort array by highest to lowest
            function compare(a, b) {
                const scoreOne = a.score;
                const scoreTwo = b.score;

                return scoreTwo - scoreOne;
            }

            hsArr.sort(compare);

            if (i % 2 === 0) {
                liElToo.setAttribute('class', 'evenFlavor');
            } else {
                liElToo.setAttribute('class', 'oddFlavor');
            }
            liElToo.textContent = `Player: ${hsArr[i].initials} Score: ${hsArr[i].score}`;
            answersEl.appendChild(liElToo);
        }

        newInput.style.visibility = 'hidden';
        feedbackEl.textContent = '';
        const newBtnAlso = document.createElement('button');
        newBtnAlso.textContent = 'Restart Quiz';
        newBtnAlso.setAttribute('class', 'btnFlavor');
        feedbackEl.appendChild(newBtnAlso);

        //reset game to beginning, refreshing timer
        newBtnAlso.addEventListener('click', function (event) {
            event.preventDefault();
            location.reload();
        });

        const newBtnAgain = document.createElement("button");
        // const newPToo = document.createElement("p");
        newBtnAgain.textContent = "Clear Scores";
        newBtnAgain.setAttribute('class', 'btnFlavor');
        feedbackEl.appendChild(newBtnAgain);
        // quiz.appendChild(newPToo);

        //reset scores in local storage
        newBtnAgain.addEventListener("click", function (event) {
            event.preventDefault();
            localStorage.clear();
            answersEl.textContent = '';
        });
    });
}
//Stop timer and display remainder as score
Stop timer and display remainder as score
Stop timer and display remainder as score
function gameOver() {
    clearInterval(timerInterval);
    headerDisplay.textContent = "Game Over!";
    answersEl.textContent = "";
    pText.textContent = "Your Score: " + secondsLeft;
    pText.setAttribute("class", "fontFun");
    timeDisplay.textContent = "";
    const newInput = document.createElement("input");
    newInput.setAttribute('type', 'text');
    feedbackEl.textContent = "Your Initials: ";
    feedbackEl.appendChild(newInput);
    const newBtn = document.createElement("button");
    newBtn.textContent = "SUBMIT";
    newBtn.setAttribute('class', 'btnFlavor');
    feedbackEl.appendChild(newBtn);
    newBtn.addEventListener("click", function (event) {
        event.preventDefault();
        const hsObj = {
            initials: newInput.value.trim(),
            score: secondsLeft
        }
        if (newInput.value === '') {
            return;
        }
        hsArr.push(hsObj);
        newInput.value = '';
        localStorage.setItem('gameData', JSON.stringify(hsArr));
        for (let i = 0; i < hsArr.length; i++) {
            const liElToo = document.createElement('li');
            liElToo.setAttribute('class', 'fontFun');
            function compare(a, b) {
                const scoreOne = a.score;
                const scoreTwo = b.score;
                return scoreTwo - scoreOne;
            }
            hsArr.sort(compare);
            if (i % 2 === 0) {
                liElToo.setAttribute('class', 'evenFlavor');
            } else {
                liElToo.setAttribute('class', 'oddFlavor');
            }
            liElToo.textContent = `Player: ${hsArr[i].initials} Score: ${hsArr[i].score}`;
            answersEl.appendChild(liElToo);
        }
        newInput.style.visibility = 'hidden';
        feedbackEl.textContent = '';
        const newBtnAlso = document.createElement('button');
        newBtnAlso.textContent = 'Restart Quiz';
        newBtnAlso.setAttribute('class', 'btnFlavor');
        feedbackEl.appendChild(newBtnAlso);
        newBtnAlso.addEventListener('click', function (event) {
            event.preventDefault();
            location.reload();
        });
        const newBtnAgain = document.createElement("button");
        newBtnAgain.textContent = "Clear Scores";
        newBtnAgain.setAttribute('class', 'btnFlavor');
        feedbackEl.appendChild(newBtnAgain);
        newBtnAgain.addEventListener("click", function (event) {
            event.preventDefault();
            localStorage.clear();
            answersEl.textContent = '';
        });
    });
}
function gameOver ( ) { clearInterval ( timerInterval ) ; headerDisplay . textContent = "Game Over!" ; answersEl . textContent = "" ; pText . textContent = "Your Score: " + secondsLeft ; pText . setAttribute ( "class" , "fontFun" ) ; timeDisplay . textContent = "" ; const newInput = document . createElement ( "input" ) ; newInput . setAttribute ( 'type' , 'text' ) ; feedbackEl . textContent = "Your Initials: " ; feedbackEl . appendChild ( newInput ) ; const newBtn = document . createElement ( "button" ) ; newBtn . textContent = "SUBMIT" ; newBtn . setAttribute ( 'class' , 'btnFlavor' ) ; feedbackEl . appendChild ( newBtn ) ; newBtn . addEventListener ( "click" , function ( event ) { event . preventDefault ( ) ; const hsObj = { initials : newInput . value . trim ( ) , score : secondsLeft } if ( newInput . value === '' ) { return ; } hsArr . push ( hsObj ) ; newInput . value = '' ; localStorage . setItem ( 'gameData' , JSON . stringify ( hsArr ) ) ; for ( let i = 0 ; i < hsArr . length ; i ++ ) { const liElToo = document . createElement ( 'li' ) ; liElToo . setAttribute ( 'class' , 'fontFun' ) ; function compare ( a , b ) { const scoreOne = a . score ; const scoreTwo = b . score ; return scoreTwo - scoreOne ; } hsArr . sort ( compare ) ; if ( i % 2 === 0 ) { liElToo . setAttribute ( 'class' , 'evenFlavor' ) ; } else { liElToo . setAttribute ( 'class' , 'oddFlavor' ) ; } liElToo . textContent = ` ${ hsArr [ i ] . initials } ${ hsArr [ i ] . score } ` ; answersEl . appendChild ( liElToo ) ; } newInput . style . visibility = 'hidden' ; feedbackEl . textContent = '' ; const newBtnAlso = document . createElement ( 'button' ) ; newBtnAlso . textContent = 'Restart Quiz' ; newBtnAlso . setAttribute ( 'class' , 'btnFlavor' ) ; feedbackEl . appendChild ( newBtnAlso ) ; newBtnAlso . addEventListener ( 'click' , function ( event ) { event . preventDefault ( ) ; location . reload ( ) ; } ) ; const newBtnAgain = document . createElement ( "button" ) ; newBtnAgain . textContent = "Clear Scores" ; newBtnAgain . setAttribute ( 'class' , 'btnFlavor' ) ; feedbackEl . appendChild ( newBtnAgain ) ; newBtnAgain . addEventListener ( "click" , function ( event ) { event . preventDefault ( ) ; localStorage . clear ( ) ; answersEl . textContent = '' ; } ) ; } ) ; }
Stop timer and display remainder as score
Stop timer and display remainder as score
// used click event on a submit button because I couldn't get the 'submit' event to work, I think due to creating an input dynamically // tried creating a form in the html, but couldn't get submit to work when the enter key was pressed //Sort array by highest to lowest //reset game to beginning, refreshing timer // const newPToo = document.createElement("p"); // quiz.appendChild(newPToo); //reset scores in local storage