This post won't say much rather than pure code, but I still want to upload it because it took me like 6 hours so, I'll keep it simple...
We have an HTML document that we will use to create the JS code that is meant to be a small game where you pick a number between 1 and 20, you get one point less in your score for each time you guess incorrectly. Once you pick the correct number, randomly generated number by the way, your score then becomes the highscore (in case it is the highest score yet), and you can try again as many times as you want - your score will reset to 20. If your score reaches zero, you lose the game.
HTML File:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="style.css" />
<title>Guess The Number!</title>
</head>
<body>
<header>
<h1>Guess The Number!</h1>
<p class="between">(Pick between 1 and 20)</p>
<button class="btn again">Try Again!</button>
<div class="number">?</div>
</header>
<main>
<section class="left">
<input type="number" class="guess" />
<button class="btn check">Check!</button>
</section>
<section class="right">
<p class="message">Start guessing...</p>
//💯 Your Score: 20
<p class="label-highscore">
�� Your Highscore: <span class="highscore">0</span>
</p>
</section>
</main>
<script src="script.js"></script>
</body>
</html>
Now for the whole process of my JavaScript code, I will take you step by step:
document.querySelector(".check").addEventListener // 1
("click", function() { // 2
console.log(document.querySelector(".guess").value);
});
1.In order to listen to an event, we should first establish where we want to look for the event.
2.We set a function and instead of asigning this function to a variable, we assigned it to the "addEventListener" method, with the first argument being the click and the second argument as the function.
Javascript will call this function when the "click guess" event happens. The function will remain in "waiting mode" and won't run until the click happens.
To continue on, we now won't just print the value into the console, we want to interact with it:
document.querySelector(".check").addEventListener
("click", function() {
const guess = Number(document.querySelector(".guess").value); // 3
console.log(guess, typeof guess);
});
3.This variable is a string, we will compare this to the randomly generated number, so we have to convert it to a number.
Now let's begin to code some cases, so when the number is compared to the randomly generated number, the code tells the browser what to do with that guess.
When an application like this one requires an input from the user, the first case we must specify is to check if there is actually a value.
document.querySelector(".check").addEventListener
("click", function() {
const guess = Number(document.querySelector(".guess").value);
console.log(guess, typeof guess);
We set the first scenario, which is to assume there is no input:
if (!guess) { document.querySelector(".message").textContent = "No Number, Guess a Number!";
} // 4
});
4.The second scenario would be to get an input outside of the scope we are setting.
We need to set the randomly generated number, so that we can compare it to the input of the user.
We only want to define the randomly generated number once, so we have to define it outside of the handler function (where we have the event listener).
const secretNumber = Math.trunc(Math.random()*20)+1; // 5
document.querySelector(".number").textContent = secretNumber;
document.querySelector(".check").addEventListener
("click", function() {
const guess = Number(document.querySelector(".guess").value);
console.log(guess, typeof guess);
if (!guess) {
document.querySelector(".message").textContent = "No Number, Guess a Number!";
} else if (guess === secretNumber) {
document.querySelector(".message").textContent = "You guessed right!";
} else if (guess < secretNumber) {
document.querySelector(".message").textContent = "Too low!";
} else if (guess > secretNumber) {
document.querySelector(".message").textContent = "Too high!";
}
}
);
5.We want this number to be behind the Question mark, so we have to set that variable to that box.
Now we have to work with the score, making it drop one point after each wrong guess. We can do it directly in the code above in both the cases where the guess was too high or too low.
const secretNumber = Math.trunc(Math.random()*20)+1;
document.querySelector(".number").textContent = secretNumber;
let score = 20;
document.querySelector(".check").addEventListener
("click", function() {
const guess = Number(document.querySelector(".guess").value);
console.log(guess, typeof guess);
if (!guess) {
document.querySelector(".message").textContent = "No Number, Guess a Number!";
} else if (guess === secretNumber) {
document.querySelector(".message").textContent = "You guessed right!";
} else if (guess < secretNumber) {
document.querySelector(".message").textContent = "Too low!";
score--; // Which is the same as writing (score = score - 1;
document.querySelector(".score").textContent = score;
} else if (guess > secretNumber) {
document.querySelector(".message").textContent = "Too high!";
score--;
document.querySelector(".score").textContent = score;
}
}
);
What would happen if the score reaches zero? Well, the user would lose the game, but the browser doesn't know that, we have to tell it using JS that once the score === 0, the user just lost the game, we can do that with a case.
const secretNumber = Math.trunc(Math.random()*20)+1;
document.querySelector(".number").textContent = secretNumber;
let score = 20;
document.querySelector(".check").addEventListener
("click", function() {
const guess = Number(document.querySelector(".guess").value);
console.log(guess, typeof guess);
if (!guess) {
document.querySelector(".message").textContent = "No Number, Guess a Number!";
} else if (guess === secretNumber) {
document.querySelector(".message").textContent = "You guessed right!";
} else if (guess < secretNumber) {
if (score > 1) {
document.querySelector(".message").textContent = "Too low!";
score--;
document.querySelector(".score").textContent = score;
} else {
document.querySelector(".message").textContent = "You lost the game!";
document.querySelector(".score").textContent = 0
}} else if (guess > secretNumber) {
if (score > 1) {
document.querySelector(".message").textContent = "Too high!";
score--;
document.querySelector(".score").textContent = score;
} else {
document.querySelector(".message").textContent = "You lost the game!";
document.querySelector(".score").textContent = 0;
}}
}
);
The game is already working, all we need to do is set a click event to the button "Try Again" and to define the code to set the highscore.
let secretNumber = Math.trunc(Math.random()*20)+1;
document.querySelector(".number").textContent = secretNumber; // 6
let score = 20;
document.querySelector(".check").addEventListener
("click", function() {
const guess = Number(document.querySelector(".guess").value);
console.log(guess, typeof guess);
if (!guess) {
document.querySelector(".message").textContent = "No Number, Guess a Number!";
} else if (guess === secretNumber) {
document.querySelector(".message").textContent = "You guessed right!";
document.querySelector(".number").textContent = secretNumber;
document.querySelector("body").style.
backgroundColor = "#60b347";
} else if (guess < secretNumber) {
if (score > 1) {
document.querySelector(".message").textContent = "Too low!";
score--;
document.querySelector(".score").textContent = score;
} else {
document.querySelector(".message").textContent = "You lost the game!";
document.querySelector(".score").textContent = 0
}} else if (guess > secretNumber) {
if (score > 1) {
document.querySelector(".message").textContent = "Too high!";
score--;
document.querySelector(".score").textContent = score;
} else {
document.querySelector(".message").textContent = "You lost the game!";
document.querySelector(".score").textContent = 0;
}}
}
);
document.querySelector(".again").addEventListener
("click", function() {
secretNumber = Math.trunc(Math.random()*20)+1; // 7
score = 20; // 8
document.querySelector(".message").textContent = "Start Guessing..."; // 9
document.querySelector(".score").textContent = score;
document.querySelector(".number").textContent = "?";
document.querySelector(".guess").value = "";
document.querySelector("body").style.
backgroundColor = "#222";
})
6.We want the secret number to be hidden until the user guesses it correctly, so we are moving the textContent of the secretNumber to the case of the function where the user is correct.
7.Without the let, because we want to define a new value for the variable already created.
- Same as above
9.We reset the text.
Now all we need to do is to implement the Highscore functionality
let secretNumber = Math.trunc(Math.random()*20)+1;
let score = 20;
let highscore = 0; // 10
document.querySelector(".check").addEventListener
("click", function() {
const guess = Number(document.querySelector(".guess").value);
console.log(guess, typeof guess);
if (!guess) {
document.querySelector(".message").textContent = "No Number, Guess a Number!";
} else if (guess === secretNumber) {
document.querySelector(".message").textContent = "You guessed right!";
document.querySelector(".number").textContent = secretNumber;
document.querySelector("body").style.
backgroundColor = "#60b347";
if (score > highscore) {
highscore = score;
document.querySelector(".highscore").textContent = highscore;
}
} else if (guess < secretNumber) {
if (score > 1) {
document.querySelector(".message").textContent = "Too low!";
score--;
document.querySelector(".score").textContent = score;
} else {
document.querySelector(".message").textContent = "You lost the game!";
document.querySelector(".score").textContent = 0
}} else if (guess > secretNumber) {
if (score > 1) {
document.querySelector(".message").textContent = "Too high!";
score--;
document.querySelector(".score").textContent = score;
} else {
document.querySelector(".message").textContent = "You lost the game!";
document.querySelector(".score").textContent = 0;
}}
}
);
document.querySelector(".again").addEventListener
("click", function() {
secretNumber = Math.trunc(Math.random()*20)+1;
score = 20;
document.querySelector(".message").textContent = "Start Guessing...";
document.querySelector(".score").textContent = score;
document.querySelector(".number").textContent = "?";
document.querySelector(".guess").value = "";
document.querySelector("body").style.
backgroundColor = "#222";
})
10.We set the highscore to the current score
The JavaScript code is ready, all we need to do is to clean it or make it "dry". One way to do this is called refactoring (which means to restructure the code without changing how it works).
Remember the principle "Do not repeat yourself"
One of the main reasons to do this is, if we want to change the code we must be able to do it in the fewest places as possible, and if we have duplicate code that prolongs our work.
let secretNumber = Math.trunc(Math.random()*20)+1;
let score = 20;
let highscore = 0;
const displayMessage = function(message) {document.querySelector(".message").textContent = message;}
const displayScore = function(score) {document.querySelector(".score").textContent = score}
const displayNumber = function(number) {document.querySelector(".number").textContent = secretNumber}
const displayHighscore = function(highscore) {document.querySelector(".highscore").textContent = highscore}
const displayBodyBackgroundColor = function(body) { document.querySelector("body").style.backgroundColor = color}
document.querySelector(".check").addEventListener
("click", function() {
const guess = Number(document.querySelector(".guess").value);
console.log(guess, typeof guess);
if (!guess) {
// We have the line "document.querySelector(".message").textContent" written 5 times on this code, we can refactor that with a function.
displayMessage("No Number, Guess a Number!");
} else if (guess === secretNumber) {
displayMessage("You guessed right!");
displayNumber(secretNumber);
displayBodyBackgroundColor("#60b347");
if (score > highscore) {
highscore = score;
displayHighscore(highscore);
}
}
// These two pieces of code are pretty much the same, with only one string being different, so we can actually refactor here:
// So we add another else if case to then delete the two blocks, one where the guess is incorrect, by using a ternary operator:
else if (guess !== secretNumber) {
if (score > 1) {
displayMessage(guess > secretNumber ? "Too high!" : "Too low!");
score--;
// This line is written several times accross the code, we can create a function for it:
displayScore(score);
} else {
displayMessage("You lost the game!");
displayScore(0);
}
}
}
)
document.querySelector(".again").addEventListener
("click", function() {
secretNumber = Math.trunc(Math.random()*20)+1;
score = 20;
displayMessage("Start Guessing...");
displayScore(score);
displayNumber("?");
document.querySelector(".guess").value = "";
displayBodyBackgroundColor("#222");
})
And that is it, we now have finished the JS file, if you actually copy and paste this into a .js file and you open the files in a browser, you will see it working perfectly!