Quick Math Challenge

h1 {
    margin-bottom: 20px;
}

.question {
    font-size: 1.5em;
    margin-bottom: 20px;
}

.input-area {
    margin-bottom: 20px;
}

.input-area input {
    font-size: 1em;
    padding: 5px;
    width: 100px;
    text-align: center;
}

.input-area button {
    font-size: 1em;
    padding: 5px 10px;
    margin-left: 10px;
    cursor: pointer;
}

.timer, .score {
    font-size: 1.2em;
    margin: 10px 0;
}

.start-btn {
    font-size: 1em;
    padding: 10px 20px;
    background-color: #4caf50;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.start-btn:hover {
    background-color: #45a049;
}

.end-message {
    font-size: 1.5em;
    margin-top: 20px;
}

<h1>Quick Math Challenge</h1>
<div class="timer">Time Left: <span id="timer">30</span> seconds</div>
<div class="score">Score: <span id="score">0</span></div>
<div class="question" id="question">Press "Start" to begin!</div>
<div class="input-area">
    <input type="number" id="answer" placeholder="Your answer">
    <button id="submit-btn" disabled>Submit</button>
</div>
<button class="start-btn" id="start-btn">Start</button>
<div class="end-message" id="end-message"></div>

const timerElement = document.getElementById('timer');
    const scoreElement = document.getElementById('score');
    const questionElement = document.getElementById('question');
    const answerInput = document.getElementById('answer');
    const submitButton = document.getElementById('submit-btn');
    const startButton = document.getElementById('start-btn');
    const endMessageElement = document.getElementById('end-message');
    const hiddenScore = document.getElementById("hiddenScore");
    
    let timer;
    let timeLeft = 30;
    let score = 0;
    let currentAnswer;

    function generateQuestion() {
        const num1 = Math.floor(Math.random() * 10) + 1;
        const num2 = Math.floor(Math.random() * 10) + 1;
        const operations = ['+', '-', '*'];
        const operation = operations[Math.floor(Math.random() * operations.length)];
        currentAnswer = eval(`NULL NULL NULL`);
        questionElement.textContent = `NULL NULL NULL = ?`;
    }

    function startGame() {
        document.querySelector('.share-buttons').style.display = 'none'; // Hide share buttons when starting a new game
        score = 0;
        timeLeft = 30;
        scoreElement.textContent = score;
        timerElement.textContent = timeLeft;
        endMessageElement.textContent = '';
        submitButton.disabled = false;
        answerInput.disabled = false;
        startButton.disabled = true;
        answerInput.value = '';
        answerInput.focus();

        generateQuestion();

        timer = setInterval(() => {
            timeLeft--;
            timerElement.textContent = timeLeft;

            if (timeLeft === 0) {
                endGame();
            }
        }, 1000);
    }

    function checkAnswer() {
        const playerAnswer = parseInt(answerInput.value, 10);

        if (playerAnswer === currentAnswer) {
            score++;
            hiddenScore.value = score; // Update hidden score field
            scoreElement.textContent = score;
        }

        answerInput.value = '';
        generateQuestion();
    }

    function endGame() {
        clearInterval(timer);
        submitButton.disabled = true;
        answerInput.disabled = true;
        startButton.disabled = false;
        questionElement.textContent = 'Game Over!';
        document.querySelector('.share-buttons').style.display = 'flex'; // Show share buttons
        endMessageElement.textContent = `Your final score is NULL. Try again!`;
    }

    startButton.addEventListener('click', startGame);
    submitButton.addEventListener('click', checkAnswer);
    answerInput.addEventListener('keypress', (event) => {
        if (event.key === 'Enter') {
            checkAnswer();
        }
    });