Classwork:

What are 5 Basic UI Elements?:

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

In your own words, explain what SASS does:

  • SASS is an extension of CSS which can be used to create and style parts of your website. It helps improve the complexity of your page by putting all your styles into specific styles where you are able to style your website.

What are some benefits to SASS?:

  • SASS has variables that we can not use in CSS. They also have builtin features and reduces complexity in code.

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

  • The variable property that is part of the "advanced" SASS properties help with the overall complexity with your program. You can create variables with the dollar signs and you are able to reduce the complexities. They are easy to communicate with and can be used easily. These variables help with all the code as you are able to reference it in different parts of your SASS and you do not have to write the color over and over again.

How does the number guesser game work?

  • The number guesser game chooses a number between one through hundred and based on the user's input, the program will ouput one out of three options. The program will say either the number is too high, too low, or is correct. They track how many inputs the user made before they guessed the correct number.

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

  • SASS changed the color scheme and the font. It would give the user a more satisfactory exeperience as it is easier to navigate and aesthetically pleasing to look at. The colors are bright and helps increase the user's mood and be more engaging to the program, making the overall game better than it was before.

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 made the background of my fastpages blue; the test is green and yellow, and I made the sidebar orange. image

Hacks Part 2

  1. Add the style change button to your own github page (0.9)

    • Change the button to your own styles image

      I created a style button that changes into three different 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) image image image

  1. 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+)
    • I created my own dog journal and added SASS to it. image
  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:

Guess the Number

Guess the Number

Try to guess the number between 1 and 100.