HTML

              <div id="numberGuessingGame"></div>
            

Javascript

//Number Guessing Game JavaScript Code (minus animations)
const gameDIV = document.getElementById("numberGuessingGame");
const gameButton = '<button type="button" onclick="playGame()">Click to Play</button>';
document.addEventListener('DOMContentLoaded', () => { gameDIV.innerHTML = gameButton; });
function playGame() {
    const limit = 7;
    gameDIV.innerHTML = (`
    <input type="number" id="guess" min="1" max="100" placeholder="Guess">
    <button type="button" id="check">Check</button><br>
    <h4 id="heading">Guess the number from 1 to 100<br>in ${limit} tries or less.</h4>
    <button type="button" id="playAgain">Play Again?</button>
    <button type="button" id="close">Close</button>
    `);
    const heading = document.getElementById("heading");
    heading.style.color = 'mediumaquamarine';
    const guessInput = document.getElementById("guess");
    const checkButton = document.getElementById("check");
    const playAgainButton = document.getElementById("playAgain");
    const close = document.getElementById("close");
    const answer = (Math.floor(Math.random() * 100) + 1);
    let attempts = 0;
    attemptMeter.value = 0;
    guessInput.addEventListener("keypress", function (event) {
        if (event.key === "Enter") {
            event.preventDefault();
            checkButton.click();
        };
    });
    checkButton.addEventListener("click", () => {
        if (guessInput.value) { checkNumber(Number(guessInput.value)) };
    });
    function checkNumber(guessNumber) {
        attempts++;
        if (attempts < limit || guessNumber == answer) {
            const leftAttempts = limit - attempts;
            if (guessNumber < answer) {
                heading.innerText = `Too low. Try again.\nAttempts Left: ${leftAttempts}`;
                heading.style.color = 'cornflowerblue';
            } else if (guessNumber > answer) {
                heading.innerText = `Too high. Try again.\nAttempts Left: ${leftAttempts}`;
                heading.style.color = 'palevioletred';
            } else {
                const tries = (attempts === 1) ? 'try' : 'tries';
                heading.innerText = `${answer} is correct\nin only ${attempts} ${tries}!`;
                heading.style.color = 'gold';
                disableCheckButton();
            };
        } else {
            heading.innerText = `You've reached the limit.\nThe number was ${answer}.`;
            heading.style.color = 'orchid';
            disableCheckButton();
        };
    };
    function disableCheckButton() {
        checkButton.disabled = true;
        checkButton.style.opacity = '0.5';
    };
    playAgainButton.onclick = function () { playGame() };
    close.addEventListener("click", () => { gameDIV.innerHTML = gameButton });
};