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 allows us to reduce the overall complexity that comes from styling in programming with other languages, such as CSS. ### What are some benefits to SASS?:
  • SASS has a variety of variables that we can use
  • In many cases, classes are used as name spaces, which means they are duplicated over and over again. We can avoid this by nesting styles inside the parent
  • SASS already has some built in functions for us to use

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

  • One of the more "advanced" SASS properties is keyframe, which allows us to create an animation-like effect when styling in SASS.

How does the number guesser game work?

  • Essentially, there is a main function that checks to see if the guess inputted by the user matches the randomly chosen number from 1 to 100. If the number guessed is higher than the random number, the user will be prompted with "too high". If the number guessed is lower than the random number, the user will be prompted with "too low". And of course, if the user guesses the number correctly, the screen will turn green and the user will be notified of the number of attempts they took to guess the number, which is stored as a variable. This function is then called whenever the user clicks the submit button.

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

  • Some of the basic UI features of SASS, such as color, font, and the background, can make the overall game look more visually appealing and be more vibrant and fun for the user to play around with.

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 changed the background color and the font color of my fastpages blog to multiple colors

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
proof = Image.open('../images/darkmodethemechanges.png')

print("PROOF OF STYLE CHANGES")
display(proof)

PROOF OF STYLE CHANGES

</p> </div> </div> </div>
Guess the Number

Guess the Number

Try to guess the number between 1 and 100.

</div>