-
Notifications
You must be signed in to change notification settings - Fork 0
/
script.js
88 lines (75 loc) · 2.41 KB
/
script.js
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
const problemElement = document.querySelector(".problem");
const ourForm = document.querySelector(".our-form");
const ourField = document.querySelector(".our-field");
const pointsneeded = document.querySelector(".points-needed");
const mistakesAllowed = document.querySelector(".mistakes-allowed");
const progressBar = document.querySelector(".progress-inner");
const endMessage = document.querySelector(".end-message");
const resetButton = document.querySelector(".reset-button");
let state = {
score: 0,
wrongAnswers: 0,
};
function updateProblem() {
state.currentProblem = generateProblem();
problemElement.innerHTML = `${state.currentProblem.numberOne} ${state.currentProblem.operator} ${state.currentProblem.numberTwo}`;
ourField.value = "";
ourField.focus();
}
updateProblem();
function generateNumber(max) {
return Math.floor(Math.random() * (max + 1));
}
function generateProblem(params) {
return {
numberOne: generateNumber(10),
numberTwo: generateNumber(10),
operator: ["+", "-", "x"][generateNumber(2)],
};
}
ourForm.addEventListener("submit", handleSubmit);
function handleSubmit(e) {
e.preventDefault();
let correctAnswer;
const p = state.currentProblem;
if (p.operator == "+") correctAnswer = p.numberOne + p.numberTwo;
if (p.operator == "-") correctAnswer = p.numberOne - p.numberTwo;
if (p.operator == "x") correctAnswer = p.numberOne * p.numberTwo;
if (parseInt(ourField.value, 10) == correctAnswer) {
state.score++;
pointsneeded.textContent = 10 - state.score;
updateProblem();
renderprogressbar();
} else {
state.wrongAnswers++;
mistakesAllowed.textContent = 2 - state.wrongAnswers;
}
checkLogic();
}
function checkLogic() {
if (state.score === 10) {
//alert("You Won!");
endMessage.textContent = "You Won!";
document.body.classList.add("overlay-is-open");
}
if (state.wrongAnswers === 3) {
endMessage.textContent = "Sorry! You Lost :(";
document.body.classList.add("overlay-is-open");
setTimeout(() => {
resetButton.focus();
}, 331);
}
}
resetButton.addEventListener("click", resetGame);
function resetGame() {
document.body.classList.remove("overlay-is-open");
updateProblem();
state.score = 0;
state.wrongAnswers = 0;
pointsneeded.textContent = 10;
mistakesAllowed.textContent = 2;
renderprogressbar();
}
function renderprogressbar() {
progressBar.style.transform = `scaleX(${state.score / 10})`;
}