Classwork:

What are 5 Basic UI Elements?:

  1. Color
  2. Font
  3. Layout
  4. Layout
  5. Icons

In your own words, explain what SASS does:

  • Helps reduce complexity of code to assist in styling page.
  • creates compiler

What are some benefits to SASS?:

  • SASS has variables to use
  • classes used as nameSpaces to be referenced over again
  • can use SASS compiler to view web page

Describe/Explain one of the more "advanced" SASS properties below in detail:

  • animation: set an image to rotate, fade in/out by changing opacity. You can also set properties like duration, delay, iteration count when referencing the animation

How does the number guesser game work?

  • Javascript gets a random number, and each guess compares your guess to the number, until you get the number correct.

Explain how SASS can be used to make the number guesser game look more visually appealing?

  • SASS can be used to add animations or make the game grid based, maybe you have a grid and have to guess which square on the grid is the chosen square and when you choose the right square it plays an animation.

Hacks - Insert any screenshots, code segments, etc. that you need to in order to demonstrate an understanding of the hacks

Hacks Part 1

  1. Add your own element to your own repository to make it unique (0.9)
    • I added my own favicon to make my fastpages unique (look below hacks for screenshot)

Hacks Part 2

  1. Add the style change button to your own github page (0.9) Theme Changer
    • Change the button to your own styles
    • See if you can let make it change to multiple different styles (we understand that it is hard to create multiple distinct styles so you are only required to make it clear you have at least three different styles at can be changed)
  2. Extra: Try and incorporate something you learned in the lesson into your CPT Project (0.1)

Hacks Part 3

  1. Add SASS to Number Guesser Game provided (0.9) or create your own Javascript game/application and add SASS to it (0.9+) Number Guesser
  2. We will collectively decide on the "best" game/app and award potential seed.

Copy and paste the following code segment into a markdown file which will be used for the hacks: 

from IPython.display import Image
Image(filename='images/favicon image.png') 

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