project-four-take-a-guess.md

Project Four: Take a Guess

Welcome back, nobody!

Project four is here, and this one feels different. Up until now I've mostly been wiring things together — HTML structure, CSS styling, PHP includes, that sort of thing. This is the first project that included JavaScript that I had to write myself and... it's hard!

The game itself is simple: a random number between 1 and 100 is generated, and you've got 10 attempts to guess it. Too high, too low, or congratulations — that's the whole thing.

Under the hood, a few concepts came together for this one:

  • Math.random() generates a decimal between 0 and 1, which gets multiplied by 100 and rounded down with Math.floor() to give a whole number. Add 1 and you've got a range of 1–100.
  • FunctionscheckGuess() runs every time you hit the button, handling all the logic in one place.
  • DOM manipulation — JavaScript reaching into the HTML, grabbing elements by their id, reading what you typed, and writing feedback back to the page.
  • Conditionals — if the guess is right, say so. If it's too low or too high, say that instead. If you've run out of attempts, game over.

The one thing I learned after the fact: the while loop my course used technically works, but every branch inside it breaks immediately, so it's really just acting like an if/else. Apparently that's a common teaching simplification — you learn the concept first, then tighten it up later.

The bit I'm actually proud of though? I'm getting much better at integrating these projects into the site myself. Grabbed the terminal window styling, slotted in the header and footer includes, linked up the stylesheets — all without google! Small win, but I'll take it. 🎉

Key Features

  • Random number generated fresh each page load
  • 10 attempts before game over
  • Feedback after every guess (too high / too low)
  • Fully integrated into the cxllum terminal aesthetic