Skip to content

Debugging #1

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

Debugging #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
66a886b
made changes
bcs337 Oct 15, 2025
827dee0
updated
bcs337 Oct 19, 2025
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
153 changes: 149 additions & 4 deletions index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,160 @@
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}

body {
font-family: Arial, Helvetica, sans-serif;
background: #f7f9fb;
color: #222;
line-height: 1.4;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

/* Center the game UI */
main {
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
margin: auto;
margin: 40px auto;
padding: 24px;
max-width: 640px;
text-align: center;
background: #ffffff;
border-radius: 8px;
box-shadow: 0 6px 18px rgba(19, 31, 50, 0.06);
}

/* Title and instructions */
h1 {
font-size: 2rem;
margin-bottom: 8px;
color: #1f2937;
}

p {
margin-bottom: 16px;
color: #374151;
}

/* Form layout */
form#guess-form {
display: flex;
gap: 12px;
align-items: center;
justify-content: center;
margin-bottom: 12px;
}

/* Number input */
#guess {
width: 5em;
width: 6.5rem; /* a little wider for readability */
padding: 8px 10px;
font-size: 1rem;
border: 1px solid #d1d5db;
border-radius: 6px;
text-align: center;
background: #fff;
}

/* Buttons */
button {
padding: 9px 14px;
font-size: 1rem;
border-radius: 6px;
border: 1px solid transparent;
cursor: pointer;
transition: background-color 0.15s ease, transform 0.08s ease;
}

button:active {
transform: translateY(1px);
}

#submit {
background: #2563eb; /* blue */
color: white;
border-color: rgba(37,99,235,0.9);
}

#submit:hover:not(:disabled) {
background: #1e56d6;
}

#reset {
background: transparent;
color: #374151;
border: 1px solid #d1d5db;
margin-top: 12px;
}

/* Hide messages and reset by default (setup() will also manage this) */
#messages {
display: none;
margin-top: 16px;
width: 100%;
}

#reset {
margin: 20px;
display: none;
}

/* Message styles */
.message {
margin: 8px 0;
padding: 10px 12px;
border-radius: 6px;
font-weight: 600;
color: #111827;
}

/* Specific message appearances (optional colors) */
#guess-display {
background: #eef2ff; /* soft blue */
color: #1e3a8a;
border: 1px solid #c7d2fe;
}

#guesses-remaining {
background: #fff7ed; /* soft amber */
color: #92400e;
border: 1px solid #ffedd5;
}

#feedback {
background: #ecfdf5; /* soft green */
color: #065f46;
border: 1px solid #bbf7d0;
}

/* Error / losing state style (if you want to change when user loses) */
.message.error {
background: #fff1f2;
color: #9f1239;
border: 1px solid #fecaca;
}

/* Responsive adjustments */
@media (max-width: 480px) {
main {
margin: 20px;
padding: 16px;
}

form#guess-form {
flex-direction: column;
gap: 10px;
}

#guess {
width: 100%;
max-width: 240px;
}

button {
width: 100%;
max-width: 280px;
}
}
32 changes: 14 additions & 18 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,27 +11,23 @@
<main>
<h1>Guessing Game</h1>
<p>
I'm thinking of a number from 1 to 99! Can you guess it in 5 tries or
I'm thinking of a number from 1 to 100! 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>

<form id="guess-form">
<input type="number" id="guess" min="1" max="100" />
<button type="submit" id="submit">Submit Guess</button>
</form>

<div id="messages">
<p class="message" id="guess-display"></p>
<p class="message" id="guesses-remaining"></p>
<p class="message" id="feedback"></p>
</div>
<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>
</div>
<button id="reset">Reset</button>

<button id="reset" style="display: none;">Reset</button>
</main>
<script src="index.js"></script>
</body>
</html>
</html>
91 changes: 38 additions & 53 deletions index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,90 +1,75 @@
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');
const messagesContainer = document.getElementById('messages');
const guessDisplay = document.getElementById('guess-display');
const guessesRemaining = document.getElementById('guesses-remaining');
const feedback = document.getElementById('feedback');
const form = document.getElementById('guess-form');

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
function checkGuess(event) {
event.preventDefault();

const guess = parseInt(guessInput.value, 10);
attempts = attempts + 1;

hideAllMessages();
messagesContainer.style.display = 'block';

if (guess === targetNumber) {
numberOfGuessesMessage.style.display = '';
numberOfGuessesMessage.innerHTML = `You made ${attempts} guesses`;

correctMessage.style.display = '';
guessDisplay.innerHTML = `You guessed: ${guess}`;

const remainingAttempts = maxNumberOfAttempts - attempts;

if (guess === targetNumber) {
feedback.innerHTML = 'guessed correctly';
guessesRemaining.innerHTML = '';
submitButton.disabled = true;
guessInput.disabled = true;
}

if (guess !== targetNumber) {
} else if (attempts >= maxNumberOfAttempts) {
feedback.innerHTML = `0 guesses remaining`;
guessesRemaining.innerHTML = '';
submitButton.disabled = true;
guessInput.disabled = true;
} else {
guessesRemaining.innerHTML = `${remainingAttempts} guesses remaining`;

if (guess < targetNumber) {
tooLowMessage.style.display = '';
feedback.innerHTML = 'too low';
} else {
tooLowMessage.style.display = '';
feedback.innerHTML = 'too high';
}

const remainingAttempts = maxNumberOfAttempts - attempts;

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

if (attempts ==== maxNumberOfAttempts) {
submitButton.disabled = true;
guessInput.disabled = true;
}

guessInput.value = '';

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

function hideAllMessages() {
for (let elementIndex = 0; elementIndex <= messages.length; elementIndex++) {
messages[elementIndex].style.display = 'none';
}
}

funtion setup() {
// Get random number
targetNumber = getRandomNumber(1, 100);
function setup() {
targetNumber = getRandomNumber(1, 101);
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();
messagesContainer.style.display = 'none';
resetButton.style.display = 'none';

guessInput.value = '';
guessDisplay.innerHTML = '';
guessesRemaining.innerHTML = '';
feedback.innerHTML = '';
}

submitButton.addEventListener('click', checkGuess);
form.addEventListener('submit', checkGuess);
resetButton.addEventListener('click', setup);

setup();
setup();