From 66a886b72391aa514341a3d3df442a2fe30b963a Mon Sep 17 00:00:00 2001 From: Saul Acosta Date: Tue, 14 Oct 2025 21:40:34 -0700 Subject: [PATCH 1/2] made changes --- index.css | 154 +++++++++++++++++++++++++++++++++++++++++++++++++++-- index.html | 36 ++++++------- 2 files changed, 168 insertions(+), 22 deletions(-) diff --git a/index.css b/index.css index 3024e63..a5f19e2 100644 --- a/index.css +++ b/index.css @@ -1,15 +1,161 @@ + +* { + 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 { - margin: 20px; + 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 { + 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; + } +} \ No newline at end of file diff --git a/index.html b/index.html index af638da..504b41b 100644 --- a/index.html +++ b/index.html @@ -9,29 +9,29 @@
+

Guessing Game

- 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?

-
- - + + +
+ + +
+ + +
+

+

+

-
-

-

You guessed too high. Try again.

-

You guessed too low. Try again.

-

- You reached the max number of guesses -

-

- Congratulations, You guessed correctly!
- Would you like to play again? -

-
- + + +
- + \ No newline at end of file From 827dee0627cbddaafc4afe9e158638de53c7b331 Mon Sep 17 00:00:00 2001 From: Saul Acosta Date: Sun, 19 Oct 2025 14:52:31 -0700 Subject: [PATCH 2/2] updated --- index.css | 1 - index.html | 4 --- index.js | 91 +++++++++++++++++++++++------------------------------- 3 files changed, 38 insertions(+), 58 deletions(-) diff --git a/index.css b/index.css index a5f19e2..3086484 100644 --- a/index.css +++ b/index.css @@ -1,4 +1,3 @@ - * { box-sizing: border-box; margin: 0; diff --git a/index.html b/index.html index 504b41b..ec7ff0b 100644 --- a/index.html +++ b/index.html @@ -9,27 +9,23 @@
-

Guessing Game

I'm thinking of a number from 1 to 100! Can you guess it in 5 tries or less?

-
-

-
diff --git a/index.js b/index.js index 4c2a94e..308b84a 100644 --- a/index.js +++ b/index.js @@ -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}.
${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(); \ No newline at end of file