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. Accessibility
  5. Icons

In your own words, explain what SASS does:

  • Sass alows one to write clean, easy, and less CSS in a programing construct

What are some benefits to SASS?:

  • There is fewer codes so one can write CSS quicker.

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

  • The more advanced SASS properties is the meta.variable-exists() function which provides a couple advanced functions for working with variables. The meta.variable-exists() function returns whether a variable with the given name exists in the current scope, and the meta.global-variable-exists() function does the same but only for the global scope.

How does the number guesser game work?

  • The user can guess a random number between 1 and 100 that is generated by the number guesser game. The game counts the amount of guesses and notifies the player if their guess is high or low after each one. The game concludes when the user correctly guesses the winning number, and it shows how many guesses it took to win.

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

  • By setting variables for frequently used values like colors, font sizes, and spacing, SASS may be used to make the number guesser game look more aesthetically pleasing. This enables uniform styling across the entire game and makes it simple to update the styles in one location. Additionally, SASS nesting can be utilized to arrange styles and enhance readability. Additionally, reusable styles for items like buttons and form components can be defined using SASS mixins.

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)

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: 

from PIL import Image

sasshackpart1 = Image.open("../images/sasshackspart1.PNG")
display(sasshackpart1)

from PIL import Image

sasspart2 = Image.open("../images/sasspart2.PNG")
display(sasspart2)