-
Notifications
You must be signed in to change notification settings - Fork 0
/
script.js
75 lines (69 loc) · 2.18 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
"use strict";
//
// Variables
//
const body = document.querySelector(`body`);
const againBtn = document.querySelector(`.again`);
const number = document.querySelector(`.number`);
const guess = document.querySelector(`.guess`);
const checkBtn = document.querySelector(`.check`);
const infoMessage = document.querySelector(`.message`);
const scoreOutputText = document.querySelector(`.score`);
const highscoreOutputText = document.querySelector(`.highscore`);
let secretNumber = Math.floor(Math.random() * 20) + 1;
let score = 20;
let highscore = 0;
//
// Functions
//
const displayMessage = function (message) {
infoMessage.textContent = message;
};
const changeBackgroundColor = function (color) {
body.style.backgroundColor = color;
};
//
// Event Listeners
//
checkBtn.addEventListener(`click`, function () {
const guessValue = Number(document.querySelector(`.guess`).value);
// When there is no input
if (!guessValue) {
displayMessage(`🛑 No number!`);
// When player wins
} else if (guessValue === secretNumber) {
displayMessage(`🎉 Correct number!`);
changeBackgroundColor(`#60b347`);
number.style.width = `30rem`;
number.textContent = secretNumber;
if (highscore < score) {
highscore = score;
highscoreOutputText.textContent = highscore;
}
// When guess is wrong
} else if (guessValue !== secretNumber) {
if (score > 1) {
displayMessage(
guessValue > secretNumber
? `📈 Guess too high!`
: `📉 Guess too low!`
);
score--;
scoreOutputText.textContent = score;
} else {
displayMessage(`☹️ You lost the game!`);
changeBackgroundColor(`darkred`);
scoreOutputText.textContent = 0;
}
}
});
againBtn.addEventListener("click", function () {
changeBackgroundColor(`#222`);
displayMessage(`<- Start guessing...`);
number.textContent = `?`;
number.style.width = `15rem`;
guess.value = ``;
score = 20;
scoreOutputText.textContent = score;
secretNumber = Math.floor(Math.random() * 20) + 1;
});