<html>

<head>
    <title>JavaScript</title>
    <style>
        .hidden {
            display: none;
        }
        
        .message {
            font-size: 2em;
            margin-bottom: 20px;
        }
    </style>
</head>

<body>
    <div class="message"></div>
    <input type="text" class="hidden">
    <button type="button">Start</button>
    <script>
        const message = document.querySelector(".message");
        const guess = document.querySelector("input");
        const button = document.querySelector("button");
        let inplay = false;
        let scramble = "";
        let scrambled = "";
        let score = 0;
        const myArray = ["javascript", "website", "html", "document", "course", "new"];
        button.addEventListener("click", function () {
            if (!inplay) {
                inplay = true;
                score = 0;
                button.innerHTML = "Guess";
                guess.classList.toggle("hidden");
                scramble = createWord();
                scrambled = randomArray(scramble.split("")).join("");
                message.innerHTML = scrambled;
            }
            else {
                let tempGuess = guess.value;
                score++;
                if (tempGuess === scramble) {
                    console.log("correct");
                    inplay = false;
                    message.innerHTML = "Correct it was " + scramble + " it took " + score + " guesses";
                    button.innerHTML = "Start";
                    guess.classList.toggle("hidden");
                }
                else {
                    console.log("guess again");
                    message.innerHTML = "Wrong " + scrambled;
                }
            }
        })

        function createWord() {
            let randomIndex = Math.floor(Math.random() * myArray.length);
            let tempWord = myArray[randomIndex];
            return tempWord;
        }

        function randomArray(arr) {
            for (let i = arr.length - 1; i > 0; i--) {
                let temp = arr[i];
                let j = Math.floor(Math.random() * (i + 1));
                arr[i] = arr[j];
                arr[j] = temp;
            }
            return arr;
        }
    </script>
</body>

</html>