WGET this file and complete fully and thoroughly in order to be receive credit

Wget Link

Team Lesson Plan:

SASS Part 1- Nathan, Aniket, Kalani

Basic UI Properties and what they mean
Color properties
Themes
SASS Definition/What it is useful for
SASS code segments w/ comparison to css
Demonstration of SASS

SASS Part 2- Max W, Evan

More UI Properties
UX
Layouts
Animation/animation code for UI

Building JavaScript Game or Application- Ryan, Jaden

Before vs After Minesweeper Game - how to customize
Building a java script game and what it requires

Hacks Page - Kalani, Max T

Students must create their own hack (simple app,game, etc using key components from the lesson)
Make sure the students can wget the file so they can work on it for their hacks

Classwork:

What are 5 Basic UI Elements?:

Color
Font
Layout
Size
Accessibility

In your own words, explain what SASS does:

SASS is related to CSS, and it lets you have variables, math operations (ex: addition, division), loops, imports, functions, and other functions/tools to make your CSS more powerful and useful with more functions. Essentially, it's an extension used to style your webpages/frontends that reduce CSS complexity.

What are some benefits to SASS?:

Some beenfits are that it helps you write clean/easy/less CSS, contains fewere codes (less complex), and it is more powerful, allows for greater efficiency.

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

Advanced sass is more compatible with more devices to it helps the user satisfaction. Fade-in means keyframes, which access different aspects of information at differing times. You can state specific properties like duration, delay, direction, etc. to customize your animation.

Link to Number Guesser Game

How does the number guesser game work?

Random number is generated
Using "documentGetElementByID", the user input is accessed.
User input is compared to previously generated number.
Guess is compared to the actual number
Different outpus show depending on if the guess is right, too large, or too low.

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

SASS elements can be used to change colors, so that the user can visually see if their answer is right or wrong. You can add images and style containers as well, such as make rounded edges to make it more aesthetically appealing. Also, you can change the font style and size to make the UI more interesting, which helps the user stay engaged.

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

Hacks Part 1

Add your own element to your own repository to make it unique (0.9)

I changed my fastpages ICON as you can see at the top of the page! It is now a fox instead of the default icon!

Hacks Part 2

Add the style change button to your own github page (0.9)
- 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)
Extra: Try and incorporate something you learned in the lesson into your CPT Project (0.1)

Link to my style change in my GitHub fastpages (basically when you click on the button it changes the background color)

Hacks Part 3

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

Here is a link to my video of my application with SASS. (I created my own application instead of using the Number Guesser Game)
Here is the link to my application

Copy and paste the following code segment into a markdown file which will be used for the 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>