Skip to content

16 bugs found and fixed #251

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
nishakrips wants to merge 1 commit into
base: main
Choose a base branch
from
Open

16 bugs found and fixed #251

Show file tree
Hide file tree
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
3 changes: 3 additions & 0 deletions .vscode/settings.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"workbench.editor.enablePreview": false
}
1 change: 1 addition & 0 deletions index.css
View file
Open in desktop

@gacurl gacurl Mar 10, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

index.css

Works

  • Simple layout using flexbox
  • Input and reset button styled appropriately

Improve

  • CSS is minimal but sufficient for the assignment.

Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
main {
display: flex;
justify-content: center;
/* flex-direction column makes items stack vertically */
flex-direction: column;
align-items: center;
margin: auto;
Expand Down
13 changes: 12 additions & 1 deletion index.html
View file
Open in desktop

@gacurl gacurl Mar 10, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

index.html

Works

  • Correct input field and buttons
  • Message elements present for game feedback
  • Reset button exists and is hidden at start

Improve

  • HTML comment before the script tag is malformed:
    <!- should be <!--
  • max-guesses message exists but is never triggered by the JS.

Original file line number Diff line number Diff line change
@@ -1,9 +1,11 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!-- The viewport meta tag is used to control the layout on mobile browsers. -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Link to the external CSS file for styling the page. -->
<link href="index.css" rel="stylesheet" />
<title>Number Guesser</title>
</head>
Expand All @@ -15,7 +17,9 @@ <h1>Guessing Game</h1>
less?
</p>
<div>
<!-- Input field for the user to enter their guess, with a minimum value of 1 and a maximum value of 99. -->
<input type="number" id="guess" min="1" max="99" />
<!-- Button to submit the user's guess. -->
<button id="submit">Submit Guess</button>
</div>
<div>
Expand All @@ -29,9 +33,16 @@ <h1>Guessing Game</h1>
Congratulations, You guessed correctly! <br />
Would you like to play again?
</p>
<p class="message" id="less-than-min">
Error - Value less than minimum value NOT allowed. Try again.
</p>
<p class="message" id="greater-than-max">
Error - Value greater than maximum value NOT allowed. Try again.
</p>
</div>
<button id="reset">Reset</button>
</main>
<!- Link to the external JavaScript file that contains the logic for the guessing game. -->
<script src="index.js"></script>
</body>
</html>
129 changes: 83 additions & 46 deletions index.js
View file
Open in desktop

@gacurl gacurl Mar 10, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

index.js

Works

  • Random number generation implemented
  • Attempts tracked correctly
  • Messages hidden and displayed properly
  • Input validation for <1 and >99 implemented
  • Submit and reset event listeners working
  • Game state resets correctly with setup()

Improve

  • max-guesses message is never shown when attempts reach 5.
  • Correct guess message reports number of guesses incorrectly:
    it displays maxNumberOfAttempts - attempts instead of the actual guesses made.

Suggested fix

  • When attempts === maxNumberOfAttempts and guess is incorrect, display maxGuessesMessage.

Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
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');

let targetNumber;
let attempts = 0;
const maxNumberOfAttempts = 5;
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")

let targetNumber
let attempts = 0
const maxNumberOfAttempts = 5

// Returns a random number from min (inclusive) to max (exclusive)
// Usage:
Expand All @@ -19,72 +19,109 @@ const maxNumberOfAttempts = 5;
// > getRandomNumber(1, 50)
// <- 11
function getRandomNumber(min, max) {
return Math.floor(Math.random() * (max - min)) + min;
return Math.floor(Math.random() * (max - min)) + min
}

function checkGuess() {
// Get value from guess input element
const guess = parseInt(guessInput.value, 10);
attempts = attempts + 1;
const guess = parseInt(guessInput.value, 10)

hideAllMessages();
if (guess < 1) {
hideAllMessages()
document.getElementById("less-than-min").style.display = ""
guessInput.value = ""
return
}

if (guess > 99) {
hideAllMessages()
document.getElementById("greater-than-max").style.display = ""
guessInput.value = ""
return
}

attempts = attempts + 1

// hide all messages before showing the appropriate message when the user makes a guess
hideAllMessages()

// Calculate the remaining attempts and display a message to the user indicating
// their guess and how many guesses they have left.
const remainingAttempts = maxNumberOfAttempts - attempts

// Check if the guess is correct, too high, or too low, and display the appropriate message.
if (guess === targetNumber) {
numberOfGuessesMessage.style.display = '';
numberOfGuessesMessage.innerHTML = `You made ${attempts} guesses`;
numberOfGuessesMessage.style.display = ""
numberOfGuessesMessage.innerHTML = `You made ${maxNumberOfAttempts - attempts} guesses`

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

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

if (guess !== targetNumber) {
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 (remainingAttempts === 1) {
numberOfGuessesMessage.innerHTML = `You guessed ${guess}. <br> ${remainingAttempts} guess remaining`
} else {
numberOfGuessesMessage.innerHTML = `You guessed ${guess}. <br> ${remainingAttempts} guesses remaining`
}
}

if (attempts ==== maxNumberOfAttempts) {
submitButton.disabled = true;
guessInput.disabled = true;
// If the user has reached the maximum number of attempts, disable the submit button and guess input,
// and display a message indicating that they have reached the maximum number of guesses.
//2. Syntax error: the comparison operator should be '===' instead of '===='.
if (attempts === maxNumberOfAttempts) {
submitButton.disabled = true
guessInput.disabled = true
}

guessInput.value = '';
guessInput.value = ""

resetButton.style.display = '';
resetButton.style.display = ""
}

// The hideAllMessages function iterates through all elements with the class 'message' and
// sets their display style to 'none', effectively hiding them from view.
function hideAllMessages() {
for (let elementIndex = 0; elementIndex <= messages.length; elementIndex++) {
messages[elementIndex].style.display = 'none';
for (let elementIndex = 0; elementIndex < messages.length; elementIndex++) {
messages[elementIndex].style.display = "none"
}
}

funtion setup() {
// The setup function initializes the game by generating a random target number,
// resetting the number of attempts, enabling the input and submit button, hiding all messages,
// and hiding the reset button.
//1.Syntax error: spelling of the function keyword prevents setup to run.
function setup() {
// Get random number
targetNumber = getRandomNumber(1, 100);
console.log(`target number: ${targetNumber}`);
targetNumber = getRandomNumber(1, 100)
console.log(`target number: ${targetNumber}`)

// maxNumberOfAttempts is const cannot be and should be changed
// maxNumberOfAttempts = 0

// Reset number of attempts
maxNumberOfAttempts = 0;
// Reset attempts to 0 at the start of the game
attempts = 0

// Enable the input and submit button
submitButton.disabeld = false;
guessInput.disabled = false;
submitButton.disabled = false
guessInput.disabled = false

hideAllMessages();
resetButton.style.display = 'none';
hideAllMessages()
resetButton.style.display = "none"
}

submitButton.addEventListener('click', checkGuess);
resetButton.addEventListener('click', setup);
// Add event listeners to the submit and reset buttons to call the appropriate functions when clicked.
submitButton.addEventListener("click", checkGuess)
resetButton.addEventListener("click", setup)

setup();
setup()