74 lines
2.5 KiB
JavaScript
74 lines
2.5 KiB
JavaScript
"use strict";
|
|
|
|
// console.log(document.querySelector(".message").textContent);
|
|
|
|
// document.querySelector(".message").textContent = "Correct number!";
|
|
|
|
// document.querySelector(".number").textContent = 14;
|
|
// document.querySelector(".score").textContent = 10;
|
|
|
|
// document.querySelector(".guess").value = 23;
|
|
// console.log(document.querySelector(".guess").value);
|
|
|
|
let secretNumber = Math.trunc(Math.random() * 20) + 1;
|
|
let score = 20;
|
|
let highScore = 0;
|
|
|
|
const displayMessage = function (message) {
|
|
document.querySelector(".message").textContent = message;
|
|
};
|
|
|
|
console.log(`SN: ${secretNumber}`);
|
|
|
|
document.querySelector(".check").addEventListener("click", event => {
|
|
const guess = Number(document.querySelector(".guess").value);
|
|
console.log(guess, typeof guess);
|
|
|
|
if (!guess) {
|
|
displayMessage("⛔ No number");
|
|
} else if (guess === secretNumber) {
|
|
displayMessage("🎉 Correct Number");
|
|
document.querySelector(".number").textContent = secretNumber;
|
|
document.querySelector("body").style.backgroundColor = "#60b347";
|
|
document.querySelector(".number").style.width = "30rem";
|
|
if (score > highScore) {
|
|
highScore = score;
|
|
document.querySelector(".highscore").textContent = highScore;
|
|
}
|
|
} else if (guess !== secretNumber) {
|
|
if (score > 1) {
|
|
displayMessage(guess > secretNumber ? "📈 Too high" : "📈 Too low");
|
|
score--;
|
|
document.querySelector(".score").textContent = score;
|
|
} else {
|
|
displayMessage("🧨 You lost the game");
|
|
document.querySelector(".score").textContent = 0;
|
|
}
|
|
}
|
|
});
|
|
|
|
// Coding challenge
|
|
/*
|
|
Implement a game rest funtionality, to that the player can make a new guess!
|
|
Here is how:
|
|
|
|
1. Select the element with the "again" class and attach a click event handler
|
|
2. In the handler function, restore initial value of the score and number variables
|
|
3. Restore the initial conditions of the message, number, score and guess input field
|
|
4. Restore the original background color (#222) and number width (15rem)
|
|
*/
|
|
|
|
document.querySelector(".again").addEventListener("click", function () {
|
|
secretNumber = Math.trunc(Math.random() * 20) + 1;
|
|
score = 20;
|
|
displayMessage("Start guessing...");
|
|
|
|
document.querySelector(".number").textContent = "?";
|
|
document.querySelector(".score").textContent = score;
|
|
|
|
document.querySelector("body").style.backgroundColor = "#222";
|
|
document.querySelector(".number").style = "15rem";
|
|
document.querySelector(".guess").value = "";
|
|
console.log(secretNumber);
|
|
});
|