Skip to content

# bugs found and fixed #247

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

# bugs found and fixed #247

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
22 changes: 11 additions & 11 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,31 +5,31 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="index.css" rel="stylesheet" />
<title>Number Guesser</title>
<title>Number Guesser</title>
</head>
<body>
<main>
<h1>Guessing Game</h1>
<!--The main title on the page-->
<h1>Guessing Game</h1>
<!--The paragraph describing the game rules-->
<p>
I'm thinking of a number from 1 to 99! Can you guess it in 5 tries or
less?
</p>
<div>
<input type="number" id="guess" min="1" max="99" />
<button id="submit">Submit Guess</button>
<input type="number" id="guess" min="1" max="99" /> <!--The input field for the user's guess, restricted to numbers between 1 and 99-->
<!--The button to submit the user's guess-->
<button id="submit">Submit Guess</button>
</div>
<!--The div that contains all the messages displayed to the user based on their guess-->
<div>
<p class="message" id="number-of-guesses"></p>
<p class="message" id="too-high">You guessed too high. Try again.</p>
<p class="message" id="too-low">You guessed too low. Try again.</p>
<p class="message" id="max-guesses">
You reached the max number of guesses
</p>
<p class="message" id="correct">
Congratulations, You guessed correctly! <br />
Would you like to play again?
</p>
<p class="message" id="max-guesses">You reached the max number of guesses</p>
<p class="message" id="correct">Congratulations, You guessed correctly! <br />Would you like to play again?</p>
</div>
<!--The button to reset the game and start over-->
<button id="reset">Reset</button>
</main>
<script src="index.js"></script>
Expand Down
62 changes: 40 additions & 22 deletions index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
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 guessInput = document.getElementById('guess'); //The input field for the user's guess, restricted to numbers between 1 and 99
const submitButton = document.getElementById('submit'); //The button to submit the user's guess
const resetButton = document.getElementById('reset'); //The button to reset the game and start over
const messages = document.getElementsByClassName('message'); //All the messages displayed to the user based on their guess
const tooHighMessage = document.getElementById('too-high'); //The message displayed when the user's guess is too high
const tooLowMessage = document.getElementById('too-low'); //The message displayed when the user's guess is too low
const maxGuessesMessage = document.getElementById('max-guesses'); //The message displayed when the user has reached the maximum number of guesses
const numberOfGuessesMessage = document.getElementById('number-of-guesses'); //The message displayed to show the number of guesses the user has made
const correctMessage = document.getElementById('correct'); //The message displayed when the user has guessed the correct number

let targetNumber; //The random number the user is trying to guess
let attempts = 0; //The number of attempts the user has made
const maxNumberOfAttempts = 5;

// Returns a random number from min (inclusive) to max (exclusive)
Expand All @@ -18,66 +18,84 @@ const maxNumberOfAttempts = 5;
// <- 32
// > getRandomNumber(1, 50)
// <- 11


function getRandomNumber(min, max) {
return Math.floor(Math.random() * (max - min)) + min;
}

// Function to check the user's guess against the target number and update the game state accordingly. This function is called when the user clicks the submit button.
function checkGuess() {
// Get value from guess input element
const guess = parseInt(guessInput.value, 10);
attempts = attempts + 1;

// Call a function to hide all messages

hideAllMessages();

// Check if the guess is correct, too high, or too low and update the messages and game state accordingly
if (guess === targetNumber) {
numberOfGuessesMessage.style.display = '';
numberOfGuessesMessage.innerHTML = `You made ${attempts} guesses`;

correctMessage.style.display = '';

correctMessage.innerHTML = "Congratulations, You guessed correctly! <br />Would you like to play again?";
submitButton.disabled = true;
guessInput.disabled = true;
}

if (guess !== targetNumber) {
if (guess !== targetNumber && attempts < maxNumberOfAttempts) {
if (guess < targetNumber) {
tooLowMessage.style.display = '';
} else {
tooLowMessage.style.display = '';
tooHighMessage.style.display = '';
}

const remainingAttempts = maxNumberOfAttempts - attempts;
let guessWord;
if (remainingAttempts === 1) {
guessWord = 'guess';
} else {
guessWord = 'guesses';
}

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

if (attempts ==== maxNumberOfAttempts) {
if (attempts === maxNumberOfAttempts && guess !== targetNumber) {
submitButton.disabled = true;
guessInput.disabled = true;

maxGuessesMessage.style.display = '';
maxGuessesMessage.innerHTML = "0 guesses remaining";
}

guessInput.value = '';

resetButton.style.display = '';
}

// Function to hide all messages displayed to the user. This is called at the beginning of the checkGuess function to clear any previous messages before displaying new ones based on the user's current guess.
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() {
// Function to generate a random number between min and max and return it. This is a number that the user will try to guess in the game.

function setup() {
// Get random number
targetNumber = getRandomNumber(1, 100);
console.log(`target number: ${targetNumber}`);

// Reset number of attempts
maxNumberOfAttempts = 0;
attempts = 0;

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

hideAllMessages();
Expand Down