Classwork

What are the 5 basic UI elements

  1. Input
  2. Navigation
  3. Buttons
  4. Text
  5. Images

SASS SASS allows for greater variable storage of colors and various different styles. They are also far more compatible with various different ideas.

Advanced The @keyframes tag allows for us to store and recognize a set of keyframes. This is used in combination of the animation property. Fade class could be used to help run these animations as well.

Number Guessing Game It works by checking a number guessed in order to see if it is higher or lower, and then setting a text marker to be as such. Then, it will change color of the background depending on whether the answer is correct or incorrect

SASS makes this more appealing by adding color, so it isn’t just black-and-white

Hacks

<html>
<head>
  <title>Guess the Number</title>
</head>
<body>
  <h1>Guess the Number</h1>
  <p>Try to guess the number between 1 and 100.</p>
  <input type="text" id="guess" placeholder="Enter your guess">
  <button onclick="checkGuess()">Submit</button>
  <p id="result"></p>

  <script>
    // Generate a random number between 1 and 100
    const randomNumber = Math.floor(Math.random() * 100) + 1;
    let attempts = 0;

    function checkGuess() {
      // Get the user's guess
      const guess = parseInt(document.getElementById("guess").value);

      // Increase the number of attempts
      attempts++;

      // Check if the guess is correct
      if (guess === randomNumber) {
        document.getElementById("result").innerHTML = `Congratulations! You guessed the number in ${attempts} attempts.`;
      } else if (guess < randomNumber) {
        document.getElementById("result").innerHTML = "Too low. Guess again.";
      } else {
        document.getElementById("result").innerHTML = "Too high. Guess again.";
      }
    }
  </script>
</body>
</html>

Game

Steps:

  1. Clone this repo https://github.com/nVarap/darkhallways.git
  2. Make sure you have the “live server” extension in vscode
  3. Open the repository, right click the index.html file, and click “open with live server”
  4. that should make it work. Contact me if it does not.