countdown-timer-challenge/script.js at master · Anthony01M/countdown-timer-challenge · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
document.addEventListener('DOMContentLoaded', () => {
    const mathProblemElement = document.getElementById('math-problem');
    const answerInput = document.getElementById('answer');
    const submitButton = document.getElementById('submit');
    const timerElement = document.getElementById('time');
    const resultElement = document.getElementById('result');

    let timeLeft = 30;
    let timer;
    let correctAnswer;

    function startTimer() {
        timer = setInterval(() => {
            timeLeft--;
            timerElement.textContent = timeLeft;
            if (timeLeft <= 0) {
                clearInterval(timer);
                checkAnswer();
            }
        }, 1000);
    }

    function generateMathProblem() {
        const num1 = Math.floor(Math.random() * 10) + 1;
        const num2 = Math.floor(Math.random() * 10) + 1;
        const num3 = Math.floor(Math.random() * 10) + 1;
        const operations = ['+', '-', '*', '/'];
        const operation = operations[Math.floor(Math.random() * operations.length)];

        let problem;
        switch (operation) {
            case '+':
                problem = `${num1} + ${num2}`;
                correctAnswer = num1 + num2;
                break;
            case '-':
                problem = `${num1} - ${num2}`;
                correctAnswer = num1 - num2;
                break;
            case '*':
                problem = `${num1} * ${num2}`;
                correctAnswer = num1 * num2;
                break;
            case '/':
                if (num1 % num2 === 0) {
                    problem = `${num1} / ${num2}`;
                    correctAnswer = num1 / num2;
                } else {
                    return generateMathProblem();
                }
                break;
            default:
                problem = `${num1} + ${num2}`;
                correctAnswer = num1 + num2;
        }

        if (Math.random() > 0.5) {
            problem = `${num1} + (${num2} * ${num3})`;
            correctAnswer = num1 + (num2 * num3);
        } else if (Math.random() > 0.5) {
            problem = `${num1} * (${num2} - ${num3})`;
            correctAnswer = num1 * (num2 - num3);
        }

        mathProblemElement.textContent = `${problem} = ?`;
        return correctAnswer;
    }

    function resetChallenge() {
        clearInterval(timer);
        timeLeft = 30;
        timerElement.textContent = timeLeft;
        answerInput.value = '';
        resultElement.textContent = '';
        resultElement.classList.remove('wrong');
        correctAnswer = generateMathProblem();
        startTimer();
    }

    function checkAnswer() {
        const userAnswer = parseInt(answerInput.value, 10);
        if (userAnswer === correctAnswer) {
            resultElement.textContent = 'Correct!';
            resultElement.classList.remove('wrong');
        } else {
            resultElement.textContent = 'Wrong! Time is up!';
            resultElement.classList.add('wrong');
        }
        setTimeout(resetChallenge, 2000);
    }

    submitButton.addEventListener('click', () => {
        clearInterval(timer);
        checkAnswer();
    });

    correctAnswer = generateMathProblem();
    startTimer();

    const colors = ['#FF5733', '#33FF57', '#3357FF', '#FF33A1', '#000000', '#FF5733', '#FF8C00', '#FFD700', '#ADFF2F', '#00FF7F', '#00CED1', '#1E90FF', '#9370DB', '#FF1493', '#000000'];
    let colorIndex = 0;

    setInterval(() => {
        document.body.style.backgroundColor = colors[colorIndex];
        colorIndex = (colorIndex + 1) % colors.length;
    }, 5000);
});