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

Team Lesson Plan:

SASS Part 1- Nathan, Aniket, Kalani

SASS Part 2- Max W, Evan

Building JavaScript Game or Application- Ryan, Jaden

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

SASS which stands for Syntactically Awesome Style Sheets is scripting language used to customize and personalize features and code. With SASS users can customize variables such as colors, font sizes, and padding values and ultimately customizing throughout the stylesheet. This helps applications look more aesthetically pleasing and maintain a consistent look throughout the website.

There are several benefits to SASS, but a few include customizing nested rules, mixins, imports, inheritance, and built-in functions. SASS allows users to write clean and easy code and at the same time SASS is stable and powerful. The way the code is organized makes SASS convenient too especially compared to CSS. SASS makes it easier to maintain and upadte stylesheets and reduces development time.

The advanced SASS properties refers to the user interface quality. This is because if there is more SASS, it makes it easier for the user to navigate through a website. The advanced SASS properties includes functions like duration, delay, and iteration. Advanced SASS properties are used by using dollar signs combined with variables.

The number guesser game works by function in the code chosing a random number. Then, the user has to guess a number from 1-100 and they press the submit button, which then tells the user if their number is too low or too high. The button has three different outputs of too low, correct, and too high and the user basically inputs a number until they get it correct based on what the website prints.

SASS can be used to make the number guesser game look more visually appealing because the background of the random number guesser game was changed. In order to change the text color and to customize and personalize the button, SASS was also used here. The background of the random number generator is initially red, however, when the user gets the number correct the background turns green. So, SASS was used in this part of the random number generator. In order to position the text and the font size on the website, SASS was used to center the text and the buttons.

Here I added my own element of creating and changing the color of my scrollerbar. I added code for that and made it gray.

ownelement2

I added a second element, I used Canva to make a logo and added a favicon to my fastpages blog.

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)

stylechangebuttonssubmenupic

I created a submenu and made 3 buttons. The buttons lead to a white background, yellow background, and green backgrouns, when you click on it.

whitebackground yellowbackground greenbackground

Extra: Try and incorporate something you learned in the lesson into your CPT Project (0.1)

cptbefore

This is a before screenshot of my CPT project where there was no SASS, so I SASSed it up.

cptafter

This is an after screenshot of my CPT project where I added SASS. I changed the text size and added color to my CPT project.

Add SASS to Number Guesser Game provided (0.9) or create your own Javascript game/application and add SASS to it (0.9+)

Guess the Number

Try to guess the number between 1 and 100.