Skip to content

Fix debugging assignment bugs and added comments #263

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Raz-Ebrat wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Fix debugging assignment bugs and added comments #263

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
113 changes: 71 additions & 42 deletions index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,90 +1,119 @@
const guessInput = document.getElementById('guess');
const submitButton = document.getElementById('submit');
const resetButton = document.getElementById('reset');
const messages = document.getElementsByClassName('message');
const tooHighMessage = document.getElementById('too-high');
const tooLowMessage = document.getElementById('too-low');
const maxGuessesMessage = document.getElementById('max-guesses');
const numberOfGuessesMessage = document.getElementById('number-of-guesses');
const correctMessage = document.getElementById('correct');

// Get references to elements from the HTML
const guessInput = document.getElementById("guess");
const submitButton = document.getElementById("submit");
const resetButton = document.getElementById("reset");
const messages = document.getElementsByClassName("message");
const tooHighMessage = document.getElementById("too-high");
const tooLowMessage = document.getElementById("too-low");
const maxGuessesMessage = document.getElementById("max-guesses");
const numberOfGuessesMessage = document.getElementById("number-of-guesses");
const correctMessage = document.getElementById("correct");

// Game variables
let targetNumber;
let attempts = 0;
const maxNumberOfAttempts = 5;

// Returns a random number from min (inclusive) to max (exclusive)
// Usage:
// > getRandomNumber(1, 50)
// <- 32
// > getRandomNumber(1, 50)
// <- 11
function getRandomNumber(min, max) {
return Math.floor(Math.random() * (max - min)) + min;
}

function checkGuess() {
// Get value from guess input element
// Get the value from the input and convert it to a number
const guess = parseInt(guessInput.value, 10);

// BUG FIX #1:
// Added validation so the function will stop if the input is not a valid number
if (isNaN(guess)) {
return;
}

attempts = attempts + 1;

// Hide all previous messages before showing the new result
hideAllMessages();

// If the guessed number matches the target number
if (guess === targetNumber) {
numberOfGuessesMessage.style.display = '';
numberOfGuessesMessage.innerHTML = `You made ${attempts} guesses`;
numberOfGuessesMessage.style.display = "";
numberOfGuessesMessage.innerHTML = `You guessed ${guess}. <br> You made ${attempts} guesses`;

correctMessage.style.display = '';
correctMessage.style.display = "";

// Disable input and submit button after a correct guess
submitButton.disabled = true;
guessInput.disabled = true;
}

if (guess !== targetNumber) {
} else {
// BUG FIX #2:
// Corrected the logic so guesses below the target show "too low"
// and guesses above the target show "too high"
if (guess < targetNumber) {
tooLowMessage.style.display = '';
tooLowMessage.style.display = "";
} else {
tooLowMessage.style.display = '';
tooHighMessage.style.display = "";
}

const remainingAttempts = maxNumberOfAttempts - attempts;

numberOfGuessesMessage.style.display = '';
numberOfGuessesMessage.style.display = "";
numberOfGuessesMessage.innerHTML = `You guessed ${guess}. <br> ${remainingAttempts} guesses remaining`;
}

if (attempts ==== maxNumberOfAttempts) {
submitButton.disabled = true;
guessInput.disabled = true;
// BUG FIX #3:
// Corrected invalid operator "====" to "==="
// Also disables the game when all guesses are used
if (attempts === maxNumberOfAttempts) {
maxGuessesMessage.style.display = "";
maxGuessesMessage.innerHTML = "0 guesses remaining";

submitButton.disabled = true;
guessInput.disabled = true;
}
}

guessInput.value = '';
// Clear the input field after each guess
guessInput.value = "";

resetButton.style.display = '';
// Show the reset button after the first guess
resetButton.style.display = "";
}

function hideAllMessages() {
for (let elementIndex = 0; elementIndex <= messages.length; elementIndex++) {
messages[elementIndex].style.display = 'none';
// BUG FIX #4:
// Changed <= to < so the loop does not go past the end of the messages collection
for (let elementIndex = 0; elementIndex < messages.length; elementIndex++) {
messages[elementIndex].style.display = "none";
}
}

funtion setup() {
// Get random number
// BUG FIX #5:
// Corrected the spelling of "function" (it was originally written as "funtion")
function setup() {
// Generate a new random target number
targetNumber = getRandomNumber(1, 100);
console.log(`target number: ${targetNumber}`);

// Reset number of attempts
maxNumberOfAttempts = 0;
// BUG FIX #6:
// Reset attempts back to 0 when the game starts over
// The original code incorrectly tried to reset maxNumberOfAttempts
attempts = 0;

// Enable the input and submit button
submitButton.disabeld = false;
// BUG FIX #7:
// Corrected the typo "disabeld" to "disabled"
submitButton.disabled = false;
guessInput.disabled = false;

// Clear the input field
guessInput.value = "";

// Hide all messages and hide reset button on initial load/reset
hideAllMessages();
resetButton.style.display = 'none';
resetButton.style.display = "none";
}

submitButton.addEventListener('click', checkGuess);
resetButton.addEventListener('click', setup);
// Event listeners
submitButton.addEventListener("click", checkGuess);
resetButton.addEventListener("click", setup);

// Initialize the game when the page loads
setup();