Score Board

For this assignment, you will be creating a simple interactive scoreboard for your favorite sport.

Requirements

• Refer to this mockup to design your page:

• Use the HTML and CSS here to jump-start your project.
• A user should be able to update a score and the teams playing.

Explorer Mode

• Create a new project and implement the design using the given HTML & CSS.
• Assign click events to the update buttons to update the corresponding values on the page. The score buttons should adjust the current score by a "hard-coded" value.
• Deploy your site.

Adventure Mode

• Implement a Quarter/Period Tracker that would be appropriate for the sport.
• Add some styling to make it more presentable. Have fun with it.
• Make the layout responsive.

Epic Mode

• Add a Timer that counts down automatically and updates the period/quarter appropriately.
• Save/load the information to local storage.
• Add CSS to the winning teams score to indicate who is currently winning.
• Add anything else that your sport would have on its scoreboard (e.g. fouls, sacks, shots on goal, etc.).
• Improve the UX to help to make scorekeeping by your sport easier.

INSERT INTO Student (knowledge) VALUES ('SQL')

Every application uses data in some way. This will help you set up your development environment as well as get used to querying databases.

Objectives

• Install Postgres
• Create a database for Employees
• Write some queries to use the database

Requirements

• Set up postgres by following these directions.

Explorer Mode

• Install Postgres

• Create a database: company_database

• Create a table: employees

• Add the following columns to the table, Use your best judgement for data types

  • full_name
  • salary
  • job_position
  • phone_extension
  • part_time

• Create queries that can do the following:

  • Select all columns for all employees
  • Select only the Full Name and Phone Extension for only Full Time employees
  • Insert a new part time employee, as a software developer, part time, with a salary of 450
  • Update all employees that are the cooks to have a salary of 500
  • Delete all employees that have the full name of "Lazy Lynn"
  • Update all employees to be full time
  • Add a column to the table: parking_spot_number as a string that up to 10 characters long

• Turn in the above queries as a gist

Adventure Mode

• Work on your final project

Epic Mode

• Investigate working with C# and Postgres, HINT: entity framework core

Additional Resources

• PostgreSQL 10 Documentation

Recommended Practice:

• For more practice, Hackerrank has a SQL Track

Music Madness

For tonight, I want you to show off your music artists. You will be creating a multiple page app, using react-router.

Objectives

• Create a SPA, with a few pages
• Deploying your website

Requirements

• Build a website that has 4 pages.
  • 1 landing
  • a page for your top three favorite bands.

Explorer Mode

• Add react-router-dom to your project.
• Create a Landing page that displays a short description of all three of your bands
• Build 3 band pages. These pages should have a
  • a band picture
  • band name
  • Latest Album information
• Each page should have a nav bar that allows the user to browse from page to page
• Deploy your site

TIP: for Explorer mode focus on getting the router set up and linking the pages to each other.

Adventure Mode

• Instead of hard coding the URL, try to use parameters, components and JSON file to supply navigation for your site.

Epic Mode

• Add integrations from Last.fm API. This API has a bunch of features. Go crazy, the sky is the limit.

Additional Resources

• npm react-router-dom
• yarn add react-router-dom

Minesweeper

In this assignment, you will communicate with a back-end API server to create the user-interface for a Minesweeper clone. It might help to familiarize yourself with the game if you've never played it.

Objectives

• Understand how state drives changes to an interface in React
• Respond to user events in React
• Understand and use REST APIs
• Use React lifecycle methods
• Understand and interpret API documentation
• Use fetch or axios to perform POST request or

Requirements

Read over the documentation for the API we'll be using:

https://minesweeper-api.herokuapp.com/

You will need to interpret the response and render a graphical user interface. The API results include an array of arrays (two-dimensional array), these represent rows and columns. These are probably best translated into table rows (<tr>) and table data (<td>) cells.

Here's an example implementation of this assignment:

Explorer Mode

• Create a new game when the page loads, and render it on the screen, this look as close to gif as possible.
• Style the cells appropriately.
• Left clicking a cell performs the check action
• Right/secondary clicking a cell performs the flag action
• When the game status changed to won or lost, show a victory or failure message.

Adventure Mode

• Before creating the game, prompt the user to choose: Easy, Medium, or Hard mode.
• Have fun with the styling, make it your own

Epic Mode

• Render your victory/failure message as it's own "screen".
• On that screen add a button to restart or play again.
• Store the current game id in localStorage, and render the same game, rather than creating a new one every time (until the player presses the restart button).
• Add sound effects.

Additional Resources

• React Mouse Events

Suncoast Overflow

As we explore the concepts of a full stack web app, a good way to practice is to duplicate an existing site. For this project, you will be creating a copy of a site that you know very well, StackOverflow.

The finished product will be due Friday, so this will be a little bigger. Pace yourself

First, we need to the database schema and start to build the API for the core functionality

Objectives

• Create a full stack web app, from database to API, to frontend, as well as styled
• Practice working in groups

Requirements

In groups of 2 or 3, create an anonymous question and answer site, that allows users to up-vote and down-vote questions and answers.

The core functionality is:

• as a user I should be able to view and search questions asked
• As a user I should be able to view a question and its answers
• As a user I should be able to post a question, this can anonymous, and should be for Explorer Mode
• As a user I should be able to answer a question
• As a user I should be able to up/down vote an answer
• As a user I should be able to up/down vote a question

Explorer Mode

• Create an ERD for the core functionality above
• Create API definitions for all the endpoints needed. This should include URLs, params, body, and return types.
• Create an API that supports your design
• Create the Client app application that uses your API

Adventure Mode

• Work on your capstone project

Wax On, Wax Off

A koan is a riddle or puzzle that Zen Buddhists use during meditation to help them unravel greater truths about the world and about themselves. Zen masters have been testing their students with these stories, questions, or phrases for centuries.

As we learn a new language, we need to practice the new ideas, syntax, and paradigms that come what that language. The idea of language Koans helps both beginners and veterans learn the ins and outs of the language.

Objectives

• Complete your language Koans
• further your capstone project

Requirements

• Head to DotNetCoreKoans and follow the directions in the README.md. This will have you fork this repository, clone it and practice the

Explorer Mode

• Work on the capstone assignment

Adventure Mode, part 1

• Complete the Koans
• Once you are done with you koans, (or need a break), continue to work on the HTML of your capstone.
• Now that you know some SQL and databases, start working on an ERD (Entity relationship diagram) of your capstone projects.

Explorer Mode, part 2

• (.NET) There are a few Koans that were commented out, comment these in and complete them.

Reading Material

.NET Students

• Here are some videos about inheritance and interfaces to help gain some more exposure.
  • Interfaces
  • Inheritance
  • Getters & Setters

Explosion Api

You have already solved the explosion and mumbling katas. The client loves your solution so much that they want you to turn it into an API us on the web.

For tonight, I want you to create a simple API with two endpoints, one for the explosion and one for the mumbling.

Objectives

• Create a simple API
• Practice problem solving

Requirements

• Install the sdg-api template using the command dotnet new -i SDG.templates.Web.API
• Create 2 endpoints, /api/mumbling and api/explosion, that are based off of the katas,[https://www.codewars.com/kata/mumbling](https://www.codewars.com/kata/mumbling) and [https://www.codewars.com/kata/digits-explosion](https://www.codewars.com/kata/digits-explosion) respectfully.

Explorer Mode

• Create a new sdg-web api project
• Create a endpoint for the mumbling endpoint
  • Create a new Controller called MumblingController
  • This will have one HttpGet
  • The one get will accept a string
  • This endpoint will take the string passed to it, manipulate according to the kata https://www.codewars.com/kata/mumbling and return the result
  • This will return a ActionResult<string>
• Create a endpoint for the explosion endpoint
  • Create a new Controller called ExplosionController
  • This will have one HttpGet
  • The one get will accept a string
  • This endpoint will take the string passed to it, manipulate according to the kata hhttps://www.codewars.com/kata/digits-explosion and return the result
  • This will return a ActionResult<string>
• turn in your project via github with a .gitignore.

Adventure Mode

• Ensure your instructor has seen and approved your wireframes for your capstone.
• Work on the HTML for your capstone.
• Work on your Resume for Career Support.

A mine!

This morning we did a couple of code reviews. Take these lessons and finish up your minesweeper apps.

Also, we have been exploring react for the past week. Let's take those skills and upgrade some old projects.

Objectives

• With your new knowledge, finish minesweeper
• Update an old project using React.

Explorer Mode

• Finish your minesweeper
• Go back to project to a project unit-i (week 1 through 3)

Adventure Mode

• Work on any previous adventure or epic mode of any previous homework
• Go back and redo an old project.

Cloudy with a chance of Syntax Error

Using a popular weather API, Create a web site that allows a user to search for a location and gets that location's weather.

Objectives

• Practice working with an API
• Practice working with data that was structure by a third party

Requirements

• Using openweathermap.org, create a simple UI that allows a user to search for the current weather by zip code or city.

SIGN UP!

• Visit openweathermap.org and signup for an account
• Visit API Keys in your dashboard
• Copy your API key
• You can use the API key in any of the URLs by appending appid=KEY
  • Example: from the docs https://api.openweathermap.org/data/2.5/weather?q=Tampa becomes https://api.openweathermap.org/data/2.5/weather?q=Tampa&appid=cbb5b6537cd4a6eccd9aee04ffffffff
  • NOTE: It will take about 10 to 30 minutes for your API key to be active

Explorer Mode

• Create a simple HTML page that has a text box and a search button
• Allow the user to type in a place, click the search button, and , using openweathermap.org, get the current weather for that location.
• Display the weather to user by adding elements to the DOM.
• Allow the user to search by zip or city name.

Adventure Mode

• Using the HTML5 Geolocation API, search for the users current location when page loads.
• Store the Users last search and use it to search for the value on page load. HINT: localstorage
• remove the need for the search button and search when the user stops typing. HINT: use setTimeout and the change event. to track when the user stops typing.

Epic Mode

• Add a type a head using Google Places API
• Head back to Blackjack and use this as your API.

Update the inventory

The store that had you built the API loves it so much and it caused the store to become more successful and open up multiple locations.

We need to update our API to accommodate many locations. This means will have to add a new Model and new a relationship to our diagrams.

Objectives

• Extend your API to not only track inventory, but also track how much we have at each location.
• practice creating ASP.NET Web API endpoints
• practice EF Core.
• practice SQL Relationships

Requirements

• Create a simple API that has a handful of endpoints to manage data
• The API should be using Web API Controllers, Ef Core, and Postgres database
• The API will have 2 models now.

Explorer Mode

• Create a Model for the Locations

• The Locations should have at least

  • Id
  • Address
  • ManagerName
  • PhoneNumber

• Add a relationship to your Item model to include a Foreign Key to the Locations table. This will be two new properties to your Existing Item model that points to the new Model you create (Location)

• Add a new Locations Controller. This will have 2 endpoints

  • A POST endpoint that allows a user to create a location
  • A GET endpoint that gets all locations

• Update the following endpoints.

• Update the GET all items endpoint to need a location
• Update the GET endpoint for each item to need a location
• Update the POST endpoint that allows a user/client to add an item to the inventory to a location
• Update the PUT endpoint that allows a user/client to update an item for a location
• Update the DELETE endpoint that allows a user/client to delete an item for a location
• Add a new GET endpoint to get all items that are out of stock for a location. Keep you old GET endpoint for out of stock, but create a new one
• Update the GET endpoint that allows the user to search for an item based on SKU, and this should search all the locations.

Adventure Mode

• Ensure your instructor has seen and approved your wireframes for your capstone.
• Work on your capstone.

Who works here?

Over the last 6 weeks, you have learned many concepts about front-end development. To demonstrate how far you have come, I want you to build an Employee Directory. For Explorer Mode, this will be a site with 3 pages; view all employees, add an employee, and view an employee. Adventure Mode adds delete and updating an employee.

Objectives

• Use react-router-dom to build a multiple page SPA
• Create an API driven UI
• Practice the skills you have learned in the past 6 weeks.
• practice wireframing a new app

Requirements

• Create a new gamma stack project
• Add react-router-dom and set up 3 pages
• This this api to manage a company's list of employees. Check out Additional Resources for how to use the API.
• Create a relatively unique name for your company. You will use this as your company key when calling the endpoints of the API

Explorer Mode

• Create a react app with 3 pages and navigation between the pages.s
  • View All Employees page
    • This page should list all the employees for your company
    • Each employee should display all the details for an employee that is returned by the Get all employees endpoint, https://sdg-staff-directory-app.herokuapp.com/api/${companyName}/employees.
    • Each employee item should link to the employee page for that employee. The URL should look like: /employee/${employeeId}
  • An Employee Page
    • This should display all the details for an employee, All the details that are on an employee should be listed on the page.
    • The API endpoint to use will look like this:[https://sdg-staff-directory-app.herokuapp.com/api/${companyName}/employees/${employeeId}].
  • Add an Employee Page
    • This should allow the user to add all of the fields for an employee.
    • The UI should let the user know that the person was added to the API successfully
  • Your app should be styled and responsive. Have fun with it.
  • Deploy your app

Adventure Mode

• Add the ability to delete a user
• Add the ability to update a user

Epic Mode

• You app currently only works for one company, but now add the ability to change companies.

Additional Resources

TIPS:

• This is a typical weekend project, remember to plan, keep pace and turn in however far you get on Sunday night.
• A good milestone for Thursday would be
  • to have a wireframe for each completed
  • react-router-dom set up, including a component for each page, and be able to click to different pages
  • an understanding of the API
  • have some HTML and CSS done.

How to use the API

API Documentations: https://sdg-staff-directory-app.herokuapp.com/swagger/index.html

• The use the API, you will need to name your company for which you are making an employee directory for. This will serve as the unique key for your company. My fake company is called fakebook. That means that I want to make an API call to get all of my employees, I will do a fetch to the URL.

https://sdg-staff-directory-app.herokuapp.com/api/fakebook/employees

That will return me a list of employees that are apart of the company

If I want to get a different company's (Boogle) employees. I would do

https://sdg-staff-directory-app.herokuapp.com/api/Boogle/employees

for your project you will be using the same company for every request

• To get an employee for that company, you will use the endpoint to get an employee. For me to get an employee of fakebook I would use the endpoint

https://sdg-staff-directory-app.herokuapp.com/api/fakebook/employees/3

A GET request to the above URL will get the employee with the id of 3, and that works for fakebook.

• To create an employee for a company, you will have to use the POST endpoint. If I wanted to add an employee for fakebook, I will send a POST request this endpoint

https://sdg-staff-directory-app.herokuapp.com/api/fakebook/employees/

with my data in this JSON format:

  "firstName": "string",
  "lastName": "string",
  "birthday": "2019-06-06T16:48:57.256Z",
  "hiredDate": "2019-06-06T16:48:57.256Z",
  "isFullTime": true,
  "profileImage": "string",
  "jobTitle": "string",
  "jobDescription": "string",
  "phoneNumber": "string",
  "address": "string",
  "city": "string",
  "zip": "string",
  "state": "string",
  "salary": 0,
  "gender": "string",
  "email": "string",
  "emergencyContactPerson": "string",
  "emergencyContactPhone": "string",
  "emergencyContactAddress": "string",
  "ptoHours": 0,
}

Preview.

• On Monday we start learning SQL. Read this as a preview

ORM Safari!

We are taking a surprise trip to the Savannah for a safari to see all sorts of exotic animals. During our time on safari, we want to keep track of all the animals we have seen. For this, we need to create a database, as well as a small console application to help record what we see.

Objectives

• Use an ORM to query against a database

Requirements

Additional Reading

NOTE: The Additional Resources section below is very helpful. Consider reading this after reading Explorer mode. Then make a plan for the assignment for digging in and writing code.

Explorer Mode - Part 1

• Create a database called SafariVacation
  • This will have 1 table called SeenAnimals that has the following columns
    • Id (int)
    • Species (string)
    • CountOfTimesSeen (int)
    • LocationOfLastSeen (string)
  • NOTE: This should be made all in the code (C#), and not created in the pgcli.
• Create a small console application, and create the following queries using your languages ORM.
  • Display all animals the user has seen
  • Update the CountOfTimesSeen and LocationOfLastSeen for an animal
  • Display all animals seen in the Jungle
  • Remove all animals that I have seen in the Desert.
  • Add all the CountOfTimesSeen and get a total number of animals seen
  • Get the CountOfTimesSeen of lions, tigers and bears

Explorer Mode - part 2

• Work on the Koans.

Adventure Mode

• Add a new column called LastSeenTime, with a type of DateTime. This will require you to add and run a new migration.

Epic Mode

• Continue to make progress on your capstone project.

Additional Resources

.NET

Here are the interesting commands you will need for tonight's assignment

• To add Entity Framework to your project:

 dotnet add package Microsoft.EntityFrameworkCore.Design 

 dotnet add package Npgsql.EntityFrameworkCore.PostgreSQL

• To create your database:

createdb <<DatabaseName>>

• To create the DbContext

dotnet ef dbcontext scaffold "server=localhost;database=<<DatabaseName>>" Npgsql.EntityFrameworkCore.PostgreSQL -c <<DatabaseName>>Context

• Add a migration:

 dotnet ef migrations add AddBaordGameTable

• Update your database

dotnet ef database update

• Documentation: Dotnet EF CLI Docs
• Useful C# Notes: Lecture Notes

Crypto Ticker

In this project, you'll use React and the 3rd-party API as a data to create a real-time price tracker for some popular cryptocurrencies.

Objectives

• Use state in React
• Render data from an API request in React
• Use setInterval to repeat
• Use React the following lifecycle methods: componentDidMount, componentWillUnmount
• Use React Component subclasses
• Use stateless-functional components in React

Requirements

Use the following API endpoint to fetch data and display it in your application:

https://api.coinmarketcap.com/v2/ticker/?limit=20

The data should refresh periodically. Using the id field in the API results for each currency, you can get the URL for the logo of a coin like this:

https://s2.coinmarketcap.com/static/img/coins/16x16/${coin.id}.png

Explorer Mode

• Use create-react-app to set up your new application.
• Fetch new currency data from the API endpoint every 10 seconds.
• Update the applications state with currency data from the API.
• Create an HTML table to display the currency data in the application state.
• Use props to render table rows as child components for each currency in the application state.
• Use stateless-functional components where appropriate.

Adventure Mode

• If the updated price of a currency is higher than the last update, show the price in green. If it's lower, show the price in red. HINT: You'll probably want to look into additional lifecycle methods for your React components to accomplish this.

Epic Mode

• How else could we present the changing price to the user? Look into Edward Tufte's sparklines, how do you think this could be implemented as a React component? Try using a third party library to render a sparkline for each currency.

Additional Resources

• State and Lifecycle in the React Documentation
• AJAX and APIs in the React Documentation
• setInterval documentation on MDN.
• today's slides

Blackjack

In this project, you will create a playable game of Blackjack.

Objectives

• Create an event-driven user interface
• Effectively use loops, conditionals, and other control structures to implement control flows
• Demonstrate usage of JavaScript objects and arrays to model resources

Requirements

Create a single player blackjack games that play against the house, i.e. a human player and computer dealer. You are free to create the user interface however you want, but keep it simple for Explorer Mode.

General Rules:

• The game should be played with a standard deck of playing cards (52).
• The house should be dealt with two cards, hidden from the player until the house reveals its hand.
• The player should be dealt a hand that contains two cards, visible to the player.
• The player should have a chance to hit (i.e. be dealt another card) until they decide to stop or they bust (i.e. their total is over 21 ).
• When the player stands, the house will reveal its hand and hit (i.e. draw cards) until they have 17 or more.
• If either the house or the player bust, they lose.

Assets

• Find a set of card images here
• Make an images folder in your project
• Extract that cards.zip file and then copy/move the extracted images into your project's images folder
• Note that the names of the images are of the form face of suit.svg (without the spaces)

Explorer Mode

• The player should have two choices: "Hit" and "Stand"
• Consider Aces to be worth 11, never 1.
• The page should display the winner. For this mode, the winner is defined as who was closer to a blackjack (21) without going over.
• There should be an option to play again; this should reset the hands and reshuffle the deck.

Adventure Mode

• Reveal one of the house's cards to the player when cards are first dealt.
• Consider aces be worth one or eleven.
• Allow the player to "Split".
• Improve the win requirements. From Wikipedia:

  Players win by not busting and having a total higher than the dealer, or not busting and having the dealer bust, or getting a blackjack without the dealer getting a blackjack. If the player and dealer have the same total (not counting blackjacks), this is called a "push", and the player typically does not win or lose money on that hand. Otherwise, the dealer wins.

Epic Mode

• Add a betting system that carries between rounds
• Allow the player to "Double down" or "Surrender"
• Add more Players

Let's all go to the movies

This weekend, you will pair up in groups of 2 or 3 to create a "Now Playing in Theatres" website. This will use an API, and few pages to display what is currently showing.

Objectives

• Work with an API to display data
• Work with React and React Router
• Work in groups to create a project together

Requirements

• Use this API
  • You will have to create an account to get a key, Feel free to use the address and phone number of campus to sign up with
• Work in groups of 2 or 3, these must be decided by the time you leave today (Thursday). One member of your group must slack your instructor the who all is in your group.
• Each group will be working on one repository, decide in each group who's account it goes under. Divide up the work any way that works for your group, but everyone has to contribute in a meaningful way.
• Use React Router to create the pages.

Explorer Mode

• Create a home page that has:
  • the list of all "now showing" movies, returned from this API https://api.themoviedb.org/3/movie/now_playing?api_key=<<your key here>>>&language=en-US&page=1
  • this page should also random highlight a random "now showing" movie at the top of the page
• Create a page for each movie using the path /Movie/:moveidId that shows all the details for a given movie and the cast of the movie. The cast endpoint is https://api.themoviedb.org/3/movie/<<<Movie Id>>>/credits?api_key=<<your key here>>>
• Each member of the group must still submit the repository for their assignment. This repository should have commits from both students. Your instructor will be looking at commit histories.

Adventure Mode

• Add a page to view all the movies for an actor. This page should show as much as you get from the API about this actor. HINT: Use the People section of the API for this

Epic Mode

• Do the same thing, except with TV Shows. Try to reuse as many components as possible

Recommended Practice:

• Plan early and communicate! The most successful teams work together to create a plan of attack, and communicate what is going on.
• Wireframe out the pages first, that way each member of the group knows the end goal. After you agree on the wireframes, Stick to the wireframes.
• Work in branches or forks. This will help when you need to merge everything together
• Making a git commit, merging & pulling should happen frequently. Do not wait until Sunday night to try to merge everything together. It's recommended getting the git workflow worked out sooner rather than later.
• A good milestone for today is would get git set up, get the wireframes settled, and divide up the work.

Take the next step!

With the wireframes, HTML and CSS created, next up and will be to continue on breathing life into our projects. After the CSS, HTML, and wireframes, we need to start thinking about breathing life into our apps. Take today to start creating your front end, ERD and API definitions.

Objectives

• Start making your front end dynamic and creating components
• Create an ERD for your database, at least a first draft
• Start thinking about your API

Explorer Mode

• A React with your HTML and CSS
• a ERD Diagram on paper/whiteboard/image/online builder
• A read me with your API endpoints Defined

Create a Trello card for one job

In this assignment, you will create a Trello card for a job that you found interesting. This can be for your dream job or just something that sounded interesting to you.

Card Requirements

• Company name - job title

• Description of the company

• Company website link

• Location

• Link to the job description

• Add comments:

• What is their narrative?

• Why do you like this company?

• Why did you like this posting?

• How might you benefit them?

Turning in your assignment

• To turn in this assignement you will move your card to "Ready for Rec" and tag Katherine (@ktrammellsdg) in a comment on that card with the wording "Ready for a Rec"
• Copy and paste the link to your card as a comment on this issue

Due Date

• This assignment is due by 9 am on Friday, May 31st.

Hook, line and sinker!

In this assignment, you'll create an HSL(a) color picker with React, but this time using React Hooks

First, a review of color theory...

On the web, and computers in general, we often think of colors using the RGB color model. In HTML and CSS, we often use hexadecimal triplets to describe colors in RGB. For example, #76BCBB represents a nice shade of blue: . 76 is the red component, BC for green, and BB for blue. Those hexadecimal numbers translate, respectively, to 118, 188, 187 in decimal. The range for each color is 0 through 255.

In this model, the three additive primary colors (red, green, and blue) are combined to create colors. The absence of these colors creates black, while all three colors at full strength combine to create white. In hexadecimal, FF represent the decimal value 255. This helps to explain why #FFFFFF represents white. We can also use other notations in CSS to specify colors, such as rgb(118, 188, 187), where the decimal values are given.

RGB isn't the only way we can use numbers to represent colors; there exists many color models, some with specialized purposes, such as CMYK a subtractive model used in printing. In many color models the relationship between the color components isn't always evident in any meaningful way, especially if you're trying to combine them to find a specific color. Try looking for that perfect shade of blue on an RGB color picker, you will probably find it to be a little counter-intuitive. Some color models are easy to reason about, such as HSL (hue, saturation, lightness) and HSB (hue, saturation, brightness). Like RGB, CSS supports defining colors in HSL:

hsl(50,8%,20%)

The first value hue is given as a degrees (around a color wheel), the second value is a percentage of saturation (0% being grey, 100% fully saturated), and the third value, a percentage of lightness (0% black, 100% white).

You can also read this short guide to HSL

Objectives

• Respond to user events in React
• Use hooks in react to drive changes to a user interface
• Use props to drive inline styles to dynamically update the appearance of DOM elements
• Understand RGB vs HSL color models
• Use controlled form inputs in React

Requirements

Use range type input elements to drive a color display. You'll end up with something like this:

HINT: You will want to combine techniques of string interpolation and using inline styles in React, for example:

<div style={{ backgroundColor: `hsl(50,8%,20%)` }} >
  Hello World
</div>

Explorer Mode

• use hooks to store all changing values
• Represent the three values, hue, saturation, and lightness with hooks.
• Add three sliders that update their respective values (hue, saturation, and lightness).
• Display the color on the screen, in both text (i.e. hsl(50, 8%, 20%)) and the actual color as a background color on an element.
• Initialize the hooks to a random color when the page is loaded.
• Add a button that picks a new random color.

Adventure Mode

• Work on other assignments you might be assigned as well. Career support or old adventure modes come to mind.
• [ ][do you wanna build a snowman?] (https://suncoast.io/handbook/curriculum/front-end/react-ii/assignments/snowman)

Additional Resources

• Hooks
• HSL Color Picker
• Inline styles in React
• hsl() and hsla() on MDN

Spit and Polish

Your GitHub repository will be part of your portfolio and you will likely link to it from your portfolio.

Creating a clean looking README is as important for a project as having nice clean code.

Here are some examples of great READMEs:

• https://github.com/axios/axios
• https://github.com/Microsoft/vscode
• https://github.com/twbs/bootstrap
• https://github.com/electron/electron

Here are some example of great student READMEs:

• https://github.com/cfsanderson/Minesweeper
• https://github.com/m1g/tic-react-toe
• https://github.com/m1g/snowman

Objectives

• Create quality readmes

Explorer Mode

• Choose several (at least three) repositories to update the READMEs
• Include a description, in your own words, of what the assignment was
• Include a list of technologies (and links to the homepage for each) you used
• Include a link to the project in production (netlify, etc.)
• Include a screenshot or an animated gif (see Kap, Recordit, or Licecap)
• Optional:
  • Include an aspect you are particularly proud of
  • Include a snippet of code you are proud of (see GitHub Markdown on how to format code snippets)

Adventure Mode

• Start working on your resume
• Go back and do any outstanding homework
• Go back and do an adventure mode or epic mode that you never got around to

Epic mode

• Capstones are going to be coming sooner rather than later. Check out this resource To help get you started.

Expanding Your World

In this assignment, you will end up with a simple styled web page, published on the web.

Create a new website that shows some basic styling and formatting using HTML and CSS. This website should help share some information for one of your favorite hobbies.

Objectives

• Practice using your tools text editor
• Explore new CSS properties
• Publish a web page

Requirements

• Have git, hub, and node installed. We should have done this together in class.

Explorer Mode

• Follow all of the setup instructions (See "Assignment Setup").
• Create a new app-app project.
• Using CSS, style your page to imitate some of the classic designs of the web. Feel free to make this look as "bad" as you want. Here are some sites to gain inspiration:
  • 10 90s websites designs you won’t believe existed
• Add a second page about your hobby with (at least) 2 pictures and with other facts about your hobby.
• Add a menu to your site so a user can go back and forth between the new pages.
• Between the 2 pages, use at least 5 tag selectors, 5 id selectors, and 5 class selectors to style content on your page.
• Deploy your site.

Adventure Mode

• use pseudo-classes to style elements when you hover the mouse over them
• Add a third page, that has a table. Create this table to have alternating colored rows and a hover over color.
• Make a nav bar that sticks to the top of the page (see the nav bar here for example - https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes)
• Make a footer that always sticks to the bottom of the page

Epic Mode

• Explore CSS animations and add some life to your static page. Feel free to really dig into these and try to animate all elements on your page to some extent

Additional Resources

CSS

• CSS selectos we like
• Cool game to learn CSS selectors
• Introduction to CSS
• Getting Started with CSS Rules
• All the CSS properties
• pseudo-classes and pseudo-elements
• http://www.csszengarden.com/

HTML

• HTML Tags
• Evolution of the Web

React-ified Octocats

Your task is to refactor the static Octodex into a static (non-API) version using React.

You'll identify the main Components on the page and create React components for each, breaking down those Components into smaller ones as needed.

Objectives

• Learn to identify parts of a web site as Components
• Use app-app (GAMMA stack) to build a React project
• Understand and use React components

Stretch Objectives

• Understand and use "props" in React
• Use Array.prototype.map to render a collection of components in React

Explorer Mode

• Use this HTML and CSS as a starting point
• Figure out the main components of the page. These will be the main components in your <App> component.
• You should have at least two components...
• Create your React app
• Copy the CSS from the template into index.css
• Clear out the implementation in the render method of App and have it render your main components.
• Create those components and paste the appropriate HTML from the Octodex into the render method of those components.
• Break down those components and use this.props to dynamically customize the components that need it.

Adventure Mode

• Place the definition of each Octocat in an array and use map to generate the Octocat components

Epic Mode

• Put the array of Octocats in an octocats.json file and import that into your app.
• OR
• Use the fetch API to retrieve the list of Octocats from this api instead

Additional Resources

• React Documentation
• .map, .reduce & .filter, Oh My!
• Array.prototype.map

Prove yourself, warrior!

This assignment will pull together all the skills and ideas that you have learned for the past three weeks. This project is a bit bigger than usual and will challenge you on the core concepts we have learned over unit-i.

For this assignment, you will solve three code katas, and recreate a simple website that uses an API for the data. This is the website you will make. This website should be responsive and as close as you can make it.

Since this is a more significant assignment, the pacing is critical.

Objectives

• Demonstrate basic knowledge of some programming ideas
• using HTML, CSS and JavaScript re-create a simple website
• Recreate http://sdg-astro-club.surge.sh/

Requirements

• Complete the three selected code katas
• Create an SDG Astro Club website using https://sdg-astro-api.herokuapp.com for the data

Deliverables

• a gist containing the solutions to all three katas
• GitHub repository containing the HTML, JS, and CSS the website
• a URL to the deployed site.

Explorer Mode

• complete the following katas
  • https://www.codewars.com/kata/filter-out-the-geese
  • https://www.codewars.com/kata/beginner-lost-without-a-map/train/javascript
  • https://www.codewars.com/kata/you-only-need-one-beginner
• replicate this site exactly (as close as possible) http://sdg-astro-club.surge.sh/
  • You should pull data from the API https://sdg-astro-api.herokuapp.com
    • use https://sdg-astro-api.herokuapp.com/api/Nasa/apod for the NASA picture of the day
    • use https://sdg-astro-api.herokuapp.com/api/SpaceX/launches/upcoming for the upcoming launch data.
• deploy your site

Advice

• Take this in small steps. I would do this in the following order: Katas, HTML, CSS, Picture of the day, and then Upcoming Launches.
• Commit early and commit often.
• Use Font-awesome for the icons. Attach this script to the head of your page, and you will be able to use the CSS to create the icons

<script
  defer
  src="https://use.fontawesome.com/releases/v5.5.0/js/all.js"
  integrity="sha384-GqVMZRt5Gn7tB9D9q7ONtcp4gtHIUEW/yG7h98J7IpE3kpi+srfFyyB/04OV6pG0"
  crossorigin="anonymous"
></script>
```

Hello, World.

In your first assignment you will end up with a web page, no matter how simple, published on the web.

You will create a simple website that will showcase one of your passions. This is not about making the website flashy, but more about focusing on creating a website and learning your new tools.

For this assignment, you will following along with you instructors to complete this homework.

Objectives

• Get to know your text editor
• Introduce yourself to working on the command line
• Write some HTML
• Publish a web page

Requirements

• Have git, hub, node, app-app installed. We should have done this together in class. Reminder: you only have to install these tools once.

• All of your HTML (and CSS if you do epic mode) should be formatted cleanly and consistently (use your editor to your advantage).

• If you have experience with existing HTML/CSS frameworks (bootstrap, bulma, etc) you may not use them for these assignments.

Explorer Mode

• Follow all of the setup instructions.
• Compose a short essay (just a couple paragraphs at most) about a hobby you either enjoy, or would like to learn about. We will be expanding on this page in future assignments, so pick something fun!
• Put your short essay into an HTML page, using appropriate semantic HTML tags. (See the link HTML Tag Reference below). Give your webpage a simple header and footer as well.
• Deploy your site.

Adventure Mode

• Use at least one image somewhere on the page.
• Learn about and investigate the a to add (at least 2) more pages to your site.
• Re-deploy your site.
• Read more about CSS.

Epic Mode

• Research the id and class HTML attributes.
• Use valid CSS to style the page (in the neighborhood of a couple dozen CSS declarations).
• Create a full layout for your page (heading, navigation, sidebar, footer, etc.).
• Use more complex CSS selectors than we covered in class, e.g. attribute selectors or sibling selectors.

Additional Resources

• HTML Tag Reference
• How do HTML Tags work
• Evolution of the Web
• Atom Flight Manual
  • Moving in Atom
  • Selecting Text
  • Find and Replace
• Getting started with VS Code
• Visual Studio Code Basics

Reading Material

To prep for tomorrow's lesson, you can read about CSS.

Flexbox

Now that we have learned the power of flexbox we will apply it to the sites we are building. We'll also go back to a past assignment and see how flexbox would simplify our HTML and CSS.

Objectives

• Build on your knowledge of HTML & CSS
• Use flexbox techniques layout pages.
• Implement, from scratch, a given design
• Understand HTML/CSS Layout
• Be able to place elements on a page where you want them.

Requirements

• You should strive to implement the design as close as possible, though, especially if you've never touch HTML or CSS before, this can be extraordinarily difficult and will take a lot of practice and mileage.

• Note: You should complete at least the tasks given for explorer mode as listed below before turning in the assignment, as well as before attempting adventure or epic modes.

Explorer Mode

• Recreate the page 'The Daily Kitteh' using flexbox as closely as you possibly can. Use the same fonts, sizes, and colors.
  • 

Adventure Mode

• Recreate the page `Flebox Article Layout' as closely as possible.
  • 

Epic Mode

• Recreate (Octodex)[https://octodex.github.com/]. Only do enough cats (about 6) to prove that your site is flexing properly
• Recreate the page Skeleton Layout example as closely as possible.
  • 

Additional Resources

• https://css-tricks.com/snippets/css/a-guide-to-flexbox/
• http://www.evolutionoftheweb.com

Recommended Practice:

• https://flexboxfroggy.com/
• https://mastery.games/p/flexbox-zombies

Key areas of Information to include:

Contact information

• Email
• Phone Number (Google numbers are great if you want to protect your personal number)
• Github link
• Portfolio link

Summary

• Should be a brief paragraph (three to five sentences) that shows the value you bring by highlighting your skills and a couple of big career wins. But rather than labeling it a “summary,” simply use a headline that encapsulates your credentials.

Skills

• You’ll want to incorporate the right keywords so that your resume is optimized for application tracking systems

Professional experience

• Focus on your accomplishments rather than your day-to-day responsibilities

Education

• Simply write where you went college and your degree.
• It’s ok to move this towards the top if you have limited work experience and want to highlight your experience at SDG

Bonus:

• Volunteering and community service

Due Date: Wednesday, June 19th

• Upload or submit a link to your resume for review.

JavaScript Iteration

Using JavaScript takes practice and the best practice is repetition. This exercise allow you time to work on the basics of JavaScript and how to apply that logic to solving problems.

Objectives

After completing this assignment, you should be able to:

• Demonstrate understanding of iteration/enumeration
• Further your black jack game

Instructions

1. Fork this repository to your own account.
2. Change into your projects directory:
3. Clone your repository: hub clone js-iteration
4. Change into your project's directory: `cd js-iteration``
5. Install the dependencies: yarn install (or just yarn for short)
6. Open in your editor]
7. Start the test runner: yarn test
8. Open src/functions.test.js and work on functions until tests pass.
9. Commit and push your work to GitHub.
10. Turn in the URL to your GitHub repo.

Explorer Mode

• Take a little time, (up to an hour or two) and work on your black game using the ideas we covered today in class
• Work on js-iterations using the directions above
• Finish the code and have all tests passing
• Have no linter warnings
• Turn in the homework using the URL to your repository on GitHub.

Adventure Mode

• Do the same with the JavaScript Koans at https://github.com/suncoast-devs/koans/blob/master/koans.js

• Do the same with the Function-Junction Koans at https://github.com/suncoast-devs/function-junction

Additional Resources

Reference the documentation on DevDocs to find what kind of helpful functions might already be in JavaScript.

• String Functions on DevDocs.
• Array Functions on DevDocs.

A Whole New World

Today you learned a new language and will be starting to explore it more in depth in the coming weeks. Like any good craftsman, the first thing you need is to learn your tools. Tonight, you will be setting up your developer environment, creating a simple console application, and starting your final project.

Objectives

• Set up your dev machines
• Create a simple console application to ensure your machine is set up correctly
• Write a blog article to practice talking about technology

Requirements

.NET Students

• Install the .NET Core SDK.

• Install the follow plugins:

  • C#
  • C# extensions
  • C# code snippets
  • `.gitignore'

• To verify everything was installed correctly, run dotnet -v in your terminal.

Ruby

You should already have Ruby installed.

Explorer Mode

Simple Console Application

• Create a console application that guesses a number that a user has thought of, between 1 and 100. This will use a binary search to guess the correct number

• Here is the JavaScript, browser-based, algorithm to follow. Make sure to understand this first before writing new code: https://codepen.io/ambethia/pen/KNewBb.
  NOTE You will be translating this from the event-driven paradigm of HTML to the more procedural paradigm of a console application.

• For Explorer Mode, you do not have to put in the menu or other user experience "nice to haves", focus on the just the core algorithm.

Wireframes and Ideas

• Work on your wireframes and ironing out your idea. Work with your instructors and peers to work out the kinks. Ideas should be approved by tomorrow.

Adventure Mode

• Add nice user experience to the console app. Include features such as
  Try again and Welcome, press enter to start

Epic Mode

• Eventually, we will be using an MVC application structure. To prepare for this, refactor your code to have all your business logic in a separate class and all your console interaction in the main class.

Additional Resources

• .NET

  • .NET Documentation

Score Board, Part 2

For this assignment, you will extending and giving your scoreboard additional features.

Requirements

• use last's nights project, add a max score, a min score, and a winner.

Explorer Mode

• Add a if statement to stop each team's score from going below 0.
• Add an if statement to stop each team's score from going above 21
• When a team gets 21 points, disable the buttons and display an message to the user of who won
• Add a reset button that resets the scoreboard back to the each team having 0 points and re-enables the buttons. This button should not reset the page without having the page refreshed.

Adventure Mode

• Add more CSS to the winning teams score to indicate who won.
• Implement a Quarter/Period Tracker that would be appropriate for the sport.
• Add some styling to make it more presentable. Have fun with it.
• Make the layout responsive.

Epic Mode

• Add a Timer that counts down automatically and updates the period/quarter appropriately.
• Save/load the information to local storage.
• Add anything else that your sport would have on its scoreboard (e.g. fouls, sacks, shots on goal, etc.).
• Improve the UX to help to make scorekeeping by your sport easier.

Super Epic mode

• Build the popular game "rock paper scissors"

All Cards on Deck!

In this project, you will use JavaScript to model a deck of playing cards. You'll also add functionality to it such as shuffling and dealing.

Shuffling Cards

Computers are notoriously bad at random numbers. This is a pretty deep and complex topic, but it's worth pointing out that most random numbers we use in computing are actually "pseudorandom". For this assignment, you will read about, then implement, a popular algorithm that shuffles the order of a finite set using JavaScript's built in Math.random() function as a pseudorandom number generator.

Objectives

• Demonstrate usage of JavaScript objects and arrays to model resources
• Understand and implement algorithms
• Create an event-driven user interface

Requirements

• Your deck should contain 52 unique cards.
• All cards should be represented as as string such as "Ace of Hearts"
• There are four suits: "Clubs", "Diamonds", "Hearts", and "Spades".
• There are 13 ranks: "Ace", "2", "3", "4", "5", "6", "7", "8", "9", "10", "Jack", "Queen", and "King".

You will model these in code, in any way you see fit. It may require you to experiment and try a number of techniques. There are many valid solutions. Your user interface should consist of a face-down deck, and a face-up "hand" of cards that have been dealt with.

Read about, and implement the Fisher–Yates shuffle algorithm:

For our purposes, n is 52:

for i from n - 1 down to 1 do:
  j = random integer (where 0 <= j <= i)
  swap items[i] with items[j]

Explorer Mode

• The deck should be randomly shuffled when the page is loaded.
• Clicking on the deck should deal a single card, making it visible in the face-up a hand.

Adventure Mode

• Implement a way to deal cards into two or more hands

Epic Mode

• Implement the game of War

Additional Resources

A Hint on Random Numbers

This snippet will give you a random integer, z between 0 and n:

const z = Math.floor(Math.random() * n)

Let's break this down from the inside out:

1. For this example, assume n is 20.
2. We use Math.random() to generate a floating-point number between 0 and 1. Let's assume our random value is 0.42.
3. Multiply that number by n. If we think of this random value as a percentage, multiplying these gives us a number that is some "percentage" of n. Their product is 8.4, or 42% of n.
4. We use Math.floor() to round down to the nearest whole number, i.e. 8.

Because we're rounding down, it's impossible to get 20. This will give us an integer between 0 and 19. This technique is perfect for finding a "random" index in an array of length n.

Slides

https://slides.com/markdewey-1/arrays-and-loops

Let's get visual!

With the wireframes created, we need to start breathing life into our application. The next step would be to create HTML & CSS. This is the next step because, remember, it all comes down to HTML. This is what the user sees

NOTE: Really take advantage of this weekend to get make progress on your capstone. Like the last 7 weeks, the next 5 weeks will go by fast.

Objectives

• Create the HTML and CSS for the final project

Requirements

• Using app-app, start implementing your HTML

Explorer Mode

• Create the HTML and CSS version of your wireframes. Stay as true as possible. This should focus on static HTML and CSS.

It starts with a plan.

We are starting the final stretch of the cohort. This means we are starting to focus on our capstone projects.

What is a capstone project

The capstone project is the final of the course. This project should be significant in scope, but able to be trimmed down to a MVP (minimal viable product). Capstones are not necessarily new ideas that are supposed to change the world. Even though your ideas are accepted (and sometimes encourage, with instructor guidance), some of the best demo's did re-invent the wheel.

The capstone has 2 mains goals.

• The capstone provides you practice on the skills that you have grown over the course. During the course, you have built many projects, but on a small scale. The capstone projects allow you to built something at a bigger scale, and over a longer timeline. This more significant scope helps reinforce fundamental concepts.

• The capstone provides a vehicle to show off the skills you have cultivated and want to grow upon further. This project is a great portfolio piece. As described in career support, employers love to see what you build. This portfolio piece helps showcase the skills you want to work on and grow on going forward.

One little spark.

As always, when we go to start a new project. The first step is to create an elevator pitch. This is a short description that describes what your final project is doing. This should be similar to what you said during pitches. This provides us with a starting point and guiding star during our project. This elevator pitch should include

• The problem it solves.
• The core 3 features.

The second step is to always plan out what we are doing. These early plans often take the shape of wireframes. This means that our first task for the capstone projects is to create our wireframes.

The elevator pitch and wireframes should be treated as a detailed road map. When these are created, these should be treated as law; it can be changed but must be changed with purpose.

Objectives

• Finalize the idea for your capstone
• Create wireframes for your capstone project
• Using app-app to start implementing your HTML

Requirements

• Using your favorite way to create wireframes (paper, whiteboard, website), create all the pages for your site no matter how simple the pages are.
• Create a new repository for your capstone project

Explorer Mode

• get your project approved by your instructor.

• Create the elevator pitch for your final projects.

• Place this in the README.md of your capstone project repository

• Create a wireframe for each page in your page you capstone.

• Place these wireframes in a .idea folder of your capstone project repository.

Additional Resources

• Adobe XD
• Moqups
• Figma

A Portfolio

For your first weekend project, we're going to be starting work on a portfolio website that you can improve over the rest of your career.

You can find image assets you'll need here:

https://github.com/tiy-tpa-fee/assignments/tree/master/portfolio/assets

The font used is Roboto.

Also, feel free to change it from Jason's picture to a picture of yourself.

Objectives

• Build on your knowledge of HTML & CSS
• Implement, from scratch, a given design
• Use flexbox techniques layout pages.

Requirements

• Initially, you should implement the design as close as possible to the mockup. Later, you might choose to fit your personality/style.

• Note: You should complete at least the tasks given for explorer mode as listed below before turning in the assignment, as well as before attempting adventure or epic modes.

Explorer Mode

• Recreate the page as closely as you possibly can. Use the same fonts, sizes, and colors.
• Make sure the site is responsive.
• Deploy your site

Adventure Mode

• Take the time to personalize the site with information about yourself, links to your projects, and your pictures.
• Keep it professional, but make it your own.

Epic Mode

• Go back and work on the adventure or epic mode for a past assignment.
• Start to research JavaScript

Choose your own API Adventure

In this assignment, you'll build a front end for an API of your choice

Objectives

• Reinforce component architecture in React
• Reinforce reading of API documentation (some are great, and some are terrible)
• Creating and designing your own features for a web app

Requirements

We're going to build a front end for an API of your choice. Choose one from this list or an API that you are aware of.

NOTE You'll need to choose one with Auth being No or apiKey since we haven't covered OAuth authentication yet.

NOTE You'll also need to check to see if the API will work from your browser. You can do a quick check by making a small app-app, doing an axios.get or fetch of one API URL and see if you get browser errors.

Explorer Mode

• Select an API and get it approved by your instructor.
• Read your API docs
• Use Postman to make some API requests to be familiar with the API and the data it returns
• Create a list of the features you are going to create and how they will work
• Design your User Interface
• Design your HTML statically in App.js
• Make it dynamic
• Use components when needed
• Deploy it and share it with friends

Adventure Mode

• Add multiple pages to your site.
• Add a second API
• Work on components and clean, well-commented code.
• Work on other assignments you might be assigned as well. Career support or old adventure modes come to mind.
• [ ][do you wanna build a snowman?] (https://suncoast.io/handbook/curriculum/front-end/react-ii/assignments/snowman)

Epic mode

• Capstones are going to be coming sooner rather than later. Check out this resource To help get you started.

Don't lose track!

Now that we have new API skills, we want to create an API to help our favorite store keep track of their inventory. This API will be able to let users add, update, delete, and search for items.

Objectives

• Create an API that can CRUD against a Database
• practice creating ASP.NET Web API endpoints
• practice EF Core.

Requirements

• Create a simple API that has a handful of endpoints to manage data
• The API should be using Web API Controllers, Ef Core, and Postgres database

Explorer Mode

• Create a new sdg-api project using the dotnet CLI, have fun with the name and what items the shop sells.

• Create a Model of for an item in the shop. This will be your database table structure.

• The Item should have at least

  • Id
  • SKU
  • Name
  • Short description
  • NumberInStock
  • Price
  • DateOrdered

• Create a GET endpoint for all items in your inventory

• Create a GET endpoint for each item

• Create a POST endpoint that allows a user/client to add an item to the inventory

• Create a PUT endpoint that allows a user/client to update an item

• Create a DELETE endpoint that allows a user/client to delete an item

• Create a GET endpoint to get all items that are out of stock

• Create a GET endpoint that allows the user to search for an item based on SKU

Adventure Mode

• Ensure your instructor has seen and approved your wireframes for your capstone.
• Work on the HTML for your capstone.
• Work on your Resume for Career Support.

Pick a Color, any Color

In this assignment, you'll create an HSL(a) color picker with React.

First, a little bit of color theory...

On the web, and computers in general, we often think of colors using the RGB color model. In HTML and CSS, we often use hexadecimal triplets to describe colors in RGB. For example, #76BCBB represents a nice shade of blue: . 76 is the red component, BC for green, and BB for blue. Those hexadecimal numbers translate, respectively, to 118, 188, 187 in decimal. The range for each color is 0 through 255.

In this model, the three additive primary colors (red, green, and blue) are combined to create colors. The absence of these colors creates black, while all three colors at full strength combine to create white. In hexadecimal, FF represent the decimal value 255. This helps to explain why #FFFFFF represents white. We can also use other notations in CSS to specify colors, such as rgb(118, 188, 187), where the decimal values are given.

RGB isn't the only way we can use numbers to represent colors; there exists many color models, some with specialized purposes, such as CMYK a subtractive model used in printing. In many color models the relationship between the color components isn't always evident in any meaningful way, especially if you're trying to combine them to find a specific color. Try looking for that perfect shade of blue on an RGB color picker, you will probably find it to be a little counter-intuitive. Some color models are easy to reason about, such as HSL (hue, saturation, lightness) and HSB (hue, saturation, brightness). Like RGB, CSS supports defining colors in HSL:

hsl(50,8%,20%)

The first value hue is given as a degrees (around a color wheel), the second value is a percentage of saturation (0% being grey, 100% fully saturated), and the third value, a percentage of lightness (0% black, 100% white).

You can also read this short guide to HSL

Objectives

• Respond to user events in React
• Use state in react to drive changes to a user interface
• Use props to drive inline styles to dynamically update the appearance of DOM elements
• Understand RGB vs HSL color models
• Use controlled form inputs in React

Requirements

Use range type input elements to drive a color display. You'll end up with something like this:

HINT: You will want to combine techniques of string interpolation and using inline styles in React, for example:

<div style={{ backgroundColor: `hsl(50,8%,20%)` }} >
  Hello World
</div>

Explorer Mode

• Represent the three values, hue, saturation, and lightness in your state.
• Add three sliders that update their respective values (hue, saturation, and lightness) in the state when changed.
• Display the color on the screen, in both text (i.e. hsl(50, 8%, 20%)) and the actual color as a background color on an element.
• Initialize the state to a random color when the page is loaded.
• Add a button that picks a new random color.

Adventure Mode

• Add a fourth slider for alpha, be sure to put some kind of pattern behind your color so the user can see the transparency effect.
• Add a section that displays a css class that applies the current background color to an element, just like https://cssgradient.io/
• Only display the output color text in hsla() if the alpha value is less than 1.

In both cases, the sliders should be in the correct positions to represent this random color.

Additional Resources

• HSL Color Picker
• Inline styles in React
• hsl() and hsla() on MDN