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

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

In your own words, explain what SASS does:

  • SASS is an easier way to style your site in comparison to CSS. It allows for stylesheets to be written with .sass and .scss, and it includes CSS features with more. It makes programming and styling very easy.

What are some benefits to SASS?:

  • It is easy to use, less complex, and has variables that can be used. SASS gives us built-in functions, and the SASS compiler allows for a conversion to working CSS.

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

  • One advanced SASS property is the animation effect. This has many different possible parameters, and can be changed to change the duration of the animation, the opacity of an animation, and many other things.

How does the number guesser game work?

  • The number guesser game works by inputting a number between 1-100, and the program randomly generating a unique number in that range. It will then tell you if your guess is too high or too low, and you will continue to guess until you get the right answer.

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

  • In the updated number guesser game, SASS was utilized to make the game look more visually appealing by making the background color green after guessing the right answer. Maybe, as an inclusion, an animation can be added for an up or down arrow to symbolize a higher guess or lower guess in the game.

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) In my own repository, I changed the background color and the sidebar color using SASS. image

Hacks Part 2

  1. 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)
  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+)
  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: 

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