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

notes

Sass is pretty useful for flashy frontend code.

Animating images, for example looks pretty easy with SASS.

Overall, looks easier to work with than just basic html/js/css

IMPORTANT: you will need to convert the sass files to css for html files. Use the compiler tool.

example:

SASS SYNTAX

$font-stack: Helvetica, sans-serif

$primary-color: #333

body

font: 100% $font-stack

color: $primary-color

Classwork:

What are 5 Basic UI Elements?:

  1. Colors and background
  2. appealing images and visuals
  3. good user input sections
  4. language and font
  5. overall professional presentation

In your own words, explain what SASS does:

  • Sass is essentially css but better, allowing us to seamlessly incorporate nice flashy frontend things like themes, different colors, and manipulating images with little fuss. SASS can be easily incorporated with frontend languages like markdown and html.

What are some benefits to SASS?:

-SASS comes with many easy to implement features that make the frontend look much cooler. Animation for one is easy to produce using SASS. Additionally, SASS works with all of the common forms of frontend like html and Markdown, as SASS has similar functionality to CSS.

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

  • AN example of an advanced SASS property would be image manipulation, more specifically animating the images and making them move.

For example, you can use keyframes in SASS to have an image fade in and out of 2 frames. We could have one image be constantly fading between a different frame we set, or we can use rotation to have an image constantly rotate for something kind of impressive.

How does the number guesser game work?

  • In terms of coding and functions:

the game uses a simple function, run by a button to check the user's input for what they believe is the answer. The function uses if statements to compare the user's answer the a randomly selected number (the answer). If the variiables are the same and we are right, a element should change to reflect that we are right, otherwise we use else and else if to tell the user whether or not their guess is too high or too low, changing an element to reflect that.

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

  • we could first add some more visually appealing colors to start. Next, we could create some elements for the buttons that look better than the standard ones created. We could also try to incorporate some advanced sass like special images or something like that. just do whatever we would normally do with css.

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: 

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

  Input In [1]
    <html>
    ^
SyntaxError: invalid syntax