It starts with a plan.

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

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.

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 is to create our wireframes.

The elevator pitch and wire frames 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

• 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, free software from Adobe for designing and prototyping website and mobile apps.
• Moqups, a web-based tool for collaborating on wireframes, mockups, and prototypes.

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.

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 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 6 weeks, the next 6 weeks will go by fast.

Objectives

• Create HTML and based off of your wireframes

Requirements

• Using app-app to start implementing your wireframes using HTML and CSS.

Explorer Mode

• Create the HTML and CSS version of your wireframes. Stay as true as possible. This should focus on static HTML and CSS.
• No matter how far you get, submit what you have on Sunday night.

NOTE : Always go static content (HTML and CSS) before making your app dynamic (adding React)

NOTE: Do not feel pressured to make components yet, giant render functions are okay for now

NOTE: FInalize your wireframes before you start coding. It will make your life easier.

Complete the Circle

For this assignment, you will be re-creating an API that was used during unit-ii and re-create it using the language of your choice.

This will be due Sunday at midnight.

Objectives

• work in groups on an API
• create an API that has the basic CRUD actions
• connect up a react app to an API

Requirements

For this project, you will self-organize into groups, and select an API to re-create. After you create the API you will take an old react app and use the new API instead of the old API.

Explorer Mode

In groups of 2 or 3, choose 1 of the following:

• Build the one-list api using the language of your focus. This should be a direct replica of http://one-list-api.herokuapp.com. If you are a .NET student, use the built-in swagger for documentation building and no not worry about recreating the style, just the functionality
  • Take the react app we built in class, and point that to this new API and get that working.
  • Be sure to utilize all Create, Read, Update, Delete endpoints.

~ OR ~

• Go back to your API explorer homework and choose an API that was used. You need to re-create this API. Be sure to the double with your instructor on which one you selected.
  • If your API has only reading of data, built out the creating, updating and deleting of that data as well.
  • Hook up and extend your react app to use all the endpoints that you created.

Adventure Mode

This is the last weekend to really focus on homework and reviewing concepts. Use that to your advantage.

• Go back to an old homework, from any unit and do the adventure or epic mode for that assignment. Re-Submit the repository of the project you worked on here, along with what you worked on.

Epic Mode

• Further your capstone, but only after you have completed Adventure Mode

Additional Resources

• One-list api
• Our react One-list
• public APIs

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.

Let's all go to the movies

This weekend, you will pair up in groups of 2 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, these must be decided by the time you leave today
• Each group will be working on one repository, decide in each group who's account it goes under
• 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 /Movie/:moveidId page that shows all the details for a given movie and the cast of the movie. The cast end point 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.

Adventure Mode

• Add a page to view all the movies for 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
• Like making a git commit, merging & pulling should happen frequently. Do not wait until Monday night to try to merge everything together

Score Board, Part 2

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

Requirements

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

Explorer Mode

• Add an 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 a message to the user of who won
• Add a reset button that resets the scoreboard back to each team having 0 points and re-enables the buttons

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

• Start working on creating a two-player Tic Tac Toe.

Resources

Today's slides: https://slides.com/markdewey-1/if-else/#/

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 plays 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 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. This should do so without having the page reload

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

The Final Countdown

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

Take the Safari Online.

Let's Continue our safari adventure

We are taking a surprise trip to the Savannah for a safari to see all sorts of exotic animals. During our time their we want to keep track of all the animals we have seen. For this, we need to create an API to help record what we see.

Objectives

• Practice Creating Simple APIs
• Practice working with API Tools, such as POSTMAN (https://www.getpostman.com/)

Requirements

• Using Ruby on Rails or ASP.NET create a simple API for you Safari Database
• Use your language's naming conventions where appropriate.

For .NET Students, install the sdg-api template using the command dotnet new -i SDG.templates.Web.API

Explorer Mode (C#)

• Your database will be named called SafariVacation

  • This will have 1 table called SeenAnimals that has the following columns
    • Id
    • Species
    • CountOfTimesSeen
    • LocationOfLastSeen
  • NOTE: This should be made all in the code using Entity Framework and not created in the pgcli.

• Your API should have the following endpoints:
  • Create GET /Animals Endpoint that returns all animals you have seen
  • Create GET /Search?species=lion that returns all animals where the species name contains the species parameter
  • Create a POST /Animal endpoint that adds an animal to the database. THis should take a JSON body

Explorer Mode (Ruby)

• Your rails application will be named called safari_vacation

  • This will have 1 model called Animal that has the following columns
    • species (string)
    • seen_count (int)
    • last_seen_location (string)
  • NOTE: This should be made using rails generate model and not created in the pgcli.

• Your API should have the following endpoints:
  • Create GET /animals that returns all the animals as JSON
  • Create GET /animals?species=lion that returns all animals as JSON where the species name contains the species parameter
  • Create POST /animal that adds an animal to the database. This should take a JSON body

Adventure Mode (C#)

• Create a GET /Animal/{location} that returns animals of only that location
• Create a PUT /Animal/{id} endpoint that adds 1 to the count of times seen for that animal (given by id)
• Create a DELETE /Animal/{id} endpoint that deletes that animal id from the database
• Normalize your database to have Location be its own table
• Extend your Search endpoint to search by an animal or by location
• Create a PUT /Animal/{animal}/{amount} endpoint that adds {amount} to that animal

Adventure Mode (Ruby)

• Create a GET /animals?location={location} that returns animals of only that location
• Create a PUT /animals/increment that adds 1 to the count of times seen for that animal (given by id)
• Create a DELETE /animals/{id} endpoint that deletes that animal id from the database

Epic Mode

• Create a React or Vue app that talks to your API and Interacts with all the endpoints
• Work on your capstone

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

 dotnet add package Npgsql.EntityFrameworkCore.PostgreSQL --version 2.1.2

• 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

NOTES:

• You may want to delete and recreate your database

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.

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

• 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

Reading Material

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

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

• 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 and wire frames 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

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

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 create-react-app, doing an axios.get or fetch of one API URL and see if you get browser errors.

Explorer Mode

• 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
• create-react-app
• Design your HTML statically in App.js
• Make it dynamic
• Use components when needed
• Deploy it and share it with friends

ORM Safari!

We are taking a surprise trip to the Savannah for a safari to see all sorts of exotic animals. During our time their 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 (C#)

• Create a database called SafariVacation
  • This will have 1 table called SeenAnimals that has the following columns
    • Id / id (int)
    • Species / species (string)
    • CountOfTimesSeen / count_of_times_seen (int)
    • LocationOfLastSeen / location_of_last_seen (string)
  • NOTE: This should be made all in the code (C#/Ruby), 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 (Ruby)

• Create a database called safari_vacation
  • This will have 1 table called animals that has the following columns
    • id (serial primary key)
    • species (string)
    • seen_count (int)
    • last_seen_location (string)
  • NOTE: This should be made all in the code (Ruby), and not created in the pgcli.
• Use pgcli to create your animals table and insert a few species of your own.
• Create a ruby file called 'safari.rb' Your application should prompt the user with a menu with the following options and corresponding actions
  • Type display_all to show all the animals.
  • Type 'incrementto then prompt the user for a species. Add1to theseen_count` for that species and display the new count.
  • Type species to prompt for a specific species and show the details for just that species.
  • Type 'spot' to prompt the user for a species and a location. Update that species last_seen_location
  • Type 'extinct' to prompt the user for a location and delete all the species in that location
  • Type 'totalto get the totalseen_count` of all animals

Adventure Mode (C#)

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

Adventure Mode (Ruby)

• Add a new column called last_seen_at, with a type of DateTime.
• Update the spot and increment menu options to record the current time as last_seen_at

Epic Mode

• Continue to make progress on your capstone project.

Additional Resources

Ruby

• Active Record Basics
  • Sections 1, 2, 3, 5
• Active Record Querying
  • Sections 1, 2, 3, 4, 5

.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 --version 2.1.3

 dotnet add package Npgsql.EntityFrameworkCore.PostgreSQL --version 2.1.2

• 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

A Picture is Worth 1,000 Words

Get to know React Router by building yourself a small photo gallery site.

Objectives

• Adding dependencies to your React Project
• Navigating JSON data structures
• Using the React Router library
• Using parameters in React Router

Requirements

Using the JSON data below as a starter, build a photo gallery app. Here's an example.

{
  "pandas": {
    "title": "Panda Bears",
    "description": "Pandas are bears native to south-central China, and are objectively the cutest animals on earth.",
    "photos": [
      {
        "title": "Panda Waving",
        "imageURL": "https://cdn-images-1.medium.com/max/1600/1*i1vVm3EqqDIkyucD0079wg.jpeg",
        "sourceURL": "https://codeburst.io/pandas-for-data-stuff-code-challenge-7972207a8294"
      },
      {
        "title": "Großer Panda im Ocean Park, Hongkong",
        "imageURL":
          "https://upload.wikimedia.org/wikipedia/commons/thumb/0/0f/Grosser_Panda.JPG/2560px-Grosser_Panda.JPG",
        "sourceURL": "https://en.wikipedia.org/wiki/Giant_panda"
      }
    ]
  },
  "miniatures": {
    "title": "Miniature Painting",
    "description": "I enjoy painting miniatures. I've only been painting for about 6-months, here's some of my work.",
    "photos": [
      {
        "title": "Blood Rage, Ram Clan",
        "imageURL":
          "https://i.pinimg.com/originals/46/c5/d2/46c5d2b5785b25e4487abc0fbbc17f04.jpg",
        "sourceURL": "https://i.pinimg.com/originals/46/c5/d2/46c5d2b5785b25e4487abc0fbbc17f04.jpg"
      },
      {
        "title": "A powerful druid, protecting his land",
        "imageURL":
          "https://i.pinimg.com/originals/f9/7b/1a/f97b1a3a728540ee5468923047b58e0f.jpg",
        "sourceURL": "https://i.pinimg.com/originals/f9/7b/1a/f97b1a3a728540ee5468923047b58e0f.jpg"
      }
    ]
  }
}

Save this as a JSON file in your project and import it.

If you hot-link photos from the internet, be sure to include a valid link back to the source.

Be sure

Explorer Mode

• You should have at least 4 components: App, CategoryList, PhotoList, PhotoDetail.
• On the home page, your category list should render the title of each category and link using the key. For examples "Panda Bears" should link to /pandas
• Render each photo in the given category on the photo list page with a thumbnail-sized version of your photos.
• Render a large version of the photo on the photo details page.

Adventure Mode

• Customize the given data to include your own photos and categories.
• Add bread crumb navigation, as seen in the example.
• Add a thumbnail to the first photo in each category to the home page, as seen in the example.

Epic Mode

• Find an external API for a photo sharing site (such as Flickr) and use data from the API rather than the given JSON file.

Additional Resources

• React Router Documentation

Explore the Universe

To get warmed up to using complex data models, create a universe explorer similar to the star wars API. There should be a simple admin site, as well as a few endpoints that can be used by a React app.

This is a bigger assignment and is due Sunday at Midnight. We might continue to add more requirements as the week goes on.

Objectives

• Practice using complex data models
• Practice creating APIs

Requirements

Pick your favorite fictional universe and create a database to explore the people, places, and objects. This should have, at minimal two tables to start.

For example, I can pick Harry Potter and create a Harry Potter API. In this API, I will create a school house table and people table, both with a searchable API endpoint, as well as an admin page to CRUD people and Houses.

You could pick from any fictional universe (Harry Potter, Star Wars, Star Trek, etc) or anything in the real world that follows that same idea, (sports teams, fraternities, charity organizations, etc)

Explorer Mode

• Finish and turn in your safari homework.

• Create a minimum 2 table data model that have a relationship between the tables (1 to many or many to many)

• Create the following endpoints for each table

  • Search
  • Create
  • Update
  • Delete

• Create a React app that called the above endpoints and manages the data

Adventure Mode

• Work on modeling your capstone project.
• Add more tables and relationships to model out more information.
• Add the endpoints and functionality to manage the tables.

Epic Mode

• work on your portfolio.

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

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.
• 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 and animations.

Additional Resources

• React Mouse Events

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

.NET Students

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

Ruby Students

• Head to Ruby Koans and follow the directions

Explorer Mode

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

Adventure Mode

• (.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

Finish the Safari

For this assignment, you should take your safari API that was already created, and create a simple react app that consumes that API.

Objectives

• Work with an API that you created

Requirements

• Add Endpoints with more verbs
• Create a React app that consumes an API that you created

Explorer Mode (C#)

• Add 3 the endpoints to the Safari API

  • Create a GET /Animal/{location} that returns animals of only that location
  • Create a PUT /Animal/{id} endpoint that adds 1 to the count of times seen for that animal (given by id)
  • Create a DELETE /Animal/{id} endpoint that deletes that animal id from the database

• Create a simple react app, that uses some css make it looks friendly.

• The react app should:

  • Display all animals the user has seen
  • 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

Don't be afraid to add endpoints to make your life easier.

Explorer Mode (Ruby)

IMPORTANT To add a react app we need to update our Rails application a little.

Setup for adding a React app

• In the Gemfile, uncomment the line containing rack-cors
• In the terminal, inside your project, run bundle
• In the file cors.rb change the text origins 'example.com' to origins '*'
• In the file cors.rb uncomment lines 8 through 16. (Line 8 should say Rails.application.config.middleware.insert_before 0, Rack::Cors do and line 16 should be an end

Assignment

• Add these features to the Safari API

  • Create a GET /animals?location={location} that returns animals of only that location
  • Create a PUT /animals/count/{id} endpoint that adds 1 to the count of times seen for that animal (given by id)

• Create a simple react app, that uses some CSS make it looks friendly.

• The react app should:

  • Display all animals the user has seen
  • Have a button next to each animal to delete it.
  • Below the list of all animals, show the total of seen_count
  • Get the total of seen_count for lions, tigers and bears

Don't be afraid to add endpoints to make your life easier.

Adventure Mode

• Work on your capstone' front end. This should include, creating the react app, adding react-router and also start thing about the AJAX (axios/fetch) calls your app needs.

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

Catch your Breath

We have been going at a fast pace for the past couple of weeks. Every so often, you need to reflect on how far you have come.

In this assignment, we are going to take a little code break and create a blog post. Writing is a good way to reflect on what you have done and also share some knowledge. The best way to get better at talking about technology is practice. Blog posts are a way to practice that skill.

Objectives

• Practice talking about technology
• Reinforce a topic we have covered in class

Requirements

• Create a blog on Medium.

Explorer Mode

• On Medium, create a blog post that talks about a concept we have gone over in class. This could anything topic from HTML, CSS or JavaScript, or a "lesson learned" from the past couple of weeks. As a challenge, consider picking a topic you think you are weak on. Remember, you are creating a developer-focused blog post.
• Solve this kata: https://www.codewars.com/kata/volume-of-a-cuboid To turn this in, create a gist of your code and submit a link to it.
• Submit the link to your published blog post when turning in this assignment.

Adventure Mode

• continue to work on blackjack
• As we progress, we will be using different tools to work our brain. Today, head over to HackerRank. This is another tool, like Codewars to practice our developer skills. As a start, head into the algorithms section, and try Grading Students.
• To turn this in, create a gist of your code and submit a link to it.

Epic Mode

• Go back and finish up any outstanding work.
• Go back to a previous assignment and work on it some more. This could be trying to tackle a harder level, working on the UI/UX, refactoring the code to a new idea that we covered (e.g. functions and abstractions), or adding unit tests.
• To turn this in, link to the other project's repository, and describe what you did.

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 degree (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%)` }} />

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.
• Add a "Remember Color" feature that lets user store the current color to a list and have that list displayed on the screen

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.
• Use local storage to save the "Remembered Color" list and have that loaded when the component did mount.
• Initialize the state to a random color when the page is loaded.
• Add a button that picks a new random color.

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

Octodex

GitHub has a great mascot called OctoCat. OctoCat even has its own gallery of variations, created by GitHub itself and fans, called Octodex.

Unfortunately, the Octodex is not responsive*! Today, your task is to recreate the layout of The Octodex as closely as possible, but make it responsive. You can use all the tools you have at your disposal to get the job done. Use your browser's Developer Tools to inspect their site to find the exact font sizes and padding amounts.

* Well, actually it uses javascript to set the number of columns on page load, but we want to see interactive responsiveness when we resize our window!

Objectives

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

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 as closely as you possibly can. Use the same fonts, sizes, and colors. Download some of your favorites
• Use some Octocat images to use in your page (12-16 or so). Your layout should be flexible but doesn't need to perfectly responsive.
• Use flexbox styles to layout the header and the Octocats (hint: check out the flex-wrap property).

TIP Reminder to breakdown the layout into smaller chunks that are easier to style

Adventure Mode

• If you're feeling adventurous, use CSS media queries to resize the Octocat containers to look great as a single full-width column on small screens and a nice grid on bigger screens.
• watch this video to work more with media queries https://www.youtube.com/watch?v=2KL-z9A56SQ

Epic Mode

• Go back to your hobby website and update site to be mobile friendly and responsive.

Additional Resources

• Install the JSON Viewer Chrome Extension to make the List of Octocats nicer to read
• List of Octocats
• https://www.youtube.com/watch?v=2KL-z9A56SQ

Party Like it's 1989!

It's 1989! The Internet has just come online and Tim Berners-Lee is going to invent the World Wide Web. The Cold War is ending, and the Berlin Wall will be coming down. It's also going to be a great year for film. In this assignment, you're going to build a small webpage that showcases some of the most popular movies of 1989.

The data for this assignment comes from The Movie DB API.

Download and use this JSON file as your data source. Take a look a the structure of the data. It contains an array of objects that look like this:

{
  "vote_count": 4300,
  "id": 89,
  "video": false,
  "vote_average": 7.7,
  "title": "Indiana Jones and the Last Crusade",
  "popularity": 18.43,
  "poster_path": "/4p1N2Qrt8j0H8xMHMHvtRxv9weZ.jpg",
  "original_language": "en",
  "original_title": "Indiana Jones and the Last Crusade",
  "genre_ids": [12, 28],
  "backdrop_path": "/vfvVuu1JdnEGcyZUj7VHrhhbeMj.jpg",
  "adult": false,
  "overview":
    "When Dr. Henry Jones Sr. suddenly goes missing while pursuing the Holy Grail, eminent archaeologist Indiana must team up with Marcus Brody, Sallah and Elsa Schneider to follow in his father's footsteps and stop the Nazis from recovering the power of eternal life.",
  "release_date": "1989-05-24"
}

You'll notice that the poster images are just the file names. You can get the full URL to a poster by concatenating the path with the following base URL:

https://image.tmdb.org/t/p/w185_and_h278_bestv2

In this case:

https://image.tmdb.org/t/p/w185_and_h278_bestv2/4p1N2Qrt8j0H8xMHMHvtRxv9weZ.jpg

Objectives

• Work with JSON data
• Use app-app to build a React project
• Understand and use React components
• Understand and use "props" in React
• Use Array.prototype.map to render a collection of components in React

Requirements

You do not need to use the tmdb.org API for this assignment; you should use the supplied JSON file (see above).

Explorer Mode

• "Mapping" over the array, render all of the films in the supplied data file.
• You should have at least two components; App and Movie.
• Render at least the title, poster image, and plot overview. Feel free to include other pieces of the data.
• Try to capture a 1980's or early 90's aesthetic when you style your page. Have fun with it!

Adventure Mode

• Sort the films by release date, rather than as they appear in the file.
• Display the release date in a formatted manner, e.g. "May 24th", rather than 1989-05-24.

Epic Mode

• Use the API to fetch the data and render it on the page, rather than the supplied JSON file.

This is the API end-point that supplied the data file for this project:

https://api.themoviedb.org/3/discover/movie?primary_release_year=1989&sort_by=popularity.desc&api_key=YOUR_KEY_HERE

NOTE: You'll need to sign up for your own API key first.

Additional Resources

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

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

• Work on any outstanding homework assignments, focusing on assignments, not so much capstone.
• 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 (surge, 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)

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

• Ensure our Postgres database is installed and working
• Create a database for Employees
• Write some queries to use the database

Explorer Mode

• Create a database:

  • C#: called CompanyDatabase
  • Ruby: called company_database

• Create a table:

  • C#: named Employees
  • Ruby: named 'employees'

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

  • C#
    • Id (Primary Key)
    • FullName
    • Salary
    • Position
    • PhoneExtension
    • IsPartTime
  • Ruby
    • id (Primary Key)
    • full_name
    • salary
    • 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
    • C#: called ParkingSpotNumber as a string that up to 10 characters long
    • Ruby: called parking_spot_number as a string that up to 10 characters long

• Turn in the above queries as a gist

Adventure Mode

• Work on the Koans
• Work on your final project

Epic Mode

• Investigate working with C#/Ruby and Postgres

Additional Resources

• https://www.postgresql.org/docs/10/static/index.html

Recommended Practice:

• For more practice, Hackerrank has a SQL Track

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 the user by adding elements to the DOM.
• Allow the user to search by zip code or city name.

Adventure Mode

• Using the HTML5 Geolocation API, search for the user's current location when the 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-ahead using Google Places API
• Head back to Blackjack and use this as your API.

Slides:

https://slides.com/markdewey-1/promises-apis-fetch-json

As we continue to explore databases and ideas, this project will help you practice model databases and relationships, as well as help you get started on your capstone project.

First, you will expand your CompanyDatabase to have Departments, Products and Orders. You will be crafting queries for these new tables.

After that, this weekend is the next big push your final project, work on the HTML and CSS; As well as the database schema.

Objectives

• Work with Foreign Keys
• Craft Queries

Requirements

• Add a few tables and foreign keys to an existing database

Explorer Mode

• In your Company Database, add a table named:
  • C#: Departments. Give this table a few columns
  • Ruby: departments. Give this table a few columns
• Add a Foreign key named:
  • C# DepartmentId to your Employee Table
  • Ruby: department_id to your employees table
• Add tables named:
  • C#: Products and Orders. Give each table a few columns
  • Ruby: products and a orders. Give each table a few columns
• In our company, 1 Order can have many Products and 1 Product can have many Orders. This will be a Many-to-Many relationship. Create the tables and foreign keys needed for this to happen

• Create queries that can do the following:
  • Given a department id, give me all employees in the department
  • Given a department name, give me the phone extensions
  • Find all orders that contain the product id of 2
  • Given an order id, display on the OrderNumber, and all the product names
  • Inserts a new product
  • Creates a new order
  • Adds a product to an order
  • Adds a new employee to a department
  • Updating a employee's department
  • Removing a product from an order

• Turn in the above queries as a gist
• Work on your final project HTML. DO not sleep on this. You have the time and resources to get a good bit of this done this weekend.
• Complete your first draft of your database schema for your final project.

Adventure Mode

• Give these SQL Koans a try.

Epic Mode

• Investigate working with C#/Ruby and Postgres

Additional Resources

• PostgreSQL 10 Documentation

Recommended Practice:

• For more practice, Hackerrank has a SQL Track

Function Junction

Objectives

After completing this assignment, you should be able to:

• Demonstrate an understanding of types, functions, argument-handling, loops, and conditional statements

Requirements

1. Fork this repository to your own account.
2. Change into your training directory
3. Clone your repository: hub clone function-junction
4. Change into your project's directory: cd function-junction
5. Install the dependencies: yarn install (or just yarn for short)
6. Open in Code: code .
7. Start the test runner: yarn test
8. Feel free to split screen your work, except now you should split-screen your editor and your TERMINAL
9. In your editor, open src/functions.test.js and work on each function until the test pass.
10. Each time you save your code, the tests run and tell you if your code is correct.
11. Commit and push your work to GitHub.
12. Turn in the URL to your GitHub repo.

Explorer Mode

• All tests passing
• No linter warnings
• Turn in the homework using the URL to your repository on Github.
• CAUTION One the test is broken. Your job is to update the test to pass.

Adventure Mode

• If you used "built-in" JavaScript methods like String.reverse() or Array.max() to solve these problems, try implementing them from scratch.
• Vice-versa: if you implemented your solutions from scratch, look in the documentation linked below to see if JavaScript has any built-in functions to help solve these problems.

Epic Mode

• Expand the sum and max functions to take arrays instead of numbers and update the tests so they pass.
• Create your own simple functions with tests.
• Anytime in your code that you used a for loop or a while loop, convert it to use a map, filter or reduce.

Additional Resources

Reference the documentation on MDN to find what kind of helpful functions might already be on Array and String in JavaScript.

• String Functions on MDN.
• Array Functions on MDN.

React-ified Octocats

Your Octodex is amazing. It has revolutionized the Github Octodex experience and more people are viewing Octocats on their mobile devices than ever.

However, the code is repetitive and isn't yet setup to work with an API.

Your task now is to refactor the static Octodex into a static (non-API) version in 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

• Reuse your Octodex as a starting point for this assignment. Or use an existing well factored (HTML and CSS) Octodex.
• 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 your Octodex 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 your 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 a 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

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 writing a short blog.

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

• Make sure your dev env is set up

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(https://www.programmerinterview.com/index.php/puzzles/minimum-guesses-1-100/) to guess the correct number

• Here is the JavaScript, in the browser, 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 a menu or other user experience "nice to haves", focus on the just the core algorithm.

Blog

• We have tackled front end development and are about to tackle a new language. You have grown as a developer and a person in the last 7 weeks. Pick one topic and create a blog post about it on Medium.com

• Pick 1 topic technically that we have learned and create a blog post explaining it to a non-technical person.

• Blog about a struggle that you have encountered and overcome during your tenure here so far.

• Pick a new technology that we haven't hit yet (or won't) and create an intro blog for that.

Adventure Mode

• Add a 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

• Ruby Resouces:

  • While Loops

• .NET

  • .NET Documentation
  • Lecture notes

Reading Material

Ruby: Read and work through exercise 14 of Learn Ruby the Hard Way