
## Core Language/OOP

## Mastery Project

- [High Street Hospital](/exercises/mastery/hospital\node)

## Virtual Pets Amok

Do you remember Cyberpet? Tamagotchi? Digimon? Petz? Virtual pets like these were born in 1996. With your help, they will be reborn.

Virtual Toys, Inc. wants you to build the next iteration of virtual pets to market to adults who enjoy updated versions of the toys and games they played in their youth. This game will be like the virtual pets of 1996...but so much more. It's Virtual Pets Amok!

Our pets are organic or robotic! They are housed in a shelter and cared for by you. They have unique personalities. They can be adopted.

Virtual Toys, Inc. requires:

- Development of a console application by a team that practices agile methodology, utilizes test driven design, and values clean code
- Appropriate use of Git and access to your application on GitHub
- Useful player instructions in the form of a README.md file
- An interactive user interface
- A player can enter the game, play as long as they'd like, and leave the game when they want
- Player's choice of organic or robotic pets
- Ability for players to admit pets into the shelter or adopt them
- Ability for players to see a list of all pets in the shelter
- Ability for players to see the current status of pets, such as hunger, boredom, and health
- Ability for players to interact with one pet or multiple pets, such as feed, play, and take to doctor
- As players interact with pets, the pet's status changes
- As time ticks by, the pet's status changes
- Players are responsible for cleaning cages

Virtual Pets, Inc. would also like the following, although it is not required:

- A visual representation of the pet's status
- Give pets a personality and uniqueness, such as a favorite food, in which they respond accordingly when fed
- Increase the number of statuses, activities, pets, etc.

---

## Day 1

Today we'll get used to our tech tools and get to know one another. We will even begin to write some code in JavaScript (hopefully)!

### Goals

- Get to know one another.
- Get familiar with the course, class policies, and expectations.
- Get familiar with our tech tools...Slack, Git and GitHub, VSCode
- Understand what JavaScript is and why it's **awesome**.

### Itinerary

| Time                       | Activity                            |
| -------------------------- | ----------------------------------- |
| 9:30am                     | Introductions                       |
| 10:00am                    | Review Introduction & Policy Slides |
| Discuss Class Expectations |                                     |
| 11:45am                    | Check-In                            |
| 12:00pm                    | Lunch                               |
| 1:00pm                     | Laptops, IDs, Video                 |
| 1:30pm                     | Slack, Git and GitHub               |
| VSCode                     |                                     |
| 3:15pm                     | Checkout                            |
| 3:30pm                     | Goodbye! I'll see you tomorrow!     |

### Materials

#### Intro to Bootcamp

- [Intro & Policy Slides](/resources/intro/tech/node)
- [Learning Philosophy](/resources/intro/korda)

#### Git & GitHub

- [Git Bash](/resources/version-control/git-bash)
- [Git](/resources/version-control/git)
- [Github Reference Guide](/reference-guides/git/guide-to-github)
- [Git-it](https://github.com/jlord/git-it-electron)
- [gitignore.io: Generate .gitignore files](https://gitignore.io)
- [A Successful Git Branching Strategy](https://nvie.com/posts/a-successful-git-branching-model/)
- [Understanding Git - Explain it Like I'm Five](https://hackernoon.com/understanding-git-fcffd87c15a3)

#### Clean Code

- [Meet Uncle Bob and learn about Clean Code](https://cleancoders.com/episode/clean-code-episode-1/show)
- [Clean Code Concepts](/resources/testing/clean-code/node)

#### Command Line

- [Command Line Practice](https://progate.com/lessons/commandline/study/1)

---

## Day 2

Let's build an **App**!

### Goals

- Begin to customize an application based on user input
- Use conditional statements to control program flow based on user input

### Itinerary

| Time    | Activity                             |
| ------- | ------------------------------------ |
| 9:00am  | Checkin                              |
| 9:10am  | Conditionals, Strings and User Input |
| 11:00am | Build a `GuessingGame` app           |
| 12:00pm | Lunch                                |
| 3:15pm  | Checkout                             |

### Materials

- [Conditionals](/resources/fundamentals/conditionals/node)
- [Strings](/resources/fundamentals/strings/node)
- [User Input](/resources/fundamentals/reading-console-input/node)
- [While Loops](/resources/fundamentals/while-loops/node)

### Exercises

- [Guessing Game Exercise](/exercises/intro/guessing-game)
- [Fortune Teller Exercise](/exercises/intro/fortune-teller)

---

## Day 3

Time to test!

### Goals

- Begin to develop a perspective on testing code in a development environment
- Begin to become familiar with your testing suite and how to get set up

### Schedule

| Time    | Activity                                 |
| ------- | ---------------------------------------- |
| 9:00am  | Checkin                                  |
| 9:10    | Review Fortune Teller                    |
| 9:45am  | Class Design: What is OOP?               |
| 10:30am | Let's meet Uncle Bob                     |
| 11:00am | Intro to TDD                             |
| 12:00am | Lunch                                    |
| 1:00pm  | The `FizzBuzz` Kata                      |
| 2:00pm  | Discussing/planning the rest of Module 1 |

### Class Materials

- [The Psychology of Pair Programming](https://medium.freecodecamp.org/the-psychology-of-pair-programming-86cb31f9abca)
- [TDD Slides](/resources/testing/tdd-intro)
- [Jest Testing](/resources/testing/jest-testing)
- [FizzBuzz](/resources/testing/fizzbuzz/node)
- [TDD Calculator](/resources/testing/tdd-calculator)

### Research Materials

- [For Loops](/resources/fundamentals/for-loops/node)
- [Operators and Expressions](/resources/fundamentals/operators-and-expressions/node)
- [Basic Types and Variables](/resources/fundamentals/basic-types-and-variables/node)
- [Arrays](/resources/collections/arrays/node)
- [Branching Statements](/resources/fundamentals/branching-statements/node)

### Sites for Kata

- [Code Katas](http://codingdojo.org/KataCatalogue/)
- [Code Kata](http://codekata.com/kata/codekata-intro/)
- [ES6 Katas](http://es6katas.org/)
- [Codewars](https://www.codewars.com)
- [CodeFights](https://codefights.com/)

---

## Sprint 2

### Materials

#### Resources

- [Improve Your Code With The SOLID Principles](https://medium.com/swlh/improve-your-code-with-the-solid-principles-fcdcfdf21810)
- [Dot Notation vs Bracket Notation](https://medium.com/dailyjs/dot\notation-vs-bracket\notation-eedea5fa8572)
- [The JavaScript Global Object](https://flaviocopes.com/javascript-global-object/)

### Day 1

Today we'll get used to our tech tools and get to know one another. We will even begin to write some code in JavaScript!

- Get to know one another and our team
- Get familiar with the course, class policies, and expectations
- Get familiar with our tech tools...Slack, Git and GitHub, Visual Studio
- Understand what JavaScript is and why it's **awesome**

#### Materials

- [Object Oriented Programming Overview](/resources/objects/oop/node)
- [Constructors](/resources/objects/constructors/node)
- [Functions](/resources/javascript/functions)

#### External Resources

- [Scrum Training Series Modules 1-6](http://michaeljames.org/)
- [Learn Git Branching Activities](https://learngitbranching.js.org)
  - Main Tab > Introduction Sequence (#4 Rebasing is optional)
  - Main Tab > Ramping Up
  - Remote Tab > All levels
- [JavaScript Console](https://medium.com/devgorilla/the-console-object-provides-access-to-the-browsers-debugging-console-354eda9d2d50)
- [JavaScript - Object Oriented Programming using ES6](https://codeburst.io/javascript-object-oriented-programming-using-es6-3cd2ac7fbbd8)

### Day 2

Let's build an **App**!

- Begin to customize an application based on user input
- Use conditional statements to control program flow based on user input

### Day 3

Time to test!

- Begin to develop a perspective on testing code in a development environment
- Begin to become familiar with your testing suite and how to get set up

## Sprint 3

### Deliverables

- Create a Console Application with appropriate tests.
- Create a VirtualPet class..
- Add additional properties (thirst, boredom, etc)
  - Don't forget to add tests!
- Inside **application.js**, prompt the user for a pet name, create an instance of that pet, assign the specified name, and then display the pet's name to the user (use the appropriate _getter_ to retrieve the name) before exiting the application.
- When invoking the `tick` method on your `VirtualPet`, it should update itself as if some time has passed (increase Hunger and Boredom, for example.)
- Add methods to your `VirtualPet` that `feed`, `play`, etc your pet.
  - Write the appropriate tests to ensure that the pet's properties are updating correctly.
- Ensure that your pet can never have a negative value for `hunger`, `boredom`, etc.
  - This will be your last reminder about writing tests. From now on, assume that all functionality requires proper testing!

## Sprint 4

### Materials

#### Resources

- [Equality](/resources/objects/equality/node)
- [Sets](/resources/collections/sets/node)
- [Maps](/resources/collections/maps-and-dictionaries/node)

### External Resources

- [Mastering Markdown](https://guides.github.com/features/mastering-markdown/)

### Practice Exercises

- [Cookie Order Exercise](/exercises/intro/cookies/node)
- [Shopping Cart Exercise](/exercises/intro/shopping-cart/node)

### Deliverables

All prior functionality, plus:

- Don't forget to add tests!
- Useful player instructions in the form of a README.md file
- Create a VirtualPetShelter class that will be used to manage multiple pets
- Ability to intake many pets into the VirtualPetShelter
- Ability for players to see a list of all pets in the shelter, for example with name, species and age
- Ability for players to interact with one pet or multiple pets, such as feed, play, and take to doctor
- Ability for players to see the current status of all pets in a table (see example below for inspiration)

  | Name     | Health | Fatigue |
  | -------- | ------ | ------- |
  | Fido     | 43     | 22      |
  | Fluffles | 63     | 34      |

## Sprint 5

### Materials

- [APIE](/resources/objects/a-pie/node)
- [Abstracts and Interfaces](/resources/objects/abstracts-and-interfaces/node)
- [Dependency Injection](/resources/objects/dependency-injection/node)
- [Car Garage Exercise](/exercises/intro/car-garage/node)

### Deliverables

- Support for 4 types of pets: Organic Cats, Organic Dogs, Robotic Cats, Robotic Dogs.
- Robots require oil and maintenance.
- Organic cats and dogs require cage & litter box cleaning.
- Walking organic pets decreases the rate at which they soil their cages/litter boxes.
- Walking robotic pets increases their need for oil and maintenance.


Module 1


## Front End Web/Portfolio

## Professional Portfolio w/ HTML and CSS Requirements

Create a portfolio site highlighting your work that can be shared with potential employers. Focus first on building a good structure, then later style and lay out with with CSS.

---

## Skills Required

In order to deliver this webpage solution, you will need the following skills and knowledge.

- HTML
- CSS
- CSS Grid
- CSS Flexbox

---

## Tasks

Make a repository for your portfolio called `your-username.github.io`

### Build the document structure

- Create a main page (`index.html`) representing a professional portfolio, including the following:
  - an appropriate `<header>` element
  - a `<nav>` element linking to each of the sections
  - an `<h1>` element with your page title (_there can be only one_)
  - a `<section>` element for each of the following, each of which should contain an appropriate heading element:
  - _About Me_, consisting of:
    - brief biographical information
    - photo
    - contact information
    - links to your professional networking site profiles, including at least GitHub and LinkedIn
    - list of skills
      Include whatever other information you consider pertinent.
  - _Projects_, consisting of at least three, each represented as an `<article>`
    - name of project, linked to GitHub repository or the repository/project's GitHub Pages
    - screenshot
    - skills / technologies used
      Don't worry that your available projects are limited now. You'll have time to increase the size of your portfolio.
  - an appropriate `<footer>` element

### Lay out and style your portfolio

- Assign ids/classes to sections/etc, then use css grid to lay out your page. Reference MDN and this tutorial to work out how to use grid: [http://cssgridgarden.com/](http://cssgridgarden.com/)
- To contain the elements of your grid, you will want to create a `<div>`, something like `<div id="container">...</div>`.
- Create CSS rules to style page elements appropriately.

### Using online resources

Any resources (images, etc) you use should be:

- free for non-commercial use
- copied to your repository and referenced there rather than via a uri pointing to another site

---

## Tips

- Section ids can be used to create anchors linking to those sections inside the page.
- See the appropriate Mozilla Developer Network reference pages for guidance regarding tag usage:

---

## Professional Portfolio with HTML and CSS Materials

### HTML

#### Resources

- [HTML](/resources/frontend/html/csharp)

#### External Resources

- [MDN HTML Tutorials](https://developer.mozilla.org/en-US/docs/Web/HTML)
- [W3 Schools Learn HTML Tutorials](https://www.w3schools.com/html/default.asp)

### CSS

#### Resources

- [CSS: Intro](/resources/frontend/css-intro)
- [CSS: Layouts Without Layout Tools](/resources/frontend/css-layouts-without-layout-tools)
- [CSS: Progressive Enhancement](/resources/frontend/css-progressive-enhancement)

#### External Resources

- [W3 Schools Learn CSS Tutorials](https://www.w3schools.com/css/default.asp)
- [Resilient CSS (7 Part series)](https://www.youtube.com/watch?v=u00FY9vADfQ)

### CSS Grid

#### Resources

- [CSS: Grid](/resources/frontend/css-grid)

#### External Resources

- [Grid Garden](https://cssgridgarden.com/)
- [A Complete Guide to Grid](https://css-tricks.com/snippets/css/complete-guide-grid/)
- [Flexbox and Grid, Your Layout's Best Friend](https://aerolab.co/blog/flexbox-grids/)
- [How to make your HTML responsive by adding a single line of CSS](https://medium.freecodecamp.org/how-to-make-your-html-responsive-by-adding-a-single-line-of-css-2a62de81e431)

### CSS Flexbox

#### Resources

- [CSS: Flexbox](/resources/frontend/css-flexbox)

#### External Resources

- [FlexBox Zombies](https://mastery.games/p/flexbox-zombies)
- [A Complete Guide to Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)

---

## Design Resources

Listed below are a few of the many websites that can help you improve your website design:

- [Google Fonts](https://fonts.google.com/)
- [Adobe Color](https://color.adobe.com/create/color-wheel/)

When you use images, please filter on those that have no copyright restrictions and are labelled for reuse:

- [Flickr](https://www.flickr.com/)
- Google Images
- [Unsplash](https://www.unsplash.com)

---

## External Resources

- [How to Section Your HTML](https://css-tricks.com/how-to-section-your-html/)
- [CSS In Real Life](https://css-irl.info/)
- [Create a responsive grid layout with no media queries, using CSS grid](https://andy-bell.design/wrote/create-a-responsive-grid-layout-with\no-media-queries-using-css-grid/)
- [How to combine Flexbox and Grid for efficient layouts](https://getflywheel.com/layout/combine-flexbox-and-css-grids-for-layouts-how-to/?utm_source=CSS-Weekly&utm_campaign=Issue-279&utm_medium=RSS)


Module 2

## Installation instructions



## Instructions

1. Open test files and add the Act, Arrange, and Assert portions of the test to match the test name and instructions.
2. Write production code to make the tests pass.
3. Make a console application with an instance of a `Garage` for your user to interact with.

### Things to keep in mind

1. **ALL** I/O (input and output) should come through the `Application` class.
2. **ALL** logic for the application should be located in the appropriate class (`Garage` or `Car`).
3. `Car`s should be identified uniquely (assume 'users' will provide unique identifiers of some sort).
4. Users should **ONLY** be interacting with individual `Car`s through the `Garage`.

Car Garage


## Girl Scout Cookie Order

We have all been there, the irresistible face of a cute kid selling tasty cookies.

They're **everywhere**...at the store, knocking on the door, in the parking lot...

Your objective is to create a console application that keeps track of the variety of cookie you ordered and the quantity using an `Array`. You will also keep track of your total number of boxes purchased. You are going to give the program the ability to remove a variety from the list, just remember, this may make the girl scout sad so please be kind!

### The `Order` Object

- Write this class to keep track of 2 pieces of instance data: `variety` of cookie and `numBoxes` purchased
- Create the constructor to handle this data

**Design Thinking**: Why should we being using Constructor Injection as opposed to Field or Setter Injection?

### The `OrderList` Class

- Declare your `const orders` Array.
- Create a constructor and consider what it may need (Think Dependency Injection)

#### `OrderList` should contain the following methods:

- Proper Accessor Methods
- `addOrder(order)`
- `getTotalBoxes()`
- `removeOrdersByVariety(variety)` (Should remove all orders with provided variety)
- `getBoxesByVariety(variety)`

**Design Thinking**: Why did we have the `OrderList` Object choose to create the `addOrder` method rather than just exposing the Array and allowing external code to call the built in `.push()` method on it?

### The `Application` Class

- Keep **ALL** I/O here, but no logic.
- Game Loop
- Add 4 initial orders
- Total the boxes purchased
- Show the list
- Remove a variety and give feedback on how many boxes were removed
- Show the updated list

### Example

```zsh
Current Order
Variety: Tagalongs Boxes: 1
Variety: Thin Mints Boxes: 5
Variety: Samoas Boxes: 2
Variety: Tagalongs Boxes: 3

You have ordered 11 boxes

What would you like to remove? (specify a variety or none)
Thin Mints

You are removing 5 Thin Mints

Current Order
Variety: Tagalongs Boxes: 1
Variety: Samoas Boxes: 2
Variety: Tagalongs Boxes: 3
```

### Stretch Task

- Update to use an Object instead of an Array to identify specific `Order`s and interact with them individually.


Cookie Order


## Overview

Develop a console application that will tell the user’s fortune based on data received from the user.

## Skills Required

- Variables and Basic Types
- Operators and Expressions
- Conditionals
- Strings

## Tasks

### Part 1

- Ask the user for the user’s first name.
- Ask the user for the user’s last name.
- Ask the user for the user’s age.
- Ask the user for the user’s birth month (as an 'int').
- Ask the user for the user’s favorite ROYGBIV color.
  - If the user does not know what ROYGBIV is, ask the user to enter “Help” to get a list of the ROYGBIV colors.
- Ask the user for the user's number of siblings.

### Part 2

For each of the below, you will select your own value for each condition. The table will give the conditions and an example for each. Don't steal our examples—be creative!

#### Retirement Years

The user's number of years until retirement will be based on whether the user's age is odd or even.

| _(condition)_ If the user's age is… | _(example)_ then the user will retire in… |
| ----------------------------------- | ----------------------------------------- |
| odd                                 | _14_ years                                |
| even                                | _12_ years                                |

#### Vacation Home Location

The location of the user's vacation home will be based on how many siblings the user has. If the user enters a number less than zero, give the user a _bad_ location!

| _(condition)_ If the user's number of siblings is… | _(example)_ then the user's vacation home will be in… |
| -------------------------------------------------- | ----------------------------------------------------- |
| 0                                                  | Boca Raton, FL                                        |
| 1                                                  | Nassau, Bahamas                                       |
| 2                                                  | Ponta Negra,Brazil                                    |
| 3                                                  | Portland, Oregon                                      |
| greater than three                                 | Baton Rouge, LA                                       |
| less than zero                                     | Chernobyl, Ukraine                                    |

#### Mode of Transportation

The user's mode of transportation will be determined by the user's favorite color.

| _(condition)_ If the user's favorite color is… | _(example)_ then the user's mode of transportation will be… |
| ---------------------------------------------- | ----------------------------------------------------------- |
| red                                            | Maserati                                                    |
| orange                                         | stallion                                                    |
| yellow                                         | chariot                                                     |
| green                                          | taxi                                                        |
| blue                                           | rickshaw                                                    |
| indigo                                         | motor scooter                                               |
| violet                                         | flying saucer                                               |

#### Bank Balance

The user's bank balance at retirement will be based on the user's birth month. If the user enters something other than 1-12 for birth month, the user's balance will be $0.00.

| _(condition)_ If the user's birth month is… | _(example)_ The user's balance will be… |
| ------------------------------------------- | --------------------------------------- |
| 1-4                                         | $256,000.76                             |
| 5-8                                         | $3,687,105.42                           |
| 9-12                                        | $86.23                                  |
| anything else                               | $0.00                                   |

### Part 3

Display the user's fortune in this format:

```zsh
[First Name] [Last Name] will retire in [# of years] with [bank balance] in the bank, a vacation home in [location], and travel by [mode of transportation].
```

Your program should be able to process input whether a user enters capital or lowercase letters.

## Stretch Tasks (Optional)

- Give the user the ability to quit the program by typing "Quit" (should not be case sensitive) at any point where the program is looking for user input. The program should print “Nobody likes a quitter...” before ending. - _Tip_: To do this with the prompts that expect an integer, you will need to read in a `String`, check for "Quit", then _"parse the string to an int"_ (google it!) to convert the user input string to an `int`.
- Research `while` or `do/while` loops and use them to check whether a user typed "Help" for favorite color, printing the list of colors each time the user types "Help". `What is your favorite ROYGBIV color? Help The ROYGBIV colors are red, orange, yellow, green, blue, indigo, violet. Help The ROYGBIV colors are red, orange, yellow, green, blue, indigo, violet. Blue`


Fortune Teller


## Objective

Create a command line based number guessing game, where users have to guess a number between 1 and 10. Build the application in a series of iterations, with each iteration being a functional (though incomplete) version of the final application.

## Skills Required

- Console I/O
- Random number generation
- IDE familiarity
- Basic types
- If statements
- Equality operators
- Loops

### Iterations

Build the application in the following small iterations. It should function at completion of each iteration!

1. When the user guesses 7, the game announces they have won. All other numbers lose.
2. When the user guesses 0, the game provides instructions for the user.
3. After guessing, the user can take _one more_ guess (unless they won!)
4. When the user guesses -1, the application should exit.
5. The game should provide feedback that the secret number is > or < any incorrect guesses.
6. The number should be random, instead of always 7.
7. Stretch task: Give the user 3 tries before announcing they have lost.
8. Stretchier task: Set up some kind of point system
9. Stretchier stretchier task: Have your point system fluctuate depending on how many attempts it took to get the correct answer


Guessing Game


### Objective

- Students will employ good software design and testing principles in order to create a class hierarchy using OO principles (Abstraction, Polymorphism, Inheritance and Encapsulation).
- Students will be able to define **super**, **extends**,**isA** and **`typeof`**

## The Scenario

High St. Hospital is an organizational mess. They have unkempt files of employee information scattered throughout manilla folders, computer data files, and old tin filing cabinets. With the madness of the daily grind, patients are the priority. But the utmost care cannot be given to the patients if the hospital is disorganized. High St. Hospital wants to get it together. They have subcontracted We Can Code IT full-stack apprentices (who work for the relatively inexpensive price of free) to come in and organize. They enable you to set up shop with a few company laptops in an old dissheveled break room. Your mission is to create a set of classes that contain information on the employees at High St. Hospital:

**Patients Should Hav**

- default `BLOOD_LEVEL` of 20 (What does this [naming convention](https://stackoverflow.com/questions/66066/what-is-the-best-way-to-implement-constants-in-java) suggest again???)
- default `HEALTH_LEVEL` of 10

**High St. Hospital has the following classifications at its facility**

- `Employee` represents a base employee. All others Hospital employees _are_ `Employee`s
- `Doctor` is a Hospital Employee and gets paid 90,000
- `Nurse` is a Hospital Employee and gets paid 50,000
- `Surgeon` is a Doctor and gets paid 120,000
- `Receptionist` is a Hospital Employee and gets paid 45,000
- `Janitor` is a Hospital Employee and gets paid 40,000

## The Data

The following **Instance Data** will need to be taken care of for each employee

- **`Employee`s** have a name and ID number
- **`Doctor`s** have a name, ID number, and a specialty area (Heart, Brain, Foot, etc…).
- **`Surgeon`s** have a name, ID number, a specialty area, and whether they are operating or not.
- **`Nurse`s** have a name, ID number, a `Collection` of `Patient`s.
- **`Receptionist`s** have a name, ID number, and whether they are on the phone or not.
- **`Janitor`s** have a name, ID number, and whether they are sweeping or not.
- **`VampireJanitor`s** have a name, ID number, whether they are sweeping or not.

### Special Duties

Not all employees in the hospital have the same capabilities. Only certain staff members can **implement** certain medical duties such as `drawBlood()` or `careForPatient()`

## Getting Started

### Plan -> Prepare -> Program

1.  First, start by mapping out relationships. See what Classes you will need and how they interact with each other. (Pen and paper)
2.  Next, prepare a project using NPM. Set up a git repository for your project and a corresponding one on GitHub. If you are pairing, make sure your partner has access to the repo and the ability to push and pull. Make sure you are following [best practices](https://nvie.com/posts/a-successful-git-branching-model/). (Make sure to have a `master` branch, a `dev` branch, and give `feature-branches` a shot)
3.  Start programming. Remember to start with specifics and work toward generality. Choose one type of employee to create, test drive that class. Once that one is finished, pick another and pull similarities up into a parent class or interface.

## Example Output

```zsh
Here are the employees at High St. Hospital
Doctor Phil	111	Brain
Surgeon Harry 222 Plastic true
Nurse Jackie 333 [list of patients]
Receptionist Janine 444	true
Janitor Rosie 555 true
VampireJanitor Vlad 666 false

Here are the pay rates at High St. Hospital
Phil gets paid a salary of 90000 per year.
Harry gets paid a salary of 120000 per year.
Jackie gets paid a salary of 50000 per year.
Janine gets paid a salary of 45000 per year.
Rosie gets paid a salary of 40000 per year.

Some Employees can draw blood
Phil is capable of drawing blood.
Harry is capable of drawing blood.
Jackie is capable of drawing blood.

Some Employees can administer patient care
Phil has increased patient health to 20
Harry has increased patient health to 20
Jackie has increased patient health to 15
```

As you look at this output to the console, the true/false attached to some of the employees simply represents the state they are in relative to if they are currently involved in their jobs or not.

## Stretch Tasks

Give Stretch Tasks a shot **ONLY** after requirements have been met. Completion of stretch tasks won't give you any extra credit, but, if your attempt breaks a requirement, that will cost you points. I suggest using feature branches to implement Stretch Tasks after requirements are finished.

- Stretch task: Tina is an `EmergencyDispatcher`. She is a trained medical professional and a first responder. She also has great people skills and can answer calls and manage what ambulance gets sent to a situation. She sometimes joins the crew and responds to calls on the fly. Add her as an employee and give her the proper functionality. This job pays 45,000.
- Stretch task: Search for an individual employee by name and access their info/what they are doing
- Stretch task: add an employee, fire an employee

| Things to keep in mind                               |
| ---------------------------------------------------- |
| Care for all `Patient`s                              |
| Care for an individual `Patient`                     |
| Manage cleanliness of Hospital                       |
| Proper `tick()` method to change state of `Patient`s |
| Proper game loop                                     |
| Encapsulate all instance variables                   |
| Proper Class structure for all entities              |
| TDD                                                  |
| Clean Code                                           |
| Proper Version Control Usage                         |
| Agile approach to work                               |


High St. Hospital


## The Item Object

Create an `Item` object that models an Item to be purchased. It should contain instance data, a constructor, and the following properties: name, price and quantity.

## The App Object

Create an Array to hold `Item` instances.

```ts
const items = [];
```

The `App` Object should be designed to model shopping in similar fashion to Amazon and other online sites (where you can add items to a cart and you will see your total increase with each item added). Use a loop to simulate shopping, asking the user to enter the item, quantity and price. (You will need variables for these.) Store the items in your Array and update the total due at checkout.

Stretch task: Provide an opportunity to remove an item from the shopping cart if a user no longer desires to make that particular purchase.

Examples:

```zsh
Enter the name of the item: Shoes
Enter the unit price: 25
Enter the quantity: 2

Current Cart
Item: Shoes Price: 25.0 Quantity: 2
Total Price: $50.00

Continue shopping (y/n)? y

Enter the name of the item: Shirt
Enter the unit price: 15
Enter the quantity: 3

Current Cart
Item: Shoes Price: 25.0 Quantity: 2
Item: Shirt Price: 15.0 Quantity: 3
Total Price: $95.00

Continue shopping (y/n)? n
```

Stretchier task: Create a `Cart` Object that is responsible for managing `Item`s. `App` should only manipulate the contents of the cart by calling methods on `Cart`. It should not talk directly to `Item` instances.


Shopping Cart


Test Driving a Calculator Module

## Test-Driven Development: The 3 Rules

As defined by Uncle Bob, the 3 rules of TDD are:

| Rule 1                                                                                          | Rule 2                                                                                                                  | Rule 3                                                                                                      |
| ----------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------- |
| You are not allowed to write any production code unless it is to make a failing unit test pass. | You are not allowed to write any more of a unit test than is sufficient to fail; and compilation failures are failures. | You are not allowed to write any more production code than is sufficient to pass the one failing unit test. |

---

## Test-Driven Development: The 3 Phases

TDD is therefore a cycle between three phases:

| Red                                                                                                                                                                     | Green                                                               | Refactor                                                                                                                                           |
| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- |
| You have written a failing unit test, and now you must make it pass OR your project can't yet compile, so you need to write enough code to get a minimal program to run | You have written production code to make your latest unit test pass | All of your tests are passing, but your code could be cleaner and more readable, so you make a few adjustments before writing another failing test |

---

## JUnit

We test Java using a tool called JUnit. JUnit is a unit testing framework for Java.

In software, a test is a piece of code that tests other code. If the test "passes", then the code that it is testing is working as expected.

These tests vary in size - some focus on a very specific bit of behavior, and other focus on how all parts of an application integrate together.

A unit test focuses on a very specific piece of functionality.

---

## Project Setup

To implement TDD, you need to be able to write unit tests using JUnit.

You can find easy instructions for quickly setting up a project with JUnit in this We Can Code IT GitHub project:

- [Gradle Scripts](https://github.com/WeCanCodeIT/gradle-scripts)

Once you have set up your project and imported it into Eclipse according to the instructions above, continue to the next slide.

---

## Project Structure

You will notice that your project in Eclipse has several directories:

- `src/main/java` is where your production code belongs
- `src/test/java` is where you will put your unit tests

You will start each TDD cycle by writing a failing unit test in `src/test/java`, and then you will write production code in `src/main/java` to get your test to pass.

---

## Project Requirements

Create a Calculator class that can add, subtract, multiply, and divide numbers. It should also be able to determine the remainder of division.

Each method in the class should accept two integers as arguments and return an integer.

---

## First Test

`CalculatorTest` \- named after the class it tests

shouldBeAbleToCreateCalculator

Method naming conventions

Run test

We are now in a RED state, as our test code can't compile and run

---

## Going Green

Use Eclipse's suggestion to create calculator class

Make SURE it is in src/main/java and not src/test/java

Re-run test and see that it is PASSING

We are in the GREEN

---

## Refactor

Add a comment to make code easier to understand

"Reduce the cognitive load" - important because YOU have limited brainpower, and that brainpower is best spent solving problems, not digging through messy code

ALSO important because when you work on a team, you need to make it as easy as possible for your team to see what your code is doing. Confusing code is NOT impressive - clean code IS impressive.

Indeed, months down the road when you return to this code it will no longer be familiar to you. You will be grateful you made the code easy for strangers to understand.

---

## `RED` Calculator.sum(int addend1, int addend2)

---

## Understanding JUnit Feedback

We have now seen 3 different colors appear in JUnit's feedback to mark specific test methods.

Let's take a look at what each one means:

- Passed Test (green)
- Failed Assertion - a failure (dark blue)
- Java Exception - also a failure (red)

---

## `GREEN` Calculator.sum(int addend1, int addend2)

## `RED` Calculator.difference(int minuend, int subtrahend)

## `GREEN` Calculator.difference(int minuend, int subtrahend)

## `RED` Calculator.product(int multiplicand, int multiplier)

## `GREEN` Calculator.product(int multiplicand, int multiplier)

## `RED` Calculator.quotient(int dividend, int divisor)

## `GREEN` Calculator.quotient(int dividend, int divisor)

## `RED` Calculator.remainder(int dividend, int divisor)

## `GREEN` Calculator.remainder(int dividend, int divisor)

## Helpful Annotations

@Before - use this to set up a class so you can re-use it

@After


TDD Calculator


Programming...once more with feeling.

## Programming and Good Programming

**_“Any fool can write code that a computer can understand. Good programmers write code that humans can understand.” — Martin Fowler_**

---

## It works, isn't that good enough?

We're developers -- we write software and do a lot of programming. We know how to make code that works. We can even write code that works well. In fact, there are many who might say:

> “My code is working well, the website I built is looking great, and my client is happy. So why would I still care about writing clean code?”

---

## Clean Code Shows We Care

As developers, it's our goal to not just program, but to program with intent and care. Well written and cared for code can help us, and others, down the road. Well written code can speak for us when we aren't there to explain it.

Writing clean code will go a long way towards improving time management, advancing your career, and helping you become a better developer.

---

## What is Clean Code?

- **_Elegant_** \-  Clean code should be pleasing to read. Reading it should make you smile the way a well-crafted music box or well-designed car would.
- **_Focused_** \- Each function, each class, each module exposes a single-minded attitude that remains entirely undistracted and unpolluted by the surrounding details.
- **_Cared For_** \- Someone has taken the time to keep it simple and orderly. They have paid appropriate attention to details. They have cared.
- **_Tested_** \- It is high quality. It passes all the tests.
- **_Simple_** \- It contains no duplication and minimizes the number of entities such as classes, methods, and functions.

---

## But, Really...Why Should I Care?

- **_Less Wasted Time_** \- You may understand how your code works now, but you probably won't in a few weeks. Messy code takes longer for you and your teammates to read and understand.
- **_Less Documentation_** \- If your code is clean there is minimal need for comments or extensive documentation to explain it.
- **_Bugs Can't Hide_** \- Messy, spaghetti code gives bugs places to hide. Clean code allows you to debug faster.
- **_Maintainable_** \- In the future your project will probably evolve and features will be added and changed. Clean code makes maintenance faster and easier, and therefore, less expensive.
- **_Pride_** \- You will feel good about producing quality work, and your client or employer will appreciate it.

---

## SOLID Design Principles

SOLID is a term describing a collection of design principles for good code that was invented by Robert C. Martin, also known as _Uncle Bob_. It is intended to make software design more understandable, flexible and maintainable.

SOLID means:

- **Single Responsibility Principle**
- **Open/Closed Principle**
- **Liskov Substitution Principle**
- **Interface Segregation Principle**
- **Dependency Inversion Principle**

---

### Single Responsibility Principle

> _A class should only have a single responsibility._

Every class should be responsible for one thing, and that thing should be entirely contained within that class. Classes should have one reason to change.

---

### Open/Closed Principle

> _Software entities should be open for extension, but closed for modification._

In other words, we want to be able to change what the entities do, without changing the source code of the entity. How do we do this? With abstractions.

---

### Liskov Substitution Principle

> _Subclasses should be substitutable for their base classes._

The user of a base class should continue to function properly if a subclass or derived class is passed to it.

---

### Interface Segregation Principle

> _Many client-specific interfaces are better than one general-purpose interface._

A client should never be forced to implement an interface that it doesn't use or clients shouldn't be forced to depend on methods they do not use.

---

### Dependency Inversion Principle

> _High-level modules should not depend on low-level modules. Both should depend on abstractions._

This strategy states that modules should depend on interfaces or abstract functions and classes, rather than concrete functions and classes. Why? Because concrete things change a lot and abstract things change less frequently.

High level modules deal with the high level policies of the application and care little about the details that implement them, so we decouple the dependency.

---

## How do we write clean code?

**_“It is not the language that makes programs appear simple. It is the programmer that make the language appear simple!” -Robert Martin_**

---

## Meaningful Names

Choosing good names takes time but saves more than it takes. The name of a variable, function, or class, should answer all the big questions- why it exists, what it does, and how it is used.

_If a name requires a comment, then the name does not reveal its intent._ \[\[\[ For example.

```ts
let d; // elapsed time in days.
```

A better name would be:

```ts
let elapsedTime;
```

For more clarity, you could use:

```ts
let elapsedTimeInDays;
```

---

## Comments

**_"A long descriptive name is better than a short enigmatic name. A long descriptive name is better than a long descriptive comment."_**

If you are writing comments to prove your point, you're probably making your code harder to read at a glance. Ideally, comments are not required at all. Our code should explain everything. Modern programming languages allow ways through which we can easily explain our point.

For example, this:

```ts
// Check to see if the employee is eligible for full benefits
if (employee.isRetired && employee.age > 65)
```

Becomes this when the naming is clarified:

```ts
if (employee.isEligibleForFullBenefits())
```

---

## Class Syntax

When we build Objects there are some things we should keep in mind:

- The `class` keyword is just syntactic sugar. JS is not Classically Inherited, it is prototypically inherited.
- Objects should have noun or noun phrase names written in PascalCase, like `Customer`, `WikiPage`, `Account`, and `AddressParser`. Avoid verbs and key words like `Manager`, `Processor`, `Data`, or `Info` in the name of a class.
- Order Matters
  - Variables, Instances, Functions, Utility methods (After functions that call them.)
- Objects should be concise and adhere to _Single Responsibility Principle_
  - If you can't derive a good class name, the class is probably too large.
  - Multipurpose classes force us to look through code we don't need to know about.

---

## Method Names

Methods should have verb or verb phrase names written in camelCase, like `postPayment`, `deletePage`, or `save`.

_Accessors_ and _mutators_ should be named for their value and prefixed with the `get` or `set` keywords.

---

## Pick One Word per Concept

Pick one word for each abstract concept in your classes and stick with it.

For instance, it’s confusing to have `fetch`, `retrieve`, and `get` as equivalent methods in different classes. How do you remember which method name goes with which class?

Likewise, it’s confusing to have a _Controller_ and a _Manager_ and a _Driver_ in the same code base. What is the essential difference between a `DeviceManager` and a `ProtocolController?`

---

See an example of Class, Property, and Method names below:

```ts
class VirtualPet {
  constructor (name, type, health, hunger, boredom) {
    this._name = name
    this._type = type
    this._health = health
    this._hunger = hunger
    this._boredom = boredom
  }

  checkStatus() {
    ...
  }

  feed() {
    ...
  }

  play() {
    ...
  }
}
```

---

## Small Functions

The first rule of functions is that they should be small.

The second rule of functions is that they should be smaller than that.

This implies that the blocks within if statements, else statements, while statements, and so on should be one line long. That line should probably be a function call. Not only does this keep the enclosing function small, but it also adds documentary value because the function called within the block can have a nicely descriptive name.

---

## Few Function Arguments

A function shouldn’t have more than 3 arguments. When a function needs more than two or three arguments, it is likely that some of those arguments ought to be wrapped into a class of their own.

```ts
sum(values, startIndex, endIndex) {
  let total = 0;
  for (let index = startIndex; index <= endIndex; index++) {
    total += values[index];
  }

  return total;
}
```

This makes the logic crystal clear. Function names easily describe what we are trying to achieve.

---

## Objects and Data Structures

First we need to clarify the difference between Object and Data Structures. One is just about storing data and other allows us to manipulate that data.

- **_Objects_** hide their data behind abstractions and expose methods that operate on that data.
- **_Data Structures_** expose their data and have no meaningful methods.

---

The `Shape` class below operates on the three shape classes. The shape classes are simple data structures without any behavior. All the behavior is in the `Shape` class.

```ts
class Shape {
  PI = 3.14;
  constructor() {}

  get area() {
    if (this.constructor === Square) {
      return this._sideLength * this._sideLength;
    }
    if (this.constructor === Circle) {
      return PI * this._radius * this._radius;
    }
  }
}

class Square extends Shape {
  constructor(sideLength) {
    this._sideLength = sideLength;
  }
}

class Circle extends Shape {
  constructor(radius) {
    this._radius = radius;
  }
}
```

---

## In our code

Think about the previous example. Consider what would happen if a `perimeter()` function were added to `Shape`. The `Shape` Objects would be unaffected. On the other hand, if I add a new shape, I must change all the functions in `Shape` to deal with it.

This code is flawed according to _Liskov's Substitution Principle_ Which states:

### If `S` is a _subtype_ of `T`, then _objects_ of type `T` in a program may be replaced with _objects_ of type `S` without altering any of the desirable properties of that program.

Put plainly. We shouldn't have to make drastic changes to incorporate new functionality.

---

```ts
class Shape {
  constructor() {}

  get area() {
    throw new Error('Abstract method must be implemented in child class...');
  }
}

class Square {
  constructor(sideLength) {
    this._sideLength = sideLength;
  }

  get area() {
    return this._sideLength * this._sideLength;
  }
}

class Circle {
  PI = 3.14;

  constructor(radius) {
    this._radius = radius;
  }

  get area() {
    return PI * this._radius * this._radius;
  }
}
```

Now we can easily add new Shapes as compared to the previous case. If we have to add `perimeter()` function in only one `Shape`, we are forced to implement that function in all the Shapes as `Shape` Object is an interface containing `area()` and `perimeter()` function.


Clean Code


_Welcome to WCCI!_

## What we do?

We train students to become full-stack software developers. We use agile processes and test driven design to ensure code quality and product quality. We are an organization that believes in immersing students in the experience.

---

## What are full stack developers?

**Full stack developers** have the knowledge and skills to take a concept to a finished product through all the stages of software development. Students will be able to develop an understanding of how a product is built from the data layer to the back-end to the front-end.

---

## What is our tech stack?

- **Git**: our version control system
- **MongoDB**: the database that we use to store information
- **Mongoose**: handles the Object Relation Mapping of our database system
- **JavaScript**: a modern programming language used mostly on the web, provides the foundation of our boot camp
- **Node**: the runtime environment that allows us to run JS code out side of the browser
- **Express**: the framework we use that sits on top of the Node framework that simplifies building web applications
- **HTML**: markup language
- **CSS**: handles the styling of our HTML (**Grid** / **Flexbox**)
- **JavaScript**: We also use JS on the front end to dynamically interact with our front end environment

---

## Software Developer

- Healthy environments are agile and team based
- Teams remain relatively small and work in sprints
- An average sprint is about 2 weeks but this can change from one work environment to another


Introduction


## It's not about what we teach

## _It's about what you learn_

---

## Technology is always changing

Technology evolves **fast**, so what you need to know as a software developer is always changing.

---

## Most things change

Some knowledge has a much shorter shelf life. Since 2011, each of the front-end frameworks below have had their time in the spotlight and most have faded away.

- jQuery
- Backbone
- Knockout
- Ember
- AngularJS

---

## Some things stay the same

Some core principles are applicable across technologies, frameworks, and time.

Once you understand the concept of a loop, for example, that knowledge is pretty universally applicable.

---

## Principles

- Developers must be **life-long learners**.
- People learn by **doing**.
- Software development is a **team-focused** activity.
- Lecture is a last resort.

---

## What you'll be doing

In bootcamp, you'll be doing a lot of the same things you'll be doing once you graduate and join a software development team.

This includes:

- Working on small dev teams to build applications.
- Researching, learning, and mentoring your teammates as you're building.
- Reviewing each other's code and helping to improve overall quality.
- Test driving your code, so you'll know it's well-designed and functions correctly.

---

## What your instructors will be doing

People learn best by **doing**, but sometimes lecture is necessary. We strive to favor action and self-discovery over spoon fed lecture.

### This is what will make you successful beyond this bootcamp.

We will challenge you, cheer for you, and ensure you're on the right path...

**...but ultimately, you and your team are responsible for pushing yourselves forward.**

---

**Let's get started.**


Learning Philosophy


Getting Started

## Purpose of Rapid Prototyping

Rapid prototyping is a practice to boot strap a project and explore what structure your application is going to need. By building out a static version of a dynamic web application you get a guide to follow as you build the application.

---

## How To Prototype

### Start with static pages

Even though your goal is a dynamic website, we start with a static version. We should be able to create a simple version of what we want each of the pages of our look like before we start. This step is important for a couple reasons, it tests our knowledge of the overall requirements of the project and it gives the team a reference point for design conversations in the future.

#### Example

Our client has asked us for an application to track their collection of books. The application must have a page that lists all the books and a page for the details of each of the books (title, author, ISBN number, and description) in their collection. We would start with prototyping by making two static pages, one for the list of all books and one for the individual book. We might end up with static pages looking like this:

#### Book Collection

```html
<section class="books">
  <ul>
    <li><a href="./book.html">Sample Book Title</a></li>
    <li><a href="./book.html">Sample Book Title</a></li>
    <li><a href="./book.html">Sample Book Title</a></li>
  </ul>
</section>
```

#### Single Book

```html
<section class="book">
  <h1>Sample Book Title</h1>
  <h2>Mel Smith</h2>
  <p>ISBN Number: 43343-43455</p>
  <p>Description of this book.</p>
  <a href="./books.html">Back to all books</a>
</section>
```

---

### Use Static Examples to Design Data Model

After you have your static webpages you can use them to help build out the data structures that your application needs. We should now have a good idea of how many types of pages you will need for your application, the flow of content from one page to another. Most importantly we should also know the parts of the webpages that need to be represented by dynamic data.

#### Example

From our example above, lets dive into the _Single Book_ page. We see types of data we need to store about each book based on how the material is presented in the static page. If we built out a Java class to implement a data structure for a `Book` object it might look like this:

```ts
class Book {
  constructor(config) {
    this.title = config.title;
    this.author = config.author;
    this.isbn = config.isbn;
    this.description = config.description;
  }

  getTitle() {
    return title;
  }

  getAuthor() {
    return author;
  }

  getIsbn() {
    return isbn;
  }

  getDescription() {
    return description;
  }
}
```

---

### Build Out Dynamic Content

Now that you have data structures for your web pages you can work on changing your static pages into dynamic content. If you are going to use a template engine for your content you already have a starting point in your static pages. If you are following agile practices you have had a chance to share with your customer the static version of the web application and been able to get feedback on it's appearance. Now you can take that customer approved demo and transform it into a template for the dynamic content.

#### Example

We use Handlebars as our template engine in our Express applications because it is extremely similar to regular HTML and easy to convert static pages to dynamic templates. For the _Single Book_ page we can simply add our content to the HTML tags using Handlebars bracket syntax.

```hbs
<section class='book'>
  <h1>{{book.title}}</h1>
  <h2>{{book.author}}</h2>
  <p>ISBN Number: {{book.isbn}}</p>
  <p>{{book.description}}</p>
  <a href='./book-collection.html'>Back to all books</a>
</section>
```

For the _Book Collection_ we simplify the multiple static references with a reference to a collection of books:

```hbs
<section class='books'>
  <ul>
    {{#each books}}
      <li><a href='/books/{{isbn}}'>{{title}}</a></li>
    {{/each}}
  </ul>
</section>
```

---

### Build Controllers

Now that you have the data structures and templates designed you can build out controllers and routing that serve content to the endpoints you specified. The anchor tag targets in the templates should have routing in your backend application and you should implement a database that stores your content if needed.

---

### Augment Functionality

As requirements change use this pattern of prototyping to identify parts of your application that need changed or added. For instance, if you add security, create a static login page and than change it to be a dynamic resource that interacts with your backend server.


Rapid Prototyping

## Boxes that flex

## CSS Flexbox

The second layout tool in our CSS toolbox: Flexbox! It is a great tool to couple with CSS Grid to make sure that your content will look good on any device and with absolute ease. (At least compared to how this business used to get done. Which is bad. Very bad.) Flexbox is a very powerful tool and can actually be used to build out page layouts on its own. Hopefully by the end, though, it will become clear when to use grid and when to use flexbox. Let's get started.

---

## Containers again!

Rejoice! It's our friend the container again! This time we make it a flex container:

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Flexbox Example</title>
    <link rel="stylesheet" href="./layout.css" />
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <div class="container"></div>
  </body>
</html>
```

```css
.container {
  display: flex;
}
```

---

## Flex Container and Flex Items

So there are two MAJOR pieces of vocabulary we need to understand before moving forward because we are going to reference them a lot.

### Flex Container

The first thing we need if we are going to use flexbox is a flex container. In our example, our flex container is the div with the class `container`. (This is a fairly common practice btw so get used to it and try to start using it on your own) Setting the display to flex lets your code know that anything inside of this containing element should be treated with flexbox rules

### Flex Item

Now where would we be without some content to manipulate with this amazing tool. The direct children of the flex container are known as the flex items. This is the content that we are actually going to be manipulating. This is also why it's important to house your content in appropriate `section` tags. We are going to be affecting almost every element in our code with CSS so organize it.

---

## The Axes

### This:

![graph](/images/flexbox/grid.gif)

### Not this:

![axe](/images/flexbox/axes.jpg)

---

Flex item placement is based on two axes. The main-axis and the cross-axis.

### Main-axis

The main-axis is the flex line that your content is placed on. By default the main-axis goes from left to right.

### Cross-axis

The cross-axis is situated perpendicular to the main-axis. This axis is used to distribute your content in the opposite direction of your main-axis.

These two work together as a sort of binary placement system. Think (x, y) coordinates on a graph. But these coordinates can be dynamic. This is what makes flexbox so powerful.

---

Let's get some content inside of our document to play with:

```html
<div class="container">
  <div class="flexItem flexItem--1">flex item 1</div>
  <div class="flexItem flexItem--2">flex item 2</div>
  <div class="flexItem flexItem--3">flex item 3</div>
  <div class="flexItem flexItem--4">flex item 4</div>
  <div class="flexItem flexItem--5">flex item 5</div>
</div>
```

```css
.container {
  display: flex;
  margin: 2rem auto;
  padding: 11px;
  max-width: 1000px;
}
.flexItem {
  margin-left: 5px;
  padding: 11px;
}
.flexItem:first-child {
  margin: 0;
}
```

---

## Flex vs Inline-flex

### Flex

So the first thing to notice is that `display: flex;` renders your container as a block level element. Most of the time, this is going to be what you want because you'll want your container to fill the entirety of the space it occupies.

![display: flex](/images/flexbox/flex.png)

---

### Inline-flex

If, for some reason, you want your container to be viewed as an inline level element, you can use `display: inline-flex;` instead of just flex. You'll notice that our `auto` margins collapse when we do this because, as an inline level element, there is no extra space around our element.

![display: flex](/images/flexbox/inline-flex.png)

---

## Flex Direction

One of the first advantages that you'll notice about flexbox is the ability to change the flow of your content from horizontal to vertical.

Before flexbox this was not as easy as it may seem. Sure you could change the display of the elements to inline or block based on your needs but this always came with unexpected consequences, things that needed to be worked around, unnecessary containers, etc. Flexbox mitigates all of the nonsense for you. All you need to do to change orientation in flexbox is to change one line of code: `flex-direction`. Let's see it in action.

---

So let's have a reminder of what we're looking at currently:

![display flex](/images/flexbox/flex.png)

The default value of flex direction is row. There are three other options. Let's check them out.

---

The next value to discuss is `row-reverse`:

```css
.container {
  display: flex;
  flex-direction: row-reverse;
  margin: 2rem auto;
  padding: 11px;
  max-width: 1000px;
}
```

What do you think happens when we set the `flex-direction` this way?

---

It gives us:

![row reverse](/images/flexbox/flex-direction-row-reverse.png)

---

Next we're going to get into `column`:

```css
.container {
  display: flex;
  flex-direction: column;
  margin: 2rem auto;
  padding: 11px;
  max-width: 1000px;
}
```

Any guesses for this `flex-direction`?

---

You'll notice when we give our container `flex-direction: column` that our main-axis and cross-axis actually switch places. This makes your content flow vertically beginning at the top:

![column](/images/flexbox/flex-direction-column.png)

---

Finally, we're going see what happens with `column-reverse`:

```css
.container {
  display: flex;
  flex-direction: column-reverse;
  margin: 2rem auto;
  padding: 11px;
  max-width: 1000px;
}
```

And finally, we'll set `flex-direction` to `column-reverse`

---

For our final `flex-direction`, we see that the content behaves similar to how `row-reverse` behaves only in a new orientation:

![column reverse](/images/flexbox/flex-direction-column-reverse.png)

---

As you can see, flexbox has a wide range of options when it comes to the orientation of your content. The power lies in how little code you have to write to get your content to behave this way.

---

## Flex Wrap

One of the first issues to deal with is wrapping content. You'll notice if you compress your window, your flex items just squish together on the same line:

![flex wrap](/images/flexbox/squished-content.png)

---

We can fix this with another simple addition to our flexbox rules:

```css
.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin: 2rem auto;
  padding: 11px;
  max-width: 1000px;
}
```

---

Now whenever our container is too narrow for our content to fit in one line, it will split onto as many lines as it needs to display properly.

![flex wrap](/images/flexbox/flex-wrap.png)

Other options are \`nowrap\` and \`wrap-reverse\`. Play around with both to see their functionality.

---

## Order

Another really powerful aspect of flexbox is the `order` property. So we can give numerical values to individual elements and change their order.

The default order value given to elements is 0. This is why they're placed in the order they appear in your HTML. But if we wanted to have `flex item 4` at the front, we can simply give it an order value less than 0:

```css
.flexItem--4 {
  order: -1;
}
```

---

Notice how `flex item 4` is now at the front of our list as opposed to the fourth slot, where it falls in our HTML layout:

![order change with flexbox](/images/flexbox/flexbox-order.png)

This is super valuable because we can leave our HTML semantically marked up and order things how we want them using CSS. This is the way things should be.

---

## Justify Content

So what good is all of this without being able to distribute your content the way you want? Exactly, worthless. So let's jump into the magic of `justify-content`. The default value of `justify-content` is `flex-start`. This is what you've seen so far:

![flex-start](/images/flexbox/flex.png)

Notice how the content is flush with the left side or start of the container.

---

The next value for `justify-content` is similar to the first. The value is `flex-end` and it does exactly what you'd expect:

![flex-end](/images/flexbox/flex-end.png)

All items are now aligned to the right side of the container.

---

A really useful value for `justify-content` is `center`. It's not only one of the most used values for `justify-content` but one of the big reasons to use the property at all. We'll get to why this is such a powerful value in future slides:

![center](/images/flexbox/center.png)

This takes all content that you have inside of your container and centers it for you. On it's own it looks like you could easily do this with `text-align: center;`, and you'd be right. The real power here comes from a pairing with another property.

---

The next value we're going to discuss is `space-between`. This is a really interesting value because it's functionality hasn't even remotely existed in CSS until now. `space-between` takes all space remaining outside of your content and distributes it evenly between each element. Like so:

![space-between](/images/flexbox/space-between.png)

This is really useful for distributing things like navigation items.

---

The final value we're going to talk about is `space-around`. This value behaves similarly to `space-between` but instead places excess space on either side of each item. Like so:

![space-around](/images/flexbox/space-around.png)

This is really useful for times that you need to distribute extra space evenly and not have the first or last item be flush to the side of your container.

---

So to recap, all values for justify-content are:

```css
.some-containing-element {
  /* Note: you cannot use the 'or' pipes
  ** in the declaration. They're just there
  ** to denote possible options
  **/
  justify-content: flex-start || flex-end || center || space-between ||
    space-around;
}
```

---

## Align Items

This is where distributing items gets REALLY interesting (and way easier). The `align-items` property is very similar to `justify-content` except it handles distribution of items along the cross-axis instead of the main-axis. To see this in action, let's add some height to our container and check out the default value, `stretch`:

```css
.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  height: 20rem;
  justify-content: space-around;
  margin: 2rem auto;
  padding: 11px;
  max-width: 1000px;
}
```

---

As it's name implies, `stretch` stretches all elements to take up all space available on the cross axis:

![stretch](/images/flexbox/stretch.png)

Sometimes this is very useful, other times, it's a nuisance. Luckily we have other values to choose from.

---

Our next stop on the `align-items` value trail is one we've seen already, `flex-start`! It does a very similar job here:

![align-items-flex-start](/images/flexbox/align-items-flex-start.png)

This is good for aligning everything to the top of your container.

---

It would logically follow, then, that `align-items` also has a `flex-end` value. It very does:

![align-items-flex-end](/images/flexbox/align-items-flex-end.png)

Again, this performs very similarly to `flex-start` but aligns items to the bottom or end of the container.

---

And now, the moment you've had no idea you'd been waiting for. `align-items` has a `center` value! You should be freaking out about this but you probably have no idea the horrors that were trying to vertically center something without this amazing tool.

![align-items-center](/images/flexbox/align-items-center.png)

This is SO amazing. Centering in CSS was truly the stuff of nightmares for the frontend developer until flexbox. What's even more amazing is when you pair it with \`justify-content: center;\`. LET'S DO THAT!

---

```css
.container {
  align-items: center;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  height: 20rem;
  justify-content: center;
  margin: 2rem auto;
  padding: 11px;
  max-width: 1000px;
}
```

---

Which gives us:

![Perfectly. Centered. Content.](/images/flexbox/align-center-and-justify-center.png)

Content.👏 Aligned.👏 To.👏 The.👏 Center.👏 Of.👏 A.👏 Container.👏

---

![Mind Absolutely Blown](/images/flexbox/mind-absolutely-blown.gif)

Commence to losing your mind. I'll wait...

---

## Align Self

Related to `align-items` but not totally is a property that can go on individual items called `align-self`. This allows you to have the functionality of `align-items` but with individual items. Let's try is on item 2:

```css
.flexItem--2 {
  align-self: stretch;
}
```

---

This yields the result:

![Align self stretch](/images/flexbox/align-self-stretch.png)

This way you can pretty much put things where ever you want them to be.

---

![super neat](/images/flexbox/how\neat-is-that.gif)

---

## Flex Grow

There is a property on flex items called `flex-grow`. This property has a default value of 0. But when applied to items in your flex container, it makes each item take up a certain amount of remaining space in the container. Let's apply a value of 1 to all of our items and see how it goes.

```css
.flexItem {
  flex-grow: 1;
  margin: 5px;
  padding: 11px;
}
```

---

Notice how all elements are taking up all available space (minus margins) in the container.

![flex grow one](/images/flexbox/flex-grow-one.png)

Let's change the `flex-grow` property of item 3 and see how it's affected.

---

```css
.flexItem--3 {
  flex-grow: 5;
}
```

Item 3 has a `flex-grow` value of 5 and the other 4 elements have a `flex-grow` value of one for a total of 9 units.

---

Notice how item 3 appears larger now.

![flex grow item larger](/images/flexbox/flex-grow-item-larger.png)

---

## Flex Basis

Now on to `flex-basis`. This allows each item with the property applied to have a width that it must have. That is to say items cannot shrink smaller than their `flex-basis`. Let's apply this with a value of `350px` to item 4 and see the result.

---

Notice how when the container is compressed item four will not have a width lower than `350px`

![flex basis](/images/flexbox/flex-basis.png) ![flex basis compressed](/images/flexbox/flex-basis-compressed.png)

---

## Now For Practice!

Clone the repository found [here](https://github.com/WeCanCodeIT/flexbox-examples-csharp) and complete the assignment. When you finish up, take a look at [Flexbox Zombies](http://flexboxzombies.com) for some in-depth practice with flexbox.

### Other Resources

- [The Ultimate Guide to Flexbox–Learning Through Examples](https://medium.freecodecamp.org/the-ultimate-guide-to-flexbox-learning-through-examples-8c90248d4676)
- [Flexbox Zombies](https://flexboxzombies.com/p/flexbox-zombies)
- [A Complete Guide to Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)

CSS Flexbox

Finally! Rows and columns in CSS!

## CSS Grid

Before tools like Grid and Flexbox, CSS wasn't really equipped to handle content layout.

Layouts were something to be hacked out of unintended CSS style rules. Things like floats that are intended to help images and text flow better together, or percentage widths that are more suited for relational sizing of elements inside of their parent containers.

The CSS3 spec includes actual layout tools that will allow us to stop hacking around layouts in our applications and design the UIs of the future.

---

## CSS Grid vs. Flexbox

I mentioned two layout tools. We use CSS Grid for two-dimensional design, usually more large-scale elements like pages. Flexbox is used for one-dimensional placement of smaller elements and collections of elements inside of parent containers.

We are going to go through Grid now. Follow along [here](https://github.com/WeCanCodeIT/css-grid-slide-example).

---

## Grid

The first thing you need to start using grid is a grid container. We accomplish that with `display: grid;` on the containing element:

```html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Grid Example</title>
    <link rel="stylesheet" href="../css/style.css" />
  </head>
  <body>
    <div class="container"></div>
  </body>
</html>
```

```css
/*style.css*/
.container {
  display: grid;
}
```

---

## Grid Items

Grid items are any direct children of your grid container.

```html
<div class="container">
  <section class="grid-item grid-item-1">1</section>
  <section class="grid-item grid-item-2">2</section>
  <section class="grid-item grid-item-3">3</section>
  <section class="grid-item grid-item-4">4</section>
  <section class="grid-item grid-item-5">5</section>
</div>
```

---

This gives you a result that looks like this:

![Default distribution](/images/css-grid/initial-grid-setting.png)

---

## Container

One of the first things to notice that needs to be handled is the way our content goes from one edge of the page to the other. There aren't a lot of websites out there that use a layout like this. So here is a common container setting that will limit the size of your content and make it look a little neater:

```css
.container {
  display: grid;
  margin: 2rem auto 2rem auto;
  width: 1000px;
}
```

---

Let's step through what's happening here.

![Container with constraints](/images/css-grid/container-with-contraints.png)

---

This line of code is saying that we want our container to have a width of 1000px. Since our viewport is larger than 1000px, our container will be slimmer and have some space between itself and the edges of the window.

```css
.container {
  display: grid;
  margin: 2rem auto 2rem auto;
  width: 1000px;
}
```

---

This line of code is saying that we want to have `2rem` units of space on the top and bottom of our container. The `auto` keyword is telling our browser to take what ever space is left on the sides and distribute it evenly effectively centering our container.

```css
.container {
  display: grid;
  margin: 2rem auto 2rem auto;
  width: 1000px;
}
```

Notice the repetition? There is a short hand when both top/bottom AND right/left share the same values. This code can be re written as follows: `2rem auto`. It will be written this way in following slides. Ok, back to actual grid syntax.

---

## Grid Columns

So as you can see, grid layout on its own does nothing for your content. This is because by default your grid is set to have only one column and one row. So this essentially leaves your content looking like it's still displayed as block level elements. Let's add another column:

```css
.container {
  display: grid;
  grid-template-columns: 500px 500px;
  margin: 2rem auto;
  width: 1000px;
}
```

---

Now we have two columns set to 500px each making a 2 column grid. The more values you put into `grid-template-columns`, the more columns you will create.

![Two columns](/images/css-grid/two-column-fixed-width-grid.png)

---

We can now add items to our grid and they will fall in place the same way! (Just add 3 more items that look the same as the first 5 with updated numbers. Don't forget classes!)

![More items](/images/css-grid/two-column-fixed-width-grid-with-more-items.png)

---

## Grid Rows

Now we can make columns, and as many as we want! So what about rows? Well rows work the same way. We can make four rows of varying size like this:

```css
.container {
  display: grid;
  grid-template-columns: 500px 500px;
  grid-template-rows: 100px 200px 200px 100px;
  margin: 2rem auto;
  width: 1000px;
}
```

---

This gives us a grid that looks like this:

![Two column, four row grid](/images/css-grid/modified-row-sizes.png)

---

You will have as many rows as you declare, just like columns. So, if you remove the last value, the row will take up only as much space as the content requires.

```css
.container {
  display: grid;
  grid-template-columns: 500px 500px;
  grid-template-rows: 100px 200px 200px;
  margin: 2rem auto;
  width: 1000px;
}
```

---

Three rows with declared heights and one that will auto-size based on content. This is called an implicit row because we aren't explicitly assigning it a value. It is getting its height from the contents of the elements in the row.

![Missing row declaration](/images/css-grid/missing-row-declaration.png)

---

## Gutters

Without any sort of spacing between our grid cells our content seems to run together. Andthatmakesithardtoread. See what I mean? We need to put some space between the elements.

To accomplish this we have `grid-column-gap` and `grid-row-gap` but, as I'm sure you might guess by now, there is a shorthand for the two and that's what we're going to use.

```css
.container {
  display: grid;
  /*The first value handles row gap, the second col gap*/
  grid-gap: 15px 20px;
  grid-template-columns: 500px 500px;
  /*Don't forget to put your fourth row back*/
  grid-template-rows: 100px 200px 200px 100px;
  margin: 2rem auto;
  width: 1000px;
}
```

---

Notice that we now have some comfortable space between all of our grid cells.

![Grid with gutters](./resources/grid-with-gutters.png)

But now we have our right column overflowing out of the parent container! There's a way to prevent this and we'll explore that after...

---

## Practice!

Time to take a little while to put what you just learned into practice.

Navigate to [the practice exercise](https://github.com/WeCanCodeIT/css-grid-practice-front-end-only) in your browser and follow the instructions to get started.

---

## Flexible Grids

---

## `fr` Unit

So we last left off with a grid that looks pretty good. We had nice organized content in two columns with four sized rows, nicely centered in our page. Then, we added gutters which fixed the problem of condensed content but created the problem of making our content overflow its container.

We need something like a dynamic column measurement. Some way to say we want two columns that should be equal and not be affected by the size of our gutters.

If the title didn't give it away, it's the `fr` (fraction) unit. This unit does exactly that. Let's see it in action.

---

`fr` is used the same way we were using our `px` measurements in our earlier example. So, let's change the code to use this new unit instead.

```css
.container {
  display: grid;
  grid-gap: 15px 20px;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 100px 200px 200px 100px;
  margin: 2rem auto;
  width: 1000px;
}
```

---

You'll notice that we now have a grid that looks very much like what we were going for the first time. The columns obviously aren't exactly `500px` wide but that's ok.

![Grid with 'fr' units](/images/css-grid/grid-with-fr-units.png)

I'm not a fan of that repetition though. Let's take care of that with...

---

## repeat()

The repeat function takes two arguments, first, the number of values you want repeated. The second, the actual value to be repeated. Let's change our code in TWO places to use this new function.

```css
.container {
  display: grid;
  grid-gap: 15px 20px;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: 100px repeat(2, 200px) 100px;
  margin: 2rem auto;
  width: 1000px;
}
```

Notice that you are able to use this function inline with other size declarations no problem.

---

## Other Notable Values

You can use ANY measurement unit you have at your disposal as column/row values. Some to be especially aware of are:

| Unit     | Function                                                                                                                                                                                              |
| -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `%`      | Percentage units will take up whatever percentage you declare of the containing element                                                                                                               |
| `em/rem` | `em/rem` will do the same as you're used to. Fixed but much more flexible than `px`                                                                                                                   |
| `auto`   | This unit is a big one. Auto will take up any remaining space in a fixed container. if the container isn't fixed, it will push elements to the edge of the viewport and take up all space in between. |

---

## Container revisited

So our columns are behaving flexibly now but our container still has a fixed width. I'm not ok with that and you shouldn't be either. Let's make some changes to make it a little less rigid.

```css
.container {
  display: grid;
  grid-gap: 15px 20px;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: 100px repeat(2, 200px) 100px;
  margin: 2rem auto;
  max-width: 1000px;
  width: 90%;
}
```

Again, let's dive a little deeper:

---

```css
.container {
  display: grid;
  grid-gap: 15px 20px;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: 100px repeat(2, 200px) 100px;
  margin: 2rem auto;
  max-width: 1000px;
  width: 90%;
}
```

What used to be \`width\` is now \`max-width\`.

This style rule is saying the container can be any width in pixels up to \`1000px\`. Once it hits \`1000px\`, it stops.

And now our \`width\` is set to \`90%\`.

Since \`max-width\` is a flexible rule \`width\` takes precedence until the condition for \`max-width\` is met. So when our viewport is slimmer than \`1000px\`, the width of our container is \`90%\`.

---

## Spanning Columns and Rows

So now you have this great grid set up and all of your content is looking GREAT (**without using a framework**). But maybe you want one of your elements to take up a whole row or maybe two cells in a column or maybe both! Ahhh! Grid has lost its efficiency!

![Wrong](/images/css-grid/wrong.jpg)

---

We can use the commands on individual items to achieve this functionality. For example, if we wanted to have the first item span both columns in our grid:

```css
.grid-item-1 {
  grid-column-start: 1;
  grid-column-end: 3;
}
```

What? Why 3? There's only 2 columns. Don't worry, we'll get there

---

Which will give us the following result:

![Item one spans two columns](/images/css-grid/item-one-spans-two-columns.png)

But let's get back to that three

---

## Grid lines

`grid-column-start` and `grid-column-end` are referring to what are known as grid lines.

![grid column line](/images/css-grid/grid-column-line.png) ![grid row line](/images/css-grid/grid-row-line.png)

There are both four column and four row lines in the grids above. The left image shows the third column line while the right image shows the third row line.

---

Maybe you have a flexible layout (you should) and you don't know how many columns you have at a given time. How would you reference the last grid line?

Well grid is pretty resourceful that way. You can use negative numbers to reference grid lines in reverse order so the last grid line is -1, the second to last is -2, third to last -3, etc.

So we can always reference the last grid line with -1. So the following does the same as our current code:

```css
.grid-item-1 {
  grid-column-start: 1;
  grid-column-end: -1;
}
```

---

But, what if we just wanted our item to span two columns no matter how many columns there are? There's a solution for that too. For that we use a shorthand that combines the two rules into one. The first parameter applies a value to `grid-column-start`, the second to `grid-column-end`

```css
.grid-item-1 {
  grid-column: 1 / span 2;
}
```

Notice the `span` keyword. This dictates how many columns, not column lines, your content will span.

Let's see the result by adding a third column.

```css
/* inside of the .container rules */
grid-template-columns: repeat(3, 1fr);
```

---

Here's what we get from that:

![grid with item 1 spanning 2 columns and an extra column](/images/css-grid/add-a-third-column.png)

---

## Explicit vs. Implicit Columns and Rows

In the previous slide we have empty space at the bottom of our grid. This is because we have an explicit row set in this grid container. Whether we have content to fill that space or not, we have that row to deal with.

This can be a really helpful tool if you want to create whitespace in your layout, which you very well may. But it can also be a pain to deal with if you aren't expecting it.

So keep in mind, implicit columns and rows will take over for you if you have more content than grid cells. But, if you explicitly make grid cells from rows and columns, they will be there regardless of your content.

Most importantly, put it into...

---

## Practice

Check out the following resources for an even more in-depth look at CSS Grid:

- [Intro to CSS Grid Layout](https://mozilladevelopers.github.io/playground/)
- [Grid by Example](https://gridbyexample.com/)
- [An Introduction to CSS Grid Layout: Part 1](https://hacks.mozilla.org/2017/10/an-introduction-to-css-grid-layout-part-1/)
- [A Complete Guide to Grid](https://css-tricks.com/snippets/css/complete-guide-grid/)

CSS Grid


Designing your content for striking results

## Cascading Style Sheets

The second frontend language we're going to talk about is CSS (Cascading Style Sheets), the style layer of the frontend. There are multiple ways to identify elements in your HTML and change the way they look.

Let's look at [this example](https://codepen.io/donhamiltoniii/pen/JyNjXM) to see power of CSS!

---

## Selectors

Before we can apply styles to elements in your HTML, there are 5 main selectors that we need to talk about.

The first and least specific are element selectors. These are just selecting elements by their tag name. Styles will be applied to all elements that have that tag.

```css
p {
  background-color: blue;
  color: white;
}
```

The preceding code will give all paragraph elements a blue background and white text.

---

## Pseudo Selectors

Pseudo selectors are the next most specific in our list of selectors. With pseudo selectors we have the ability to select elements by attributes that they have. So for example:

```css
input[type='text'] {
  color: red;
}
```

This is going to give any of our input elements with a type of text a text color of red, but no other input items will be affected. Other pseudo selectors include:

- `:focus`
- `:active`
- `[type="submit"]`

---

## Class Selectors

The next thing on our specificity tour is classes. Classes can be applied to multiple HTML elements and the styling rules you apply to your classes will be applied to all elements that have that class. So, if you want to change the font-family of everything on your page that has a class of `.sans-serif`, it would look like:

```css
.sans-serif {
  font-family: Helvetica, Arial, sans-serif;
}
```

---

## ID Selectors

The final and most specific selector are ID's. ID's are unique to whatever element they are applied to. The way that elements with ID's are identified are with the `#` symbol. So if you want to style the element that has the `#page-title` ID:

```css
---
title: page-title {
---\n  color: var(--primary-color); /* We'll get to what this is shortly */
  font-family: sans-serif;
  font-size: 2rem;
}
```

---

## Chain Selectors

Chaining selectors is a way to add more specificity to your selection. For example, if we wanted to keep the changes from our first slide:

```css
p {
  background-color: blue;
  color: white;
}
```

But we also want any paragraph tags inside of our header to have a red background instead of blue. In this case we can chain the selectors to be more specific:

```css
header p {
  background-color: red;
}
```

These can also get as complicated as you want them to be, i.e.:

```css
header nav .nav-items li > a:focus {
  border-bottom: 1px solid #123456;
}
```

---

## Default Styles

So what happens when we don't declare any CSS rules? Well each browser has default style rules. It is important to keep these in mind when declaring your own styles because, if you aren't careful, these styles can collide with and overwrite your styles.

A good first step is to know what the default styles look like. You can check these out using the Chromes dev tools. and disable any link stylesheets. To access the dev tools inside of Chrome right-click inside of your browser window and click inspect (`<ctrl>` \+ `<alt>` \+ `<i>`).

An even better step is to knock out all default styles in all browsers with [Normalize](https://necolas.github.io/normalize.css/). This is a maintained stylesheet that resets all default styles from all browsers so you start with absolutely no styling happening.

---

## Colors!

There are a few different ways to declare colors inside of CSS. Hexadecimal, rgba(), hsla(), and keywords.

```css
h1 {
  background-color: #39add1; /* Hexadecimal */
  border: 3px solid hsla(270, 50%, 45%, 1); /* Hue, Saturation, Lightness, Alpha (opacity) */
  box-shadow: 3px 3px 3px aquamarine; /* Keyword */
  color: rgba(0, 255, 127, 0.9); // Red, Green, Blue, Alpha (opacity)
}
```

[Check here](http://www.w3schools.com/cssref/css_colors.asp) for a color checker.

---

## Units

There are a lot of different things we need to have measurements for in CSS. Some of them static, some dynamic, some relative to the size of the container they're housed in, some relative to the size of the whole window.

### px

Pixels are a single area of illumination on your screen. They are useful but losing popularity as better relative units are becoming available.

### rem

Rem units are based on the default font-size of the root (html in our case). So if your root font-size is 16px, 1rem = 16px.

### em

Em units are based on the font-size of the containing element.

---

## Units continued...

### Percentage

Percentage based measurements are based on the size of their parent element. i.e.:

```css
section {
  width: 300px;
}
section h3 {
  width: 50%; /* This equals 150px */
}
```

### Viewport Height (vh), Viewport Width (vw)

These measurements are based on the size of your viewport (browser window). They're similar to percentage that way, except they are always related to the viewport. i.e.:

```css
section.container {
  width: 50vw; /* Always half of the viewport width */
}
img#heroImage {
  height: 40vh; /* Always 40% the height of the viewport */
}
```

---

## Typography

So a few words on your words:

---

### Font stack

You have what is known as a font stack for any given text based element. What this means is that you can have a very specific typeface that you want to use but then also have back-ups just in case, for some reason, your typeface isn't available to your user. This way you can avoid having to rely on defaults EVER!

```css
p {
  font-family: Cambria, Utopia, 'Nimbus Roman No9 L Regular', Times, serif;
}
```

---

# Sans-serif vs. Serif

Hey, isn't this more design than programming, you ask? Yes! But deal with it. There are some important things to note here as far as screens vs printed material. One of the biggest parts to consider is the size of your text. Serifs tend to be better for things like titles because they're large. The reason this is helpful is because serifs are usually rendered in print media at 1000 dpi and screen media tends to render anywhere from 100-300 dpi. This means large bodies of text tend to do better with sans-serif typefaces. (But rules are always made to be broken 😈)

---

# Monospace, Fantasy, and Cursive typefaces

## DON'T USE THEM.

Not really never, but seriously, be very cautious using these typefaces not only because they can make your page look disjointed but remember our font stack! These fonts, by and large, are less likely to be available to your user than more common serif and sans-serif typefaces.

---

## Backgrounds

Most things have backgrounds that can be manipulated and there are three options to choose from: images, colors, and gradients.

### Images

Images have a much larger range of options to use for the size, position, and repeat of your background.

```css
html {
  /* items with '||' aren't actually used with those */
  background-image: url('../images/path-to-my-image.jpg');
  background-repeat: repeat || repeat-x || repeat-y;
  background-size: 300px 200px || cover || length;
  background-position: 50% 50%;
}
```

---

## Backgrounds continued...

### Color

This one is much simpler than image by a long shot. You just declare a background color and your element will have that color background. So if you wanted to make all of your anchor (`<a>`) tags have a yellow background:

```css
a {
  background-color: yellow;
}
```

## Background Continued... 2

### Gradient

Gradients are a good way to achieve some really interesting (read: subtle please!) backgrounds for your elements. Hey look at the background on this slide! So there are two gradient types: linear and radial. Note that you need to use `background-image` for these:

```css
body {
  /* These can get MUCH more complex btw */
  background-image: linear-gradient(rgba(127, 127, 255, 0.75), #ff6);
}
section {
  background-image: radial-gradient(circle at center, red, blue);
}
```

---

## CSS Variables

CSS has built-in variables now which is of HUGE benefit to us. They must be declared in the `:root` element. This is just another way to reference the `html` element. This is a bit of a bonus so don't be upset if this doesn't make sense immediately.

```css
:root {
  /* Notice we declare this with the same key, value pair. */
  --primary-color: red;
  --secondary-color: blue;
  --tertiary-color: yellow;
}
h1 {
  /* Declare variables the same way you would other values. */
  background-color: var(--tertiary-color);
  color: var(--primary-color);
}
```

---

# Time for practice!

## CSS Tutorials

Time to put what you've learned here to work. Clone [this](https://github.com/donhamiltoniii/css-demo) exercise from github and follow the instructions to complete the challenge. Once you finish up, check out what MDN has to offer [here](https://developer.mozilla.org/en-US/docs/Web/CSS). Use these examples to play around on [Codepen](https://codepen.io). (also make yourself an account!)


CSS Styling


We can use CSS to not only style our code and highlight certain elements, but also to make layouts that help our users interact with our content in meaningful ways. Lets take a look at Some HTML content that we are going to give some direction to with a hierarchal layout.

Please clone [this](https://github.com/WeCanCodeIT/css-layouts-without-layout-tools-slide-companion) repo and follow along

---

![HTML beginning](/css-layouts-without-layout-tools-resources/img/beginning.png)

---

## Style Without Layout

So we have a page that has some default style which helps us to group some of the information together. This still feels difficult to absorb looking at it though. Let's start adding some structure to the page by building a layout.

---

## Default Styles

The first thing we want to do is remove some default styles we're seeing from the browser. There is a lot of extra space around our elements that we want to be in control of including. So the first set of rules we are going to include are going to be a small reset so we can get rid of these styles.

```css
/* layout.css */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
```

Let's explore these rules:

- The asterisk (\*) tells your CSS that we want to target every element on the page
- `box-sizing: border-box` is telling the browser how to treat the box model
- `margin: 0` is telling the browser to get rid of any inherent margin
- `padding: 0` is telling the browser to get rid of any inherent padding

---

![Default style reset](/css-layouts-without-layout-tools-resources/img/reset.png)

---

## Container

The next issue to deal with is our content flowing from one end of the window to the other. Let's get some space between our content and the window and move it to the center.

```css
.container {
  margin: 0 auto;
  width: 1000px;
}
```

- `margin: 0 auto` is centering everything inside of the `div` with the class `container`
- `width: 1000px` is giving the container a width of `1000px`

---

Notice that the image is extending outside of the container. We'll deal with this shortly. ![Add container rules](/css-layouts-without-layout-tools-resources/img/container.png)

---

## Header

The first element we come to in our layout is the `header`. We want the logo to be on the left and the navigation on the right.

```css
header h1 {
  float: left;
}
header nav {
  float: right;
}
```

- `float: left` is making the `h1` element float to the left
- `float: right` is making the `nav` element float to the right

---

Where did the `header` go?? ![Float elements](/css-layouts-without-layout-tools-resources/img/header-float.png)

---

## Clearfix

So we can see the content of our `header` but the `header` element itself seems to have disappeared. That's because of our floats. When you float an element, it takes it out of the flow of the page. So your browser is essentially seeing a `header` element with nothing inside of it. If you use your inspector, you can see that the element still exists, it just doesn't have a height. What we need to do is apply what is known as a clearfix to our `header`. Let's make this it's own class and then apply that class to the `header`.

```css
.clearfix::after {
  clear: both;
  content: '';
  display: block;
}
```

---

Now our elements are where we want them and we have our `header` back. ![Clearfix](/css-layouts-without-layout-tools-resources/img/clearfix.png)

---

## Header Content

Now we need to add some space around the header content to keep it off of the edges as well as line our navigation items up horizontally.

```css
header h1 {
  float: left;
  padding-left: 1rem;
}
header nav {
  float: right;
  padding-right: 1rem;
}
header nav ul li {
  display: inline-block;
  margin-left: 0.5rem;
  margin-top: 0.75rem;
}
```

- `padding-{left,right}: 1rem` is applying space inside of each element to push it from the edge of the container
- `display: inline-block` is arranging the `li` elements horizontally
- `margin-{left,top}` is applying space outside of the `li` elements on the left and top

---

Now our elements are where we want them and we have our header back. ![Add header spacing](/css-layouts-without-layout-tools-resources/img/header-spacing.png)

---

## Hero Image

The next element we come to on our page is what is known as the hero image. We want to contain the image inside of our containing element, give it some space above and below it, and have the caption overlap the image. Let's start with the first two:

```css
figure {
  margin: 1rem 0;
}
figure img {
  width: 100%;
}
```

- `width: 100%` is giving the image a width of 100% relative to its containing element.

---

![Contain image](/css-layouts-without-layout-tools-resources/img/contain-image.png)

---

## Caption

Now let's get that caption on the bottom of the image. We're going to add some code to layout as well as style here.

```css
/* layout.css */
figure {
  position: relative;
}
figure figcaption {
  bottom: 0.4rem;
  padding: 0.5rem;
  position: absolute;
  width: 100%;
}
/* style.css */
figure figcaption {
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
}
```

- `position` is dictating how the position of the element should be handled. The default is `static`
- `bottom` is assigning a distance from the bottom of the parent element

---

![Positoin caption](/css-layouts-without-layout-tools-resources/img/position-caption.png)

---

## Highlights

Now that we have our hero image and caption set up, let's get our highlight cards set up. We want them to be lined up horizontally in three equal columns. (Don't forget to add the `clearfix` class to the `.highlights` container)

```css
.highlights {
  margin: 3rem 0;
}
.highlights article {
  float: left;
  margin-right: 2%;
  padding: 1rem;
  width: 32%;
}
.highlights article:last-child {
  margin-right: 0;
}
```

So we're giving each element a width of 32% and putting 2% space to the right of each `article` inside of the `.highlights` container. We are removing the margin on the last `article` though, because we don't need any space between that element and it's container.

---

![Make columns](/css-layouts-without-layout-tools-resources/img/highlight-columns.png)

---

## Content

Next on our list is to split the content cards into two columns. We are going to use the same strategy that we used in the previous section but with different values:

```css
.posts {
  margin: 3rem 0;
}
.post {
  float: left;
  margin: 2%;
  width: 49%;
}
.post:last-child {
  margin-right: 0;
}
```

---

![Content columns](/css-layouts-without-layout-tools-resources/img/content-columns.png)

---

## Content Cards

I don't like how the content cards have their content stuck right against the edges of the containers. Let's remedy that.

```css
.post header,
.post .content,
.post footer {
  padding: 1rem;
}
```

---

![Add space to cards](/css-layouts-without-layout-tools-resources/img/content-card-space.png)

---

## Footer

Here we are at the end! All we have left is to put the social links in the center of footer and arrange them horizontally. Then we want to center the copyright underneath of that. Finally, we want some space around all of the elements.

```css
footer {
  padding: 1rem;
}
footer nav ul {
  text-align: center;
}
footer nav ul li {
  display: inline-block;
  margin-left: 0.5rem;
}
footer small {
  display: block;
  margin-top: 2rem;
  text-align: center;
}
```

`text-align: center` is centering everything inside of a block level element

---

![Footer adjusments](/css-layouts-without-layout-tools-resources/img/footer-adjustments.png)

---

## Conclusion

And there we have it! We hav a whole page, not only styled nicely, but also laid out in a way that is intuitive and organized for our users!


CSS Layouts


Organizing Content

Progressive enhancement is a technique in CSS that allows us to use cutting edge CSS styling but still has fallbacks to support older browsers. With progressive enhancement, we can use things like Grid and Flexbox without having to worry about browsers that don't support the syntax for those tools.

---

## Mobile First Design

Mobile first design is a popular practice for developing web applications. The idea is that you build your styling to accommodate the smallest screens first and then use media queries to alter the original design as screen sizes get larger. This allows your content to be flexible so that your application looks good on any device your user may be using to access it.

Let's get started with [this](https://github.com/donhamiltoniii/css-progressive-enhancement-slide-companion) example.

---

![Initial Design](/images/progressive-enhancement/initial.png)

---

## Getting Started

In our example, you can see we have a basic site set up for mobile devices. We are going to see how we can add complexity to our code as we scale up.

---

## Media Queries

The first thing we are going to take a look at are media queries. Media queries allow us to alter our style rules based on conditions like viewport height or width, orientation of the screen (portrait or landscape), or what type of display we're dealing with.

Let's begin by adding a media query for when the viewport is at least 600px and make some columns for our content.

```css
@media screen and (min-width: 600px) {
  article {
    float: left;
    margin-right: 2%;
    width: 49%;
  }
  article:nth-child(even) {
    margin-right: 0;
  }
  .clearfix::after {
    clear: both;
    content: '';
    display: block;
  }
}
```

---

![First Media Query](/images/progressive-enhancement/first-media-query.png)

---

Notice how we now have a two column layout when our viewport is at least 600px wide. Let's continue to make more columns as our screen gets larger. Let's add another media query for 900px.

```css
@media screen and (min-width: 900px) {
  article {
    margin-right: 2%;
    width: 32%;
  }
  /* Overwrite previous media query  */
  article:nth-child(even) {
    margin-right: 2%;
  }
  article:nth-child(3n) {
    margin-right: 0;
  }
}
```

---

## Responsive Columns

Notice now that we have a three column layout when our viewport is at least 900px wide.

![Second media query](/images/progressive-enhancement/second-media-query.png)

---

We can continue to add style rules to any given media query. Note that you can change any CSS rules inside of your media queries. So you could have an entirely different style for your page based on any conditions you want. Let's continue by arranging the navigation horizontally when the page is at least 750px wide.

```css
@media screen and (min-width: 750px) {
  header h1 {
    float: left;
  }
  header nav {
    float: right;
  }
  nav ul li {
    border: none;
    display: inline-block;
    margin-right: 5px;
  }
  nav ul li:last-child {
    margin-right: 0;
  }
}
```

---

![Header Layout](/images/progressive-enhancement/header-layout.png)

---

## Feature Queries

Now that we have a flexible site, we can focus on making sure we are using the right tools for each job we're doing. Since we have layout tools like Grid and Flexbox now, we should be using those. The problem is that not all browsers support these new technologies so we need fall backs for them. That's why we're going to keep our percentage based layout and add Grid and Flexbox for browsers that support them using feature queries. Feature queries are similar to media queries with the exception that they check if a feature is supported in a browser instead of checking for specifications in the browser. Let's begin by adding support for flexbox when it is supported.

---

```css
@supports (display: flex) {
  article:nth-child(even) {
    margin-right: 1rem;
  }
  article main {
    display: block;
  }
  article:nth-child(3n) {
    margin-right: 1rem;
  }
  main {
    display: flex;
    flex-wrap: wrap;
  }
  main article {
    float: none;
    margin: 0;
    margin: 0 1rem 2rem;
    flex: 1 1 250px;
    width: 100%;
  }
}
```

---

![Flexbox](/images/progressive-enhancement/flexbox.png)

---

## Grid

Now let's do the same for Grid

```css
@supports (display: grid) {
  article main {
    display: block;
  }
  main {
    display: grid;
    grid-gap: 2rem;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  }
  main article {
    margin: 0;
  }
}
```

---

![Grid](/images/progressive-enhancement/grid.png)

---

## Progressively Enhanced Site

And there we have it. We have a site set up now that uses all of the new CSS rules that we have at our disposal without leaving any of our users out of the loop!


Progressive Enhancement


NoSQL Databases

## Introduction

MongoDB is one of the most popular NoSQL databases in use today. NoSQL stands for Not only Structured Query Language. NoSQL databases give us a different way to query data inside of their data stores, but it will be organized just the same. Let's get into some of the vocabulary that we'll use to discuss our data.

---

## Collections

A collection is the top level container in our databases. We can have multiple collections inside each database, but each of these collections should maintain a specific type of data. For example, we might have a people collection, a books collection, a cars collection, etc. But each of those collections should only hold those types of objects. So let's take a look at what a basic users collection might look like:

```json
[
  {
    "id": "12345",
    "name": "Lacey",
    "email": "lacey@wcci.org",
    "password": "password"
  },
  {
    // ...
  },
  {
    // ...
  }
]
```

---

## Documents

The next step down is a Document. So a Collection represents a collection of Documents. So in our previous example, the document is:

```json
{
  "id": "12345",
  "name": "Lacey",
  "email": "lacey@wcci.org",
  "password": "password"
}
```

So a document represents a single entry inside of the Collection.

---

## Fields

Our last piece of vocab is Fields. Fields represent an individual piece of data inside of a document.

```json
{
  "id": "12345",
  "name": "Lacey",
  "email": "lacey@wcci.org",
  "password": "password"
}
```

So for example, `id` is a field, `name` is a field, etc. So every individual piece that we can use is a Field in the Document.

---

## MongoDB Atlas

There are a few different ways to create and access a MongoDB database. We can install it locally and run an instance of the database from our own machine or we can connect to a cloud based implementation. It is far more practical to be connecting to an outside database as that's what you ultimately have to do when you're creating applications that you actually deploy. So this is the approach that we will take.

We'll be using a service called [MongoDB Atlas](//cloud.mongodb.com). Follow that link and create a new account.

---

## Making Your First Cluster

Once you finish creating a new account you should be taken to a page with a pop up that prompts you to build your first Cluster. A cluster is essentially just a database instance. Click the big green button and let's keep going. On the second screen, click 'Developing a new app'.

1.  Now we should be on the 'Create New Cluster' page. Select 'aws' as the provider and 'N. Virginia' (because it has a free tier) and click Create Cluster at the bottom.
2.  Now, while we wait for the cluster to be created, we can create a user. This is how each person accessing the database will get access. Go to the Security tab and click 'Add New User' on the right. (all members of the team should have a unique user on the db). The username and password are different from your account username and password. These are **ONLY** to interact with this database.
3.  Next, Whitelist your machines IP so MongoDB Atlas will let you in when you connect from your application. Click the 'IP Whitelist' sub-tab in Security and then click 'Add IP Address' on the right. We're going to select 'Allow Access From Anywhere' for simplicities sake. In a real environment, you probably shouldn't do this.
4.  Connect to your cluster once it finishes creating by clicking the 'Connect' button in the Overview tab

---

## Connecting to our App

If you don't have an application to connect your new db to, create on using the Express Generator:

1.  From `~/wcci/code`: `mkdir hello-mongo && cd $_`
2.  Next: `npm init -y`
3.  Then we need to add `mongodb` as a dependency: `npm i mongodb`
4.  Finally: `code .`

Make a new file called `index.js` and let's add some stuff!

---

```ts
//index.js
const mongodb = require('mongodb');
const MongoClient = mongodb.MongoClient;

MongoClient.connect(
  '<url-for-your-db>',
  { useNewUrlParser: true },
  (error, client) => {
    const db = client.db('mongo-introduction');

    db.collection('people').insertOne(
      {
        name: 'Brian',
        age: 37,
      },
      (error, result) => {
        if (error) {
          return console.log('Unable to connect', error);
        }
        console.log(result);
      }
    );
  }
);
```

That's a lot of stuff... Let's go through it a little at a time

---

## MongoClient

The first few things to go over all have to do with `MongoClient`. `MongoClient` is a property that we get from the MongoDB dependency that allows us to connect to outside clusters. The piece that we want to focus on is the `connect()` method from it. This method accepts 3 pieces.

1.  a location for your cluster in the form of a url string.
2.  a configuration object. All we _need_ to include here is the `useNewUrlParser: true` entry, but there are more that you can add. I encourage you to take a look at the [Mongo Docs](http://mongodb.github.io/node-mongodb\native/3.2/api/) for more on that.
3.  a callback function that will return either an error or a connection to the cluster. It is inside of this callback that we can actually interact with the cluster and more specifically a database.

---

## Inside the Callback

The first thing we need to do once we're connected to the cluster is specify a database name that we want to work with. Our cluster can contain multiple actual databases.

```ts
const db = client.db('mongo-introduction');
```

This command will either identify an existing database that we want to interact with or create a new one if this one doesn't exist.

---

## Inside the DB

Once we have a database to interact with, we can specify the collection that we will actually be working with.

```ts
db.collection('people');
```

This will specify the collection that we mean to perform CRUD (Create, Read, Update, Delete) operations on. From here we just need to choose one of a collection of methods to actually interact with the collection.

---

## Create

### Create One

We can add one Document to our collection like so:

```ts
db.collection('people').insertOne({ name: 'Ben' }, (error, result) => {
  if (error) console.log('There was an error inserting the document!');
});
```

### Create Many

And we can add multiple Documents to our collection like this:

```ts
db.collection('people').insertMany(
  [{ name: 'Ben' }, { name: 'Kendra' }],
  (error, result) => {
    if (error) console.log('There was an error inserting the document!');
  }
);
```

---

## Read

### Read One

Now we need to be able to get one Document

```ts
db.collection('people').findOne({ name: 'Ben' });
```

This will return the first instance it finds that meets the given criteria.

### Read Many

```ts
db.collection('people').findMany({ name: 'Lacey' });
```

This will find all Documents where the `name` field is `Lacey`

---

## Update

### Update One

We can update an existing entity with new values.

```ts
db.collection('people').updateOne({ name: 'Ben' }, { $set: { age: 30 } });
```

### Update Many

We can update values in multiple Documents as well

```ts
db.collection('todos').updateMany(
  { complete: false },
  { $set: { complete: true } }
);
```

---

## Delete

### Delete One

We can delete one Document by specifying it (usually by id, but any field will work).

```ts
db.collections('heroes').deleteOne({ name: 'Spiderman' });
```

### Delete Many

We can also get rid of multiple entries at a time

```ts
db.collections('tasks').deleteMany({ complete: true });
```

---

## Conclusion

Being able to interact with our database is a critical step to developing applications. It makes managing large collections of data so much easier _and_ more secure. Make sure to check out the [Mongo Docs](http://mongodb.github.io/node-mongodb\native/3.2/api/) as well.


MongoDB


Object Document Mapper

## Introduction

Mongoose is our Object Document Mapper (ODM). An ODM is a tool that sits on top of our database connection that makes it **FAR** easier to interact with in our full-stack applications.

---

## Initialization

First we need to add it as a dependency to a project that is already connected to a database or create a new one. This walk through will assume you already have a project with a database connection. From your project root run `npm i mongoose`. We're now ready to see the difference between communicating with Mongo through their own channels and how it looks with Mongoose.

---

## Example File

Here's what our code should look like:

```ts
const mongoose = require('mongoose');

mongoose.connect('<db-url>', { useNewUrlParser: true });

const db = mongoose.connection;

db.on('error', console.error.bind(console, 'connection error:'));
db.once('open', function () {
  console.log('Connected to the DB!');
});

const Car = mongoose.model(
  'Car',
  new mongoose.Schema({ make: String, model: String })
);

const modelThree = new Car({ make: 'Tesla', model: 'Model 3' });

modelThree.save((error, savedModelThree) => {
  if (error) return console.error(error);
  console.log(savedModelThree.make, savedModelThree.model);
});
```

---

## What...

Yea... Let's break that down. It's a lot, but it's not so bad.

```ts
mongoose.connect('<db-url>', { useNewUrlParser: true });
```

`mongoose.connect()` accepts 2 parameters, the url for the location of your database, and a configuration object. You can read more on the config object from the docs. For now, just know that you need it and it needs to contain that specific property.

---

## The DB

```ts
const db = mongoose.connection;

db.on('error', console.error.bind(console, 'connection error:'));
db.once('open', function () {
  console.log('Connected to the DB!');
});
```

1. So we can use the `mongoose.connection` property effectively **ONLY** after we have called `mongoose.connect()`. The value of this property will be the actual DB connection.
2. `db.on("error", ...)` will give us feedback if there was an error connecting to the DB.
3. `db.once("open", ...)` actually opens the DB connection and gives us feedback (via the `console.log`) the we have successfully connected.

---

## Mongoose Models

```ts
const Car = mongoose.model(
  'Car',
  new mongoose.Schema({ make: String, model: String })
);
```

So Mongoose provides us with its own `model()` method to allow us to create unique Documents that adhere to a strict schema. A DB schema is essentially a map of what kind of data your model should accept. So in our case `make` and `model` in `Car` need to be Strings.

---

## Documents

Now let's take a look at using the model that we just created.

```ts
const modelThree = new Car({ make: 'Tesla', model: 'Model 3' });

modelThree.save((error, savedModelThree) => {
  if (error) return console.error(error);
  console.log(savedModelThree.make, savedModelThree.model);
});
```

---

So first we need to make an instance of the model with specific data. In our case we're making a Tesla Model 3. (if only...) The next line illustrates some functionality that Mongoose gives us that differs from just creating a normal JS object. The `.save()` method is one we get specifically from Mongoose. We pass it a callback with an `error` param and a second parameter that represents the object that we saved, if it saves successfully.

In this callback we essentially say that if there is an error, print it to the console and break out of the function (because of the `return`). After that, we can do anything we want with the returned data. In this case we're logging it but usually we would send it to a template.

---

## Conclusion

Mongoose provides a super helpful abstraction on top of Mongo for us that allows us to interact with our DBs so much more efficiently. Make sure to dig into the [docs](https://mongoosejs.com/) for a much more in depth look at this software.


Mongoose


## The Most Popular Open Source Relational Database

## Introduction

MySQL is a great database to use to get familiar with relational databases and SQL syntax. Our focus in this walk-through will be integrating a running SQL database with your Node application.

---

## Integrating a MySQL DB to Node

The first step to being able to use a MySQL database in a Node app is to have some way to connect to it. For that, we're going to use a library that connects for us. Let's install it:

```zsh
npm install mysql2
```

This will install the `mysql2` library which is an API that will connect to a running instance of MySQL based on a configuration object that we will write next.

---

## DB Connection

If you don't already have a `util` directory in your `src` directory, create one now. Inside of it we'll add a configuration file for our database.

```ts
// util/db.js

const mysql = require('mysql2');

const pool = mysql.createPool({
  host: 'localhost',
  user: 'root',
  database: 'library', // replace this with whatever your database is actually named
  password: 'password', // replace this with the password to your database (hopefully it isn't 'password')
});

module.exports = pool.promise();
```

Here we're using the `mysql` library to create a pool. This pool will query our database using an open connection which will give us a fast response.

From the docs:

> Connection pools help reduce the time spent connecting to the MySQL server by reusing a previous connection, leaving them open instead of closing when you are done with them. This improves the latency of queries as you avoid all of the overhead that comes with establishing a new connection.

Then we're exporting `pool.promise()`. We could export just `pool` but adding `.promise()` to it allows us to work with promises instead of callbacks. Which, in my opinion is a lot cleaner. Let's take a look at how we can use this now.

---

## Making Requests to our Database

Now we can import this module anywhere in our application and start making requests to our database.

```ts
// app.js

db.execute('SELECT * FROM books')
  .then(([rows, fieldData]) => {
    rows.forEach((row) => {
      console.log(`${rows.id}: ${rows.title} ($${rows.price})`);
    });
  })
  .catch(console.error);
```

using the `execute` method on our db, we can actually retrieve rows and populate components on our page! In the previous example we're only printing to the console but passing this to a template would have the same logic.

Important to note is the response that we're getting from the db. Notice we're using array destructuring to get the rows as well as field data (metadata) corresponding to our request. Since our request (`SELECT * FROM books`) is getting every available row in the form of an Array, we're able to iterate over it and log each row to the console in the format we've specified. We could just as easily pass this as a model element to a template.

---

## POST requests

One important note in dealing with SQL databases. Never inject data directly into a post request. If you do, you can fall victim to what are known as SQL Injection attacks. This is a very specific type of hacking threat in which some nefarious entity types actual SQL code into input fields hoping to gain access to your Data Layer. So, this...

```ts
db.execute(
  `INSERT INTO \`books\` (\`id\`,\`title\`,\`description\`) VALUES (DEFAULT, ${req.body.title},${req.body.description})`
);
```

IS VERY BAD

But this...

```ts
db.execute(
  `INSERT INTO \`books\` (\`id\`,\`title\`,\`description\`) VALUES (DEFAULT,?,?)`,
  [req.body.title, req.body.description]
);
```

IS GOOD

In the second example, SQL will parse the values for SQL keywords and escape them before putting anything in your db. the first example will not.

---

## Conclusion

Being able to connect to a database makes working with our data so much more efficient. What's also nice is now our data is decoupled from our actual application so we could potentially use it with any number of applications running on the same server.

Be sure to get some [practice with SQL syntax](https://www.codecademy.com/learn/learn-sql).


MySQL


## Why write your own SQL?

## What is Sequelize?

Sequelize is an **Object-Relational Mapping (ORM)**. ORMs allow us to map objects (entities) to databases so we can focus on writing JS code instead of having to switch syntaxes from JS to SQL.

---

## Connecting an application and a database using Sequelize

First, install Sequelize:

```zsh
npm i sequelize
```

Next, we need to give Sequelize some data to be able to locate our db and give our application access to it.

```ts
// src/util/database.js

const Sequelize = require('sequelize');

const sequelize = new Sequelize(
  'library', // db name
  'root', // db username
  'password', // db password
  {
    // config object
    dialect: 'mysql', // type of db
    host: 'localhost', // db hosting location
  }
);

module.exports = sequelize;
```

---

## Initializing DB

In order to actually use our database, we need to send a message from our application using sequelize to our DB. For that we include the following at the bottom of `app.js` just above the `module.exports = app` statement.

```ts
sequelize
  .sync()
  .then(() => console.log('DB Connected'))
  .catch(console.error);
```

---

## Models

- An _model_ is an object that is mapped to the database
- In a relational database context, think of:
  - the class as the table
  - instance variables as the columns
  - objects (class instances) as the rows

Here is an example of how a model entity looks in Sequelize:

```ts
const Sequelize = require('sequelize');

const sequelize = require('../util/database');

const Book = sequelize.define('book', {
  id: {
    type: Sequelize.INTEGER,
    autoIncrement: true,
    allowNull: false,
    primaryKey: true,
  },
  title: {
    type: Sequelize.STRING,
    allowNull: false,
  },
  description: {
    type: Sequelize.STRING,
    allowNull: false,
  },
});

module.exports = Book;
```

Let's break that down.

---

## `sequelize.define()`

This method is taking our `sequelize` context from the database connection file and defining a new model element. What this means for our database is that we are creating a new table for any books we create.

---

## Model config object

```ts
const Book = sequelize.define('book', {
  id: {
    type: Sequelize.INTEGER,
    autoIncrement: true,
    allowNull: false,
    primaryKey: true,
  },
  title: {
    type: Sequelize.STRING,
    allowNull: false,
  },
  description: {
    type: Sequelize.STRING,
    allowNull: false,
  },
});
```

We have a configuration object that we pass after the model entity name. This configuration object contains metadata about each field. This describes to our db how each field (or column) is to be treated. For example, our `id` has to be an integer or we will get an error. We're also saying the the `id`s will auto increment, which is to say our db will take care of making these unique for us. `id`s cannot be null and they are the Primary Key (main identifier) for these model entities.

---

## Camels to Snakes

If Sequelize encounters a class or instance variable name containing more than one word, it converts these from `camelCase` to `snake_case`.

Consider this:

```ts
const VirtualPet = sequelize.define(`virtual_pet`, {
  id: {
    type: Sequelize.INTEGER,
    autoIncrement: true,
    allowNull: false,
    primaryKey: true
  },
  numberOfLegs: {
    type: Sequelize.INTEGER,
    allowNull: false
  }
}
```

In this case, Sequelize would expect/generate a table named `virtual_pet` with columns named `id` and `number_of_legs`.

---

## CRUD

- **C**reate: Create and persist (save) new objects.
- **R**ead: Read objects from the database.
- **U**pdate: Persist changes made to objects' state (instance variables).
- **D**elete: Delete objects from the database.

---

## CRUD in Sequelize

Sequelize offers methods to handle these operations. They exist on the Model entities themselves which makes organization a breeze:

### Create

The following command will create a new book entity

```ts
Book.create({
  title: 'Refactoring',
  description: 'A great book on Refactoring by the great Martin Fowler',
});
```

### Read

The following will retrieve all existing book entities

```ts
Book.findAll();
```

The following will find a single book entity by it's `id`

```ts
Book.findByPk(123);
```

The following will find a book entity by it's title

```ts
Book.findOne({
  where: {
    title: 'Refactoring',
  },
});
```

### Update

What if we have something existing that we want to update? There are two methods for that. First, let's look at a PUT method that will update the entirety of the existing object.

```ts
Book.findByPk(123)
  .then((book) => {
    (book.title = 'New Title'), (book.description = 'New description');
    return book.save();
  })
  .then((updatedBook) => console.log('Updated', updatedBook))
  .catch(console.error);
```

We can also update single fields on an existing objects. For that we would use a PATCH method.

```ts
updateTitle(id, title) {
  Book.findByPk(id)
    .then(book => {
      book.title = title,
      return book.save()
    })
    .then(updatedBook => console.log("Updated", updatedBook))
    .catch(console.error)
}

updateDescription(id, description) {
  Book.findByPk(id)
    .then(book => {
      book.description = description,
      return book.save()
    })
    .then(updatedBook => console.log("Updated", updatedBook))
    .catch(console.error)
}
```

### Delete

The following will get rid of an existing object.

```ts
Book.findByPk(123)
  .then((book) => book.destroy())
  .then((book) => {
    console.log('Deleted', book);
  });
```

---

## Something to Relate to

Relational databases are so called because they manage relationships between entities for us. In order to relate two entities, we can use some special statements provided by Sequelize. These should be included just before the initialization statement in `app.js`. You'll need to import your model entities for this to work as well.

```ts
Author.hasMany(Book);
Book.belongsTo(Author);

sequelize
  .sync({ force: true })

  .then(() => console.log('DB Connected'))
  .catch(console.error);
```

---

## Relationships

### One to One

One to one relationships are when one entity can be related to another exclusively. If we think about a monogamous relationship, one person has one partner and that partner only has the other. This is a good illustration of a one to one relationship.

### One to Many/Many to One

One to many can be thought of as a mother and her children. Each of those children only have one mother. But the mother can have multiple children. This is how many to one and one to many relationships work.

### Many to Many

We can think of many to many relationships as siblings. One sibling can have many brothers and sisters and also be a brother or sister to many other siblings.

---

## Conclusion

Sequelize is a really powerful abstraction that allow us to easily integrate relational databases into our Node applications

### Docs

Make sure to familiarize yourself with the [Sequelize Docs](https://sequelize.org/master/).


Sequelize


Abstracting the Data Layer

## Introduction

Service Layers are a really useful abstraction that we create to give us the ability to ignore implementation details of our data layer. Essentially we create a series of methods on our Service Layer that will talk to our Data Layer (usually a database) and perform any operations we need for us. That way we can call the methods that exist in our Service Layer and change implementation details at any point leaving our application totally unaffected.

---

## Implementation

The best way to understand exactly what a Service Layer does for us is to examine an application without one and then see how it changes with one. Let's start by looking at a controller that handles books in an application that doesn't have aservice layer and interacts with the db directly.

```ts
const db = require('../util/database');

module.exports = {
  readAllBooks(req, res) {
    db.execute(`SELECT * FROM books`)
      .then(([books, fieldData]) => {
        res.render('books/all', { books });
      })
      .catch(console.error);
  },
  readBook(req, res) {
    db.execute(`SELECT * FROM books WHERE id=${req.params.id}`)
      .then(([book, fieldData]) => {
        res.render('books/single', { book: book[0] });
      })
      .catch(console.error);
  },
};
```

Here is a controller in an application that doesn't have a service layer managing it's data requests. To be clear, this will work. This is a messy way to go about this though. This also leads to a tight coupling problem where our controller is "tightly coupled" with the database. If anything about our database changes, so too must our implementation in our controller. This is always undesirable. This is where a service layer comes in handy.

---

## Service Layer Implementation

Let's take a look at what our service layer is actually going to look like.

```ts
const db = require('../util/database');

module.exports = {
  findAll(callback) {
    return db
      .execute('SELECT * FROM books')
      .then(([books, fieldData]) => {
        callback(books);
      })
      .catch(console.error);
  },
  findById(id, callback) {
    return db
      .execute(`SELECT * FROM books WHERE id=${id}`)
      .then(([books, fieldData]) => {
        callback(books[0]);
      })
      .catch(console.error);
  },
};
```

Now with this service layer, we have two methods that handle getting all books in the db as well as getting one book by it's `id`. Both of these methods accept a callback function that we pass to the `then` block of the Promise. Now this module handles all of our interaction with the db. If we change what db we're using or how, that behavior only needs to change here in the Service Layer. We don't have to worry about what middleware, controllers, or any other piece of our application for that matter, will be affected by that shift.

Let's look at what our Controller looks like now.

```ts
const booksService = require('../services/books-service');

module.exports = {
  readAllBooks(req, res) {
    booksService.findAll((books) => {
      res.render('books/all', { books });
    });
  },
  readBook(req, res) {
    booksService.findById(req.params.id, (book) => {
      res.render('books/single', { book });
    });
  },
};
```

This is so much more simplified now. We have descriptive method names that tell us exactly what to expect from them. We also have a simplified syntax that we need to use in our controller by only having to create one simple anonymous function that handles the business of passing model data and rendering our view templates.

---

## Conclusion

Using this sort of abstraction over our Data Layer helps to keep us organized as well as descriptive. It keeps us obeying the Single Responsibility Principle and writing clean code! Any time you can add abstractions over complex pieces of functionality, you're almost always going to benefit. Look for these opportunities every chance you get!


Service Layers


## Structured Query Language

## Structured Query Language (SQL)

SQL is a language used exclusively inside of relational databases (MySQL, H2, Postgres, etc.) and helps us manage data stores. Even though we often abstract this interaction away with Object Relational Mappings (ORMs), it is important to know how to operate a relational database without that sort of abstraction. So let's dive in. You can play around with the commands we explore [here](http://sqlfiddle.com/).

---

## Basic Operations

Operations inside of a relational DB are similar to other operations we are used to. They can be summed up in the CRUD operations, so that's how we will talk about them.

---

## Creating

The first stop on our SQL operations journey is to create some sort of data. The first thing we need to create is a database, then we will create an entry in that database. Let's take a look at how that works and then discuss it:

### `CREATE`

```sql
CREATE DATABASE pets;
```

Simple right? That command alone will give us a new database to manipulate data in. Next we need to use it:

### `USE`

```sql
USE pets
```

Equally simple! With this statement, our DB environment know that any commands we execute following these commands should happen in the context of the `pets` database. So let's get some pets! The next thing we need is a table. You can think of a table as representing a collection of specific entities. For example, let's make a table to keep track of cats.

### `TABLE`

```sql
CREATE TABLE cats(
    id INT NOT NULL,
    name VARCHAR(32)
    favorite_food VARCHAR(100)
    PRIMARY KEY(id)
);
```

This is a little more complicated... First, we're using the `CREATE` keyword again. This time we're making a `TABLE` and naming it `cats`. Notice that we have parentheses following the table name. Inside of them are the columns (also called fields, attributes, properties, etc.) that this table will be responsible for tracking. We're also telling our DB environment what types of data to expect. For example, `name VARCHAR(32)` says that the column should be named `name` and be keeping track of collections of characters no longer than 32 characters long. (You can look at all of the types you can manage in a relational database [here](https://www.w3schools.com/sql/sql_datatypes.asp))

The last important piece there is `PRIMARY KEY(id)`. This tells your DB what the primary identifier for your entries is going to be. In our case this is going to be an `id` value that we will pass. It MUST be unique.

### `INSERT` & `VALUES`

Let's finally look at creating a new entity:

```sql
INSERT INTO cats (id, name, favorite_food) VALUES (1, 'Wallace', 'Salmon');
```

We're now creating an entry for a cat named Wallace whose id is 1 and favorite food is salmon. Notice how we have to identify the order of the data first and then we declare the values after using the `VALUES` keyword.

---

## Reading

Next we need the ability to read data from our database. This part is fairly straight forward. We retrieve existing data from the database to be used in whatever application we're working with.

### `SELECT`

```sql
SELECT * FROM cats;
```

This is a very general read command that will get every entity from a table. In our case this will return us all cats in our `cats` table. But what if we want to get more specific?

### `WHERE`

```sql
SELECT * FROM cats WHERE name = 'Wallace';
```

This query will return us only entities where the name of the cat is 'Wallace'. You can do this with any field in the entity. Usually you will use `id`s.

---

## Updating

We also need the ability to update existing entities in our tables.

### `UPDATE` & `SET`

```sql
UPDATE cats SET favorite_food = 'Tuna' WHERE id = 1;
```

This command is going to change the value of `favorite_food` on whichever cat has the `id` 1\. In this case, Wallace. We can also change as many fields as we like at once. For example:

```sql
UPDATE cats SET favorite_food = 'Mac and Cheese', name = "Maurice" WHERE id = 1;
```

---

## Deleting

Finally, we want to be able to remove entities from out tables

### `DELETE`

```sql
DELETE FROM cats WHERE id = 1;
```

This command will delete our furry friend with the `id` of 1 from our database.

---

## Conclusion

This wraps up our intro to SQL syntax. There is A LOT more that you can do with SQL commands. Get some more practice [here](https://www.w3schools.com/sql/default.asp) and [here](https://www.w3resource.com/sql-exercises/).



Git Bash is an application for the Windows operating system. It allows Windows users to use the Bash command language and more easily work with the Git version control system.

Bash and Git are separate technologies, but Git Bash is a single program that makes it easy to use both of them on Windows.

Git Bash is already installed on your We Can Code IT machine. We will learn about Git later. First, let's focus on Bash.

---

## Bash

Bash is a scripting language. Programmers type specific words or abbreviations to execute commands. They can use Bash one command at a time, or they can write a script file with many commands in it.

Computers running Linux and OS X already come with the ability to use Bash. The Git Bash program allows Windows users to use Bash as well.

---

## Why Bash?

Using Bash, we can perform many actions on our computers using just text commands.

Often, this speeds up the process because we don't need to open a new program, click around, type something in, click around some more, and then close the program, all for a single task. We just type a few words and watch the magic happen.

Bash is not an optional technology. Developers use Bash. As you read about the different commands that Bash offers, try them on your own machine and start getting comfortable with them.

It's okay to go back and forth through these instructions as you experiment with different commands. You don't need to memorize a command to move forward.

---

## Getting Started

Open Git Bash on your machine. You should see several things in the terminal:

```zsh
UserName@MachineName MINGW64 /
$
```

This is the Bash prompt, which is what the terminal displays when it is waiting for you to type a command. As you can see, the Bash prompt shows several pieces of information:

- Your computer account username
- The name of your machine
- MINGW64 (the environment of Git Bash - always the same)
- The current working directory

Your prompt will look slightly different because it will display your own details.

---

## The Filesystem

Your computer has files. Those files are organized into directories (on Windows, directories are often also called folders). These files and directories are called the filesystem.

The first step to using Bash is knowing how to navigate through your computer's filesystem.

You can use Bash to create, rename, move, and delete files and directories.

In Bash, there are two special directories:

- `/` refers to the root directory. In Windows, this is the same as the `C:/` drive.
- `~` refers to the home directory. This is the directory where your user account files are stored. In Windows this is `C:/Users/YourUsername`.

---

## The Current Working Directory

The Bash prompt shows the current working directory (CWD):

```zsh
UserName@MachineName MINGW64 /
$
```

See how the `/` at the end means Bash is currently working in the root directory?

You can navigate to any directory with the `cd` command (change directory). Just pass it the name of a directory, and it will change the current working directory:

```zsh
$ cd ~
```

This will take you to your home directory. You should now see `~` as your current working directory.

---

## Listing Directory Contents

Your current working directory is, of course, a directory. Directories can have files and other directories inside them. You can use the `ls` command (list) to list all items inside the directory:

```zsh
$ ls
```

This will simply list the items in the current working directory.

If you are used to Windows Command Prompt, you will notice this is very similar to the `dir` (directory) command in the Command Prompt. In fact, `dir` still works in Bash! The output isn't formatted as nicely as the `ls` command, though.

---

## Command: `ls`

Bash commands have a certain format to them. First comes the command itself, then any switches/flags for how the command should behave, then any specific arguments - the items the command will operate upon.

Take a look at the `ls` command below.

| Command       | Description                                                                                                                                                       |
| ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `ls`          | List directory contents.                                                                                                                                          |
| `ls -l`       | The `-l` switch gives a **long** listing of directory contents, including date, permissions, etc.                                                                 |
| `ls -a`       | The `-a` switch lists **all** directory contents, including those starting with a period(.) which Bash considers hidden.                                          |
| `ls -al`      | This is how to call the `ls` command with both the `-a` and `-l` switches, resulting in a **long** listing of **all** directory contents.                         |
| `ls otra`     | Without the `-` in front of it, `otra` is an argument and not a switch. This lists the contents of the `otra` directory instead of the current working directory. |
| `ls -al otra` | A combination of everything above, resulting in a **long** listing of **all** contents of the `otra` directory.                                                   |

---

## Navigating the Filesystem

You can easily move up and down to a parent or child directory in Bash using the `cd` command:

| Command                | Description                                                                                                  |
| ---------------------- | ------------------------------------------------------------------------------------------------------------ |
| `cd ..`                | moves up to the parent directory.                                                                            |
| `cd dirname`           | moves down into the subdirectory named `dirname`.                                                            |
| `cd ../..`             | moves up two levels, to the parent directory of the parent directory.                                        |
| `cd sub1/sub2`         | moves into the sub2 directory within the sub1 directory within the current working directory.                |
| `cd /Users/Admin/code` | moves to the code directory within the Admin directory within the Users directory within the root directory. |
| `cd ~/Downloads/PDFs`  | moves to the PDFs directory within the Downloads directory within the home directory.                        |

---

## Recap: Filesystem Symbols

Remember that a few symbols have a specific meaning in the filesystem:

| Symbol        | Meaning                                                                                                                                    |
| ------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
| `.` or `./`   | The current directory                                                                                                                      |
| `..` or `../` | The parent directory                                                                                                                       |
| `/`           | When alone or at the beginning of a file path, this is the root directory. <br>Otherwise it is used as a directory separator: `dir/subdir` |
| `~` or `~/`   | The home directory                                                                                                                         |

Note that this means `cd ./down` and `cd down` are the same. Either command would navigate into the directory named `down` within the current working directory.

---

## Bash Directory Trivia

Fun Fact: calling `cd` without any arguments is the same as calling `cd ~`. It will navigate to your home directory.

Fun Fact: the `pwd` command (Print Working Directory) will print out the full path to your current working directory. This is mostly useful when you are somewhere within the home directory (`~`) but you want to see the full path from the root directory (`/`).

If you are in `~/wcci/code` and run `pwd`, you will see `/c/Users/WeCanCodeIT/wcci/code`.

---

## Opening the File Explorer

If you want to open the Windows File Explorer in a directory, just call the `explorer` command:

| Command         | Description                                                                                                          |
| --------------- | -------------------------------------------------------------------------------------------------------------------- |
| `explorer`      | Opens File Explorer as though you had just clicked on the File Explorer icon. No particular directory will be shown. |
| `explorer .`    | Opens File Explorer to the current working directory.                                                                |
| `explorer code` | Opens File Explorer to the `code` subdirectory within the current working directory.                                 |

It is easy to switch between using File Explorer and Git Bash to work with the filesystem.

---

## Creating Files

You can create a file with the `touch` command: `touch file.txt` will create `file.txt` in the CWD. If the file already exists, nothing happens.

You can `echo` any text you type in the terminal. `echo "my string"` will display "my string" in your terminal.

You can also `echo` strings (pieces of text) into files. Use the redirect operator (`>`) for this:

`echo "my string" > file.txt`

This will write `my string` into `file.txt`. Note that this replaces the contents of `file.txt`. Since there is no `undo` command, be careful when writing to files with Bash.

---

## Viewing File Contents

To see the contents of a file, use the `cat` command. "Cat" comes from "concatenate," which means adding pieces of text together. You `cat` a file to add its text to the terminal output:

`cat file.txt`

This will display the text of the file:

```zsh
UserName@MachineName MINGW64 /
$ cat file.txt
my string

UserName@MachineName MINGW64 /
$
```

---

## Creating Directories

The `mkdir` command (make directory) can create a directory. Just tell it the name of the directory to create:

`mkdir html-examples`

You can use the `-p` flag (parents) to create nested directories. For example, Java projects have a `src/main/java` directory structure in them. `java` is within `main` within `src`, all within the project folder:

`mkdir -p src/main/java`

We have other tools to set up our Java projects, but if you need to create nested directories the `-p` flag will speed up the process.

---

## Deleting Files and Directories

The `rm` command (remove) can delete a file or directory: `rm filename.txt`

The `rmdir` command (remove directory) can delete an empty directory: `rmdir my-dir`

To delete a directory with all of its contents, you must use the `rm` command with two flags, `-r` (recursive) and `-f` (force). The recursive option removes directory contents before removing the directory. The force option will delete items without prompting you for confirmation:

`rm -rf large-directory`

Note that this will delete the files without using the Recycle Bin, so be sure to only use this command when there is no chance you will need the files again.

---

## Moving and Renaming Files and Directories

The `mv` command (move) is used to rename files and directories. It makes sense to "move" an item into another directory. It also makes sense to "move" the contents of a file to a different filename, which is why `mv` is also how we rename files.

`mv` needs two arguments: a source and a destination.

You can rename a file: `mv oldname.txt newname.txt`

You can move one or more files into a directory:

- `mv file.txt new_directory`
- `mv file1.png file2.jpg images_directory`

You can rename a directory: `mv old_dirname new_dirname`

If the destination directory already exists, `mv` will move the first directory into the second.

`mv first second` will result in `second/first`

---

## Editing Files

You can use Bash to open other programs on your computer, such as a text editor. Often, these programs accept an argument to tell them which file or directory they should open.

For example, `subl file.txt` will open `file.txt` in Sublime Text.

Similarly, `code my-project` will open the `my-project` directory in Visual Studio Code, and `code .` will open the current working directory in VS Code.

Both `subl` and `code` can be used to open a file or a directory.

Note that `subl` only works if Sublime Text is installed and on your system path, and `code` only works if Visual Studio Code is installed and on your system path.

---

## Recap

We have used these Bash commands in this tutorial:

| Command | Mnemonic         |
| ------- | ---------------- |
| cd      | Change Directory |
| ls      | List             |
| touch   | Create a file    |
| echo    | Echo Input       |
| cat     | Concatenate      |
| mkdir   | Make Directory   |
| rmdir   | Remove Directory |
| rm      | Remove           |
| mv      | Move             |

We have also opened these other programs from within Bash:

| Command  | Program               |
| -------- | --------------------- |
| explorer | Windows File Explorer |
| subl     | Sublime Text          |
| code     | Visual Studio Code    |

---

## Summary

This has been a brief overview of Bash. There are many more commands available to make your life easier: We will use `git` (Git) to manage our source code.

If you want to learn more about other Bash features, try this tutorial:

- [https://ryanstutorials.net/bash-scripting-tutorial/](https://ryanstutorials.net/bash-scripting-tutorial/)


Git Bash


## Git Commits

- Each time you make a change to your code, you should make a **commit**.
- You can think of the revision history of your code as a straight line with many dots, where each dot represents a time in history when you committed changes to your code.
- Commits give you a way to track the history of your code, or move backwards to a previous version of your code.

---

## Git Branches

- Branches allow us to collaborate and work with others on a team.
- `master` is the default branch for any Git repository when it is created.
- We have the ability to create other branches.

---

## Creating Branches

- Branches create a copy of your code and allow you to have a separate place to work on something.
- They are called branches because they look like branches on a tree. The difference is that they can merge back into the master branch.
- Branches exist on their own and provide a separate stream of development, and separate commits.

---

## You might want to create a branch...

- To test something that you're not sure you want to have as a part of your program.
- To work on a specific feature separate from the rest of the project before integrating it back in.

---

## Merging

Merging takes the changes and deviations you have been working on separate from the project and merges them back into another branch (usually `master`).

Advantages:

- One of the advantages of branching is that the rest of your team doesn't have to stop the work they're doing.
- We don't have to coordinate with anyone, we can make our separate branch, and do our separate commits. They can do what they're doing, and then when we're ready, we can merge our changes back in.

---

## Merge Conflicts

What happens when two people on a team are working with the same section of code? Conflicts can arise. How do you resolve these conflicts?

- Git is really smart when it comes to merging sets of code. It can track when changes were made. Git does its best to merge things together.
- Eventually, Git will run into some problems. It holds the separate parts of the code in separate places, and asks the developer to choose which changes she or he wants to include and which ones to not include. This is called resolving a _merge conflict_.
- Visual Studio includes mark-up and options in your program, and the developer then chooses which section(s) of code is correct.

---

## Best Practice

- Nobody should be doing all of their work in `master`.
- `master` should be reserved for working, clean, and tested code while all of the members of the team are doing their work in their separate branches.
- Instead of merging a branch directly into `master`, you should go to GitHub and create a Pull Request for your branch.
- Communicate frequently with your team members!
- Pull updates from `master` into your branch regularly.

---

## Where Can Branches Be Created?

- Branches can be created directly off the master branch. They can also be created from existing branches.

---

## .gitignore

- A `.gitignore` file goes a long way towards preventing merge conflicts!! _ALWAYS_ include a `.gitignore`!

Remember...

- Include your `.gitignore` file in your project before initializing your Git repository.

---

## Ways to Create a Branch

Whenever you create a branch, it's taking the most recent code and making a copy for that branch. The branch starts from wherever you currently are when you create your branch.

This command creates the branch, but keeps you in your current branch:

- `git branch branchName`, where 'branchName' is replaced by the name of your new branch.

This command creates the branch and then switches you over to the new branch you've created:

- `git checkout -b branchName`, where "branchName" is replaced by whatever you are naming your branch.

---

## Branch Naming

- If it's used for testing, call it `testBranch`.
- If it's used for building a feature, name the branch after that feature.
- Give some intention to your branch names.
- NO SPACES in your branch name.
  - When you have spaces in your branch name, some programs will not function correctly with the branch.

---

## Knowing what branch you're in

- Git Bash will include the name of your branch in blue and in parentheses.

---

## Pushing your branch to GitHub

- We've only ever previously done `git push origin master`
- With branches, we'll do `git push origin branchName` where "branchName" is replaced by whatever your branch's name is.

---

## To Switch Branches

- `git checkout` is the code we use to switch from one branch to another. Example: `git checkout master` from `testBranch`
- When you switch a branch, Visual Studio will try to revert back your code to wherever the code was when the branch was initiated.

---

## Command to use sparingly

- `git push origin --all` will push all of your branches to Github. Use sparingly because you don't want to be pushing non-functional branches and you don't want all of the members of your team to have to delete the bad branches.

---

## Merge

Merging is when we bring the changes back in to another branch (usually `master`)

- **Important:** You want to be checked out in the branch where you want to bring the changes in.
  - For example, `git checkout master` and `git merge testBranch` merges the `testBranch` into `master`
  - **WARNING** \- it is possible to do it backwards, so be mindful when doing merges.

Here are 2 examples of merge commands:

- `git merge -m "Merge Message" branchName` where "Merge Message" is replaced by the message you want to include and `branchName` is the branch you are merging in
- `git merge branchName` where `branchName` is the branch you are merging in

---

## Rules for Using Branches on a Team Project

### Feature Branches

We will be using feature branches to build out all of our content for future team projects and the final project. All feature branches will be verified and merged to master via Pull Requests (PR).

---

## Working Rules

Do not code on master on your local machine, but if you find yourself in this position we can fix it:

- `git stash` will take all of your changes on master and remember them
- `git checkout -b new-branch` then `git stash apply` will take these changes you had on master and place them on your new branch

Do not add/commit/push to the master branch

---

## The Process

Make a feature branch for every "feature" you plan on adding into your application Since we work in iterations, these should be todos from your trello cards for a particular sprint

Name your feature branch to match the feature you are building

- For example `git checkout -b account-and-bank-build` may be a branch that a dev creates to test and build these entities out

You can `add` / `commit` / `push` to this branch as much as you would like

---

## Pull Request

When ready, submit a Pull Request on GitHub

A teammate will verify the pull request (PR) and merge the changes into master on GitHub

Entire team can do a `git pull` to pull these changes into `master`

---

## Navigating branches

Remember, `git checkout master` allows you to leave a feature branch and go back to master

bash will warn you to add and commit your changes before it will let you leave a branch!

`git checkout branch\name` allows you to move from master or one branch to another...again, bash will make sure all changes are stored before letting you out of a branch

---

## Tips

Keep it very very simple. No more and no less than what has been described. There is no need to do any rebasing or to get crazy with the endless commands that googling bash issues could lead you to

**COMMUNICATE! COMMUNICATE! COMMUNICATE!**

- Let team members know if you put in a PR (Pull Request)
- Let team members know when you merged a PR and it is good to pull to master

Work on separate parts of the app...definitely ensure you are in different files to avoid major merge conflicts

Be sure to avoid any manual uploads to Git Hub, these most likely will unintentionally go to master

---

## Git Branching and Merging Practice Exercise

For this exercise you will need at least two people, Person A and Person B. Changes should not be made in master directly, but rather, each person should make changes in a branch and merge them into master.

1. Have Person A create a new project, create a Git repository, and add a .gitignore file. Next, they should perform an initial commit and push the code to a new GitHub repository.
2. Person A should go into the Git repository's "Settings" and add Person B as a collaborator under "Collaborators & teams".
3. Person B should accept the invite via email (or via the sharable link from Person A).
4. Person B should copy the link under the green "Clone or download" button on the repository's main page. Person B should now run `git clone [url copied from the repository]`
5. Be sure to run the `git clone` command wherever you would like the folder to be created on your computer. For example, if you run the `git clone` command in the `~/source/repos/Projects` directory, the project folder would be created at `~/source/repos/Projects/[ProjectName]`
6. Ensure Person B navigates into the project directory by running the `cd` command. For example, if you ran your `git clone` command in the `~/source/repos/Projects` and your project was called `GitBranchTest`, you would then need to run `cd GitBranchTest` to navigate to the project directory.
7. You can verify you are in the project directory if you see the branch name at the end of the directory name in the console like the following: `~/source/repos/Projects/GitBranchTest (master)`
8. Person B now needs to create a branch by running `git checkout -b [newBranchName]` Person B should make a few small changes, and commit those changes locally.
9. (Optional) If Person B wants to add their changes to GitHub, they can run `git push -u origin [newBranchName]`.

   > NOTE: By using the `-u` flag the first time you push a branch to GitHub, you create an upstream (tracking) reference that automatically links your local branch with your remote branch. Future pushes are "argument-less" and can therefore be accomplished with a simple `git push`.

10. Once Person B is done with their changes, they need to merge them back into `master`. First, they should checkout master with `git checkout master`. Then, to merge their changes into master, they should run `git merge -m "[merge message]" [newBranchName]`
11. Remember, when we perform a merge, we are _merging_ the changes into the branch we currently have checked out. You can kinda think about us _bringing_ those changes into our currently checked out branch.
12. With their changes merged in, Person B now needs to update origin. Before running a push, you should run a `git pull` to make sure you have the most recent code. Then you can update origin by running `git push`
13. Person A now needs the most recent changes in master. First, they need to have the master branch checked out by running `git checkout master`. To get the most recent changes, they can run `git pull`. If there are more than 2 people working on the project, everyone can run this step now to ensure all are up-to-date.

---

## Additional

You can repeat these steps, alternating who is creating a branch and adding changes until you feel comfortable with the process.

You can also _reuse_ any of the already created branches. You should first checkout the branch, make your changes, commit, and follow the same steps from there.

You can use the "Network" graph under the "Insights" tab on the GitHub repository to help verify the state and relationship of the different branches.


Git Branching and Merging


## Setting Up Local and Remote Repositories

1. Create a new project.
2. Go to your command line (Git-bash) and navigate to your project directory.
3. In your command line, execute the command `git status`. This should return an error. If it doesn't you have a git repository set up in a parent directory of your current one.
4. Now create a git repository in your project directory: `git init`.
5. With a new repository initialized, re-check the status of your project: `git status`. This will show you all the untracked files inside of your repository.
6. Before we start tracking files, it's important that we set up a `.gitignore` file that specifies the files that should _not_ be part of our source code.
7. In git bash, create a .gitignore file with the command `touch .gitignore` in the root of your project
8. Go to [gitignore.io](https://gitignore.io) and select whatever IDE (Eclipse, Visual Studio, etc) and language (Java, C#, Node, etc) and then click the create button.
9. Select all in the file that was generated and copy it.
10. Open the `.gitignore` file you made in your project folder with Notepad or a similar text editor and paste the generated `.gitignore` file contents to it. Save it and close it.
11. Now it's time to track your files so they will be included in your commit. Generally, it's better to explicitly add things, but this time let's add everything in the current folder (represented by `.` in the following command) for simplicity's sake. That command is `git add .`.
12. `git status` again. All of your files should have changed color from red to green.
13. Now, with your green files, you are ready for your commit: `git commit -m "Add a descriptive message here so you can reference it later"` .
14. With all of your changes committed, you're ready to push them up to your remote repository: `git push`
15. Uh oh. You got a fatal error. This is because we don't have a remote repository connected to our local repository yet. Let's do that next.
16. In your browser, navigate to [Github](https://www.github.com) , hit the plus sign in the top right corner and create a new repository.
17. Name this new repository the same thing that your project directory is named (i.e. your-projects-directory\name). Copy and paste to minimize the possibility of typos. You shouldn't change anything else in this window.
18. Push the button at the bottom **_Create repository_** to create a new repository.
19. Creating the repository will take you to a page that with a heading reading **Quick setup — if you’ve done this kind of thing before**. What we are interested in are the commands in the **…or push an existing repository from the command line** section. Copy these and paste them to your command line ( `<ctrl> + <shift> + <V>` ). Be sure to hit `<enter>` to submit the final line.
20. Your local repository and remote repository are now connected.
21. Try that `git push` once more and...well, we're almost there. Read the error message and follow it's instructions and your next push should work!
22. If you go back to your browser and hit the **refresh** button you will see your project files are now housed inside of your remote repo.

## Pushing Future Changes from Local to Remote

So you have changes now and you're ready to push them up. Let's get started.

1. First, navigate to your command line and execute `git status`. This should produce some untracked or modified files. That's good. Let's get them tracked.
2. Track your files with `git add .`
3. Execute a `git status` again to double check that everything is being tracked.
4. Now commit your changes: `git commit -m "Another descriptive message to let you/other devs know what happened since the last change"` .
5. Now it's time to push. You don't need the two lines you used from your first push this time. The command for all pushes after the first one is: `git push`. This is because your local and remote repos are connected and mapped to each other. This command just tells the local to use that path and push the new information to it.
6. In your browser, navigate to [Github](https://www.github.com) and then your project repo. You should see the current version of your project housed in your remote repo now.


Guide to initializing git repositories and maintaining them


_Distributed Version Control System (DVCS)_

Git is the distributed version control system we use to manage code:

- Distributed: means multiple computers have copies of the code, and different individuals work with their own copies. Git allows programmers to work on the same project separately, then merge their updates together.
- Version Control: means Git keeps track of the changes in each file over time, so you never lose old code and you can clearly see WHAT you changed, WHEN you changed it, and WHY you did so.

---

## GitHub

GitHub is a service that hosts Git repositories so there is a central location from which your team can coordinate their work.

GitHub allows us to create pull requests, which mean: "Pull my updated code into your master branch and make it official!"

---

## Repository, Commit

A `repository` is a directory (folder) that Git is tracking. Git tracks each repository by creating and updating a hidden `.git` directory inside it. That directory stores the changes that happen in the repository over time. Git is **NOT** automatic: it doesn't watch your files and automatically save their history. You have to manually choose which files to `commit` to the history.

---

## Branches, Master

Git allows us to "split" a repository's history by creating `branches`. A Git repository starts out with a single branch called `master`. This is where all official updates should go. When we want to add a new feature, we should create another branch to work with so we don't mess up master. This also allows different programmers to add different features at the same time without disturbing the current working code in master.

---

## Remote, Origin, Clone, Pull, Push

When we use services like GitHub, we are working with a `remote` repository. The remote repository on GitHub allows our entire team to stay on the same page. We call this centralized repository `origin`. We can `clone` a repository from GitHub (copy it to our own machine) and `pull` changes from an existing repository (download updates made by our team members). We can also `push` our own updates to GitHub.

---

## Merge

GitHub allows us to create pull requests, which mean: "Pull my updated code into your master branch and make it official!" The `pull` command pulls updates from GitHub to our machine, but a pull request is a way of asking the repository owner to `merge` our updates into their code. Specifically, we will ask them to merge our feature branch into the master branch.

---

## Git Commands

`git` is the singular command for working with Git. All Git commands start with `git`. If you want to see a list of the different things Git can do, run `git` by itself with no arguments.

The following slides will show various Git commands.

---

**Anything in `<Angular Brackets>` is a placeholder - you can enter whatever you want there. Don't type the brackets!**

---

## Git Commands: Basics

| Command                            | Effect                                                                                                                                                                                    |
| ---------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `git init`                         | Initializes a Git repository, creating the hidden `.git` directory inside it.                                                                                                             |
| `git add <filename>`               | Adds a file named `<filename>` to the currently staged commit. This doesn't actually commit the file to history. It just adds it to the list of files that will be committed.             |
| `git add .`                        | Adds all changed files to the currently staged commit.                                                                                                                                    |
| `git commit`                       | Commits staged files (their changes) to the repository history. If you call `git commit` without specifying a message, Git will open a text editor so you can add a message.              |
| `git commit -m "<Commit Message>"` | Commits staged files to the repository history. You can put anything you want between the quotation marks - this is how you will know what you changed in your code, so make it relevant! |
| `git status`                       | Shows the current status of your git repository, listing any changed/new/deleted files                                                                                                    |

---

## Git Commands: Remote Repositories

| Command                                        | Effect                                                                                                                                            |
| ---------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- |
| `git clone <repository-url>`                   | Clones a remote Git repository into the current folder. It will create a new folder for the repository based on the name of the remote repository |
| `git clone <repository-url> <new-folder\name>` | Clones a remote Git repository into the current folder. It will create a new folder for the repository based on the name you provided.            |
| `git push`                                     | Pushes your updated code to GitHub. Only code that you have committed will be pushed.                                                             |
| `git pull`                                     | Pulls other people's updates to the repository down from GitHub.                                                                                  |

---

## Git Commands: Branches

| Command                               | Effect                                                                                                                                                                        |
| ------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `git checkout -b <new-branch\name>`   | Creates a branch with the given name and checks it out. Your commits will now be saved to that branch instead of master. You should create a new branch to add a new feature. |
| `git push -u origin <branch\name>`    | "Publish" a branch from your computer to origin (GitHub). This is how you push a branch for the first time. After that `git push` works just fine.                            |
| `git checkout <existing-branch\name>` | Checks out an existing branch. You can `git checkout master` to go back to the master branch. Your commits will now be saved to that branch.                                  |
| `git branch -d <branch\name>`         | Deletes the named branch. Do this once you are done working on a new feature and the branch is merged. You can't delete a branch that is currently checked out.               |



Columbus 2019 In-Person Fall

## Modules

- [Module One: Object Oriented Programming](/cohorts/javascript/module-one)
- [Module Two: Professional Portfolio w/ HTML, CSS](/cohorts/javascript/module-two)
- [Module Three: MVC & Server Side Rendered Applications](/cohorts/javascript/module-three)
- [Module Four: DOM Manipulation with Front End JS](/cohorts/javascript/module-four)
- [Module Five: API Development](/cohorts/javascript/module-five)

---

## Mastery Projects

- [High Street Hospital](/exercises/mastery/hospital\node)
- [Blogging Platform](/exercises/mastery/blog-ssr\node)
- [Choose Your Own API](/exercises/mastery/choose-your-own-api\node)

---

## Career Services

[Student Success](/workshops/StudentSuccess-Summer2019)

---

Welcome to the 2019 Columbus in-person fall session of WCCI's full-stack 14 week JavaScript coding boot camp!

## Important Dates

| Week  | Date        | Activity                                  |
| ----- | ----------- | ----------------------------------------- |
| 1-3   | Tues 9/3    | Module 1 Object Oriented Programming      |
| 3     | Fri 9/20    | Module 1 Project Presentations            |
| 4     | Mon 9/23    | Module 1 Mastery Project Due @ 9:30 am    |
| 4     | Mon 9/23    | Module 2 Personal Portfolio w/ HTML CSS   |
| 5     | Mon 9/30    | Module 2 Personal Portfolio Due @ 9:30 am |
| 5-7   | Mon 9/30    | Module 3 MVC & Entity Framework           |
| 7     | Fri 10/18   | Module 3 Project Presentations            |
| 8     | Mon 10/21   | Module 3 Mastery Project Due @ 9:30 am    |
| 8     | Mon 10/21   | Module 4 JavaScript                       |
| 9     | Mon 10/28   | Module 4 Javascript Project due @ 9:30 am |
| 9-11  | Mon 10/28   | Module 5 Web APIs                         |
| 11    | Thurs 11/14 | Module 5 Project Presentations            |
| 11    | Fri 11/15   | Final Project Pitches                     |
| 12    | Mon 11/18   | Module 5 Mastery Project Due @ 9:30 am    |
| 12-14 | Mon 11/18   | Final Projects                            |
| 13    | Wed 11/27   | NO CLASS- Thanksgiving Break              |
| 13    | Fri 11/29   | NO CLASS- Thanksgiving Break              |
|       | Wed 12/11   | Demo Day/Graduation                       |

---

## General Information

- [Program Overview](/workshops/cbus-orientation)
- [School Catalog](https://docs.google.com/document/d/1j3aetDV3lueYFTvX7dA_5tVD6zjKTna2HOqggl6pc3g/edit?usp=sharing)

---

## Expectations

TODO

---

## Setup Notes

Go ahead and finish setting up the following on your machine, if you don't already have them installed:

| Tool           | What we'll use it for                                          | Download Link                            |
| -------------- | -------------------------------------------------------------- | ---------------------------------------- |
| Git & Git Bash | Our version control system and its command line interface      | [Git](https://git-scm.com/downloads)     |
| Node           | The runtime engine that allows us to write JS on the backend   | [Node](https://nodejs.org)               |
| NPM            | The package manager we use to add dependencies to our projects | [NPM](https://npmjs.com)                 |
| VSCode         | Our text editor                                                | [VSCode](https://code.visualstudio.com/) |

We'll use the following tools to help us communicate:

| Tool  | What we'll use it for                            | Download link                  |
| ----- | ------------------------------------------------ | ------------------------------ |
| Slack | Communication with your teammates or instructors | [Slack](https://www.slack.com) |


JavaScript


## User Input From the Browser

## Introduction

Forms are a tool that we have available to us from HTML. They handle making more intricate requests from the browser to the server. This is how we manage getting data from our users and allowing them to dynamically interact with our applications. Let's take a look aat how they're implemented.

## Implementation

Here's what a simple form looks like:

```html
<form action="books/add" method="POST">
  <input type="text" name="title" />
  <button type="submit">Submit</button>
</form>
```

The first piece to note is the `<form>` element. This is what gives us the ability to actually send HTTP requests from HTML. The `<form>` element has two attributes that allow us to make specific requests to specific locations in our applications. With this information, we can make specific routes in our servers that handle these specific requests.

The first of these is the `action` attribute. This attribute points to an endpoint in our application. In our example we're mapping to `/books/add`. The second of these attributes is `method`. This attribute specifies the type of HTTP request we're making. In our case, this is a `POST` request.

## HTTP Requests

We're only going to concern ourselves with two HTTP requests now since that's all our MVC applications can process anyway.

1.  GET - A GET request is what we use to retrieve information from our application from our server environment. We cannot make any changes to information in a GET request.
2.  POST - A POST request is the type we use to actually pass information from our browser environment to our server. We can use this information to do all sorts of things, including making new objects in our application...

## Form Elements

Elements must be nested inside of the `<form>` element to send information back to our server.

```html
<form action="books/add" method="POST">
  <input type="text" name="title" />
  <button type="submit">Submit</button>
</form>
```

The first `<form>` element we have is an `<input>`. This one in particular has the `type="text"` which means our user is able to add text to it. There are **[MANY](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input)** different types of inputs, all of them useful for getting unique information from your users. The next attribute to note is `name="title"`. This is how we consume this information in our server environment. It works as a key value relationship. if we reference `title` in our router (or controller), we'll get whatever text is in the input element when the form is submitted.

Speaking of submitting the form, that brings us to our next and final form element, the `<button>`. This `<button>` has only one attribute, `type="submit"`. This tells our form to submit it's data to the server at the specified location, using the specified method when the button is pressed.

## Conclusion

Forms are an indispensable tool when working with full-stack web applications. Without them, all we would bbe able to do is allow our users to consume data without interacting with it. There are plenty of other form elements to explore so check out the [docs](https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms) .


HTML Forms


The Structure of the Internet

## What is HTML?

HTML (Hyper Text Markup Language) is the first of three languages we use to create the front-end (also known as the client-side) of the web. Each of the three languages that we use (HTML, CSS, and JavaScript) have a specific job to do and it is important to keep these concerns separate. HTML's job is to structure and organize your content.

---

## Standard HTML Document

HTML is marked up with tags. There are common tags that you will see in each HTML document. A basic HTML document looks like this:

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Document</title>
  </head>
  <body></body>
</html>
```

---

Tags to note are:

- `<!DOCTYPE html>`
- `<html>`
- `<head>`
- `<body>`
- You'll notice these each have a closing tag (i.e. `</body>`). Now let's look at these tags in more detail...

---

## DOCTYPE

```html
<!DOCTYPE html> <----
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Document</title>
  </head>
  <body></body>
</html>
```

The DOCTYPE tag tells your browser that this document is HTML. With that declaration, your browser knows to interpret this as HTML and display it as such.

---

## HTML Tag

```html
<!DOCTYPE html>
<html lang="en">
  <----
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Document</title>
  </head>
  <body></body>
</html>
```

The `<html>` tag houses all of your other tags. All of your content needs to be inside of them.

---

## Head Tag

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <----
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Document</title>
  </head>
  <body></body>
</html>
```

The `<head>` tag houses meta data for each of your pages. This content gives information to your browser about the page and content on the page. This is also where CSS and JS files can be attached to your page.

---

## Body Tag

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Document</title>
  </head>
  <body></body>
  <----
</html>
```

The `<body>` tag houses all of the content that your user will see/interact with.

---

## The Box Model in HTML

HTML tags and the content they house are called elements.

```html
<p>This is an element</p>
```

These elements can be thought of as boxes. We will often house elements inside of each other. This can be for organization or just as a method of containing elements.

---

## More boxes

Each HTML element in the body has a structure that looks like this:

![Box Model](/html-resources/boxmodel-image.png)

[box model](https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Box_model)

- At the center is the content inside of your element. (i.e. `<p>This is the content</p>`).
- Just outside of that we have the padding. Padding adds space between your content and the inside of your element.
- The next layer is the border. The border outlines your element. Borders don't have a value by default.
- The final layer is the margin. The margin is similar to padding but this creates space outside of your element.

---

## `display: inline` vs. `display: block`

There are two basic display values, inline and block. All HTML elements have one of these values by default.

Block level elements can be thought of like building blocks. These elements will have the width of your viewport and will stack one on top of the other based on where they are in the code.

Inline elements will only take up as much space as their content requires. Think paragraphs, anchors, or spans.

---

## Common Tags

Common tags you'll use in HTML5:

| Tag                    | Use                                                          |
| ---------------------- | ------------------------------------------------------------ |
| `<h1>, <h2>, <h3> ...` | For headings                                                 |
| `<p>`                  | For blocks of text                                           |
| `<ul>, <ol>`           | Used to make lists                                           |
| `<section>`            | Used to organize related elements                            |
| `<article>`            | Similar to section. Usually specifically for actual articles |
| `<a>`                  | Used to make links                                           |
| `<img>`                | Used to include images in your code                          |
| `<title>`              | Used to declare the title of your page                       |

---

## Deprecated Tags

Tags you may encounter but shouldn't use anymore due to separation of concerns:

| Tag        | Use                                            |
| ---------- | ---------------------------------------------- |
| `<b>`      | Used to make things bold                       |
| `<i>`      | Used to make things italic                     |
| `<center>` | Used to center elements                        |
| `<font>`   | Used to change the font of a group of elements |

---

## Element Attributes

There are attributes that you can include on your elements that will affect the way they behave. Some attributes are required to make an element function. These include:

- href (hypertext reference) - Used to give anchor tags a location to link to
- type - Used usually on input elements to describe what type of input they should accept
- src (source) - Used in script tags and img tags. These house the location of the resource

---

## Custom Attributes

In HTML5, we have the ability to create custom attributes. These can be very useful for identifying items and selecting them.

Custom attributes need to be prefixed with 'data' in order to be recognized properly.

i.e. To add a key attribute to an element:

```html
<ul>
  <li data-key="item1">Item 1</li>
  <li data-key="item2">Item 2</li>
  <li data-key="item3">Item 3</li>
</ul>
```

This is very common in new JavaScript frameworks.

---

## IDs

IDs in HTML are used as unique identifiers for your elements. You can apply them to specific elements but, no two elements should have the same identifier. You can think of them as similar to the key value in a map.

```html
<h1 id="page-title">My Title</h1>
```

This is helpful when selecting specific elements in CSS and JS. You can also use them for their specific location in a page. For example, if you give an anchor tag an existing ID as a value, when you click the link, it will take you to the location of the element with that ID on the page.

```html
<a href="#page-title"> Go back to where 'My Title' is located on the page. </a>
```

This can be useful for saving scrolling on mobile devices.

---

---
title: Semantic Markup
---\n
---

## _semantics_

> \[si-man-tiks\]
>
> noun, (used with a singular verb)
>
> 1. Linguistics.
>
>    1. the study of meaning.
>    2. the study of linguistic development by classifying and examining changes in meaning and form.
>
> 2. Also called significs. the branch of semiotics dealing with the relations between signs and what they denote.
> 3. **the meaning, or an interpretation of the meaning, of a word, sign, sentence, etc.**

---

## Semantic HTML

What this means for our HTML is that we should be describing our content with the tags we wrap it in.

```html
<h2>Headings in 'h' elements</h2>
<p>While paragraphs should be wrapped in paragraph tags.</p>
<ul>
  <li>And lists</li>
  <li>should be represented</li>
  <li>with either 'ol' or 'ul'</li>
  <li>and 'li' elements</li>
</ul>
```

---

## Containers

The most difficult decisions when it comes to semantically marking up HTML are containing elements. This flow chart illustrates a good path to follow in making your decision.

![Semantic HTML flowchart](/html-resources/html-flowchart.png)

Look [here](https://html.com/semantic-markup/) for a more in depth look at semantics.

---

## `div`s

`div` tags are a useful tool in HTML. A `<div></div>` tag is a generic block level element. They are used mostly for organizational purposes in HTML code. If you have a block of information that exists as a group, you may choose to group it in a `div` to keep it organized and identify it as one unit:

```html
<div id="my-info">
  <h2>My Name</h2>
  <h3>My Title</h3>
  <p>10/13/2017</p>
</div>
```

---

## `span`s

Similar to `div`s, `span`s are a generic element in HTML as well. The difference being that they are generic inline level elements. These can be used for highlighting individual text in a paragraph or list item:

```html
<p>
  ""You miss <span>100 percent</span> of the shots you never take." — Wayne
  Gretzky" - Michael Scott
</p>
```

`span` tags are used mostly to add emphasis or apply specific CSS styles.

---

## Now you do it

Navigate to [the exercise](https://github.com/WeCanCodeIT/semantic-markup-cs) on Github and follow the instructions in the repository to complete the project.

---

### Resources

[HTML & CSS Is Hard](https://internetingishard.com/html-and-css/)


HTML


Composition > Construction

## Introduction

There's a saying in OOP philosophy that goes, "we value composition over construction." What this means is that we would like to leave as many implementation details out of the created object itself and include them as they make sense. Here's an example, Let's say I have an `Animal` object and from that I've made the objects `Cat` and `Dog`. Cats and dogs share most behaviors in the sense that they can both extend `Animal` without much hassle. But then I add a `Fish` object. uh oh... Now I have to have intermediary objects for `Mammal`s and `Fish`. Then I add a `Gecko` and a `Frog`. UGH... This could go on forever and my inheritance tree is CRAZY!

---

## What Is Construction

So let's get a handle on what construction is first and just what it's job is. When we construct something as a base object, we should be defining what it is and not much else. So we should be assigning properties and methods that are unique to that object. In the case of `Dog`s, maybe we would define the sound that it makes as 'bark' and that it can wag it's tail. These are properties and actions unique to `Dog`s, so these can be included in the `Dog` object when we create it. But maybe a dog can also be walked. This behavior isn't unique to just `Dog`s so we wouldn't want to add it to the `Dog` object. We should pull that behavior into its own entity and _apply_ it to the `Dog` and any other objects that might share that behavior. Let's see what that looks like.

---

## Example

```ts
const canBeWalked = {
  walk() {
    this._happiness += 5;
  },
};

class Dog {
  constructor(name) {
    this._name = name;
    this._happiness = 50;
    Object.assign(this, canBeWalked);
  }

  // accessors and mutators, etc.
}
```

---

## Mixins

In the previous example, we are including _behavior_ in an object that is reusable. All our mixin relies on is the fact that whatever is implementing it has a `_happiness` property. So we are _composing_ this object out of reusable behavior that is independent of it instead of _constructing_ a complex single object. This way our object can remain simple and _implement_ more complex behavior as needed.

---

## Abstracts

Another tool we have at our disposal for this sort of thing is the idea of abstract objects. An abstract object is an object that defines some behavior and can be extended, but cannot, itself, be instantiated. So in our previous example, we have a `Cat` that extends the `Animal` object. We want to be able to make a `Cat` and use all of the properties and methods from `Animal`. But we would never want to allow the construction of a generic `Animal` right? The `Animal` is a concept and not an instance. For this we can createan abstract class. Let's take a look:

---

## Example

```ts
class Animal {
  constructor(name) {
    this._name = name;
    if (this.constructor === Animal) {
      throw new Error(
        'This class is abstract and cannot be instantiated. Please extend'
      );
    }
  }

  get name() {
    return this._name;
  }
}

class Cat extends Animal {
  // ...
}
```

---

## Abstract Classes

So in the previous example, If we try to write the following:

```ts
const noCanDo = new Animal('I may not exist!');
```

That doesn't work (if you couldn't already tell). Because we're checking the constructor to see if we are making a new `Animal`. If we are, we get an error thrown. This is a great way to create common behavior but avoid the creation of this general class.

---

## Abstract Methods

We can do the same with methods. This is going to ensure that this method is implemented by the object extending, but is implemented as is necessary for that object. For example:

```ts
class Animal {
  // ...
  makeSound() {
    throw new Error('Abstract method must be implemented by child object');
  }
}

class Cat extends Animal {
  // ...
  makeSound() {
    return 'Meow!';
  }
}
```

---

## Conclusion

Using mixins and abstracts allows us to write really complex code and make some pretty intricate objects without having to make super specific, usually unextendable objects. This is a great part of the OOP philosophy to get familiar with.


JS Abstracts and Mixins


Dynamically accessing data

## Asynchronous Javascript and XML

AJAX is a really useful tool that allows you to query a data source and dynamically update it on your page without having to reload. This is imperative for optimal interaction with your user (remember what can happen to our JS when the page reloads?). We can get text, HTML, XML, or JSON data using AJAX. jQuery has good support for AJAX and because of that, people tend to make AJAX requests with it or a similar library. But remember that jQuery is just JS code that somebody else has already written so lets see how to write this on our own first and then compare to jQuery. One last thing. Before using AJAX, we must be running a server so we need an eclipse project running. You can follow along [here](https://github.com/WeCanCodeIT/ajax-demo)

---

## AJAX

Without AJAX, you transmit information to the user by using path variables and request parameters, querying your server from the backend, and reloading the page (or loading a new one) that will contain the data requested. These are synchronous requests (they happen one after the other in the order they're written). Asynchronous means that you can update data on your page while your user continues to use your application. This is because the requests are sent in the order they're written, but the data will be updated in the order that the responses from the server come back. These requests happen in the background and don't require a page reload to populate new elements or data. So as your information updates, your user will dynamically receive new content. These events can be triggered by any event JS has access to. So clicks, mouse movement, key presses, etc. All of these things can trigger an AJAX request and update your page when new content becomes available.

AJAX lets your applications be driven by the data your user is interacting with as opposed to driven by when the user hits a specific page in your application.

---

## AJAX in Action

Some examples of AJAX you are probably familiar with are:

### Suggested searches in search engines

Your search engine autocompletes and gives suggestions of what you might be searching for as you type. This is triggered by key events. Every time you type a new character, new suggestions populate because the application is making a request for new data.

### Chat Applications

Think Facebook messenger. These applications aren't requiring page reloads every time you send or receive a new message. This is due to AJAX.

### Twitter Feeds

Twitter feeds will update dynamically as new tweets come into a page. Again, AJAX calls to see if the database has updated and populating new content.

---

## Local Example

Let's step through a basic AJAX request:

```ts
// Creates a new AJAX request
var xhttp = new XMLHttpRequest();
// Sets behavior for when the AJAX request is complete
xhttp.onreadystatechange = function () {
  // Checks the ready state and http status code
  if (this.readyState == 4 && this.status == 200) {
    // Typical action to be performed when the document is ready:
    document.getElementById('asideContent').innerHTML = xhttp.responseText;
  }
};
/*
 ** Opens the request and sets the type of request,
 ** location of the data,
 ** and whether the request is asynchronous
 */

xhttp.open('GET', '../sidebar.html', true);

// Sends the request to the server
xhttp.send();
```

---

## Remote Example

The power of AJAX really lies in its ability to interact with APIs. Let's see an example of that:

```ts
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
  if (this.readyState == 4 && this.status == 200) {
    // Get JSON from the returned string
    const res = JSON.parse(xhr.responseText);
    // Typical action to be performed when the document is ready:
    document.getElementById('asideContent').innerHTML = `<h2>${res}</h2>`;
  }
};
/*
 ** Notice in this example we are hitting and actual url
 ** and returning whatever we get from the API we're accessing
 */
xhr.open('GET', 'https://swapi.co/api/people/1/', true);
xhr.send();
```

The response from APIs will almost always be a string. Most times the string represents JSON and it must be parsed.

---

## Conclusion

AJAX becomes a lot more powerful when you can pull data from other APIs such as Twitter, Facebook, Google Maps, Flickr, and countless others. Remember that AJAX always needs a server running to function. if there is no server, you can't make HTTP requests.


JS Ajax


Mmmmm... pie.

## A PIE

![pie](/a-pie-resources/apple-pie.jpg)

---

## What does it stand for?

- **Abstraction**
- **Polymorphism**
- **Inheritance**
- **Encapsulation**

---

## Abstraction

We create abstractions to simplify our program domain. They allow us to focus on the problem we are solving rather than getting lost in minute details. _You don't need to know how every subsystem in your car works in order to drive, do you?_

**Think about writing code as the process of creating a language to describe a problem we're solving. Abstractions are the building blocks of this language.**

---

## In our code

We are creating abstractions in the small whenever we:

- name a variable
- create (and name) a method
- create (and name) a class
- simplify an attribute by representing it as a number (_hunger_) or a label ("purple")

This is why naming is so important: we need to accurately convey the abstraction we're describing to those that follow (as well as our later selves).

We apply the other OO principles (PIE) to create meaningful and useful abstractions of more complex concepts.

---

## Polymorphism

> the quality or state of existing in or assuming different forms

Polymorphism allows us to represent intent, but allow the implementation to vary as needed based on context.

---

## Method overloading

A method with the same name that accepts different argument types.

Examples:

- `console`'s `log` methods.
- Jest's numerous `matchers` methods

Both of these methods accept `string`s, `number`s, `boolean`s, etc.

## Method overriding

A method that redefines a method from a parent `Object` is said to _override_ that method. A great example of this is the `toString` method from the root `Object` that we have discussed. (Remember, `Object` is the parent `Object` of all `Object`s.)

---

## Parent `Object`s

We also implement polymorphism by extending a parent `Object` (a `String` isA `Object`). We talk about inheritance in the form of `isA` relationships. An `Ellipse` isA `Circle` isA `Shape` isA... etc. Which brings us to...

---

## Inheritance

Inheritance is the mechanism whereby a class _inherits_ behavior from a parent `Object`. We call this _extending_ the parent `Object`. Recall that all `Object`s, whether we tell them to or not, implicitly extend `Object`.

We can use inheritance in JavaScript to build basic abstractions that we then specify more concretely by extending their behavior to other `Object`s.

---

## In our code

Inheritance is what allows `String` concatenation to work without us doing anything extra (though perhaps it ain't pretty). Like when we do this:

```ts
let pet = new VirtualPet();
console.log('My pet is ' + pet);
```

What happens behind the scenes is that the `toString()` method of `Object` (`VirtualPet`'s parent class) is being called. `VirtualPet` has _inherited_ this method from its parent.

---

## Encapsulation

Encapsulation at its simplest is hiding away information that isn't necessary to share. The more knowledge we have about an object, the more complex our problem solving becomes.

_Knowledge is power. Power corrupts._

```ts
class Circle {
  constructor(radius) {
    this.radius = radius;
  }

  getRadius() {
    return this.radius;
  }
}
```

The `radius` instance variable above is exposed via an _accessor_ method (`getRadius`). Not only does this avoid `radius` being manipulated externally and possibly resulting in an invalid state, but also gives us the flexibility to implement `getRadius` in a different way if necessary. The code that asks our `Circle` object for the radius doesn't need to know _how_ the radius is being determined.

---

## A note on privacy

JavaScript doesn't have visibility modifiers like you might see in Java or C# (i.e. `private`, `protected`, or `public`). We can implement this behavior in a round about way. Let's see that:

```ts
class Circle {
  constructor(radius) {
    this._radius = radius;
  }

  getRadius() {
    return this._radius;
  }

  setRadius(radius) {
    this._radius = radius;
  }
}
```

---

## Privacy continued

While this property isn't `private` in the same sense as Java or C#, it is conventionally understood that values prefaced with an underscore are meant to be treated as private. It is considered best practice not to manipulate values directly from outside or their `Object` scope. Super-sets or JS such as [TypeScript](https://www.typescriptlang.org/) or [Elm](https://elm-lang.org/) adhere to the same principles and actually offer visibility modifiers.

This is _encapsulation_. A more complex example of encapsulation would be an object responsible for calculating sales tax for a transaction. If the formula changes, yet it is encapsulated within the object, other objects requesting the tax calculation need not change. This would also likely involve polymorphism, since sales tax calculations vary by a number of factors, including location and product type.

---

## Gratuitous Picture of Pie

![](/a-pie-resources/apple-pie.jpg)


OOP Core Concepts


Getting Data to the Browser

## Introduction

We've seen the MVC pattern that allows us to serve static assets from dynamic content. The next paradigm that we will explore is the concept of having light API back-ends whose sole purpose it is to send and receive data with "heavy" front-ends that handle all of the application logic with JavaScript. This frees us up from the "tight-coupling" that we get with MVC applications which in turn gives us the ability to enhance our applications with relatively lower overhead.

---

## "Heavy" JS front-ends vs MVC

Probably the first benefit of a heavy front-end vs and MVC based application is how much faster a heavy front-end ecosystem is. In this sort of an environment only the pieces of the application that need to change actually get changed. This saves the application from going all the way back to the server to refresh the entire application and return you a whole new page every time the user has some dynamic interaction with the app.

The other benefit is the ability to decouple the front-end from the back-end and essentially make two separate but interactive projects. This way these layers of the application don't need to know anything about each other and allow use to write less code. It also means that our front-end application is free to interact with multiple different APIs at any given time thus reducing the work that our single back-end is responsible for. So, if we are building an app to track the books our users are reading/have read, instead of having a database that has to handle our users and all of their information, authors and all of their information, books and all of their information, etc. We can consume information from a few smaller more dedicated services. One db for our users, another for authors, another for books, etc.

---

## Heavy Front-ends are Fast

Contrary to their name, which only means that all of the application functionality is housed on the client, JavaScript front-ends are super fast. They do come with the trade off of sending a decent sized chunk of JS to your user right up front. But once it's there, we don't have to send requests to the server for full page reloads. We're only sending data back and forth and using JavaScript on the front-end to re-render, which, by comparison to reloading the whole page every time we make a small change is considerably faster.

---

## Code Cleanliness

This approach also ends up being a more clean approach generally because of the code separation. You get to have separate testing suites that are never run together because they are totally independent. Also being able to build small APIs that don't have to interact with each other keeps data design much more simple.

---

## Conclusion

This approach has a lot of upsides with the way the web currently runs. But it is extremely important to note that it is not inherently better than an MVC application. It is important to keep in mind to use the right tool for the job. Be sure to evaluate just which approach is going to be best for the tool you want to build.


APIs with Heavy Front-ends


JS Collections

## What Are They?

Arrays allow us to store multiple elements in a single variable. This could be items on a menu, lottery numbers, or the birds in your menagerie.

You can think of an array as a sequence of cups. Each of these "cups" in an array holds a value, which we call an _element_. We reference a specific element using its zero-based _index_.

---

## Declaring an Array

When we declare an array in JavaScript, we are declaring a single variable that holds multiple elements.

To create an array destined to hold the values of our cups from the previous example, we would do this:

```ts
const cupValues = new Array(5);
```

This creates an array whose name is `cupValues`. It has five elements.

---

## Assigning Values

We use array indices (that's the plural of index) to assign values to elements. This is how we'd declare our array and assign element values:

```ts
const cupValues = new Array(5);
cupValues[0] = 42;
cupValues[1] = 86;
cupValues[2] = 23;
cupValues[3] = 8;
cupValues[4] = 91;
```

---

## Retrieving Values

To retrieve values, we use a syntax like we used to assign values:

```ts
console.log(cupValues[0]); // prints "42"
console.log(cupValues[1]); // prints "86"
console.log(cupValues[2]); // prints "23"
console.log(cupValues[3]); // prints "8"
console.log(cupValues[4]); // prints "91"
```

---

## How Big Is It?

Often, it's important to know the size of an array. How many cups do I have?

To do this, we use the `length` property, like so (notice that dot operator):

```ts
let cupValues = new Array(5);
const numberOfCups = cupValues.length;
Console.log(numberOfCups); // prints "5"

cupValues = new Array(2);
Console.log(cupValues.length); // prints "2"
```

---

## Revenge of the Square Brackets

We can also initialize an array with values. We do this using square brackets to surround a comma-delimited list of values, like so:

```ts
const giantWords = ['fee', 'fie', 'foe', 'fum'];
```

Note that we also do not include the _size_ of the array. JavaScript figures this out based on the number of values we provide.

![WAT?](/images/wat.jpg)

This creates a String array with these values:

| index | value | reference       |
| ----- | ----- | --------------- |
| 0     | "fee" | `giantWords[0]` |
| 1     | "fie" | `giantWords[1]` |
| 2     | "foe" | `giantWords[2]` |
| 3     | "fum" | `giantWords[3]` |

---

## There's more than one way...

When we do this:

```ts
const giantWords = ['fee', 'fie', 'foe', 'fum'];
```

It is equivalent to doing this:

```ts
const giantWords = new Array[4]();
giantWords[0] = 'fee';
giantWords[1] = 'fie';
giantWords[2] = 'foe';
giantWords[3] = 'fum';
```

We can also do this:

```ts
const cupValues = [];
```

We can _initialize_ an array with this syntax, and use it to later assign it new values.

---

## Let's Do It Together

If we needed to create a class roster, would an array be appropriate? How would we go about it?

---

## Now You Do It!

- For each of the following, create an array, assign its values, then print out those values:
  - The names of three people you know.
  - The GPAs on a 4.0 scale of five students.
- Create an array of your top four vacation spots, then print the top (first) spot and the bottom (last spot).
- Create a `String` that holds your last name. Print out the number of letters in your name.

---

## And then and then and then...

There are some useful methods which _return_ arrays.

### Splitting Strings

`split` is one of them. It allows us to split a `string` into an array of `string`s. It accepts one argument, which is the delimiter it should use to split the `string`:

```ts
const source = 'this, that, the other';
const elements = source.split(', ');

console.log(elements[0]); // prints "this"
console.log(elements[1]); // prints "that"
console.log(elements[2]); // prints "the other
```

What is the value of `elements.length`?

### Looking at characters

We have talked about `string`s as sequences of characters. Using the same tool, we can treat them that way. using the `split` method, and not giving it any parameters, it returns an array of `char`s:

```ts
    string myName = "Sue";
    const letters = myName.split();

    console.log("The first letter of my name is " + letters[0]);
```

A related method is `indexof`, which returns the first index at which a given element can be found in the array:

```ts
const myName = 'Sue';
const letters = myName.split();
console.log(letters.indexOf('S')); //prints "0"
console.log(letters.indexOf('e')); //prints "2"
```

---

## A Little Wonky

Before teaching a bootcamp, I... _uhhh_... I mean a _friend_ of mine often had to look up the syntax for arrays because they're not really like other things in JavaScript.

Arrays are objects, but they don't conform to all the rules of other objects. They are special snowflakes.

Some differences to be aware of:

- We create them using the `new` operator(but not always).
- Their values can be initialized with a creative (confusing) use of square brackets.
- We use square brackets to both declare arrays and to access element values, something we won't see elsewhere.

---

## Work It

- Create an array holding the names of four of your peers sitting next to you. Print the first letter of each of their names.
  - Change your code (or create more code) that asks you to enter each of their names via the console.
- Create a console application that asks you to enter a word and then a letter. Print out either "Yep, it's got one of those" or "So, sorry", depending on whether the word contains that letter.
- Create a `string` representing a list of things that uses some delimiter (commas, dashes, etc). Split that `string` into an array of `string`s, then print one or more of these array elements.


Arrays and Objects

## Better handling of Async code in JS

## Introduction

The `async` and `await` keywords aren't so much a competitor to the things we use to deal with Asynchronous code in JS currently (Promises and callbacks). They are actual syntactic sugar over Promises. They allow use to have much cleaner syntax when dealing with Promises. They also make our code much more readable. Let's take a look:

---

## Example with Promises

Let's take a look at a common example that we might see inside of a controller environment:

```ts
class UserController {
  static getUsersAndPosts(req, res, next) {
    getUsers().then((users) => {
      getPosts().then((posts) => {
        res.render('users', { users: users, posts: posts });
      });
    });
  }
}
```

This code will retrieve all users from our database environment. Then pass those users to an anonymous function. Then retrieve all posts from the db and pass it to another anonymous function. Then finally, render the `users` template and pass the `users` object and the `posts` object.

This code works. But, it's pretty ugly... Let's just make it pretty!

---

## Example with Async/Await

Now, we're going to do the exact same thing, but use the `async` and `await` keywords this time:

```ts
class UserController {
  static async getUsersAndPosts(req, res, next) {
    const users = await getUsers();
    const posts = await getPosts();
    res.render('users', { users: users, posts: posts });
  }
}
```

So. Much. Cleaner.

---

## `async`

Let's talk about what each of these keywords do. `async` and `await` only work together. You can't use them by themselves as they won't do anything. `async` is applied when you declare a function. This tells your application that there will be asynchronous operations inside of that function. Let's see some more examples:

```ts
async function getUsers() {
  // ...
}

const getPosts = async () => {
  // ...
};

const songTitlesByAlbum = album.songs.map(async (song) => {
  return await getSongTitle(song);
});
```

The `async` keyword can be applied to **ANY** valid JS function/method

---

## `await`

`await` is always (and only) used inside of `async` functions/methods. We apply it to the actual asynchronous functionality and this makes your application treat that as a synchronous (or blocking) procedure. This means that we're going to pause any other operations and wait for the result from that procedure before moving on to any other code. That means instead of dealing with callbacks or `then()` methods, we can just assign that value to a variable and use it more explicitly.

```ts
async function getUsers() {
  const users = await User.find();
  return users;
}

const getPosts = async () => {
  const posts = await Post.find();
  return posts;
};
```

This syntax makes our code so much more readable.

---

## Conclusion

In conclusion, if you're going to be dealing with asynchronous requests (and you will be), there is no better, more readable way to deal with these requests than getting comfortable with the `async` and `await` keywords to more efficiently deal with your Promises.

Async/Await


The Language of JavaScript

## It's a Value-Based Proposition

Previously, we saw _literals_. In the statement:

```ts
console.log('Hello, World!');
```

`"Hello, World!"` is a `string` literal. It's a `string` because it's a sequence of characters surrounded by quotation marks. It's a literal because it always has that value.

---

## Let's Not Be Literal

In contrast, we have _variables_. In javascript, a variable's _type_ is undefined, _and_ its value can _vary_ (thus the name).

Instead of:

```ts
console.log('Hello, World!');
```

I could have written...

```ts
const message = 'Hello, World!';
console.log(message);
```

---

## Variables are variable

Variables are commonly declared by the `let` or `const` statement

```ts
let message;
```

To be of value, the variable needs to be _initialized_:

```ts
message = 'I am Sam';
```

When we initialize a variable, it's _type_ changes dynamically, based on the value it's given.

---

## But what is the value?

Variables store a value, but allow us to change the value that is stored if we use the `let` keyword.

```ts
let message = 'I am Sam';
console.log(message); // prints "I am Sam"

message = 'I am Spartacus';
console.log(message); // prints "I am Spartacus"
```

But this doesn't work:

```ts
const name = 'Sam';
name = 'Spartacus'; // Throws an error
```

---

## Reusing Variables

Notice that in the previous example, when we first used our `message` variable, we initialized it with the `let` statement:

```ts
let message = 'I am Sam';
console.log(message);
```

When we reassigned its value, we didn't specify a type:

```ts
message = 'I am Spartacus';
console.log(message);
```

That's because we had already **declared** the variable. We declare a variable only once.

---

## Defining Variables

When we do this:

```ts
let message = 'I am Sam';
```

We are really combining these two things:

```ts
let message;
message = 'I am Sam';
```

---

## Declaring vs Initializing a Variable

We declare a variable by using the `let` statement and giving a _name_. That's what we did here:

```ts
let message;
```

The variable's _type_ is currently undefined. Its _name_ is `message`.

---

## Initializing a variable

When we initialize a variable, we are joining the declaration and assignment into a single line code.

```ts
let message; // Declaring message
message = 'I am Sam'; // Assigning message
```

...can be simplified as...

```ts
let message = 'I am Sam'; // Initializing message
```

---

## Variable Naming Conventions

We will talk about naming conventions quite a bit. They're important, since they reduce the _cognitive load_ of people that need to look at your code. (This person might be you.)

Apart from constants (more on that later), we use `camelCase` to name variables. The first letter should be lowercase, and the first letter of each additional word in a variable's name should be uppercase:

camelCase:

```ts
let myVariable = "my variable's value"; // Like this!
```

lowercase:

```ts
let myvariable = "my variable's value"; // Not this.
```

PascalCase:

```ts
let MyVariable = "my variable's value"; // Not this, either.
```

---

## Basic Data Types

JavaScript is not a _pure_ object-oriented language. That is to say that it allows for _primitive_ types as well as _objects_. As JavaScript is a _dynamic_ and _weakly-typed_ language, we declare these _primitives_ by assigning the correct values to them.

---

## Booleans

A `boolean` variable holds either the value `true` or `false`.

```ts
const writingCodeIsFun = true;
const rootCanalsAreFun = false; // unless you're a dentist?
```

---

## Number Primitives

The number type represents both integer and floating point numbers.

Integers are whole numbers and floating point numbers are numbers with decimal fractions.

```ts
const answerInt = 42;
const doubleValue = 42.16440330489723961032;
```

---

## String primitives

With strings We denote their values with quotation marks:

```ts
let myDeclaration = 'I can code';
myDeclaration = 'But this works too';
myDeclaration = `So does this`;
```

---

## Symbols

Symbols are a primitive value that always give you a unique value. They can only be created with the `Symbol()` constructor. There is no way to make a symbol literal. Due to their unique nature, they're great for id's.

```ts
const myNewSymbol = new Symbol();
```

The constructor also takes an optional description:

```ts
const myDescribedSymbol = new Symbol('some identifier');
```

---

## `undefined` and `null`

These two are also technically primitives but should be avoided as much as possible.

`undefined` denotes that a value has not been defined. This is essentially the default value that JS gives things until you change that. You should (almost) always avoid actively assigning this as a value to anything.

`null` is similar to `undefined` with one important exception. `null` operates as a sort of quantified nothing. It means that there is nothing assigned to the value you're trying to access, but it's getting _assigned_ nothing as opposed to simply not getting assigned.

---

## Conclusion

These data types will be used in absolutely everything you code from here on out. So make sure that you are very familiar with all of them before moving forward.


Basic Types and Variables


Control the flow!

## Branching statements

In addition to the decision making and looping statements, we have _branching_ statements. These interrupt the normal top-to-bottom execution of our code. There are three: `break`, `continue`, and `return`.

---

## Neither Pass Go, Nor Collect `$`200

A `break` statement exits a loop (jumps to the code after its code block) immediately. What it says is **"Stop doing that! Now!"**

Here is an example of (bad) code that I saw in production. How could we write this using an equivalent `if` statement?

```ts
let shouldPrint = true;
while (shouldPrint) {
  console.log('I should print!');
  break;
}
```

We cried, then laughed a bit, and dubbed it the "while/break" statement. (No, that shouldn't be a thing.)

---

## Ummm... `break` it down?

`break` statements are not that common. In fact, they're often a symptom of poorly designed code. An example of where you might use them is if you have a program interacting with the user, and would like to abruptly exit, perhaps because of an error conditiion.

Try running and experimenting with this code:

```ts
const input = require('readline-sync'); // Don't worry about this syntax yet

while (true) {
  const favoriteColor = input.question('What is your favorite color?');

  if (favoriteColor === 'Blue. No yel-- Auuuuuuuugh!') {
    console.log("You're just making Monty Python references.");
    console.log('Get out!');
    break;
  }

  console.log(`Your favorite color is ${favoriteColor}`);
}
```

---

## Continuing with... `continue`

The second branching statement is `continue`. The `continue` statement is more common than the `break` statement.

Continue skips the current iteration, jumping to the end of the loop.

Let's say we wanted to count from one to ten, skipping multiples of three:

```ts
for (let count = 1; count <= 10; count++) {
  if (count % 3 === 0) {
    // it's a multiple of three
    continue;
  }
  console.log(`Count is ${count}`);
}
```

We _could_ have done this with an `if/else` statement, but using `continue` skips our `log` just fine. Which one should you use? This depends on the situation. A `continue` may make the code clearer.

How could we have changed our condition to make this code simpler and avoided using `continue`?

---

## Baby, Come Back!

The third branching statement, `return`, isn't specific to loops. When we write our own methods, we'll use this to exit a method and _return_ execution to the point where another method called it.

Try this:

```ts
const isEven = evenOrOdd(9);

function evenOrOdd(numberToCheck) {
  if (numberToCheck % 2 == 0) {
    return 'Even Steven!';
  }
  return "You're odd!";
}
```

Notice how using a return allows us to avoid using `else`--the method immediately _returns_ (responds) and exits. More on this when we get to methods.

---

## Nested Loops

It is not uncommon to place one loop inside another. Imagine the second, minute, and hour hands of a clock. Once the second hand completes its circuit of the clock face, the minute hand advances. When the minute hand completes its circuit, the hour hand advances.

Let's do the hour and minute hand in code. We'll increment the minute hand by five minutes each time so that we don't fill up our console so quickly. Also, we'll only do three hours, starting with 1:00 and ending with 2:55:

```ts
for (let hours = 1; hours < 3; hours++) {
  for (let minutes = 0; minutes < 60; minutes += 5) {
    console.log(`The time is ${hours}:${minutes}`);
  }
}
```

Now _that_ is wizardy!

---

## Making It Pretty

Notice how "1:00" comes out "1:0" in the previous example? This is because we're simply appending the value of `minutes` (`0` in this case) to the hours value. We then use an `if` statement to check whether or not we need to pad the minute value.

```ts
for (let hours = 1; hours < 3; hours++) {
  for (let minutes = 0; minutes < 60; minutes += 5) {
    if (minutes < 10) {
      console.log(`The time is ${hours}:0${minutes}`);
    } else {
      console.log(`The time is ${hours}:${minutes}`);
    }
  }
}
```

---

## Conclusion

Branching statements help you control the flow of your code. They can help you get out of functions/methods, handle the flow of loops, or work with conditional logic more efficiently. It will do you well to get familiar.


Branching


If not that, then… ?

![No worries](/conditionals-resources/no-worries.png)

_This diagram isn't quite right. If you don't think learning to code is difficult, then you miiiight not get it yet._

---

## Conditional Statements

Conditional statements are one of the ways that we control the flow of a program.

---

## We might say...

_If_ I am 16 or older, _then_ I can drive legally.

In JavaScript, we would say:

```ts
const age = 42;
if (age >= 16) {
  console.log(`You are ${age}, so you are legal to drive.`);
}
```

---

## Or...

_If_ I get eight or more hours of sleep, I am likely to feel more rested.

In JavaScript, we would say:

```ts
let hoursOfSleep = 42;
if (hoursOfSleep >= 8) {
  console.log('You are likely to feel more rested.');
}
```

We can follow one conditional with another.

```ts
if (hoursOfSleep == 42) {
  console.log("He used 42 again, didn't he?");
}
```

---

## Let's Break It Down

An `if` statement executes if its _condition_ evaluates to `true`:

```ts
let heightInInches = 73;

if (heightInInches >= 60) {
  console.log('You are tall enough to ride');
}
```

Sorry, you're too short. :(

```ts
heightInInches = 42;
if (heightInInches >= 60) {
  // This doesn't print...
  console.log('You are tall enough to ride');
}
```

---

## Syntax

An `if` statement starts with the keyword `if`:

```ts
let heightInInches = 73;

if (heightInInches >= 60) {
  console.log('You are tall enough to ride');
}
```

It is followed by parentheses that contain a _condition_:

```ts
let heightInInches = 73;

if (heightInInches >= 60) {
  console.log('You are tall enough to ride');
}
```

This _condition_ must evaluate to a `boolean` value.

This is followed by a code block that executes only if the _condition_ is `true`. Remember that code blocks open with a left curly bracket (`{`) and close with a right curly bracket (`}`):

```ts
let heightInInches = 73;

if (heightInInches >= 60) {
  // <== Open
  console.log('You are tall enough to ride');
} // <== Close
```

We _can_ skip the curly brackets if we only want to execute one line of code, but that's usually frowned upon since it's easy to mess up. This code is the same:

```ts
let heightInInches = 73;

if (heightInInches >= 60) console.log('You are tall enough to ride');
```

---

## Else what?

It's polite to offer an apology, eh? We can be polite.

An `if` statement allows us to do something else if its _condition_ does not evaluate to `true`:

```ts
let heightInInches = 42;

if (heightInInches >= 60) {
  console.log('You are tall enough to ride.');
} else {
  console.log("I'm sorry, too short.");
}
```

---

## And then?

We can create sequences of `if/else` statements:

```ts
let heightInInches = 42;

if (heightInInches >= 60) {
  console.log('You are tall enough to ride.');
} else if (heightInInches >= 30) {
  console.log('Try the teacups. They look fun.');
} else {
  console.log("I'm sorry, too short.");
}
```

Think of this as connecting multiple `if/else` statements.

---

## Swichin' it up!

Sometimes, we can use a `switch/case` statement to replace several `if/else` statements. Let's say we are categorizing our amusement park patrons into "adult", "youngster" (just short people, really), and everyone else.

We can use a `switch/case` statement to execute one or more statements based on a value:

```ts
let ageGroup = 'youngster';

switch (ageGroup) {
  case 'adult':
    console.log('You can ride the rollercoaster!');
  case 'youngster':
    console.log('The teacups are fun.');
    break;
  default:
    console.log('Oh, you must be a toddler. Toddle on!');
    break;
}
```

What is displayed if we change `ageGroup`'s value to "adult"? Why?

What is displayed if we change its value to anything other than "adult" or "youngster"? Why?


Conditionals


## Methods for instance creation (instantiation)

## Let's review methods

Methods are messages that we send from `Object`s to other `Objects`. Let's start our review with looking at a familiar method of the `String` class. When we want to compare a `String` with another, regardless of case, one of our approaches is to use the `toLowerCase` method.

Let's say that we have a `String` variable named `color`:

```ts
if (color.toLowerCase() === 'the colour out of space') {
  System.out.println('That is truly a strange color.');
}
```

Calling `color.toLowerCase()` is like saying, "Hey, `color`, can you give me a lowercase version of yourself?" Whether `color` holds the value `"Purple"`, `"purple"`, or `"PuRpLe"`, it will respond `"purple"`.

We refer to a method's response as it _returning_ a value.

---

## Information, Please

When a method needs additional information, we add _method parameters_ to its definition.

Remember the `split` method of `String`? We passed it a `String`, indicating what we wanted to use as a _delimiter_ to split it:

```ts
let str = 'this, that, the other';
let pieces = str.split(', ');
console.log(pieces[1]); // prints "that"
```

This is the declaration of the `split` method. We say that it accepts a method parameter of type `String`, named `separator`:

```ts
String.prototype.split(separator);
```

If we didn't pass it the `separator` parameter, how would it know where to split?

---

## John Hancock

The combination of the method name and parameter types is called its _method signature_. This is how JavaScript identifies which method we are calling. Also, the method signature allows JavaScript to determine whether a method is redefining another method (called _overriding_):

```ts
    String.prototype.split(String regex)
```

---

## Prototype

What is the `prototype` part in the middle? well JavaScript is a prototypal inheritance language. This means that when we inherit behavior from an `Object` we will inherit any methods that exist on the parent prototype.

---

## Talking Back

Not all methods `return` something, but if they do `return` a response they must use the `return` statement.

A `String` is an _abstraction_ representing a sequence of characters, so it contains an _instance variable_ containing those characters. Lets look at how its `replace` method works:

```ts
String.prototype.replace(substr, newSubstr);
```

which we can call like this:

```ts
let str = new String('My name is Brian.');
str.replace('Brian', 'Donny');
console.log(str); // prints: My name is Donny
```

---

## Talking Back (continued)

```ts
String.prototype.replace(substr, newSubstr);
```

In order to replace a value in a `String`, a `String` looks at `value` and parses it looking for the specified substring (substr) and replaces it with a new substring (newSubstr).

---

## Creating An Object

Object Oriented Programming is all about creating objects (instances of an `Object`) and communicating with those objects (calling methods). Objects contain _instance variables_ that contain the _state_ of an object, describing the object's attributes.

Let's say that we have a simple `Parrot` class that looks like this:

```ts
class Parrot {}
```

So, far when we have created an object and defined its state, we've done it something like this:

```ts
const myParrot = new Parrot();
myParrot.name = 'Dewd';
```

Here, we've created an _instance_ of the `Parrot` class named `myParrot`. `myParrot` has an _instance variable_ named `name` with the value `"Dewd"`.

---

## A Flock of Parrots

![](/constructors-resources/parrots_of_telegraph_hill.jpg)

San Francisco is just the right climate for parrots from Central/South America. Flocks of parrots that have escaped from owners or been let loose flock together on Telegraph Hill. Birds of a feather do truly flock together.

I recommend tracking down a flock sometime. They're wild (_err... feral_).

---

## Creating lots of objects

Let's say we need to create a lot of parrots. There's a flock. That wouldn't be too difficult, given that our parrots only have a name right now, but if we started adding other attributes, this would become more and more difficult. We're developers, not typists. Also, it would be easy to forget to assign one or more attributes. So we can make it easier and less error prone by creating a method to create `Parrot` instances.

---

## In Practice

Here's what we were doing before:

```ts
const myParrot = new Parrot();
myParrot.name = 'Dewd';
```

Here's how we could create a method to do the same thing:

```ts
function createParrot(parrotName) {
  const p = new Parrot();
  p.name = parrotName;
  return p;
}
```

And here's how we would call it:

```ts
const myParrot = createParrot('Dewd');
```

---

## But that still seems like a lot of work?

Luckily, there's a cleaner way. Remember that constructor we've been calling?

```ts
const p = new Parrot();
```

We call this a _constructor_ because it _constructs_ an instance of the class.

---

## But there's no constructor in my class!

This constructor is what is known as a _default constructor_. If we haven't explicitly defined a constructor for our class, the runtime environment creates a constructor for us that doesn't accept any arguments and does basic instance construction. That's why we don't see the constructor in our class.

The constructor that the browser nicely creates for us if we have not explicitly declared one looks like this:

```ts
    constructor() {
    }
```

Note that it has no `return` statement and we call it with the convenient name `constructor`.

---

## We have the technology

When we want to initialize attributes of an object, we create our own constructor that accepts parameters, just like methods that accept parameters.

Remember our `createParrot` method?

```ts
    function createParrot(String parrotName) {
      const p = new Parrot();
      p.name = parrotName;
      return p;
    }
```

We can (and should) move this work into the constructor for the class. Here is our `Parrot` class with an equivalent constructor:

```ts
class Parrot {
  constructor(parrotName) {
    this.name = parrotName; // saying this.name will create an instance variable for us
  }
}
```

---

## We can construct it

Once we've created our constructor, instead of this:

```ts
const myParrot = createParrot('Dewd');
```

we can do this:

```ts
const myParrot = new Parrot('Dewd');
```

This is cleaner, more expressive, and moves the _responsibility_ of construction to the `Parrot` class, where it belongs.

---

## Now write this method

![party parrot](/constructors-resources/party-parrot.gif)


Constructors


Don't call us, we'll call you

## Dependencies

A dependency is anything your code knows about. That could be another class, method, or interface. It could also be knowledge of how an object does something. We say that code with a lot of dependencies is _tightly coupled_, while code with minimal dependencies is _loosely coupled_.

Code that is polymorphic and exhibits good encapsulation (clean code) is loosely coupled.

---

## What does that mean?

Consider the method below from `BankingApp`. What are its dependencies?

```ts
printAccountBalances(out) {
    const accounts = new Set();
    accounts.add(new CheckingAccount());
    accounts.add(new SavingsAccount());
    accounts.add(new CreditAccount());

    for(let a of accounts) {
        out.log(`Balance is ${a.balance()}`);
    }

}
```

Let's take them in order.

---

### Method parameters

Our method is dependent on `console` (or some other output method).

It is also dependent on its `log(String)` method:

```ts
printAccountBalances(out) {
    out.log(`Balance is ${a.balance()}`);
}
```

---

## Local collection variables

Our method is dependent on `Set` (and its no-arg constructor):

`const accounts = new Set();`

---

## Account

Our method depends on the existence of an `Account` type:

`const accounts = new Set();`

Also, that it has a `balance` method that returns a value whose `toString()` method returns a `String` appropriate for display purposes:

```ts
out.log(`Balance is ${a.balance()}`);
```

---

## Types of Accounts

Our method depends on their being three types of accounts, each of which _isA_ `Account`: `CheckingAccount`, `SavingsAccount`, and `CreditAccount`. Also, that each has a default (no-argument) constructor:

```ts
const accounts = new Set();
accounts.add(new CheckingAccount());
accounts.add(new SavingsAccount());
accounts.add(new CreditAccount());
```

---

## The (mostly) entire list

To sum up, it is dependent on the following:

- `Account` and its `balance()` method
- `CheckingAccount` and its default (no-argument) constructor
- `SavingsAccount` and its default (no-argument) constructor
- `CreditAccount` and its default (no-argument) constructor
- `Set`
- `console` and its `log(String)` method

_Dependencies_ are things that could change and break our code. Tightly coupled code (a lot of dependencies) is _fragile_.

The collections classes and `console` are unlikely to change, so we're a bit less worried about those dependencies

---

## Dependency Injection

A family of techniques used to implement _Inversion of Control_. The simplest of these are _constructor injection_ and _direct instance variable injection_ (aka field injection). _Setter injection_ is also oft-used, but usually a code smell.

---

## Constructor-injection

Let's return to `BankingApp`. It has a lot of dependencies. We could use _constructor injection_ to pass control of `Account` creation outside of our app. If we were using a framework (like Spring), we would allow the framework to _inject_ our dependencies.

First, we would give our app a constructor that accepts `Account`s and an instance variable to store them:

```ts
constructor(accounts) {
	this.accounts = accounts;
}
```

Note that we have already eliminated the dependency on `Set`! We only know that we're dealing with a `Collection`.

---

## Our new improved method

```ts
printAccountBalances(out) {
    for (let a of accounts) {
        out.log(`Balance is ${a.balance()}`);
    }
}
```

Now we have eliminated the dependency on specific `Account` types as well as how they are constructed. Our method no longer _controls_ how accounts are created or which accounts are created.

---

## Our leaner and meaner list of dependencies

We still have several of our stable dependencies on core Java classes. Our acceptance of dependencies should vary inversely with how likely they are to change:

- `console` and its `log(String)` method

But our dependencies on application-specific classes have now been reduced to `Account` and its `balance()` method.

In our simple example, we still rely on `balance()` returning something with a `toString()` method that renders a suitable `String` for display. In the real world, we would create another class responsible for converting balance to a `String`, so we would eliminate this dependency as well.

---

## Inversion of Control

Often expressed as the [Hollywood Principle](http://wiki.c2.com/?HollywoodPrinciple): "Don't call us, we'll call you." (_That links to Ward Cunningham's WikiWikiWeb. Not only is it the first wiki on the web, but he invented wikis!_)

See Martin Fowler's [Inversion of Control Containers and the Dependency Injection pattern](https://www.martinfowler.com/articles/injection.html).

---

## Dependency inversion principle

The dependency inversion principle is the culmination of these tools and techniques. From the lips of our beloved Uncle Bob:

> A. High level modules should not depend upon low level modules. Both should depend upon abstractions.
>
> B. Abstractions should not depend upon details. Details should depend upon abstractions.

Easier to say than do, to be sure!

---

### Program to interfaces, not implementations

![](/images/dependency-injection/abstractions-vs-details.png)

---

## SOLID

SOLID is an acronym introduced by Michael Feathers and promoted by Uncle Bob.

**D**ependency inversion is the **D** in SOLI**D**.

SOLID is a mnemonic for a set of principles that represent an agile, clean object oriented development philosophy:

- **S**ingle responsibility principle
- **O**pen/closed principle
- **L**iskov substitution principle
- **I**nterface segregation principle
- **D**ependency inversion principle

Remember, be _agile_ or be _fragile_.


Dependency Injection


## Measuring Uniqueness

## Comparing primitives

Primitives are stored _by value_, so checking them for equality is simple. We use the `==` operator.

```ts
const firstInt = 42;
const secondInt = 86;
// Can also use === since types are the same
if (firstInt == secondInt) {
  console.log('These are equal.');
} else {
  console.log('These are not equal.');
}
```

---

## Comparing objects

Variables that hold objects are called `reference types`, because they hold a reference to an object. Think of this as a pointer to the object stored as a memory address.

If we compare two object reference using the equals (`==` || `===`) operator, we are actually comparing the references, not the values to which they refer.

Try this. You may be surprised:

```ts
const firstNum = new Number(42);
const secondNum = new Number(42);
// === does the same
if (firstInt == secondInt) {
  console.log('These are equal.');
} else {
  console.log('These are not equal.');
}
```

What just happened?

---

## I am me

Try changing `secondInt` to `firstInt` in the comparison. What happens?

```ts
const firstNum = new Number(42);
const secondNum = new Number(42);
// === does the same
if (firstInt == firstInt) {
  console.log('These are equal.');
} else {
  console.log('These are not equal.');
}
```

---

## Doing it right

If we need to compare equality of `Object`s, we unfortunately do not have a built in way to do so in JS. We would have to build this functionality out ourselves. Something like this:

```ts
function isEquivalent(a, b) {
  const aProps = Object.getOwnPropertyNames(a);
  const bProps = Object.getOwnPropertyNames(b);

  if (aProps.length != bProps.length) {
    return false;
  }

  for (let i = 0; i < aProps.length; i++) {
    const propName = aProps[i];

    if (a[propName] !== b[propName]) {
      return false;
    }
  }

  return true;
}
```

---

## What. Just. Happened???

There is a lot of new code there, but fear not. It's not so bad.

Let's start with the first two lines:

```ts
const aProps = Object.getOwnPropertyNames(a);
const bProps = Object.getOwnPropertyNames(b);
```

All this is doing is assigning the keys in the `Object` to an array so we're only observing a single dimension of the `Object` at a time.

---

Next, the first conditional:

```ts
if (aProps.length != bProps.length) {
  return false;
}
```

This one is pretty straight forward. We're just checking to see if each object has the same number of values in it. If they don't, these things can't possibly be equal, so the function returns false and sends us on our way.

---

On the other hand, if the length of the values are indeed the same, now we can dig deeper:

```ts
for (let i = 0; i < aProps.length; i++) {
  const propName = aProps[i];

  if (a[propName] !== b[propName]) {
    return false;
  }
}
```

This loop is now going to go through each value in both objects and compare them. If indeed all of the keys exist and contain the same values, we move on past the loop. If, however, any keys mismatch, or values aren't equal, we again return false and keep moving.

---

Last but not least, if we have gotten through all of those checks, we return true saying that these objects are indeed equal. can you think of a time when we might get a false negative though?

---

## Nested Objects?!?! Come on...

That's right. What if one of the values in the Object is itself an Object? Well we would fail again. (Barring if both Objects are referencing the _same_ Object) This is where things get a bit tricky. We would have to make our equality checker **way** more complex to check for what's known as Deep Equality.

Now I do my best to avoid libraries and write my own code as much as possible. (as should you) But this is one example where I would use a library like [Lo-Dash](https://lodash.com/) for this. Using this library, we can import just the method we need to avoid bloating our application and freeing us up from writing this ourselves:

```ts
const { isEqual } = require('lodash');

const objOne = { a: 1, b: { c: 2 } };
const objTwo = { a: 1, b: { c: 2 } };

console.log(objOne == objTwo);
console.log(isEqual(objOne, objTwo));
```

## Full circle

Fire up VSCode, and create this `Circle` class:

```ts
class Circle {
  constructor(radius) {
    this.radius = radius;
  }

  circumference() {
    return 2 * Math.PI * radius;
  }
}
```

Note: `Math.PI` above is a _constant_. What does that mean?

---

## Circles of a size

As per our `Number` example, this code won't work as you may expect:

```ts
const firstCircle = new Circle(42);
const secondCircle = new Circle(42);

if (firstCircle == secondCircle) {
  console.log('These are the same size');
} else {
  console.log("These aren't the same size.");
}
```

Again, time to invest in something like Lodash...


Equality


Processing Data Before Responding To A Request

## What is middleware and why do I care?

Middleware is a concept in web application development in which we execute some behavior in the middle (that's why it's called that) of the Request => Response cycle that happens between the client and the server. Essentially, middleware allows us to process our request code in some way before sending it to our application for processing and ultimately sending a response to the requesting agent.

Middleware is used for all sorts of things. It is most popularly used to authenticate a user or scrub input before sending it along to our application. This middle step makes putting nefarious code into our application that much harder.

Middleware operates as small applications that do some sort of preprocessing with our data so that our application doesn't have to worry about doing it. This is why you see so many third party middleware libraries being plugged in to your Express applications. We have trusted libraries doing the job of logging, parsing our request body, handling cookies, etc. What if there is a specific use case for our application? Let's explore that.

---

## Example Project

Follow along [here](https://github.com/WeCanCodeIT/middleware-example)

In our example project we have routes to display all games, a single game, all studios, and a single studio. We want to be able to add a new game to our application.

### The Problem

We need to retrieve an existing studio to add to our new game. We could handle this in the controller method for adding a new game, but what if we need to repeat this behavior? This is exactly what middleware is for. Since the process of retrieving a studio really doesn't have anything to do with adding a game to our data store, we really shouldn't include it in our controller.

### The Solution

Custom middleware!

---

## Game Router

Let's have a look at what our current `game-router` looks like.

```ts
const express = require('express');
const router = express.Router();

const gamesController = require('../controllers/games-controller');

/* GET games */
router.get('/', gamesController.readGames);

/* GET game */
router.get('/:id', gamesController.readGame);

module.exports = router;
```

We need to add a post route for adding a game. Let's make that to see what it's going to look like and then build the middleware to actually handle it.

---

## New Games Router

```ts
const express = require('express');
const router = express.Router();

const populateStudio = require('../middleware/populate-studio');

const gamesController = require('../controllers/games-controller');

/* GET games */
router.get('/', gamesController.readGames);

/* GET game */
router.get('/:id', gamesController.readGame);

/* POST game */
router.post('/', populateStudio, gamesController.createGame);

module.exports = router;
```

So we're importing `populateStudio` from a new `middleware` directory, so we'll need to create that. We also have a new method on our `gamesController`, `createGame` so we'll need to make that as well. Let's start with the middleware.

---

## `populateStudio`

```ts
const studiosService = require('../data/studios-service');

module.exports = (req, res, next) => {
  const studioId = req.body.studioId;
  const studio = studiosService.findById(studioId);

  if (studio === undefined)
    res.status(500).json({ message: "Requested studio doesn't exist" });

  req.body.studio = studio;

  next();
};
```

So let's dig through what this middleware is doing. The first thing to note is that we are exporting a function which takes the parameters `req`, `res`, and `next`. The first two should be familiar at this point, but for what is `next` used? Let's circle back to that.

We're also importing the `studiosService`. This is going to give us access to be able to actually pull studios into our application context.

First, we're retrieving the `authorId` from our request body and then using it to retrieve and actual studio from our service.

Next, we're validating that the requested studio exists and sending an error if it doesn't.

Next, if the requested studio does exist, we're assigning it to a value in the request body.

Finally, we're calling the `next` method which tells our application that this middleware is finished and to move on to the next function in the chain.

Now we can use this value in our controller!

---

## Games Controller

Now that we have this middleware operating properly, we can move on to what our controller actually needs to do. Let's add the `createGame` method.

```ts
const gamesService = require('../data/games-service');
const studiosService = require('../data/studios-service');

const idGenerator = require('../utils/id-generator');
const Game = require('../models/Game');

module.exports = {
  createGame(req, res) {
    const id = idGenerator();
    const title = req.body.title;
    const description = req.body.description;
    const studio = req.body.studio;

    gamesService.save(new Game(id, title, description, studio));

    res.redirect('/games');
  },
  readGames(req, res) {
    res.render('games/all', {
      games: gamesService.findAll(),
      studios: studiosService.findAll(),
    });
  },
  readGame(req, res) {
    res.render('games/single', { game: gamesService.findById(req.params.id) });
  },
};
```

So `createGame` is first generating a new id from our utility method. Next, it's just pulling values from the request body (including the studio from our middleware!) and using it to make a new `Game` object and passing it to a new method in the `gamesService`, `save`. Let's see what that looks like.

---

## `gamesService`

```ts
const { games } = require('./db-mock');

module.exports = {
  findAll() {
    return games;
  },
  findById(id) {
    return games[id];
  },
  save(game) {
    games[game.id] = game;
    return games[game.id];
  },
};
```

The `save` method is fairly straight forward. It accepts a game object as a parameter and uses that games "generated" ID as the key and assigns the `Game` object as the value.

---

## Conclusion

Middleware is a great tool to keep code decoupled. It also makes this sort of behavior repeatable without having to write it our multiple times. This is the kind of tool that will elevate your code cleanliness if you can get good at it. Happy coding!


Express Middleware


Create Server Environments with Ease

## The Problem

Node is an incredibly robust tool all by itself. But actually building out a server environment without any libraries (while certainly possible) gets to be a bit verbose.

---

## The Solution

Express is self defined as a fast, unopinionated, minimalist web framework for Node.js. It provides us with a toolbox that sits on top of the Node framework and allows us to quickly and easily build and maintain web applications.

---

## Getting Started

Let's build an example Express application to see just how it works. To get started, let's make a new Node project. Inside of `~/wcci/code` let's make a new project directory called `hello-express`.

Inside of Git Bash, execute the following:

1. `mkdir hello-express`
2. `cd hello-express`
3. `npm init -y`
4. `npm i express`
5. `code .`

This will give us a new application that has express installed as a dependency.

---

## Start Coding!

at the root of our project, let's make an entry point to start writing some code. In your project root, create a file called `app.js`. This will be the main entry point of our application and what will serve all of our content. Add the following code to this file:

```ts
const express = require('express');
const app = express();
const port = 3000;

app.get('/', (req, res) => res.send('Hello World!'));

app.listen(port, () => console.log(`Example app listening on port ${port}!`));
```

---

## Run it

In Git Bash, run the following command: `node app.js`

Now, in your browser, navigate to `localhost:3000`. You should see the words "Hello World!"

Congrats! You just made your first Express application!!

---

## But What is Going On???

Ok, so we have our Hello World example done, but just what is this code doing. Let's crawl through it. Let's start with the first 3 lines.

```ts
const express = require('express');
const app = express();
const port = 3000;
```

- The first line is using Node's built in module system to give us access to the Express framework that we installed.
- The next line is creating a variable called `app` and assigning it an instance of the Express framework. Now that we have that, we can access all of the magic that Express provides.
- The final line is creating a variable called `port` that we use to tell our Node server exactly what port we want to run our application on. (This number is somewhat arbitrary.)

---

## Actually Doing Something

Now let's look at the next line

```ts
app.get('/', (req, res) => res.send('Hello World!'));
```

This one is doing a lot more heavy lifting. First, in `app.get(...)`, `.get()` is a method we have access to from Express. This allows us to tell Express (and in turn, Node) that we are mapping a `GET` HTTP request. This method accepts two parameters. The first is the path that we want to map behavior to. In this case we are selecting the root of the domain. The second parameter is a callback function that we use to execute some behavior.

This callback takes two parameters as well `req` and `res` which stand for request and response respectively. These parameters handle requests from the browser to our application and responses from our application to the browser. In our example, we are sending (via `res.send`) the plain text "Hello World!". This is how we get that to render in the browser.

---

## Listening

Finally, the last line:

```ts
app.listen(port, () => console.log(`Example app listening on port ${port}!`));
```

This line is what actually let's us see that text in the browser. The `.listen()` method is an Express method just like `.get()`. This one, however, is the one that actually starts our server. The first parameter this method accepts is a number that represents the port we want our application to run on, 3000 in our example. The second parameter is optional but is often used to send a confirmation message that our server is indeed running. This parameter is just a callback function where we can do pretty much anything we want.

---

## Express Generator

Now that we understand the basics of Express it's time to explore a resource that will quickly bootstrap an Express application for us so we can focus on coding, the Express Generator. This helpful tool gets you started with an Express project that is ready to go out of the box. Let's install it:

`npm i -g express-generator`

And now let's create a project. From `~/wcci/code`, run the following

`express hello-express-generator --view=hbs`

The `--view` flag at the end is telling the Express Generator that we want to use Handlebars for our view engine. (More on that later)

`cd hello-express-generator && code .`

This opens our new application in VSCode.

---

## What Do We Have Here?

We have a pretty organized (albeit confusing at first) directory structure. What are these directories for?

- `bin` \- Where we store Binary Executable files. For us, this is where our initialization script is housed.
- `node_nodules` \- Per the usual, our project dependencies are housed here.
- `public` \- This is where we store any static resources such as CSS or client-side JS.
- `routes` \- This is where we organize our routes or endpoints for our application. This helps us keep the size of our app file down by abstracting that code away.
- `views` \- This is where we keep our template files that we will ultimately render.
- `app.js` \- Our applications entry point

---

## Digging In

Let's open up `app.js` and take a look. Let's focus in particular on lines 13-23:

```ts
app.set("views", path.join(__dirname, "views"));
app.set("view engine", "hbs");

app.use(logger("dev"));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(\_\_dirname, "public")));

app.use("/", indexRouter);
app.use("/users", usersRouter);
```

---

## View Rendering

Let's examine these in sections:

```ts
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'hbs');
```

These lines are telling our Express application that we will be using HBS (or Handlebars) as our template engine. This allows Express to read those files now that we told it we'll be using them. It also gives Express a path to where those templates will be housed.

---

## Middleware

The next set of lines are where Express _REALLY_ excels:

```ts
app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
```

This is what is known as Middleware. Named such because it happens in the middle of the application being initialized and the application being delivered (via the browser) to the user. Express allows you to add as much Middleware as you'd like and passes all data (requests and responses) through these "middle" applications so that we can perform certain tasks on it.

---

## Routing

The final lines of code manage routing:

```ts
app.use('/', indexRouter);
app.use('/users', usersRouter);
```

This handles our routing. Essentially it tells Express that when the user hits the domain root or `/users` go to the provided file and execute whatever that file says to do based on the request type.

---

## Conclusion

That does it for our introduction to Express. Express is an incredibly powerful tool and is absolutely invaluable to the JS developer. Be sure to [check out the documentation](https://expressjs.com/) and familiarize yourself more fully.


Express


A Succinct and Powerful Way to Fetch Data

## Fetch

Fetch allows us to send and receive data from our browser environment thus eliminating the need for page refreshes. It is more user-friendly and powerful than its counterpart, `XMLHttpRequest`.

---

## Using Fetch

Fetch allows us to make request for data as well as send data to other APIs. Let's take a look at how we put it into action.

```ts
fetch('https://swapi.co/api/people/22')
  .then((response) => response.json())
  .then((jsonData) => console.log(jsonData))
  .catch((err) => console.log(err));
```

---

## What's Happening?

First, `fetch` is sending a request from our browser to some API end-point. The API processes that request and, depending on the HTTP request verb, either returns information from the database (DB), adds new information to the DB, updates an entry already existing in the DB, or removes and entry from the DB. Each of these is going to return some response (usually updated data) to the requesting client.

This data can be used to do just about anything. We can add or update DOM elements, remove DOM elements, update styling, refresh a game, make a robot fly three feet to the right, etc. Anything that can be done with JS, can be done with a simple `fetch`.

---

## What Else Can I Do??

This has been a pretty basic, yet powerful, example of what `fetch` can do. But what about those other HTTP verbs?? Well `fetch` can handle those as well. But that is going to take another parameter...

---

## Initialization Object

So `fetch` accepts two parameters. The first is always going to be the API endpoint you are accessing. The second (optional) parameter is an initialization object. Through this object we can pass a number of configuration settings. Some of the most used are `method`, `headers`, and `body`. Let's explore these a bit more.

### `method`

`method` refers to the HTTP request method we will be using. The default value for this is `GET` as you may have already guessed. But we can use any valid HTTP verb in here. Since we're using AJAX requests here, we can use **ANY** one we want. Usually we'll be using either `POST`, `GET`, `PUT`, or `DELETE`.

### `headers`

`headers` are things that get sent before any request or response. They're essentially metadata about the req or res that we're sending. They can describe what the following content will be (`Content-Type`) or that the following data is encoded (`Accept-Encoding`) or even custom headers (`This-Is-Meaningless`). Headers are incredibly useful for making sure the server or browser we're sending info to is capable of processing our data.

### `body`

This is arguably the most important one. `body` is what allows us to send data back to a server. This is exactly the same behavior we see with the request body of `form`s. We can use any corresponding values in our `Controller`s. Let's see an example

### `fetch` POST

```ts
const data = {
  title: 'New Blog Post - Fetch',
  content: "You're so fetch!",
};
fetch('/api/posts/add', {
  method: 'POST',
  headers: {
    'Content-Type': 'text/plain',
  },
  body: data,
})
  .then((res) => res.json())
  .then((data) => console.log(data));
```

Let's make this work!

---

## How/Why would I use this?

Why would I add or retrieve data this way? How would I practically use this? Glad you asked. Using this kind of a request has a **_HUGE_** advantage over using HTML form elements. This method is a lot less memory intensive as it is only asking for a (usually) small subset of data from a DB. It's also only applying changes to a component of our DOM at any given time. `fetch` is also Asynchronous, which means that we can send the request based on some user interaction, let it process in the background while still interacting with our application (or even sending more requests at the same time!), and then updating only the parts of the app that are affected by the response!

Usually you will use this behavior to create Single Page Applications (SPAs). So it is rare that you will be mixing HTML forms with AJAX requests, but it does happen. But what's an SPA?

---

## Single Page Applications

This is a paradigm different than the approach that we have been taking so far. We have been making Multi Page Applications (MPAs). This is still a totally valid way to make applications. In fact, depending on the kind of application you're making, it may be preferred. MPAs make use of full page refreshes to populate new data. Most of the time, these models are simple web sites.

Most folx use SPAs to mimic the behavior of applications. Think the kinds of applications that you use on your phones or tablets. SPAs usually have a separate backend component, usually a RESTful API, that they pull data from. This is how most React, Angular, and Vue applications function and most of them actually make use of many APIs at any given time.

---

## Conclusion

So we've seen how we can use `fetch` to make dynamic queries to our own DBs as well as other third-party APIs. Hopefully it is clear that this behavior is incredibly desirable when developing applications that can quickly and adequately respond to user interaction.


Fetch API


1… 2… Fizz! 4… Buzz!

## Rules of Testing

- **First Rule**: You can write no production code except to pass a failing test case
- **Second Rule**: You can only write enough of a test case to demonstrate a failure
- **Third Rule**: You can only write enough production code to pass the currently failing test case

---

## FizzBuzz Game

- "Fizz" if a number is divisible by 3
- "Buzz" if a number is divisible by 5
- "FizzBuzz" if a number is divisible by 3 and 5
- Otherwise, show the number (let's show the number as a String)

---

## Project Setup

- Open `Git Bash`
- Run the following: `mkdir fizzbuzz && cd fizzbuzz`
- Initialize a new node project: `npm init -y`
- Install Parcel: `npm i parcel-bundler`
- Install Jest and all dependencies: `npm i -D jest babel-jest @babel/core @babel/preset-env`
- Make a `src` dir and a `test` dir: `mkdir src test`
- Make a `js` dir in both: `mkdir {src,test}/js`
- Open in VSCode: `code .`

---

## Update `package.json`

update the scripts section of your `package.json` file

```ts
    {
      ...
      "scripts": {
        "test": "jest test/js"
      },
      ...
    }
```

---

## Red

```ts
import FizzBuzz from '../../src/js/FizzBuzz';

describe('fizzbuzz', () => {
  test('Should return 1', () => {
    // Arrange
    const underTest = new FizzBuzz();
    // Act
    const actual = underTest.parse(1);
    // Assert
    expect(actual).toBe(1);
  });
});
```

---

## First Failures

So all of our failures at this point are compilation failures. To fix these we need to make the `FizzBuzz.js` file with the parse method.

---

## All fixed!

So now we have the following object in `src/js/FizzBuzz.js`:

```ts
class FizzBuzz {
  parse(inputNumber) {}
}

export default FizzBuzz;
```

Now run your tests to see this one fail. In GitBash run `npm test`.

---

## Red -> Green

Now, we do the _SIMPLEST_ thing to make the test pass. In this case...

```ts
class FizzBuzz {
  parse(inputNumber) {
    return 1;
  }
}

export default FizzBuzz;
```

Remember, never write more code than you need to make the test pass. Even if you know how the code may change in the future. Be creative with your tests and let them dictate how your code should work.

Now, run your test to see it passing!

---

## Green -> Refactor

Now that we have gotten to green in the red -> green -> refactor cycle, it's time to refactor! Remember, refactoring can take the form of properly naming things, deleting unnecessary code, removing duplication, or anything else that generally makes our code cleaner.

At this point we don't have any clean up to do though, so it's time to move back to red.

---

## Refactor -> Red

Now that we've got a passing test for 1, let's write a test for 2.

```ts
test('Should return 2', () => {
  // Arrange
  const underTest = new FizzBuzz();
  // Act
  const actual = underTest.parse(2);
  // Assert
  expect(actual).toBe(2);
});
```

Run this test to see it fail.

---

## Red -> Green

So let's change our class under test to make this test pass...

```ts
class FizzBuzz {
  parse(inputNumber) {
    if (inputNumber === 1) {
      return 1;
    }
    return 2;
  }
}

export default FizzBuzz;
```

Remember, since `return` is a break statement, we will never run the risk of returning two outcomes from the same method. Run your tests to see them pass.

---

## Green -> Refactor

Time to make our code cleaner again. Now let's take a look at the logic of our method and think about how we can make it cleaner. At this point it's pretty clear that we are just returning the number we pass in. Let's make our method do that instead...

```ts
class FizzBuzz {
  parse(inputNumber) {
    return inputNumber;
  }
}

export default FizzBuzz;
```

---

## Refactor -> Red

Time for our third test!

```ts
test('Should return Fizz', () => {
  // Arrange
  const underTest = new FizzBuzz();
  // Act
  const actual = underTest.parse(3);
  // Assert
  expect(actual).toBe('Fizz');
});
```

Run this to see the fail.

---

## Red -> Green

Remember to do the simplest thing to make the test pass.

```ts
class FizzBuzz {
  parse(inputNumber) {
    if (inputNumber === 3) {
      return 'Fizz';
    }
    return inputNumber;
  }
}

export default FizzBuzz;
```

---

## Green -> Red

Since there really isn't anything to refactor, it's time to turn red again! So, for our next test, we are going to choose 5.

```ts
test('Should return Buzz', () => {
  // Arrange
  const underTest = new FizzBuzz();
  // Act
  const actual = underTest.parse(5);
  // Assert
  expect(actual).toBe('Buzz');
});
```

Why 5 and not 4?

---

## Red -> Green

```ts
class FizzBuzz {
  parse(inputNumber) {
    if (inputNumber === 5) {
      return 'Buzz';
    }
    if (inputNumber === 3) {
      return 'Fizz';
    }
    return inputNumber;
  }
}

export default FizzBuzz;
```

We now have a passing test for 5!

---

## Green -> Red

Time to continue on our testing journey...

```ts
test('Should return Fizz', () => {
  // Arrange
  const underTest = new FizzBuzz();
  // Act
  const actual = underTest.parse(6);
  // Assert
  expect(actual).toBe('Fizz');
});
```

This gets us failing. Let continue on the simplest road to passing.

---

## A Moment for Names

Wait...

Now we have two tests with the same description ('Should return Fizz'). We can use a nested describe block to help with that. This is what we should have now:

```ts
describe("fizzbuzz", () => {
  ...
  describe("Should return Fizz", () => {
    test("for 3", () => {
      ...
    });
    test("for 6", () => {
      ...
    });
  });
});
```

Now we can nest anything that should return us "Fizz" in here so we're organized.

---

## Red -> Green

```ts
class FizzBuzz {
  parse(inputNumber) {
    if (inputNumber === 5) {
      return 'Buzz';
    }
    if (inputNumber === 3 || inputNumber === 6) {
      return 'Fizz';
    }
    return inputNumber;
  }
}

export default FizzBuzz;
```

---

## Green -> Refactor

Now let's examine our `parse` method and see how we can make this logic a little more clear

```ts
class FizzBuzz {
  parse(inputNumber) {
    if (inputNumber === 5) {
      return 'Buzz';
    }
    if (inputNumber % 3 === 0) {
      return 'Fizz';
    }
    return inputNumber;
  }
}

export default FizzBuzz;
```

So now we're using the modulus operator to see if the number we have is evenly divisible by 3. We do this by checking to see if zero is the remainder when we divide by 3.

---

## Complete remaining test cases

Time to continue using this same logic to figure out the remaining numbers to test! Which numbers make sense to test? Which do we have enough confidence to skip at this point?


FizzBuzz Kata


Programming tools made for humans

## Introduction

Fluent APIs are a programming paradigm that is centered around how we develop modules, components, and functions/methods. The goal is to make our code more human readable. We do achieve this by using a more functional approach in our code. This doesn't mean that we're using only a functional paradigm. Let's see an example to get started with this process.

---

## Example

Let's say we're going to create an anchor HTML element (`<a>Link!</a>`), give it a couple classes, add a custom attribute, and give it text content. The code for that without some sort of a library would be a bit confusing.

```ts
// Create element
const newAnchor = document.createElement('a');

// Add classes
newAnchor.classList.add('btn');
newAnchor.classList.add('btn--blue');
newAnchor.classList.add('btn--large');

// Add attribute
newAnchor.setAttribute('href', 'https://some.location.com');

// Add text content
newAnchor.textContent = 'Click here for more info!';
```

This code will run doing everything that we expect it to do. The issue becomes more evident when we start making multiple elements like this. Imagine if we had even two more anchor elements that we were creating like this. Keeping track of names and added elements would become convoluted and much more error prone. This is where we can build out a Fluent API library to execute these types of repetitive tasks. What if, for example, our code looked like this instead:

```ts
const newAnchor = Html()
  .create('a')
  .addClasses(['btn', 'btn--blue', 'btn--large'])
  .attribute('href', 'https://come.location.com')
  .text('Click here for more info!');
```

So. Much. Better!

But these methods are all undefined! Good news! Not for long. Let's go make them.

---

## `Html` module

We're going to make a module that handles all of the business logic of rendering, manipulating, altering, or removing HTML elements through JS.

```ts
export default () => new Html()

class Html {
    addClasses(classesToAdd = undefined) {
        if (classesToAdd === undefined) {
            return this.element.classList
        } else if (typeof classesToAdd === 'string') {
            this.element.classList.add(classesToAdd)
        } else {
            classesToAdd.forEach(classToAdd => this.element.classList.add(classToAdd))
        }

        return this
    },

    attribute(attribute, value = undefined) {
        if (value === undefined) {
            return this.element.getAttribute(attribute)
        } else {
            this.element.setAttribute(attribute, value)
        }

        return this
    },
    create(element) {
        this.element = document.createElement(element)

        return this
    },
    render() {
        return this.element
    },
    text(textToAdd = undefined) {
        if (textToAdd === undefined) {
            return this.element.textContent
        } else {
            this.element.textContent = textToAdd
        }

        return this
    }
}
```

The first thing to note about this modules methods are the return values. Each of them is returning `this` by default. That behavior is what allows us to chain methods together the way we are. That's because each time we use one of those methods, we're getting the current instance of the `Html` object that we created. This instance has all of those methods we're defining on it. The next thing to note is the value we're altering with each of these methods.

`this.element` is going to always refer to the HTML element we are creating or otherwise referencing. That becomes a property of the larger object.

---

## More testable

The other benefit that we get from creating an abstraction like this is that we can easily test this behavior since we're operating with an object. This is the benefit of JavaScript is that we can use OOP for organizing our code and FP for simplifying that code.

```ts
describe('create', () => {
  test('creates a new HTMLElement', () => {
    const underTest = Html().create('p');
    expect(underTest.render() instanceof HTMLElement).toBeTruthy();
  });
});
```

here we can see how we can pass assertions on our abstraction layer because our methods are now more deterministic. They either do or do not do what we expect.

---

## Conclusion

The benefit of creating small modules that do specific things and do them well should be evident. This is just keeping to the Single Responsibility Principle. Writing them in this manner where we're able to chain these behaviors in a way that makes them more readable to us (and other devs) is what makes this so powerful. Writing code your computer can understand is easy. Writing code that people can understand is the art.


Fluent APIs


Again, and again, and again, and...

## Counting

Remember when we used a `while` loop to count?

```ts
let count = 1;
while (count <= 10) {
  console.log(`Count is ${count}`);
  count++;
}
```

The `for` loop allows us to do this in a more concise fashion.

```ts
for (let count = 1; count <= 10; count++) {
  console.log(`Count is ${count}`);
}
```

---

## Initialize...

The bit before the first semicolon inside a `for` statement runs _before_ looping begins:

```ts
    for(let count = 1;)
```

You may hear this called many things. We will call it the _initialization expression_.

This is analogous to how we initialized `count` before our while loop:

```ts
let count = 1;
```

---

## Loop While...

Our loop condition is the same and even in pretty much the same spot:

```ts
    for(let count = 1; count < 10;)

    int count = 1;

    while(count < 10)
```

---

## Afterwards...

A `for` loop that follows the standard pattern makes it easy for us to find what happens _after_ the loop.

```ts
    for(let count = 1; count <= 10; count++) {
      console.log(`Count is ${count}`);
    }

    int count = 1;
    while(count <= 10) {
      console.log(`Count is ${count}`);
      count++;
    }
```

---

## I am NOT a Number!

Our _initialization expression_ is usually a number, but initialize pretty much anything we like. Also, our _increment expression_ is often used to decrement, but you can also get weird:

```ts
const input = require('readline-sync');

for (let r = 'foo'; !(r === 'quit'); r = input.question('What should I do? ')) {
  console.log(r);
}

console.log('Ok, I quit!');
```

Yeah, probably don't do that. It's not _good_-weird.

_Note: we're using `r` as the variable name for brevity. The name should be more descriptive._

---

## Leaving Out Bits

Each of these three parts is optional. This:

```ts
for (; myCondition; ) {
  // do something
}
```

is the same as:

```ts
while (myCondition) {
  // do something
}
```

Which of these is easier to read? As developers, we want to write code that minimizes the _cognitive load_ required to understand it. Ideally, we also avoid disturbing fellow developers. Don't be cute. Just use a `while` statement.

---

## Summary

When it's appropriate to use, a `for` loop is generally easier to read.

Including initialization and incrementing in a consistent spot also makes it less prone to error than a comparable `while` loop.


For Loops


## Sending Messages

## Introduction

Functions in JavaScript are incredibly powerful and useful. Unlike some other languages, functions in JS are first-class citizens. That means that we can actually pass them around as values which allows us to do some pretty cool stuff. Let's dig in.

---

## Function Declaration vs Function Expression & Arrow Functions

There are a few different ways to declare functions in JS. Functions can actually behave differently based on how you declare them. The biggest difference is between them is the difference between a function declaration and a function expression (function keyword or arrow). Let's examine both and how they differ.

---

## Function Declaration

Function declarations can be really useful for organization because they are hoisted to the top of your JS files when they're executed. This means we can keep them in any order and anywhere in our code and use them whether they've been declared yet or not. Hoisting is a concept that makes JS really nice for keeping code organized. Let's look at how we would write a function declaration:

```ts
greet();
greet('Donny');

function greet(name = 'being') {
  console.log(`Hello, ${name}.`);
}
```

This will print the following to the console

```zsh
$ Hello, being.
$ Hello, Donny.
```

---

Note how we are able to call the `greet` function before we even write that function. This is because of how JS hoists functions (only declarations) and variables to the top of the scope before executing the code. So at runtime, JS sees your code like this (even though you aren't writing it this way):

```ts
function greet(name = 'being') {
  console.log(`Hello, ${name}.`);
}

greet();
greet('Donny');
```

---

## Function Expressions

There are two ways to make a function expression. The first is with the function keyword, like so:

```ts
const myFunc = function () {
  // ...
};
```

The other is with an arrow function:

```ts
const arrowFunc = () => {
  // ...
};
```

The major difference between these two are how they treat the `this` keyword. Let's take a look with an example.

---

```ts
const myObj = {
  myFunc: function () {
    console.log(this);
  },
  arrowFunc: () => {
    console.log(this);
  },
};

myObj.myFunc();
myObj.arrowFunc();
```

You will see different outcomes depending on whether you run in the browser or through Node. in Node you get the following output:

```zsh
$ { myFunc: [Function: myFunc], arrowFunc: [Function: arrowFunc] }
$ {}
```

---

## Callbacks

We mentioned at the beginning that functions are first class citizens but what exactly does that mean. Well, in essence, it means we can use them the same way we would use a String, Number, Boolean, or any other data type. The most common use of this kind of thing is what is known as a callback. This is where we pass a function as a value to another function and then do something with it. Let's take a look at what this looks like:

```ts
function callSomethingElseAndSayHi(name, callback) {
  callback();
  console.log(`Hello again, ${name}.`);
}

callSomethingElseAndSayHi('Ben', () => {
  console.log('Hey! I am a callback function!');
});
```

which results in the following:

```zsh
$ Hey! I am a callback function!
$ Hello again, Ben.
```

---

## Anonymous Functions

In the previous example, we were able to just type out an arrow function as a parameter of the function we created. That is what is known as an anonymous function and it simply means that the function has no identifier. So once it runs, we can never reference that function again. This is useful for things that we just want to execute once. This is why most callback functions are actually anonymous functions. They enclose some very specific functionality that gets executed once and then goes away. This is how JS uses a functional paradigm to simplify code. That isn't something that you would see in Object Oriented Programming (OOP).

---

## Closures & Scope

The concept of closures and scope in JS is one that can seem really complicated at first, but there really isn't much to it.

> A closure is the combination of a function and the lexical environment within which that function was declared. - Mozilla Developer Network

Let's see what this looks like:

```ts
function alertTime() {
  const time = new Date().getTime();
  function applyTime() {
    alert(time);
  }
  applyTime();
}
```

Now we have an enclosed function that has reference to the scope or environment of its enclosing function.

---

Closures get really cool when you actually return new functions. These sorts of things are called factories. Here's a really basic example:

```ts
function greetingFactory(greeting) {
  return function (name) {
    return `${greeting}, ${name}!`;
  };
}

const sayHiTo = greetingFactory('Hi');
const sayWhatsUpTo = greetingFactory("What's up");
console.log(sayHiTo('Lacey'));
console.log(sayWhatsUpTo('Lauren'));
```

You'll often also see factories returning objects as well.

---

## Conclusion

Functions are a huge asset to us when we're writing code. They give us the means to have encapsulation and abstraction in our JS code. Get used to how they work and what they can do for you!


Functions


View Templating

## Introduction

Inside of our Node/Express applications, we will often want to render dynamic HTML pages based on data the we get from/send to our users. There are ways to do this without the use of a template engine, but templating engines make this **SO** much easier.

For our applications, we will use the Handlebars (hbs) engine to template our HTML.

---

## Templating?

What does it mean to template something? Essentially we build out a blue print with placeholders that we can plug data into. This way, the structure of our HTML is static and in place. All we change is the content. And we can render this content dynamically based on the data itself or user interaction.

---

## Example

Let's see this in action by making a project and getting our hands dirty:

1.  Navigate to your code directory: `cd ~/wcci/code`
2.  Create a new project using the Express Generator: `express hello-handlebars --view=hbs`
3.  Open the project in VSCode: `cd hello-handlebars && code .`
4.  Install dependencies: `npm i`

Now let's take a look at wha we've got.

---

## Views

Inside of the `views` directory, you should see 3 files that end in `.hbs`. These files are hbs template files. Let's take a look at `layout.hbs`:

```html
<!DOCTYPE html>
<html>
  <head>
    <title>{{title}}</title>
    <link rel="stylesheet" href="/stylesheets/style.css" />
  </head>
  <body>
    {{{body}}}
  </body>
</html>
```

---

## `layout.hbs`

`layout.hbs` is actually a special hbs file. It will be applied as a wrapper to any other hbs file that we load.

Hbs essentially looks at this as your standard page layout. The content of all other files will be applied inside of `{{{body}}}`. So, for example, when we render `index.hbs`, it's contents are passed to `layout.hbs` and then rendered. So we end up with the following:

```html
<!DOCTYPE html>
<html>
  <head>
    <title>{{title}}</title>
    <link rel="stylesheet" href="/stylesheets/style.css" />
  </head>
  <body>
    <h1>{{title}}</h1>
    <p>Welcome to {{title}}</p>
  </body>
</html>
```

---

## {{title}} - what's that?

So we now have `{{title}}` 3 times in our page. This is one of the placeholders mentioned earlier. When we render a template through a controller, we can also pass an object containing dynamic data that will get rendered inside of our template before it is sent to our user in the browser. Open `/routes/index.js` and let's have a look at how we actually render these templates.

```ts
/* GET home page. */
router.get('/', function (req, res, next) {
  res.render('index', { title: 'Express' });
});
```

So, when we hit the homepage, we're going to render this `index.hbs` template. Note that we don't have to include the file extension in the render method. Express knows to look for an hbs template from the configuration we gave it when we bootstrapped the project. `res.render` also accepts a second parameter, an object. The object we're passing has a title property. This corresponds to the `{{title}}` element that we have in our template!

---

## Run it

Let's see exactly what we get when we combine all of this. In Git Bash, run `npm start` and navigate to `localhost:3000` in your browser. Note that all of the instances of `{{title}}` have been replaced by 'Express'!

Now we have three instances of 'Express' that we only had to write once. Try changing the content of `title` in the object inside of `res.render` and restart your application (or use Nodemon 🤗). You will see your new content rendered to the page!

These objects can be as large or small as you want. In this example, our object only has one property. But we can have as many as we want. Usually these objects will be created by querying a database for some piece of data and then passing the response from that query to `res.render`. This is how we get **REALLY** dynamic pages.

---

## Common Commands

Hbs can do a lot more for us than just render dynamic content. We can actually programmatically render views so that we don't have to know exactly what we'll get back, but we can still render our content as we intend regardless of the data we receive.

---

## Rendering Collections

With hbs, we can take an array of any size and render it exactly as we intend using hbs' built in `{{#each}}{{/each}}` method. Let's add the following to our `index.js` route:

```ts
/* GET home page. */
router.get('/', function (req, res, next) {
  res.render('index', {
    title: 'Express',
    colors: ['red', 'orange', 'yellow'],
  });
});
```

And this to `index.hbs`:

```hbs
<h1>{{title}}</h1>
<p>Welcome to {{title}}</p>
<ul>
  {{#each colors}}
    <li>{{this}}</li>
  {{/each}}
</ul>
```

---

After a restart, your page should be rendering exactly as before but with a list of colors added! Play around with adding and removing colors from the list to see the true power hbs is giving you.

---

## Conditional Rendering

We can also conditionally render elements on our page based on the presence or absence of a value. Let's add the following to `index.hbs`:

```hbs
<h1>{{title}}</h1>
<p>Welcome to {{title}}</p>
{{#if subtitle}} <small>{{subtitle}}</small> {{/if}}
<ul>
  {{#each colors}}
    <li>{{this}}</li>
  {{/each}}
</ul>
```

Refresh your application and your browser. You shouldn't see anything different. But once you've done that, go into `routes/index.js` and add a `subtitle` property to the render object. Refresh all again and you should see that new property being rendered.

---

## Conclusion

Templating engines are such useful tools when building dynamic webb applications. They allow us to make reuseable pieces of code that we can simply plug information into and render different pages to our user. And this is just the tip of the iceberg. Check out the [Handlebars docs](https://handlebarsjs.com/) to see all of the amazing things you can do!


Handlebars

DOM Manipulation


Fail fast, fail often

## Meet Uncle Bob!

![](/tdd-intro-resources/uncle-bob.jpg)

- co-author of the [Manifesto for Agile Software Development](http://agilemanifesto.org/)
- creator of the [Three Rules of TDD](http://butunclebob.com/ArticleS.UncleBob.TheThreeRulesOfTdd)
- and [other stuff](https://cleancoders.com/episode/clean-code-episode-1/show?autoplay=true)

---

## Three simple (but not easy) rules

> Over the years I have come to describe Test Driven Development in terms of three simple rules. They are:
>
> - You are not allowed to write any production code unless it is to make a failing unit test pass.
> - You are not allowed to write any more of a unit test than is sufficient to fail; and compilation failures are failures.
> - You are not allowed to write any more production code than is sufficient to pass the one failing unit test.

What do these mean? What are their ramifications?

---

## First, we fail

![](/tdd-intro-resources/red.png)

> You are not allowed to write any production code unless it is to make a failing unit test pass.

This means that we need to write a failing test. Also:

> You are not allowed to write any more of a unit test than is sufficient to fail; and compilation failures are failures.

---

## What constitutes failure?

![](/tdd-intro-resources/red.png)

- not compiling (_You have red on you!_)
  - a class, method, … does not exist yet
  - a method does not accept the necessary parameters (needs to be changed or overloaded
- your tests' assertions fail

_Always run your tests to verify they will fail before moving on. Assuming a test will fail is the road to **pain**._

---

## Go green

![](/tdd-intro-resources/green.png)

> You are not allowed to write any more production code than is sufficient to pass the one failing unit test.

If the simplest thing is to return a hard-coded value, then return a hard-coded value. If it is to add a simple conditional, add the conditional. _Even if you know it must change later._

Sometimes this feels like you're not doing enough. What you must realize is that you are _designing_ how you will interact with your code.

Also, this cycle keeps us from complicating our code. If we don't need the code to make a test pass, we don't need the code.

---

## Improve the design

![](/tdd-intro-resources/refactor.png)

Refactoring, as originally defined by Martin Fowler and Kent Beck, is:

> A change made to the internal structure of software to make it easier to understand and cheaper to modify without changing its observable behavior… It is a disciplined way to clean up code that minimizes the chances of introducing bugs.

Simply put, it is improving the design of your code without changing what it does.

Improve your design. Your tests were passing before refactoring, so they should be green once you've finished.

---

## What refactoring is _not_

The term _refactoring_ is often misused. The following are _not_ refactoring activities, since they change what your code is doing:

- fixing bugs
- optimization
- adding error handling

These are all good things to do in the appropriate context. Each should be started with a failing test, just like any other new functionality.

---

## Red, Green, Refactor

![](/tdd-intro-resources/red-green-refactor.svg)


Intro to TDD


Mocks! Fakes! Stubs! Spies! Oh my!

## Introduction

Test doubles are a powerful tool available to us inside of our testing frameworks. They allow us to make fake versions of our code so that we can test in deterministic ways. But this seems counter intuitive, no? What benefit could there possibly be to testing fake code? At least I know that was the hardest part for me to wrap my head around. Let's take a look at an example to solidify the thought process.

---

## A Roll of the Dice

Let's say that we're creating a board game application called Caverns and Creatures. This game relies on the user rolling dice to determine outcomes in a given situation. Let's take a look at an example function in our game:

```ts
const Roll = require('./utils/dice');

function fight(enemy) {
  const characterAttackValue = Roll.d6();
  const enemyHP = enemy.hitPoints;

  if (characterAttackValue > 5) {
    enemyHP -= 20;
  } else if (characterAttackValue > 3) {
    enemyHP -= 10;
  } else if (characterAttackValue > 1) {
    enemyHP -= 5;
  } else {
    enemyHP -= 1;
  }
}
```

---

## Testing Trouble

Now, as we know about unit testing, we should only be testing the smallest units of code possible. So we want to test our `fight` function. The problem is that we are going to get a random value back from each call to `Roll.d6()`. Since we can't predict exactly what those values will be, we can't very well test our `fight` function. What would we assert?

Here is what our `Roll.d6` method looks like:

```ts
class Roll {
  d6() {
    return Math.floor(Math.random * 6) + 1;
  }
}
```

This is where mocking comes in. We will make a mock (fake version) of the `Roll.d6()` function so that we know exactly what value it will return. With a static value being returned for our dice role, we can write deterministic tests against our `fight` function.

---

## Solution

Here's what the test would look like:

```ts
const Roll = require('../src/js/utils/dice');
const { fight } = require('../src/actions');

test('Decreases enemy HP by 20 when 6 is rolled', () => {
  const originalRollD6 = Roll.d6;

  Roll.d6 = jest.fn(() => 6);

  const goblin = {
    hitPoints: 50,
  };

  fight(goblin);

  expect(goblin.hitPoints).toEqual(30);

  Roll.d6 = originalRollD6;
});
```

---

## Stubs

So what we're able to do with a stub is just replace the implementation of an existing method or function so that we can deterministically test another one. So we want to test the `fight` function. To make sure that we can assert the right thing and get the right answer every time, we just remove the randomness from the dice roll and test based on a fixed number. We can also test things about how the stub was used.

---

## Spies

Jest also has a `spyOn` method that gives you even more control over the stubbed function. Let's add this to our test:

```ts
const Roll = require('../src/utils/dice');
const { fight } = require('../src/actions');

test('Decreases enemy HP by 20 when 6 is rolled', () => {
  jest.spyOn(Roll, 'd6');
  Roll.d6.mockImplementation(() => 6);

  const goblin = {
    hitPoints: 50,
  };

  fight(goblin);

  expect(Roll.d6.mock.calls).toEqual([[]]);
  expect(goblin.hitPoints).toEqual(30);

  Roll.d6.mockRestore();
});
```

---

Spies provide us with all of the functionality that we were implementing ourselves prior. We now don't have to keep track of the original value of `Roll.d6` and Jest takes care of restoring it for us when we're done. a spies job is to give us information about _how_ the stubbed function was used. How many times it was called, what parameters were passed to it, etc.

---

## Mocks

Now to deal with full on mocks. A mock is something that we use when we want to create a test double of and entire module or object, in our case the `Roll` object. Let's alter our test one final time:

```ts
const Roll = require('../src/utils/dice');
const { fight } = require('../src/actions');

jest.mock('../src/utils/dice', () => {
  return {
    d6: jest.fn(() => 6),
  };
});

test('Decreases enemy HP by 20 when 6 is rolled', () => {
  const goblin = {
    hitPoints: 50,
  };

  fight(goblin);

  expect(Roll.d6.mock.calls).toEqual([[]]);
  expect(goblin.hitPoints).toEqual(30);

  Roll.d6.mockReset();
});
```

---

This method gives us a lot more control over the entire module that we're testing. As you can see, we could stub multiple methods and provide a lot more implementation details about `Roll` all at one time. It's not often that you will see mocks implemented like this though. Usually they are more universal so they can be reused. Let's see how to approach that.

---

## External Mocks

First, we need to make a directory called `__mocks__` directly adjacent to the file we'll be mocking and name the mock file the same thing as the production code. So in our case we need to make `src/utils/__mocks__/dice.js` and give it the following code:

```ts
module.exports = {
  d6: jest.fn(() => 6),
};
```

---

Now we can alter our test like so:

```ts
const Roll = require('../src/utils/dice');
const { fight } = require('../src/actions');

jest.mock('../src/utils/dice');

test('Decreases enemy HP by 20 when 6 is rolled', () => {
  const goblin = {
    hitPoints: 50,
  };

  fight(goblin);

  expect(Roll.d6.mock.calls).toEqual([[]]);
  expect(goblin.hitPoints).toEqual(30);

  Roll.d6.mockReset();
});
```

---

## Conclusion

Mocking is a really powerful tool for helping us isolate specific units of code so that we can deterministically test our units and make sure our code is covered so we can efficiently refactor. Keep in mind that, to some, mocking is usually a code smell (I am one of these people). Mocking has it's place for sure, but you should be doing your best to decouple your code in a way that avoids mocking as much as you can. Make sure to check out the [Jest Docs](https://jestjs.io/en/) to look at some more examples.

If you want to play around with the code from this example, that's located [here](https://github.com/WeCanCodeIT/jest-doubles.git)


Jest Test Doubles


Write pretty code without even thinking about it

## What is Linting

Linting is a term given to tools that handle style decisions in your code based on rules that you put in place. But what are we talking about when we discuss _code styling_?

Style in code can mean lots of things. Do you use tabs or spaces when indenting ne lines? How many spaces should a tab be equivalent to? Do you use semicolons or not? Is there a space between a function name and it's parentheses? The list goes on (seemingly) forever. These are decisions that are tedious to make in general, made even more tedious when you think about having to make them with every single project you're ever involved in.

Even scarier, what happens when you adopt a set of rules for yourself and become familiar with them only to then bring in more developers to your project? Do they know your rules? Do they care? Do they have their own rules?

![AHHHHHHHHHH!](/linting-resources/ahh.gif)

Yeah... This is bad. So what do we do?

---

## Linting Your Code

Linting to the rescue! But what is it?

Linting is a process by which you use a tool (and usually a configuration file) to predetermine certain style decisions about your code base.

_Linters_ are those tools. Linters exist in every major programming language and they were designed to solve exactly the problem that we're imagining. Good developers understand the benefits of having easily readable, consumable, understandable (otherwise know as clean) code. The problem is that all developers have a different idea of what this means. This makes keeping a team of developers coding to specific standard a super duper pain.

Linters allow us to define a very specific set of rules that get checked and usually fixed on saving the file. Once these rules are in place, the dev need do nothing more than save the current file and let the linter work it's magic. This way, we don't have to manually enforce style rules and we can worry about what really maters, writing code.

---

## ESLint

The first stop on our journey is going to take us to a tool called [ESLint](https://eslint.org/docs/user-guide/getting-started). ESLint is pretty much the gold standard when discussing linting in JS. It uses a collection of time tested tools to handle parsing (combing through) your code and applying any rules that you specify.

### Rules?

Rules come in the form of an ESLint [configuration file](https://eslint.org/docs/user-guide/configuring). Let's take a look at an example

```json
// .eslintrc

{
  "parserOptions": {
    "ecmaVersion": 6,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "rules": {
    "semi": "error"
  }
}
```

This configuration file tells ESLint which version of JS to measure by, how to treat the module system, what sort of flavors (super-sets) of JS to be aware of, as well as specific style rules. In this case we are able to use any features available in ES6 including ESModules, we can write `JSX` in our JS files, and if we don't include semicolons at the end of our statements, we get errors.

---

## Prettier

[Prettier](https://prettier.io/docs/en/install.html), as it's website states, is

> An opinionated code formatter

This means that you can specify your style rules, use your linter to check on them, and then use Prettier to enforce them.

### Configuration

Very similar to ESLint, Prettier has a configuration file that it will look for to execute style rules. Let's take a look at an example:

```json
// .prettierrc

{
  "trailingComma": "es5",
  "tabWidth": 4,
  "semi": false,
  "singleQuote": true
}
```

These rules should probably reflect the choices that you make in your ESLint config file.

---

## ESLint _**AND**_ Prettier

Wouldn't it be great if these tools had some sort of integration library that just matched everything up and made everything super easy and smooth to implement? I imagine you [see where I'm going...](https://prettier.io/docs/en/integrating-with-linters.html)

Enjoy your new clean experience!

---

## Docs

- [ESLint](https://eslint.org/)
- [Prettier](https://prettier.io/)


Linting


Pairing Keys with Values

## What is it?

A map is a construct that allows us to pair keys and values. Maps are sometimes referred to as tables or dictionaries.

Let's say that I have the following student information:

| Student ID | Name            |
| ---------- | --------------- |
| 23A52      | Harvey Dent     |
| 68Z29      | Jessica Jones   |
| 57W85      | J Jonah Jameson |

Each student will have a unique ID, but multiple students could have the same name.

---

## How do I build it?

Each student ID (_key_) corresponds to a student name (_value_). Each of these key/value pairs is known as a map _entry_. In Java, we can create a `Map` to hold these entries.

| **_key_ <br>↓↓↓** <br>Student ID | **_value_ <br>↓↓↓** <br>Name |
| -------------------------------- | ---------------------------- |
| 23A52                            | Harvey Dent                  |
| 68Z29                            | Jessica Jones                |
| 57W85                            | J Jonah Jameson              |

`Map` is a _parameterized type_, so we declare it thus:

```ts
const students = new Map();
```

To add students, we use `set(key, value)`:

```ts
students.set('23A52', 'Harvey Dent');
students.set('68Z29', 'Jessica Jones');
students.set('57W85', 'J Jonah Jameson');
```

Let's look at what we've got:

```ts
console.log(`The students are ${students}`); // prints "The students are [object Map]"
```

`[object Map]` is the default response from the `toString()` method. The good news is that we do have a `Map`. We'll take a look at how to get a more informative response from `toString` later.

---

## What is it Good For?

We know that we could use an array or an object to hold collections of things, so why `Map`?

Imagine we wanted to look up students by name from our example student information.

First, we'd need to create an object to hold student ID and name:

```ts
class Student {
  constructor(id, name) {
    this.id = id;
    this.name = name;
  }
}
```

Assuming we have populated a collection of `Student` objects, to find a student by ID, we'd do something like this:

```ts
    for(let current of students) {
      if("23A52" === current.id)) {
        console.log("Found the student!");
        console.log("The student's name name is " + current.name);
        break;
      }
    }
```

Maps make this easier. Also, what if there were 20,000 students and the one we were looking for was 19,998th in our list? Maps also perform better for doing lookups like this.

---

## Finding our Student

`Map` defines a method called `get`. Given a key, the `get` method will return its value.

Assuming we have populated a `Map` named `students` whose keys are IDs (`String`s) and whose values are student names (`String`s), finding a student by ID with a `Map` is simple:

```ts
const studentName = students.get('23A52');
console.log('Found the student!');
console.log("The student's name name is " + studentName);
```

`Map` keys can not be duplicated and we don't care about their order, so we use a `Set` to represent them.

`Map` values can be duplicated, but their order isn't significant. These are represented by an `Array`.

---

## Keys, Values, and Entries

To look at a `Map`s keys, we call its `keys` method:

```ts
const studentIds = students.keys();
console.log('The student IDs are ' + studentIds);
```

To look at a `Map`'s values, we call its `values` (Surprise!) method:

```ts
const studentNames = students.values();
console.log('The student names are ' + studentNames);
```

If we want to iterate over all (or many) of the entries in a map, looking at both key and value, it is intuitive to do something like this:

```ts
for (let id of students.keySet()) {
  console.log("This student's name is " + students.get(id));
}
```

The problem with this approach is that it will result in poor performance. (**This is a common interview question.**) This is because looking up the value for a key requires effort, and this code would look up the value for every key.

If we want to iterate over all keys and values, we do something like this instead:

```ts
for (let entry of students.entries()) {
  console.log("The student's id is " + entry[0]);
  console.log("The student's name is " + entry[1]);
}
```

---

## Other Useful `Map` Methods

| method        | what does it do?                            |
| ------------- | ------------------------------------------- |
| delete(_key_) | removes the entry associated with _key_     |
| has(_key_)    | returns true if this map contains the _key_ |
| size()        | returns the number of entries in the map    |
| clear()       | removes all entries from the map            |

---

## WeakMap

JS also has the concept of `WeakMap`s. These operate almost the exact same way as our standard `Map`s. The biggest difference is that these Maps can only have `Object`s as keys **NO PRIMITIVES**. There are also fewer methods available:

| method              | what it does                                      |
| ------------------- | ------------------------------------------------- |
| delete(_key_)       | removes entry                                     |
| has(_key_)          | returns boolean value for existence of key        |
| get(_key_)          | returns value associated with key                 |
| set(_key_, _value_) | sets given value to assigned key (must be object) |


Maps


Approaching our application design with TDD

## Testing our Node Applications

Test driving our applications is important (which, hopefully, you know at this point). Testing web applications is even more important as there are more moving pieces and connections being used in the application life-cycle. So having efficient tests helps to ensure that your application is working as expected and also alerts you to specifically what the problem is if something were to go wrong. Let's get started with how we would go about that.

---

## Follow Along

[Node Testing Example](https://github.com/WeCanCodeIT/node-testing)

---

## Getting Started

Now that we have an application up and running, let's start from square one. What do we even bother testing? Everything?

Certainly not. There are all sorts of things we don't need to worry about testing. The first thing we can skip testing are dependencies. Any library we are going to bring into our application is something that has been developed by a team that has thoroughly tested their library/framework. Next, we don't need to test data mapping. Our models, for example, are just going to hold properties of the entities in our application. This means we can pretty much forgo testing inside of them unless they contain some sort of logic. Our views are generating HTML and this is happening through a dependency, so no tests there. (We will be reaching into them to test other pieces of our app though) So what do we test? Well, everything else.

Essentially our MVC structure is what we need to write tests for. This is where the logic of our application exists. So, therefore, this is where we need to have confidence in our application. Let's dig into exactly what this is going to mean for us.

---

## MVC Testing

Testing your MVC applications is a different process from testing a simple command line environment application. In this environment we are testing the relationships between the pieces more than the pieces themselves. This is called...

---

## Integration Testing

Which is the next step in our testing pyramid:

![Software Testing Pyramid](/testing-resources/testing-pyramid.png)

Our integration tests will focus on whether or not our applications pieces respond the way that they are supposed to when we make requests from our client environment. So we will be using our integration tests to make requests to our application and then making assertions on what methods our routers call, what our controller methods do once called, and whether our views render the correct data from our models.

---

## How???

I'm glad you asked! For this process, we're going to need a way to hook into our application from our testing environment and actually hit endpoints (i.e. `http://localhost:3000/games/2`) and then be able to measure the result in a way that we can make test assertions on it. For that we'll need a new tool in our testing arsenal.

---

## Supertest

Supertest is a library that we can install with npm (`npm i supertest` from project root). It allows us to make fake requests to our application as if it were in a server environment and then make test assertions on the response we get back from our server. In this way we can measure that our MVC environment behaves exactly as we intend and also, if we accidentally break something during development, we know as soon as we do and how we did. Let's see it in action.

---

## First Test

Our application is pretty bare right now. Let's start with our index route. This one will be pretty simple as all we want to do for our index route is redirect to our first model collection page. We'll be working with games in this example so we want to redirect to `/games`. Let's see what that would look like:

```ts
// index-router.test.js

const request = require('supertest');
const app = require('../../../app');

describe('index', () => {
  test('redirects', (done) => {
    request(app)
      .get('/')
      .end((err, res) => {
        expect(res.status).toBe(302);
        expect(res.headers.location).toMatch('/games');
        done();
      });
  });
});
```

Let's talk about what's going on here and then look at how to make this test pass.

1. First we're importing the code we'll need to write tests. We're naming `supertest` request since that's what it will be doing for us. We're importing our application file so that we can simulate requests to it.
2. Inside of our test block we are passing our `app` to `supertest` (or `request`) so it has our context.
3. We're then making a get request to our application at the root (`.get('/')`)
4. We're then ending our request and getting the response from our application
5. We're then making an assertion that `res.status` is `302` (proper HTTP status code)
6. We're then also asserting that `res.headers.location` is `/games` (where we're redirecting)
7. We're calling the done method which we get from Jest to signal that any async behavior is finished

Essentially we're asserting that a get request to the root of our application results in a redirect to `/games`. Currently this fails...

---

## Red => Green

Let's make it pass!

```ts
// index-router.js

const express = require('express');
const router = express.Router();
class IndexController {
  redirect(req, res) {
    res.redirect('/games');
  }
}

const indexController = new IndexController();

router.get('/', indexController.redirect);

module.exports = router;
```

This code builds out the proper router and controller method to make our test pass.

---

## Refactor

The most obvious refactor I see at this point would be to move the controller to it's own file. Let's move that to `index-controller.js` in the `controllers` directory.

```ts
// index-router.js

const express = require('express');
const router = express.Router();
const IndexController = require('../../controllers/index-controller');

const indexController = new IndexController();

router.get('/', indexController.redirect);

module.exports = router;

// index-controller.js

class IndexController {
  redirect(req, res) {
    res.redirect('/games');
  }
}

module.exports = IndexController;
```

This way we are encapsulating each piece of functionality so that it's easier to debug or add to later.

---

## Our `/games` Route

So now we have an application that redirects to `/games` but doesn't do much else. Ultimately we want our `/games` endpoint to render a template that will display a list of all of our games. So let's test drive the beginning of that!

```ts
// games-router.test.js

const request = require('supertest');
const app = require('../../../app');

describe('games', () => {
  test('successfully renders "games" template', (done) => {
    request(app)
      .get('/games')
      .end((err, res) => {
        expect(res.status).toBe(200);
        expect(res.headers['content-type']).toContain('text/html');
        expect(res.text).toContain('<title>Games</title>');
        done();
      });
  });
});
```

Let's break down our assertions so we can better understand how to go about making them pass.

### `expect(res.status).toBe(200)`

Here, as in the previous test, we're just checking to see that we get the proper HTTP status returned. This time we want `200` because we're hoping for a successful connection.

### `expect(res.headers['content-type']).toContain('text/html')`

With this assertion we're checking to see that the content we're receiving is `html` once we can make this pass, we know that we're returning an `html` page being rendered from one **_SOME_** template in our application.

### `expect(res.text).toContain('<title>Games</title>')`

With this assertion we're asserting specifics about our rendered `html`. We can make assertions about the dynamic pieces of our application based on how this `html` rendered. In this case, we're saying that we expect there to be a `title` element and that it should have the text content `Games`. When this passes, we know that we're rendering the expected template as well as using the dynamic info we pass to it!

So, with all of that in mind, let's make it pass!

---

## Red => Green

We'll need to make a few new files to make this one pass:

```ts
// games-router.js

const express = require('express');
const router = express.Router();

const GamesController = require('../../controllers/games-controller');

const gamesController = new GamesController();

router.get('/', gamesController.readAllGames);

module.exports = router;
```

This router handles any requests to our `/games` endpoint.

To use this, we'll have to make an update to our `app.js` file. We need to import and use this router just like the `index-router`

```ts
const createError = require('http-errors');
const express = require('express');
const path = require('path');
const cookieParser = require('cookie-parser');
const logger = require('morgan');

const indexRouter = require ('./src/routes/index/index-router');
/** * import our new router */

const
gamesRouter = require('./src/routes/games/games-router');

const app = express();

// view engine setup
app.set('views', path.join(__dirname, 'src/views'));
app.set('view engine', 'hbs');

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(\_\_dirname, 'src/public')));

app.use('/', indexRouter);

/**
 * tell out app to use our router
 */
app.use('/games', gamesRouter);

// catch 404 and forward to error handler
app.use(function (req, res, next) {
    next(createError(404));
});

// error handler
app.use(function (err, req, res, next) {
    // set locals, only providing error in development
    res.locals.message = err.message;
    res.locals.error = req.app.get('env') === 'development' ? err : {};

    // render the error page
    res.status(err.status || 500);
    res.render('error');
});

module.exports = app;
```

Next we need to add the logic for the router in the controller.

```ts
// games-controller.js

class GamesController {
  readAllGames(req, res) {
    res.render('games');
  }
}

module.exports = GamesController;
```

All of this will get our first assertion passing since we now have instructions for what to do with a GET request to `/games`. Let's get our second assertion passing.

---

## Make the Second Assertion Pass

To get the second assertion passing, we need to actually get some `html` rendering. We can do that as simply as making the corresponding template that we reference in our controller (`games`). We will put this in the `views` directory. We aren't going to add any content to this template. You will see some `html` rendered. Remember, this is because Handlebars by default passes every template through the `layout.hbs` file if one exists.

Creating this file is enough to make our second assertion pass because it changes the content-type of our response. Let's move on to the third.

---

## Make the Third Assertion Pass

Our third assertion technically makes an assertion on the model that we're passing to our view. This is because we are asserting some specific `html` that we are expecting to be rendered based on model data we provide in the controller. For this we need to add some model data to our controller:

```ts
// games-controller.js
class GamesController {
  readAllGames(req, res) {
    res.render('games', { title: 'Games' });
  }
}

module.exports = GamesController;
```

Note that we're passing an object to the `.render()` method now. This is where we can put any model data that we may want to use in our views. We will be adding much more complex data to this later, but for the sake of this demo, we'll keep it simple.

With all of this in place, all of our tests should be passing!

---

## Conclusion

Congratulations! You just wrote and passed your first integration tests! Integration tests are extremely important especially as you continue to scale your web applications. Make sure to continue to explore and see just what kinds of assertions you can make about your application!

### Challenge

Continue to test drive and build this application out to the point that you can print a list of games that you create in our newly created template. Once you've successfully done that, create a single game template that will render each individual game!


Node Testing


An Introduction

## JavaScript Everywhere

> Node.js is an open-source, cross-platform JavaScript run-time environment that executes JavaScript code outside of a browser. -Wikipedia

Node is a **runtime environment for JavaScript** that runs on the **server** instead of the client.

It's built on top of Google's V8 JavaScript engine, which is also used to run JavaScript inside of Google Chrome.

You can run it on Mac, Windows, Linux and there are even some experimental projects to [run Node on other platforms like Android and iOS](https://code.janeasystems.com/nodejs-mobile).

---

## Why, oh why, would you want JS everywhere?

I wont lie, JavaScript used to be **awful**.

I'm happy to report that's not the case anymore!

---

## ES2015 was the turning point

ES2015 added:

- Classes
- Block scoped variables (`let` & `const`)
- The ability to conveniently split code apart into separate `import`able files and the ability to `export` specific things from a file.

---

## Benefits

### Speed

Node is fast.

Depending on how you measure, it can be twice as fast as compiled languages like C, C# and Java and orders of magnitude faster than interpreted languages like Python and Ruby.

### Simplicity

Run this in git bash.

```zsh
echo "console.log('hello world');" > hello.js && node hello.js
```

There's your classic hello world!

---

## It's just JavaScript

JavaScript is basically your only choice for client side scripting inside a web browser, so **lots** of people already know the language.

It's an easy tool for most teams to pick up.

---

## Asynchronous and Simple

In most traditional languages all instructions are blocking unless you write code that allows things to run on another thread.

Node uses a single-thread and callback functions to simplify asynchronous code without blocking anything.

Because of this approach, a Node.JS web server can handle **thousands** of concurrent connections without the need to introduce code that maintains thread concurrency.

**Blocking is the exception with Node**

---

## So. Many. Packages.

The `npm` registry contains over 800,000 libraries that you can pull into your project by simply running a command like `yarn add express` at the command line.

Here's a fully functional "Hello world!" web server using the aforementioned `express` package:

```ts
const express = require('express');
const app = express();

app.get('/', function (req, res) {
  res.send('Hello World');
});

app.listen(3000);
```

---

## Bonus: Nodemon

Nodemon (pronounced like Pokémon) is an amazing package that essentially sits on top of node and refreshes your project for you anytime you make a change. So instead of making changes to your application, shutting down the current server instance, and then starting a new one, Nodemon simply watches for changes in the file system and goes through that process once it detects one.

---

## Installing Nodemon

You can install Nodemon globally on your machine so that it's available everywhere, but I prefer to save it as a local dependency in every project. That way, if someone else clones my project and wants to work on it, I don't have to make any assumptions about their machine because I know all of the necessary dependencies are installed locally. So, we can add Nodemon to a project like so:

```zsh
$ npm i nodemon
```

Once it's installed we can use it like this:

```zsh
$ nodemon index.js # Instead of using `node index.js`
```

Now Nodemon will watch for any changes in any connected files and update the application when they happen! Such a time saver.

---

## In Closing

JavaScript is an extremely popular language that has grown leaps and bounds over the last 4 years. Additionally, the Node eco-system includes the largest package repository in the world with over 800,000 packages hosted on NPM.

By using the Node run-time, we are no longer limited to using JavaScript inside the web browser. Node is a solid choice for lots of tasks, ranging from web servers to build automation and of course client-side coding.

We can run JS everywhere. It's fun. It's productive, and it's rapidly evolving.


Node


Managing Dependencies Efficiently

## Node Package Manager

NPM is the package manager that Node comes bundled with. We use this piece of software to install dependencies in our code. This saves us the trouble of having to find and manually download and install packages that we want to use in our code.

---

## Usage

Once you install Node, you also install NPM by default. You can use NPM from your terminal. Let's walk through it's usage with an example project. Open Git Bash and let's make a new project.

1. Navigate to `~/wcci/code`.
2. Make a new directory: `mkdir hello\npm && cd hello\npm`
3. Initialize a new Node project: `npm init -y`
4. Open in VSCode: `code .`.

Once you do this you will have a new file in your directory. Let's explore it.

---

## package.json

`package.json` is essentially a configuration file for NPM. It allows you to manage dependencies and details of your project as well as declare scripts that can be run in your terminal.

```json
{
  "name": "hello\npm",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "Don Hamilton III <donhamiltoniii@gmail.com> (https://donhamiltoniii.com)",
  "license": "ISC"
}
```

---

## Adding Dependencies

We can add dependencies using NPM. In fact, this is the bulk of what we use NPM for. Let's add Parcel to this project so we can write modular code.

```zsh
$ npm i parcel-bundler
```

Once that installs, we will have a new directory called `node_modules`. This is where we store dependencies and where node will look for them when we reference them in our code.

---

## Referencing Dependencies

To see how we reference dependencies in our code, let's add one more:

```zsh
$ npm i lodash
```

Once this downloads, make a file called `index.js` in the project root and add the following code.

```ts
import _ from 'lodash';

_.forEach(['Hello', 'NPM!'], (val) => console.log(val));
```

Node will now look for that dependency in `node_modules` when you run the program

---

## Conclusion

NPM is a tremendously important tool. It saves us so much time and effort by organizing and building our projects for us. Check out the [documentation](https://docs.npmjs.com/) to familiarize yourself further.



Operating and Expressing!

## Lesson Goals

- Learn about the different operators and their functions.
- Become familiar with JavaScript syntax.

---

## Arithmetic Operators

If variable _a_ holds 10 and variable _b_ holds 15, then:

| Operator | Operation           | Description                                  | Expression | Result |
| -------- | ------------------- | -------------------------------------------- | ---------- | ------ |
| +        | addition            | adds two operands                            | `a + b`    | 25     |
| -        | subtraction         | subtracts second operand from the first      | `a - b`    | -5     |
| \*       | multiplication      | multiplies the operands                      | `a * b`    | 150    |
| /        | division            | divides first operand by second operand      | `b / a`    | 1      |
| %        | modulus (remainder) | returns the remainder after integer division | `b % a`    | 5      |

---

## Increment and Decrement Operators

If variable _a_ holds the value 42, then:

| Operator | Operation | Description                                          | Expression | Equivalent to... | `a`'s value afterwards |
| -------- | --------- | ---------------------------------------------------- | ---------- | ---------------- | ---------------------- |
| ++       | increment | adds one to the value its `int` operand holds        | `a++`      | `a = a + 1`      | 43                     |
| ‐‐       | decrement | subtracts one from the value its `int` operand holds | `a--`      | `a = a - 1`      | 41                     |

---

## Loose Equality Operators

If variable _a_ holds 10, then:

| Operator | Operation | Description                                | Expression | Result |
| -------- | --------- | ------------------------------------------ | ---------- | ------ |
| ==       | equal to  | evaluates true if the two values are equal | `a == 10`  |        |

`a == '10'`  
`a == 11`  
`a == '11'` | true  
true  
false  
false != | not equal to | evaluates true if the two values are _not_ equal | `a != 10`  
`a != '10'`  
`a != 11`  
`a != '11'` | false  
false  
true  
true

---

## Strict Equality Operators

If variable _a_ holds 10, then:

| Operator     | Operation       | Description                                              | Expression | Result |
| ------------ | --------------- | -------------------------------------------------------- | ---------- | ------ |
| ==           | strict equal to | evaluates true if the two values **and** types are equal | `a === 10` |        |
| `a === '10'` | true            |                                                          |            |        |

false != | strict not equal to | evaluates true if the two values **and** types are _not_ equal | `a !== 10`  
`a !== '10'` | false  
true

---

## Relational Operators

If variable _a_ holds 10 and variable _b_ holds 15, then:

| Operator  | Operation                | Description                                                                             | Expression | Result |
| --------- | ------------------------ | --------------------------------------------------------------------------------------- | ---------- | ------ |
| >         | greater than             | evaluates to true of the first operand is greater than the second operand               | `a > b`    | false  |
| >=        | greater than or equal to | evaluates to true of the first operand is greater than _or equal to_ the second operand | `a >= b`   |        |
| `a >= 10` | false                    |                                                                                         |            |        |

true < | less than | evaluates to true of the first operand is less than the second operand | `a < b` | true <= | less than or equal to | evaluates to true of the first operand is less than _or equal to_ the second operand | `a <= b`  
`a <= 10` | true  
true

---

## Logical Operators

If variable _a_ holds `true` and variable b holds `false`, then:

| Operator                      | Operation       | Description                                  | Expression | Result |
| ----------------------------- | --------------- | -------------------------------------------- | ---------- | ------ |
| &&                            | conditional AND | evaluates to true if both operands are true; |            |        |
| otherwise, evaluates to false | `a && b`        |                                              |            |        |
| `a && true`                   | false           |                                              |            |        |

true || | conditional OR | evaluates to true if either operand is true;  
otherwise, evaluates to false | `a | | b`  
`b | | false` | true  
false

---

## Translating English to JavaScript

Let's translate English statements into JavaScript. First, we'll do one together.

Start by writing the statements as comments. Here's an example:

```ts
// Jessica is 23 years old.
const jessicaAge = 23;

// Sam is 47.
const samAge = 47;
// Jessica is younger than Sam.
console.log(jessicaAge < samAge);
```

---

## Let's break it down...

### Assigning a value for Jessica's age:

The word "is" means equals. How do we represent assignment?

```ts
// Jessica is 23 years old.
```

If Jessica "is 23", then Jessica's age = 23:

```ts
const jessicaAge = 23;
```

### Comparing Jessica's and Sam's ages:

To say Jessica _is younger than_ Sam means we are comparing their ages. Which operator would we use to compare them?

```ts
// Jessica is younger than Sam.
```

We use the "less than" relational operator to perform this comparison:

```ts
console.log(jessicaAge < samAge);
```

---

## Let's look at the syntax

The statement:

```ts
const jessicaAge = 23;
```

reads as "Jessica's age is 23."

---

`log` is a _method_, so it ends with a set of opening and closing parentheses:

```ts
console.log(jessicaAge < samAge);
```

Inside the parentheses, we find the method _arguments_. For the `log` method, this is what we want to print. In this case, that's whether Jessica is younger than Sam.

---

## Your turn! Try translating these word problems into JavaScript.

- Lisa is cooking muffins. The recipe calls for 7 cups of sugar. She has already put in 2 cups. How many more cups does she need to put in?
- At a restaurant, Mike and his three friends decided to divide the bill evenly. If each person paid $13 then what was the total bill?
- How many packages of diapers can you buy with $40 if one package costs $8?
- Last Friday Trevon had $29. Over the weekend he received some money for cleaning the attic. He now has $41. How much money did he receive?
- Last week Julia ran 30 miles more than Pranav. Julia ran 47 miles. How many miles did Pranav run?
- How many boxes of envelopes can you buy with $12 if one box costs $3?
- After paying $5.12 for a salad, Norachai has $27.10. How much money did he have before buying the salad?

---

## Just keep coding! Just keep coding!

- 331 students went on a field trip. Six buses were filled and 7 students traveled in cars. How many students were in each bus?
- Aliyah had $24 to spend on seven pencils. After buying them she had $10. How much did each pencil cost?
- The sum of three consecutive numbers is 72. Print these numbers consecutively to the console.
- The sum of three consecutive even numbers is 48. What is the smallest of these numbers?
- Maria has boxes. She buys seven more. A week later, half of her boxes are destroyed in a fire, leaving her with 22 boxes. With how many did she start?


Operators and Expressions


How to handle Async code in JS

## Promises

`Promise`s in JS are a way for us to deal with asynchronous requests inside of our applications while still maintaining total control over what it is we're doing.

---

## What does a `Promise` look like?

```ts
const getEvenRandomNumberBetweenTwoAndTen = new Promise((resolve, reject) => {
  const randomNumber = Math.floor(Math.random * 10 + 1);
  const isEven = (number) => number % 2 === 0;

  isEven(randomNumber)
    ? resolve(`Your random even number is ${randomNumber}`)
    : reject(`Number returned was odd.`);
});

getEvenRandomNumberBetweenTwoAndTen()
  .then((res) => console.log(res))
  .catch((err) => console.error(err));
```

In this example we are going to create a random number and check to see whether or not it is even. We are then either going to successfully print the random even number or error indicating the number was odd.

---

## Why use Promises?

It may seem like there is an easier way to accomplish the previous example. That is true. We could replace the behavior with an `if/else` block and achieve the same goal in this case. The difference is that by using a `Promise` we made this process Asynchronous (non-blocking). Since the previous example is not very memory intensive, we probably wouldn't see much performance difference by not using a Promise. But let's think of a scenario that we would want the Promise there.

What if, in the future, we want to make this random number generator more complex. Maybe we're generating a number based on a group of users XP, or how many times a given word appears in a body of text, or maybe maybe we need to query multiple APIs for values before generating this number.

This is now more memory intensive and we probably don't want to pause our application while this data is compiled.

---

## Sync (Blocking) vs. Async (Non-Blocking)

Synchronous requests are the type of requests we are used to using so far. Your browser executes your JS code line after line, top to bottom. We don't start one process until we finish the previous. This is referred to as blocking as one process "blocks" all other processes from running. In most cases, this is fine, in fact, preferred.

Asynchronous code is non-blocking. This means that you can begin a process, let it run in the background, and let it notify you once it has a response from said request. This way you can continue to run other processes that may be unrelated, or at least don't need the data you're working on getting immediately to perform.

---

## `.then()`

Promises have two built in methods that we are going to talk about. These methods handle the very important job of piping. Piping data is a term used to describe the passing of some piece of data to another function or _handler_. These handlers are responsible for mutating this data somehow and passing it on to the next handler.

So, in our case, when we get a positive response from our promise, we pass that value on to a `.then()` method and do something with it. If, on the other hand, we get a `reject` instead of a `resolve` then...

---

## `.catch()`

Then we use `.catch()`. This is essentially a fail-safe. So if **ANYTHING** breaks while we're requesting information, waiting for a response, or processing the response, we receive some useful information as to what the problem actually is. This `.catch()` method is going to receive any errors that occur in this whole process and allow you to do something with them.

---

## An Example

Let's take a look at the following [example](https://mdn.github.io/js-examples/promises-test/) and examine the code in our browsers devtools (Open the `script` tag in elements).

---

## Conclusion

So, `Promise`s allow us to make asynchronous code, which is really beneficial for us in JS. It allows us to execute more concurrent processes which allows us to make more robust applications. This is how we build web applications that function the way that native applications do.


JS Promises


Build a custom event library and implement it with something. Web framework? Maybe something simpler. Either way. This is a great intro to reactive architecture before introducing React.


Publish/Subscribe Reactive Interaction


all the way down

## A Basic Component

```tsx
// App.js
import React from 'react';

function App() {
  return (
    <div>
      <h1>Welcome to React</h1>
      <p>This is some basic content.</p>
    </div>
  );
}
export default App;
```

We use ES2015 (ES6) style `import`/`export`s to include `react`.

Our `App` function returns what looks like `HTML` but is actually something called `JSX`.

---

## JSX

JSX lets us blur the lines between JavaScript and HTML by allowing us to write code like this:

```tsx
const element = <h1>Hello, world!</h1>;
```

This is a variable that's holding a reference to an h1 element.

We can define that JSX inline...

```tsx
function Header() {
  return (
    <header>
      <div className="logo">
        <img src="static/img/logo.png" alt="Logo" />
      </div>
    </header>
  );
}

export default Header;
```

---

## Rendering a JSX Variable

We can also render a variable that's holding some JSX like this:

```tsx
import React from 'react';

function App() {
  const logo = <img src="static/img/logo.png" alt="Logo" />;
  return (
    <header>
      <div className="logo">{logo}</div>
    </header>
  );
}

export default App;
```

The curly braces around the `{logo}` reference let us write JavaScript inside our JSX.

---

## Rendering a Sub-Component

We can also import a `Component` from another file and render it like so:

```tsx
import Logo from './Logo';
function Header() {
  return (
    <header>
      <Logo />
    </header>
  );
}

export default Header;
```

That's really powerful, because it lets us break a complex UI down into smaller pieces.

React gives us the ability to use encapsulation and abstraction in tandem with the expressiveness of HTML.

---

## `class` and `className` in JSX

Did you notice the `className` attribute in the earlier example?

```tsx
function Header {
    return (
    <header>
        <div className="logo">
            <img src="static/img/logo.png" alt="Logo" />
        </div>
    </header>
    );
}

export default Header
```

Since `class` is a keyword in JavaScript, we can't use the traditional css `class` attribute in `JSX`.

Instead, we use `className` which behaves as you would expect.

---

## this.props

Props allow data to flow from parent components into their children.

Children should **NEVER** make changes to props.

What if we had both a black and white and color version of our logo `Logo` component.

```tsx
function Logo() {
  const imageUrl = this.props.isColor
    ? '/images/logo-color.png'
    : '/images/logo-bw.png';
  return (
    <div className="logo">
      <img src={imageUrl} alt="Logo" />
    </div>
  );
}

export default Logo;
```

Now, when someone wants to use the logo they can just set the `isColor` property to `true` or `false`.

---

Of course, we could pass true instead.

```tsx
function Header() {
  return (
    <header>
      <Logo isColor={true} />
    </header>
  );
}

export default Header;
```

If we include the `isColor` attribute with no value, React will assign it as being `true`.

This is equivalent to the above example:

```tsx
function Header() {
  return (
    <header>
      <Logo isColor />
    </header>
  );
}

export default Header;
```

---

## Importing `CSS`

We can write small, focused `css` files that live beside our components.

By importing these css files, they'll be bundled up and included in our application as a single css file.

---

## JSX and Separation of Concerns

JSX usually turns heads when people first see it. It's been steadily beat into everyone's head that HTML, CSS, and JS are separate things that each belong in their own file. In JSX it doesn't exactly work that way. But you can still pay attention to separation of concerns.

Imagine if we were adding a `CustomerTestimonial` widget to an application.

- `index.html`: Modify to add some HTML that structures the Customer Testimonial.
- `index.css`: Modify the CSS to add some styles for the Customer Testimonial.
- `index.js`: Modify the JS to add behavior to the Customer Testimonial (maybe)

Is that really a [separation of concerns](https://en.wikipedia.org/wiki/Separation_of_concerns), though?

If we wanted to add `CustomerTestimonial` to another page on our app, how would we go about it?

Perhaps we don't have as great a separation of concerns as we thought.

---

## Making Things Modular

In React, we might create a `Component` that represents a customer testimonial widget like so:

```tsx
import React from 'react';
import './CustomerTestimonial.css';

function CustomerTestimonial() {
  const defaultImageUrl = '/img/default-customer-image.png';
  const { quote, name, company, imageUrl } = this.props;
  return (
    <div className="testimonial">
      <img src={imageUrl || defaultImageUrl} alt="Customer" />
      <div className="quote">
        <p>{quote}</p>
        <span className="name">{name}</span>
        <span className="company">{company}</span>
      </div>
    </div>
  );
}

export default CustomerTestimonial;
```

---

## Using the CustomerTestimonial

We can use this component anywhere we want in our application by simply importing it and using it.

```tsx
import React from 'react';
import CustomerTestimonial from './CustomerTestimonial';

function App() {
  return (
    <CustomerTestimonial
      imageUrl="/img/foo.jpg"
      quote="Totally not bad."
      name="Chad McChad"
      company="Chad's Light Bulbs, Inc"
    />
  );
}

export default App;
```

First, we import the component.

Next we reference the component as if it were an HTML component inside JSX.

We can even pass data into our component via it's `props`

### Encapsulation

With a single line of code,

```ts
import CustomerTestimonial from './CustomerTestimonial';
```

We can import that component anywhere we need it, and we'll get everything that the component needs to do it's job.

That's pretty awesome.

---

## Conclusion

Components are at the heart of absolutely every React application you will ever write. It's also slowly creeping in as the default method of organization in many frameworks and even in the DOM API with [Web Components](https://www.webcomponents.org/). So getting comfortable with this ecosystem is going to pay off in the long run for building web applications.


React Components


An introduction to React

## React

React was first open-sourced by Facebook in 2013.

React went against the traditional MVC model that Angular, Ember, and Backbone were using.

Both Angular and Ember have since nudged closer toward React's architecture.

---

## Component-based Architecture?

It sounds fancy, but it's actually a very simple concept.

- A React application is a tree of components.
- There is one root component that is inserted into the DOM.
- Each component knows how to `render` itself.
- Components may render other components beneath them.
  - These components are child components in the tree.

We'll talk more about components, how we create them and how they interact with each other to create your application as we go.

---

## What Makes React Awesome?

The [2018 StackOverflow Developer Survey](https://insights.stackoverflow.com/survey/2018/#technology-most-loved-dreaded-and-wanted-frameworks-libraries-and-tools) found react to be one of the most loved technologies in use today.

- The feedback loop is very tight.
- It avoids a lot of complexity by avoiding bi-directional binding.
- There's a great ecosystem around it.
- You get to use some of the latest ES features out of the box.

---

## Time to set up a React app

We're going to use a tool called `create-react-app` to bootstrap (not the CSS framework...) our React application so we don't have to worry about all of the configuration stuff

## Instructions

1. From your command line, at the location you want to create your project, run the following command: `npx create-react-app <your-project\name>`
2. Change directories into your project directory: `cd <your-project\name>`
3. Start your project!: `npm start` or `yarn start`

---

## Conclusion

You're now ready to start programming React! Follow along with the rest of the slides to get a good idea of what React does for you.


Hello, React!


## The Case for State

Up to now, we've learned enough that we could build what is effectively a static website out of small, cohesive building blocks.

That's pretty cool, but we aren't here to build websites that are static.

We want to build applications that are interactive and _change over time_.

---

## `this.state`

React `Component`s have a `state` object that's used to control how the component renders and behaves.

A `Component` can never change its `props`, but `Component`s can change their state.

`state` is what allows us to create components with behavior.

---

## A Counter

Let's build a basic counter component. It will:

- Display the current total.
- Allow the user to increment the total.
- Allow the user to decrement the total.

What should the `state` look like for this component?

---

## Hooks!

What number should our count start at?

Thats our default state.

We set our default state our component using the `React.useState()` hook, like so:

```ts
import React from 'react';

function App() {
  const [count, setCount] = React.useState(0);
  return <main>TODO</main>;
}

export default App;
```

The first thing we notice is that `React.useState()` is giving us back an array containing whatever our initial state is (in this case 0) as well as a `setter` for that value.

---

## Accessing State

You can use your state inside your `Component`s by simply accessing the variable name.

Let's print out our count by grabbing it from our destructured array:

```ts
import React from 'react';

function App() {
  const [count, setCount] = React.useState(0);

  return (
    <main>
      <section className="counter-container">
        <h2 className="counter-container__count">{count}</h2>
      </section>
    </main>
  );
}

export default App;
```

---

## `setCount`

We will now add an `+` button that adds `1` to `count` via the `setCount()` method.

```ts
import React from 'react';

function App() {
  const [count, setCount] = React.useState(0);

  const increment = () => {
    setCount(count + 1);
  };

  return (
    <main>
      <section className="counter-container">
        <h2 className="counter-container__count">{count}</h2>
        <button onClick={increment}>+</button>
      </section>
    </main>
  );
}

export default App;
```

Our button has an `onClick` attribute, similar to regular HTML, except instead of a string we have `{increment}`.

We are actually passing a reference to the `increment` function that's defined here.

---

## Next, we decrement

The decrement functionality is very similar. Give it a shot on your own.

---

## Separating State Management & Presentation

The app works, but taking a look at the `App` component thru the lens of the [Single Responsibility Principle](https://en.wikipedia.org/wiki/Single_responsibility_principle) it seems to have multiple responsibilities:

```ts
import React from 'react';

function App() {
  const [count, setCount] = React.useState(0);

  const decrement = () => {
    setCount(count - 1);
  };

  const increment = () => {
    setCount(count + 1);
  };

  return (
    <main>
      <section className="counter-container">
        <h2 className="counter-container__count">{count}</h2>
        <button onClick={decrement}>-</button>
        <button onClick={increment}>+</button>
      </section>
    </main>
  );
}

export default App;
```

State Management & Presentation

---

## Containers & Presentational Components

It's a common pattern to split your components into one of two categories:

- Containers ("Smart" Components)
  - Concerned with how things _work_ (behavior & state).
  - Have no control over how things _look_ (JSX & CSS).
  - Hold the `state`
  - Define transition functions that operate on the state.
  - Pass state & transitions into child components via `props`.
- Presentational Components ("Dumb" Components)A
  - Control how things _look_.
  - Have no `state`.
  - Receive everything they need (state & transitions) via `props`.

[Further Reading](https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0)

---

## Pull State Up or Push Presentation Down

When you find you have a component that is responsible for both presentation and state, you have two options to split those responsibilities.

- You can create a new parent component and "pull the state up" to it, or...
- You can create a new child component and "push the presentation down" into the new component.

---

## Pushing the Presentation Down

Let's try pushing the presentation down. Take a look at the `render` function:

```ts
return (
  <main>
    <section className="counter-container">
      <h2 className="counter-container__count">{count}</h2>
      <button onClick={decrement}>-</button>
      <button onClick={increment}>+</button>
    </section>
  </main>
);
```

I spy three things in there that are related to `state` and `transitions` here:

- `count`: This is using state.
- `decrement`: This is behavior that triggers a state transition.
- `increment`: This is behavior that triggers a state transition.

When we push the presentation down, these three things should come from the parent component via `props`.

This allows the Container component to own the responsibility for state & transitions.

---

## Presentation Component

Take a shot at extracting the presentation component. It should:

- Be a React component named "Counter".
- Use three props (`decrement`, `count`, `increment`).
- Have no state itself.
- Maintain the appearance of our app.

---

## Extracted Presentation Component

```ts
// Counter.js
import React from 'react';

function Counter({ count, decrement, increment }) {
  return (
    <main>
      <section className="counter-container">
        <h2 className="counter-container__count">{count}</h2>
        <button onClick={decrement}>-</button>
        <button onClick={increment}>+</button>
      </section>
    </main>
  );
}

export default Counter;
```

Notice that the component is **only** concerned with how things look, not how they work.

---

## Refactoring the App to be a Container

Now that we have our presentational concerns isolated in the `Counter` component, we need to refactor the `App` class so that it uses this new component.

Give it a shot. You'll need to:

- `import` the new `Counter`.
- Render the `Counter` component.
- Pass all the needed props into the `Counter` component.

---

## The Refactored Container

Everything that's state related lives inside this container component, and none of the presentation is defined here.

That's a nice, clean, separation of concerns.

```ts
import React from 'react';
import Counter from './Counter';

function App() {
  const [count, setCount] = React.useState(0);

  const decrement = () => {
    setCount(count - 1);
  };

  const increment = () => {
    setCount(count + 1);
  };

  return (
    <Counter count={count} decrement={decrement} increment={this.increment} />
  );
}

export default App;
```

---

## Thinking Functionally

It can be really helpful to take a few minutes and sketch out what your state object should look like before you start coding.

The current behavior and appearance of your UI is calculated by applying rendered content and changes to your state.

---

## State Management: Redux, MobX, Microstates

As you continue to develop your React skills, you'll hit a point where managing `state` within a container component starts to get really difficult.

When you cross that line (you'll know it when you're there), learning `Redux` or another state management tool is a great idea.

---

## BUT DON'T LEARN REDUX YET

You can do a lot with the state management that's built into React, and you'll do yourself a huge disservice if you head down this path too quickly. Learn from my mistake and cross that bridge when you need to, and no sooner.


State Within React Components


## ReacTDD

## Introduction

Since React is just built out of JS code, we can actually test it the same way we would test any other component based systems we may be making.

This will be a brief introduction to how to get started with testing in React, though this is a much deeper topic. There is a lot more that you can do with testing in React.

---

## Follow Along

Feel free to follow along [here](https://github.com/WeCanCodeIT/reactdd).

---

## First Test

The first step in our TDD process is to write a failing test. Let's do that with a simple `UserCard` component.

```ts
// UserCard.test.js
import UserCard from './UserCard';

describe('UserCard', () => {
  test('renders', () => {});
});
```

This is good enough to get us to red because our component doesn't exist yet. This is enough for a compilation error (even though JS doesn't actually have a compile step). So let's Fix it.

---

## Red => Green

This step is as easy as just making the file and exporting something:

```ts
import React from 'react'

const UserCard = () => {}

export UserCard
```

That will be enough to get us back to green. Now it's time to make it fail again!

---

## Green => Red

Now we need to check and make sure our component will render. There are a few things at work here. Let's get started with actually testing.

```ts
// UserCard.test.js
import React from 'react';
import ReactDOM from 'react-dom';

import UserCard from './UserCard';

describe('UserCard', () => {
  test('renders', () => {
    const entry = document.createElement('div');
    ReactDOM.render(<UserCard />, entry);

    expect(
      entry.querySelector('.UserCard') instanceof HMTLElement
    ).toBeTruthy();
  });
});
```

---

## Red => Green

So here we're failing because our component doesn't return anything. Let's fix that.

```ts
import React from 'react';

const UserCard = () => <article className="UserCard"></article>;

export default UserCard;
```

Our test is now passing. Let's dive into what this means. This test is fairly simple in nature. All we're checking for at this point is that the component spits out some `HTMLElement` that has a class of `UserCard`. This is a good first test. Now that we know our component renders, we can start to drive out more complex behavior.

---

## Refactoring

We are in the refactor stage of our process. This is a great time to name things more properly, clean up any repetition, or pair down our code a bit. Since we really haven't written much at this point, there really isn't anything to refactor. So let's skip this for now and try again when we have another passing test. We bring it up now so that it doesn't become a forgotten step. Let's keep moving.

---

## Green => Red

Let's write a new test!

```ts
import React from 'react';
import ReactDOM from 'react-dom';

import UserCard from './UserCard';

const user = { firstName: 'John', lastName: 'Doe' };

describe('UserCard', () => {
  test('renders', () => {
    const entry = document.createElement('div');
    ReactDOM.render(<UserCard user={user} />, entry);

    expect(
      entry.querySelector('.UserCard') instanceof HTMLElement
    ).toBeTruthy();

    {
      (' ');
    }
  });

  test('Displays a users first and last name in an `h3` element', () => {
    const entry = document.createElement('div');
    ReactDOM.render(<UserCard user={user} />, entry);

    expect(entry.querySelector('.UserCard__name').tagName).toMatch('H3');
    expect(entry.querySelector('.UserCard__name').textContent).toMatch(
      'John Doe'
    );
  });
});
```

Note that we're adding props to both of our `UserCard` components so that we don't get issues in our previous test.

This test is checking that our component renders an `h3` element with the class `UserCard__name` and the textContent `John Doe`. This helps because we now know we can pass `props` to our component and they render as we expect.

---

## Red => Green

Now we need to make it pass!

```ts
import React from 'react';

const UserCard = ({ user }) => (
  <article className="UserCard">
    <h3 className="UserCard__name">{`${user.firstName} ${user.lastName}`}</h3>
  </article>
);

export default UserCard;
```

This is enough to get our test passing and that's all we're looking to do! Next, let's...

---

## Refactor

Our test class has some redundancy now. This is is exactly what refactoring is for. Let's take a look at our refactored code.

```ts
import React from 'react';
import ReactDOM from 'react-dom';

import UserCard from './UserCard';

let entry;
const user = { firstName: 'John', lastName: 'Doe' };

describe('UserCard', () => {
  beforeEach(() => {
    entry = document.createElement('div');
    ReactDOM.render(<UserCard user={user} />, entry);
  });

  test('renders', () => {
    expect(
      entry.querySelector('.UserCard') instanceof HTMLElement
    ).toBeTruthy();
  });

  test('Displays a users first and last name in an `h3` element', () => {
    expect(entry.querySelector('.UserCard__name').tagName).toMatch('H3');
    expect(entry.querySelector('.UserCard__name').textContent).toMatch(
      'John Doe'
    );
  });
});
```

Now we're avoiding making a new mock entry point and rendering our `UserCard`. That's going to happen every time for us now.

---

## Refactor => Red

Let's write one more test and then you can try more on your own!

```ts
import React from 'react';
import ReactDOM from 'react-dom';

import UserCard from './UserCard';

let entry;
const user = { firstName: 'John', lastName: 'Doe' };

describe('UserCard', () => {
  beforeEach(() => {
    entry = document.createElement('div');
    ReactDOM.render(<UserCard user={user} />, entry);
  });

  test('renders', () => {
    expect(
      entry.querySelector('.UserCard') instanceof HTMLElement
    ).toBeTruthy();
  });

  test('Displays a users first and last name in an `h3` element', () => {
    expect(entry.querySelector('.UserCard__name').tagName).toMatch('H3');
    expect(entry.querySelector('.UserCard__name').textContent).toMatch(
      'John Doe'
    );
  });

  test('Displays a users avatar image in an `img` tag', () => {
    expect(entry.querySelector('.UserCard__avatar').tagName).toMatch('IMG');
    expect(
      entry.querySelector('.UserCard__avatar').getAttribute('src')
    ).toMatch(user.avatar.src);
    expect(
      entry.querySelector('.UserCard__avatar').getAttribute('alt')
    ).toMatch(user.avatar.alt);
  });
});
```

We're lastly going to assert that we're generating an image for the user avatar. We're failing because we don't currently have that info. Let's change that.

---

## Red => Green

```ts
import React from 'react';

const UserCard = ({ user }) => (
  <article className="UserCard">
    <img
      className="UserCard__avatar"
      src={user.avatar.src}
      alt={user.avatar.alt}
    />
    <h3 className="UserCard__name">{`${user.firstName} ${user.lastName}`}</h3>
  </article>
);

export default UserCard;
```

---

## Practice

Time to practice! Pick a new component that you want to make and test drive it! Suggestions:

1. A component that will render a list of `UserCard`s
2. A `PlayingCard` component and another component that will deal random hands of 5 cards
3. A `DadJokeGenerator` that hits the [Dad Joke Generator](https://icanhazdadjoke.com/api) and renders a new joke any time the user hits a button

These are just some ideas to get you started. Use your imagination!

---

## Conclusion

TDD is an amazing tool that you get better at the more you use it. You should explore testing with any new technology you use. It's a great way to learn just exactly what that tech can do for you!

### Resources

- [React Testing Best Practices](https://blog.sapegin.me/all/react-testing-1-best-practices/)

---


Testing React Components


Interacting With The User in the Command Line

## `readline-sync` Module

To get started, let's create a new project:

1. From the command line, make a new directory and navigate into it: `mkdir console-input && cd console-input`
2. Let's initialize a new Node project: `npm init -y`
3. We need to add one dependency (we'll get into what this actually means MUCH later): `npm i readline-sync`
4. Make a new file to run code: `touch app.js`

---

## Setting up our app

Let's set up our `app.js` file to use input. Add the following:

```ts
// app.js
const input = require('readline-sync');

const userName = input.question(`What is your name?`);
console.log(`Hello ${userName}`);
```

---

## Let's run it!

Now navigate back to your command line and execute your app: `node app.js`

If I type _Ford Prefect_, then this is what I will see in my console:

```ts
    $ What is your name?
    Ford Prefect
    $ Hello, Ford Prefect
```

---

## Let's Break It Down

`readline-sync` is a node dependency that we are including in our project. It's essentially a small JS program encapsulated in it's own project directory in our project. We can use this small project in our project to do things we would otherwise have to write ourselves.

Node dependencies are incredibly useful and are essentially what allow us to "stand on the shoulders of giants".

---

## Adding a dependency

We use the `require` function (a function built into Node) to pull in dependencies. Inside of it, we can indicate an external dependency (i.e. `readline-sync`) or an internal dependency (another JS file in our system. i.e. `./add.js`)

\[\[\[ These dependencies must be installed in our projects to have access to them though. If we didn't execute the `npm i readline-sync` command before running our project, we wouldn't have been able to use that dependency in our project \]\]\]

---

## A Note About Names

So we named our dependency `input`. Did we have to do that? **NO**.

We gave it that name because it is descriptive of what it does. Technically we could have named it anything we want. Let's see an example:

```ts
const a = require('readline-sync');

const b = a.question(`What is your name?`);
console.log(`Hey ${b}`);
```

Now this doesn't look too bad right? Well sure, with this few lines, we can't really see the problem. But imagine a file that has hundreds of lines and multiple dependencies. It would be pretty hard to decipher exactly what `a` is doing without scrolling up to the top to see what was assigned to it. So **name things descriptively**.

---

## Return values

So we're getting some sort of a value from our user. In our case it is going to be a `String`. What if we want something different though? maybe a number? Well we can handle that.

```ts
const input = require('readline-sync');

console.log(`Let's add some numbers!`);

const userNumberOne = input.question(
  `What's the first number you'd like to add?`
);
const userNumberTwo = input.question(`And the second?`);
const numberOne = parseInt(userNumberOne);

const numberTwo = parseInt(userNumberTwo);
console.log(`The total of your numbers is ${numberOne + numberTwo}`);
```

Given the two numbers are `1` and `2` he above will output: `The total of your numbers is 3`

---

## `parseInt()` What's that?

Glad you asked! `parseInt` is a built in function that will look for integers in whatever you pass it. In our case, it examined our strings, found the corresponding numbers, and used them to do the addition we were after.

---

## Conclusion

Being able to read input from the console is a great way to begin interacting with your user in a meaningful way and begin to build robust, dynamic applications.


Reading Input from the Console


Data on the go!

## Introduction

REST stands for **Re**presentational **S**tate **T**ransfer and API stands for **A**pplication **P**rogramming **I**nterface. Let's break these two down individually.

REST is essentially the exchange of data between a client side interface (usually browsers) and a server side interface (servers). This interaction is what we're referring to when we talk about REST, nothing more, nothing less.

The most important letter in API is the I, interface. An interface is simply some outward facing means of communicating with something else. An API is some piece of software that we can use to avoid re-inventing the wheel every time we build our own software.

So to tie the two together. A REST API is an online interface that we can use to interact with data stores to build more robust applications.

---

## What do they look like?

REST APIs are essentially just web applications that only return data (usually in the form of JSON) instead of doing something like returning HTML, CSS, and JS. So, even though they return different data, they perform incredibly similar to the web applications we are used to building. Let's see just how.

---

## Behaviors in a typical REST API

Almost all REST APIs have these five basic interactions with the data they host:

- Create or add new resource
- Read all resources
- Read an individual resource
- Update/change a resource
- Delete a resource

Those letters should look familiar. These are the basic CRUD operations! There are certainly more than this. But these are by far the most frequently used.

---

## How to Use a REST API

We interact with APIs using specific URIs or endpoints. Depending on the type of HTTP Request we make, the API responds differently. so for example, if we navigate to `https://api.github.com/users/<your-github-username>` (replacing "" with your actual username), we receive information about our GitHub account in the form of JSON. This isn't very useful to use like this, but when we pair this sort of thing with the [fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API), we can do some pretty powerful stuff.

---

## What Else?

So when we pair these sorts of end points with different HTTP requests, we can fully interact with these interfaces. Here are examples with a fictional REST API:

| HTTP Verb | Endpoint                   | Result                                                 |
| --------- | -------------------------- | ------------------------------------------------------ |
| GET       | api.wcci.com/instructors   | Returns all WCCI instructors                           |
| GET       | api.wcci.com/instructors/1 | Returns instructor with ID of 1                        |
| POST      | api.wcci.com/instructors   | Creates a new instructor                               |
| PUT       | api.wcci.com/instructors/1 | Replaces instructor with ID of 1 with new instructor   |
| PATCH     | api.wcci.com/instructors/1 | Updates specific properties of instructor with ID of 1 |
| DELETE    | api.wcci.com/instructors/1 | Deletes instructor with ID of 1                        |

---

## Security?

Wait... If these things let you manipulate data, doesn't that make them extremely vulnerable to nefarious activity? Yes and no. If left unsecured, then yes, a production REST API would be incredibly vulnerable. So most public APIs, [GitHub](https://api.github.com)s for example, will only let you **read public information**. So anything that a user makes private is not visible to people using the public API. You also cannot create, update, or delete anything. To perform these sorts of activities you have to be authenticated.

Now that's way out of scope for us, but keep in mind that if you are going to put an API into production, it should be extremely secure or you risk making all data in your DB available. The APIs that we will be making locally are safe though, since they'll just exist in our local environments.

---

## Making APIs

In most frameworks, making a REST Controller instead of a Controller that returns a template or something similar is just to simply change the return type of the routing method and maybe add an annotation (Java & C#). Your instructor can show you how this works in your respective language.

---

## Conclusion

REST APIs are an extremely powerful tool to have in your Web Dev toolbox. They allow you to pull data from multiple different sources as well as work with data sets that you would otherwise have to create yourself. Take care to practice building them as well as consuming them through your applications


REST APIs


Arrays, but unique!

## Introduction

Sets are another collection option that we have available to us in JS. Sets work very similar to Arrays. The difference between the two is that values in a Set must be unique.

### Example

```ts
const myArray = [1, 2, 2, 3, 3, 3, 4, 4, 4, 4]; // This is just fine
```

But if we create a Set from this array...

```ts
const myArray = [1, 2, 2, 3, 3, 3, 4, 4, 4, 4]; // This is just fine
const mySet = new Set(myArray); // mySet = [1, 2, 3, 4]
```

Since a Set will only hold unique values, we only get one instance of each number.

---

## Working with Sets

Sets are great for collections you need to keep unique values in. For example, all of the keys in a Map need to be unique. So if you get a collection of keys from a Map, what you're getting back is a Set.

Let's take a look at making a new Set with a playing card example:

```ts
const suits = new Set(['♤', '♡', '♧', '♢']); // Spades, Hearts, Clubs, Diamonds
const vals = new Set([
  '2',
  '3',
  '4',
  '5',
  '6',
  '7',
  '8',
  '9',
  '10',
  'J',
  'Q',
  'K',
  'A',
]);

const deck = new Set();

for (let suit of suits) {
  for (let val of vals) {
    deck.add(`${val}${suit}`);
  }
}
```

This gives us a full deck of cards! What's nice about using a Set here is that we can be sure that every value we get is unique. Which, after all, is what you need for a reliable deck of cards.

We can now make some assertions on this set and know we're dealing with unique values. Let's make sure this deck has the Ace of Spades:

```ts
deck.has('A♤'); // returns true
```

---

## Removing Values

Let's say we want to deal a 5 card poker hand. Picking 5 random cards isn't too difficult a task, but the trick is that we want to make sure we can't deal the same card twice. How can we pull that off?

```ts
const suits = new Set(['♤', '♡', '♧', '♢']); // Spades, Hearts, Clubs, Diamonds
const vals = new Set([
  '2',
  '3',
  '4',
  '5',
  '6',
  '7',
  '8',
  '9',
  '10',
  'J',
  'Q',
  'K',
  'A',
]);

const deck = new Set();

for (let suit of suits) {
  for (let val of vals) {
    deck.add(`${val}${suit}`);
  }
}

const hand = new Set();

for (let i = 0; i < 5; i++) {
  const randomIndex = Math.floor(Math.random() * deck.size);
  const card = [...deck][randomIndex];
  hand.add(card);
  deck.delete(card);
}

console.log(hand);
```

Try running that code in your browsers console. It works!

Let's step through what we're doing here though. First, we're setting up a loop that will run 5 times. For each iteration we're choosing a random index in our Set and using it to pick a random value in our Set and assigning it to `card`.

> What is `[...deck][randomIndex]` doing?

Good question. `[...deck]` is making an Array out of our Set so that we can select a value by an index. Adding `[randomIndex]` to the end actual selects the value at the index we generate.

Then, we're adding the selected card to our `hand` Set.

Finally, we're removing that card from our `deck` Set.

---

## Other Set Methods

| Method       | Result                                                                        |
| ------------ | ----------------------------------------------------------------------------- |
| `clear()`    | Removes all values from the Set                                               |
| `entries()`  | Returns an iterator with key/value pairs of indices and the actual Set values |
| `forEach()`  | Accepts a callback that will run for every value in the Set                   |
| `has(value)` | Returns a Boolean value reflecting whether the Set contains the value         |

---

## Conclusion

Sets are a really useful collection due to their ability to store unique values. Familiarize yourself and try to use Sets over Arrays whenever possible.


Sets


## A sequence of characters

# Strings are Things

A `String` represents a sequence of `char`s. It allows us to call methods (send messages) to manipulate that sequence of `char`s and create new `String`s.

Today, we'll show you some of the ways that you can do that.

---

# Nothing to do with cats

When we use the operator `+` with `String`s, we call this _concatenation_. It's not adding them as we would add numbers, but it's appending one `String` to another, resulting in a longer `String`. JavaScript knows how to turn literals into String objects, so it does that for us behind the scenes, saving us a bit of work. What would this display?

```ts
const numberOfSuits = 4;
console.log('I have ' + numberOfSuits + ' suits.');
```

![Purrsuit of Happiness](/strings-resources/purrsuit.jpg)

_Courtesy of [Brainless Tales](http://www.brainlesstales.com)_

---

# Template Literals

Template literals are a more readable way to concatenate `String`s with other values in JS.

```ts
console.log(`I have ${numberOfSuits} suits.`);
```

Note that instead of having to close the `String`s and add `+` operators, we simply wrap the variable in `${}`.

---

# Just in Case

Methods we call on Strings create and _return_ new Strings rather than changing the original String. Strings in JavaScript are _immutable_. A common need is to convert a String to all uppercase or all lowercase:

```ts
const myGreeting = 'Hello';

console.log(myGreeting.toUpperCase()); // print "HELLO"
console.log(myGreeting.toLowerCase()); // prints "hello"
console.log(myGreeting); // prints "Hello"
```

---

## Sensitivity Training

We often use one of these methods to normalize user input. If we're asking for a color and call the `toLowerCase()` method on the user's response before comparing it to "red", the user can type "RED", "Red", or "red" and it won't matter.

```ts
const input = require('readline-sync');

const response = input.question('Enter a color, please.');
if (response.toLowerCase() === 'red') {
  console.log('Roses can be red. Also, lilies.');
}
```

---

## Length

A String's `length()` method will tell us how many characters it contains.

```ts
const palindrome = 'A dog, a panic, in a pagoda';
const palindromeLength = palindrome.length();
console.log(`${palindrome} has ${palindromeLength} characters.`);
```

---

## Escape!

Sometimes we need special characters in Strings. The obvious example is a quotation mark. Quotation marks are what open and close Strings, so how would we include a quotation mark in a String? We do something called _escaping_. We refer to the backslash (`\`) we use as an _escape character_.

```ts
console.log('Phil said, "You\'ve got red on you".');
```

We can also use escaping to insert special characters like newlines (`\n`) and tabs (`\t`):

```ts
console.log('This is the first line.\nSecond line');
console.log('\tThis line is indented.');
```

---

## Other Useful Methods

| method    | description                                                                                      | example                        | result  |
| --------- | ------------------------------------------------------------------------------------------------ | ------------------------------ | ------- |
| `trim`    | trims the whitespace from the beginning and end of a `String`; useful for cleaning up user input | `" bar ".trim()`               | `"bar"` |
| `charAt`  | returns the `char` at the specified (zero-based) index                                           | `"bar".charAt(2)`              | `'r'`   |
| `indexOf` | returns the index of the first occurrence of a substring in this `String`                        | `"foo bar baz".indexOf("bar")` | `4`     |

---

## Moar Useful Methods

| method                    | description                                                                            | example                      | result |
| ------------------------- | -------------------------------------------------------------------------------------- | ---------------------------- | ------ |
| `contains`                | indicates whether this `String` contains a substring                                   | `"foobarbaz".contains("ba")` | `true` |
| `startsWith`              | indicates whether this `String` starts with another                                    | `"foo".startsWith("f")`      | `true` |
| `endsWith`                | indicates whether this `String` ends with another                                      | `"baz".endsWith("az")`       | `true` |
| `substring`               | returns a substring starting at the specified index, optionally including an end index | `"hello".substring(1)`       |        |
| `"hello".substring(1, 4)` | `"ello"`                                                                               |                              |        |

`"ell"`

---

## Let's do it!

- Use the `toLowerCase()` method with some of your previous exercises to ignore case while looking at the user's response.
- Ask the user for her first name and last name. Use the `length()` method to tell her which is longer.
- Ask the user for her first name and last name, then print her full name, including the necessary space between first and last name.
- Ask the user to answer your riddle. Use the appropriate method to examine the answer, ignoring case. (_You_ supply the riddle. Finding one is half the fun.)

---

## Let's do it moar!

- Ask the user for two Strings. Check and see if the two Strings are equal to each other. If they are, inform the the user that the Strings are equal; otherwise, inform the user that the Strings are not equal. - Change your code so that it ignores case in the comparison.
- Ask the user to create a password. Then have the user enter the password again to verify there were no typing errors. Display a message if the user properly or improperly matched their password entries.
- Ask the user to create a user name. Make sure the user name is at least 8 characters in length and that the user name contains the word "code" somewhere regardless of case. Greet the user by their user name if it is properly entered, otherwise ask the user to try again.


Strings


TDD in JS

## Before we get started...

Before we can use Jest we need to install it. We're going to use NodeJS for that. The first thing we need is a project to add our tests to. So make a new project directory (`mkdir <project\name> && cd <project\name>`) and let's get started!

---

## Installing Jest

Now that we have a project, it's time to install Jest and test some JS.

1. Navigate to the root of your project
2. Initialize a Node project, `npm init -y` (this is just to include our testing framework). You should now have a `package.json` in your project root.
3. Next, install Jest, `npm i -D jest`. After an installation process, you should now see `jest` in `package.json`
4. Inside of `package.json` there is a `scripts` object, replace the existing `test` script wih `"jest"`. The final will look like `"test": "jest"`
5. Run `npm test --init` to build a jest configuration file

   1. Choose (y) to add the test script to `package.json`
   2. Choose `jsdom` for your testing environment
   3. Choose (y) to add coverage reports
   4. Choose (y) to clear mock calls and instances between every test
   5. You should now have a `jest.config.js` file

6. You are now ready to test your JS files

---

## Test Suite Components

There are a few built in functions that Jest recognizes. These structure our test suites so that we know what we're testing. It also gives us an assertion library to make verbose test assertions. Let's dive into them

---

## `describe()`

The `describe` function is an organizational function that allows us to structure our suites. We're only testing one unit inside of any given `describe` function. These can be nested for more specificity. For example:

```ts
describe('MyComponent', () => {
  describe('myFunction', () => {
    // All tests here should correspond to MyComponent.myFunction
  });
});
```

This is helpful when we run our tests because it breaks everything down into an easy-to-follow outline

---

## `test()` and `it()`

The next level of functions we have are the ones that assert direct behavior for a given unit. There are two that perform the same duties. If you need your tests to be backward compatible to other JS testing frameworks, use `it` instead of `test`. (We will be using `test` as we will never go back to a lesser JS testing framework...) This corresponds to the methods we write in our Java tests. Seen here:

```ts
describe('myFunction', () => {
  test('should add a class to a given element', () => {
    // Actual assertions will go here
  });
});
```

---

## `expect()`

The final function we need to actually make some assertions about the behavior of our code is `expect`. This function is very similar to `assertThat` or `assertEquals` in our Java tests. This is where we can weigh our expected behavior against an actual result.

```ts
describe('addClass', () => {
  test('should add a class to a given element', () => {
    // Arrange
    const elem = document.createElement('p');

    // Act
    addClass(elem, 'newClass');

    //Assert
    expect(elem.classList.contains('newClass')).toBeTruthy();
  });
});
```

(Check all of the [matchers](https://jestjs.io/docs/en/using-matchers) you have at your disposal)

---

## Time to run our tests!

There are two different options we have when running our tests. First, you can run all tests using `npm test` in your command line to run all tests (in any test file) at once. You can also run `npm test path/to/file`. This can be useful for targeting a specific set of tests as you work on a single component.

---

## Failure!

Yay!

![failing test](/images/jest-testing/images/failing-test.png)

That means...

---

## Practice!

You now have a powerful tool available to you in Java as well as JS. You can use TDD to make sure your code is doing what you want. This testing suite will work with any framework you’re using as well. Clone the exercise [here](https://github.com/wecancodeit/js-jest-practice-exercise).

---

## Resources

- [Jest Cheat Sheet](https://devhints.io/jest)


JS Testing with Jest


OOP and FP

## Object Oriented Programming

Object Oriented Programming allows us to organize our JS. Javascript is based on objects similar to Java. The difference being that Java uses classical inheritance while JS uses prototypal inheritance. All objects in JS inherit behavior from the root Object. So any built in methods that the root Object has, our objects also have. We can also add to the prototype of a given object and extend that behavior to other objects.

Keeping JS code organized is one of the most difficult parts of JS. This is because JS doesn't have a built in class system like what we're used to in Java. But that doesn't mean you can't still write your code that way. Even though JS isn't a classical inheritance language, we can still write our code that way. Let's take a look at some paradigms we can use to help us write better JS.

Follow along [here](https://github.com/WeCanCodeIT/js-oop-and-fp-slide-companion)

---

## The Revealing Module Pattern

```ts
const MyModule = (function () {
  function MyModule(name) {
    this._name = name || 'Default Name';
  }

  let _age = 30;

  function _printName() {
    console.log('Name: ' + _name);
  }

  MyModule.prototype = {
    changeInnerText: function (element, replacementText) {
      element.innerText = replacementText;
      return console.log(
        `Text of ${element.tagName} changed to "${replacementText}".`
      );
    },
    getName: function () {
      _printName();
    },
  };

  return MyModule;
})();
```

So this should look a little more Object Oriented. Notice we have a constructor now As well as public and private (prefaced with \_) methods and properties. The things we're adding to the prototype are our public methods. These are the things that we expose to our user so they can interact with our objects.

---

## Modules

Building modular JS is really helpful for code organization since it lets us build objects that have related methods in them. This also makes testing JS a much easier process to understand and execute. In Node environments there are actual module systems that you can use and then bundle so you don't have to add multiple JS files to your HTML. Sadly, these modules systems aren't supported by browsers yet so they aren't very useful to us now without something to bundle them. Let's take a look at some examples of the two popular module systems.

### CommonJS

```ts
// app.js
const rectangle = require('./rectangle');
console.log(rectangle.area(4, 4));

// rectangle.js
module.exports = {
  area: function (length, width) {
    return length * width;
  },
};
```

So with the CommonJS pattern we can actually break all of our code out into separate files and reference them in other files when we need them. This keeps everything clean and allows us to only view the code we need for specific jobs. It also helps us evade having one JS file with thousands of lines of code.

### ESModules

The ES2015 spec actually includes a module implementation that will eventually be supported in browsers. For now tools like Webpack or Browserify actually compile all of your modules and bundle your code into one file. Let's take a look at this syntax:

```ts
// app.js
import greeting from './greeting';
greeting.sayHiTo('Alan');

// greeting.js
export default {
  sayHiTo: function (name) {
    return console.log(`Hey ${name}`);
  },
};
```

---

## Classes

So we've already seen how we can make things that look more like the classes that we're used to in Java using Immediately Invoked Function Expressions (IIFEs). ES2015 actually has a class system (sort of). This is actually just syntactic sugar that makes the prototype system a little easier to work with. Let's take a look at that syntax.

```ts
class Square extends Shape {
  constructor(length, width) {
    super();

    this.length = length;
    this.width = width;

    {
      (' ');
    }
  }

  getArea() {
    return this.length * this.width;
  }
}
```

So as you can see, this looks a lot more organized. But don't be fooled. This isn't bringing classical inheritance to JS. All this is doing is interacting with the prototype in a very similar fashion to what we did with the Revealing Module Pattern but ES2015 is adding some new keywords that makes this a little more organized in our code.

---

## Functions

Finally we want to keep our code organized inside whatever module method we're using by keeping all of our functionality in functions and methods. You should avoid having lines of JS that perform some functionality in your code outside of a function declaration. This keeps things organized, informs you what the code is supposed to be doing, and maintains testability. Your future self and other developers will thank you for using functions to execute behavior in JS.

---

## Unorganized code

So we can take something that looks like this...

```ts
const myHeading = document.querySelector('h1');
myHeading.style.backgroundColor = 'blue';
myHeading.style.color = 'white';
myHeading.style.padding = '1em';
```

And organize it more using the tactics we've been exploring

```ts
const Dom = (function () {
  function Dom() {}

  Dom.prototype = {
    updateBackgroundColor: function (element, color) {
      element.style.backgroundColor = color;
      return element;
    },
    updateColor: function (element, color) {
      element.style.color = color;
      return element;
    },
    updatePadding: function (element, space) {
      element.style.padding = space;
      return element;
    },
  };

  return Dom;
})();
```

---

## Testing

What's nice about having your code organized like this is that it makes TDD in JS a lot easier since it helps you to think about your functionality in in terms of methods instead of just random lines of code.

---

## Functional Programming

---

## Simplifying JS

We now come to the second pillar of JS, Functional Programming (FP). FP in JS allows us to write fewer lines of more expressive code. So OOP and FP don't compete with each other, they in fact compliment each other. We want to create objects to organize our code in ways that make our libraries extensible. We want to keep the JS code we write as concise as possible both to save on memory and to keep it readable for other devs (including our future selves).

Let's look into elements of FP

---

## High Level Functions

Higher level functions (HLFs) are a great example of functional programming inside of JS. Since `function`s are first class citizens, we can pass them to other functions

```ts
function reverse(array, fn) {
  const newArray = array;
  return fn(newArray.reverse());
}

function log(message) {
  console.log(message);
}

reverse([1, 2, 3, 4, 5], log); // prints [5, 4, 3, 2, 1]
```

---

## Currying

Currying allows us to break up functionality into multiple functions that have less behavior

```ts
// Without Currying
function makeElement(elementType, elementContent) {
  const element = document.createElement(elementType);
  element.innerHTML = elementContent;
}

// With Currying
const makeCurriedElement = (elementType) => (elementContent) => {
  const element = document.createElement(elementType);
  element.innerHTML = elementContent;
};

const makeArticle = makeCurriedElement('article');

console.log(makeElement('article', "<h2>Here's my article</h2>"));
console.log(makeArticle("<h2>Here's my more easily read article</h2>"));
```

---

## `forEach`

We've seen `forEach` in action. This is a really great way to iterate over a collection of objects.

```ts
const ninjaTurtles = [
  { name: 'Leonardo', color: 'blue' },
  { name: 'Michelangelo', color: 'Orange' },
  { name: 'Raphael', color: 'Red' },
  { name: 'Donatello', color: 'Purple' },
];

ninjaTurtles.forEach((turtle) =>
  console.log(`${turtle.name}'s color is ${turtle.color}`)
);
```

There are [plenty](https://medium.com/jsguru/javascript-functional-programming-map-filter-and-reduce-846ff9ba492d) of other Array methods to use.

---

## Conclusion

OOP and FP are _HUGE_ programming practices that are essential to writing good JS. Using these practices while writing JS is truly what separates good devs from the truly great. Make sure to adopt these two pillars into your JS.

### Resources

- 🔥🔥🔥🔥🔥[Functional Light JS](https://github.com/getify/Functional-Light-JS)
- [Object-oriented JavaScript for Beginners](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Object-oriented_JS)
- [JavaScript: Prototype vs. Class](https://medium.com/@parsyval/javascript-prototype-vs-class-a7015d5473b)


The Two Pillars of JS


Professional JS Bundling for the Web

## The Problem

There are tons of cool new language features with JavaScript, but unfortunately it can take some time for web browsers to get caught up. That's compounded by the fact that even once all the major browsers have support, not all of their users will immediately upgrade.

For a long time web development was stuck taking a lowest-common denominator approach. Adopting new functionality almost always meant breaking the app for some percentage of your users.

What are we to do? Continue writing 10 year old jQuery?

pls no...

---

## The Solution: Compiled JavaScript

Babel is a tool that _compiles JavaScript_. Our source code goes into the compiler, and build artifacts come out the other side.

We can take advantage of the latest language features as we write our code, because Babel will do the hard work of compiling our shiny new code down to an older and more widely supported version of JavaScript.

We'll distribute that compiled version of our code, so we get the best of both worlds!

We get to **write modern JavaScript without losing support** for lots of users.

---

## So, what's a bundler then?

Bundlers usually compile JavaScript with Babel and add some additional functionality into the mix that makes it easy to create build assets from your source JS.

Features might include:

- **Bundling**: Concatenating many source files into a single one.
- **Minification**: Stripping unnecessary whitespace and renaming things to reduce file sizes.
- **Uglification**: Obfuscates your code, so that it's tougher for someone to steal JS from your site and modify it for their own use.
- **Compiling**: Transforms code so that it can be run in different (usually older) environments.
- **Tree-Shaking**: Identifies unused or dead code and strips it out of the build output.

---

## Popular Bundlers

There are lots of choices out here, but here's a short list of some of the more popular ones:

- [WebPack](https://webpack.js.org/) \- Incredibly flexible, with a huge community around it. It's flexibility can come with some added complexity when setting up and configuring (altho it's made great strides to become easier to use lately).
- [Parcel](https://parceljs.org/) \- Simplicity rules the day with Parcel. It's a great introduction to bundlers with enough functionality to keep you satisfied for most tasks.
- [Rollup.js](https://rollupjs.org/guide/en) \- Makes extensive use of tree-shaking to try and produce tiny builds. It's a bit easier to start with than WebPack.
- [Microbundle](https://www.npmjs.com/package/microbundle) \- Built on top of Rollup.js and is specifically targeted at npm package creation.

---

## Why Webpack?

Webpack is the most frequently used tool for JS bundling and has actually become the industry standard for enterprise applications. It has a ton of configuration options. But, what makes it amazing is the fact that it now has a zero config option. Which means you can just install it into your project and get going without having to write any sort of configuration information.

---

## The Project

We're going to create a tiny webpage that will use ES2015 `import`/`export` functionality and a package to create a web page with some animated fireworks.

We'll use this [node package](https://www.npmjs.com/package/fireworks-canvas) to do the heavy-lifting with the html canvas.

---

### Boilerplate

Open up a git bash prompt wherever you keep your code, and we'll do some initial setup:

```zsh
mkdir webpack-fireworks && cd webpack-fireworks
mkdir -p src/js docs/css
touch docs/index.html docs/css/main.css src/index.js src/js/main.js
echo -e "/node_modules/" > .gitignore
git init && git add . && git commit -m "Initial commit"
npm init -y
code .
```

---

### Turning on the Lights

In VS Code, open up the `docs/index.html` file.

At the top of the file, type `!` and then hit `Tab`. That's a snippet that will set up a basic HTML document for us:

`docs/index.html`

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body></body>
</html>
```

---

## Connecting the HTML to the JS file

Modify the body of the HTML document so that it imports `main.js` script (This doesn't exist yet but Webpack will create it for us). We'll also need to create a `div` that we can show our fireworks inside.

`docs/index.html`

```html
<body>
  <div id="app"></div>
  <script src="main.js"></script>
</body>
```

---

The `index.js` file is really just an entry point. It's responsibility is to bootstrap our application.

`src/index.js`

```ts
import fireworks from './js/fireworks';

fireworks();
```

For now, lets create `fireworks.js` and toss an `alert` inside the exported function so we will know if that code is being executed or not.

`src/js/fireworks.js`

```ts
export default () => {
  alert('it (fire)works!');
};
```

---

## Connecting CSS

All we need to do here is include a link to our CSS in our HTML:

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Fireworks!</title>
    <link rel="stylesheet" href="./css/main.css" />
  </head>
  <body>
    <div id="app"></div>
    <script src="main.js"></script>
  </body>
</html>
```

Let's add some CSS so our page renders properly as well:

```css
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

#app {
  background-color: #000;
  height: 100vh;
}
```

---

## Adding Webpack

First, we'll need to add a dev dependency on Webpack. We'll also need a couple other pieces to run a development server.

```zsh
npm install webpack webpack-dev-server webpack-cli --save-dev
```

Next, we'll add some scripts to `package.json`:

```json
{
  "scripts": {
    "start": "webpack-cli serve --mode development --content-base docs/ --open Chrome"
  }
}
```

Finally, run a dev server with your bundle by running `npm start`. Open chrome and navigate to `localhost:8080` and you should see your alert!

---

## What. Was. That?!

Ok that was a ton of extra stuff in that start command aside from just `webpack-dev-server`. But just because it's a lot doesn't mean it's complicated. Let's step through:

- `--mode development`: All this does is tell our development server that it should be operating with the development version of our code. Since we aren't going to ever be running a production environment (especially while developing) this is perfect. If we switched this to production, the only thing that would change is that we would get minified, optimized versions of our code bundles. Since we want to be able to actually dig through and debug, we don't want that right now.
- `--content-base docs/`: This flag tells the server to use the `docs` directory as the root of our application. This is appropriate as we'll be serving our production application from this directory.
- `--open`: This one very simply tells the server to actually open a Chrome browser window to our server location once it's running. This is why a page automatically opens for you when you run `npm start`.

See! Not so bad.

---

## Commit your work!

git add . && git commit -m "Webpack configured"

---

## Fireworks, here we come!

Install the `fireworks-canvas` node module with npm: `npm install --save fireworks-canvas`.

Take a peek at the [documentation](https://www.npmjs.com/package/fireworks-canvas) to see how we use this module.

Try to get the fireworks going on your own.

---

## Wrapping up

Here's a minimal implementation:

`src/js/fireworks.js`

```ts
import Fireworks from 'fireworks-canvas';

export default () => {
  const app = document.getElementById('app');
  const fireworks = new Fireworks(app);
  fireworks.start();
};
```

Don't forget to commit everything!

```zsh
git add . && git commit -m "MVP"
```

---

## Why not host it on GitHub Pages?

GitHub offers a really simple way to host static websites directly from your Git repos. We only need to make a few changes to get this working.

Update your `package.json`s `scripts` to:

```json
{
  // ...
  "scripts": {
    "build": "webpack --mode production --content-base docs/ --output-path docs/",
    "start": "webpack-cli serve --mode development --content-base docs/ --open Chrome"
  }
  // ...
}
```

GitHub Pages will expect to see our static assets inside a `docs` folder, so we updated these scripts so that Webpack will put it's build output there instead.

Create a production build and commit it:

```zsh
npm run build && git add . && git commit -m "Production build." && git push
```

Navigate to your remote repo on GitHub and open the Repository's settings. Towards the bottom of the page you'll see a `GitHub Pages` section.

Set the `Source` to `master-branch/docs Folder`.

Save, scroll back down and find the URL. It can take a couple minutes for your page to publish, so be patient, but after that your site should be available at the specified URL.

Stretch Goals:

- Add the ability to `Start` and `Stop` the show.
- Add the ability to `Fire One`.
- Make it so that you can resize the browser and the fireworks update.

---

## Resources

Webpack is a super powerful bundler that actually comes with a lot more capability. It's entry point is low though since we can make a project without having to include any external dependencies. I would encourage you to look more into what Webpack is capable of with the following material:

- [Webpack: Getting Started](https://webpack.js.org/guides/getting-started/)


Webpack


Welcome to JavaScript (JS)! The programming language that is native to the browser environment. This is an important language to learn because no matter what Back End language is in a project, JS is going to be essential. There are some conventions that should be followed when writing JS. The first of which is naming conventions. JS uses a camel case convention. So words are broken up by using capital letters. For example:

```js
function myFunction() {
  // do something
}
const thisIsAVariable = true;
```

It is possible to name things in JS with any naming conventions, but camel case is widely used.

The next topic is comments. There is a widely accepted belief that all code should be commented. While this is true, the idea behind it may be a bit abstracted. Comments should only remain in code when absolutely necessary. Removing comments should be a part of refactoring code. Comments should be able to be removed and replaced by better naming conventions in the process.

```js
// this function should replace dashes with spaces
const placeholder = (str) => {
  return str.split('-').join(' ');
};
```

While this is a useful function with a useful comment, it could be replaced with proper naming.

```js
const replaceDashesWithSpaces = (str) => {
  return str.split('-').join(' ');
};
```

Even though this may seem like a small change, it is a huge upgrade in code quality. It's important to use comments when they improve readability of the code, but they should be avoided when possible. A good example of when to use comments comes from a library called Lodash. They can describe what a complex function is going to do instead of having developers search around

## Data Types

### Primitives

#### String

#### Number

- `NaN`
- `Infinity`

#### BigInt

#### Boolean

#### Symbol

#### `undefined`

#### `null`

### Objects

- Destructuring

#### Object

- `Object.keys()`
- `Object.values()`
- `Object.entries()`

#### Array

#### Function

#### Date

#### Math

#### Map/WeakMap

#### Set/WeakSet

## Operators

### Math

- `+`
- `-`
- `*`
- `/`
- `%`

### Concatenation

- `+` but with strings

### Unary Operators

- `typeof`
- `=`

### Logical Operators

- `%%`
- `||`
- `??`

### Ternary Operator

## Variables

### Keywords

### Names

### Values

### Expressions

## Conditional Logic

## Loops

- `break`, `return`, `continue`

### While

### Do While

### For

## `switch`

## Functions

### Scope

### Declaration

```js
function fuckOff() {
  // get about fucking off
}
```

### Arrow

```js
const iAmVariable = () => {
  // do stuff
};
```

### Default Values for Parameters

### Closures

### Higher Order Functions

## OOP

### Classes

#### Constructor

#### Properties

#### Methods

#### Creation

## Functional

### Immutability

### Side Effects

### Pure Functions

## Modules

## Conclusion

## Challenge

FizzBuzz without tests


What Is JS?


A New Hope

## What is Looping?

Looping means to repeat something. This another means of controlling flow within a program. `if/else` and `switch/case` statements focus on _decision making_. Looping statements focus on doing something repeatedly. We call doing something repeatedly _iterating_.

---

## Why Would I Want To Do That?

There are many practical examples of loops:

- Sunrise and sunset
- Your daily routine: drink coffee, walk the dog, ask the neighbors if they've seen the dog, catch the dog, take a shower, go to work, come home, eat dinner, repeat

---

## While Loops

A `while` loop continues to do what you've told it to do _while_ some condition continues to be true.

Usually, we won't use them for counting, but it's simple to illustrate them this way. This loop will count from one to ten:

```ts
let count = 1;
while (count < 11) {
  console.log(`The count is ${count}`);
  count++; // remember, this increases the value of count by 1
}
```

Try it!

---

## Let's Break That Down

We start with the `while` keyword followed by a set of parentheses:

```ts
    let count = 1;

    while ()
```

---

## Let's Keep Breaking It Down

Within these parentheses, we find a _condition_. This evaluates to true or false (`boolean`), just like our condition for an `if` statement:

```ts
    let count = 1;

    while (count < 11)
```

In this case, we will continue to _iterate_ as long as the value of `count` is less than eleven.

---

## But What Happens?

Each time our `while` statement finds its condition to be true, it will execute the code inside the (_wait for it..._) **code block** that follows it, denoted by our friends the curly brackets:

```ts
let count = 1;
while (count < 11) {
  console.log(`The count is ${count}`);
  count++; // remember, this increases the value of count by 1
}
```

The way we read this would be: _"While count is less than eleven, we will print its value, then increase its value by one."_

---

## Doing it at least once

A `while` statement checks its condition before it runs. A `do/while` is similar, but it runs the code at least once before checking the condition. We don't see these as often, since it's always possible to use a `while` loop instead, and they're generally easier to understand.

If I wanted to allow a user to ask for help regarding question options (this may remind you of a recent exercise), I may do something like this:

```ts
const input = require('readline-sync');
let porridgeTemperature;
do {
  porridgeTemperature = input.question(
    'Please specify porridge temperature.\nType "help" to list options.'
  );
  if (porridgeTemperature.equals('help')) {
    console.log('Options: too hot, too cold, just right');
  }
} while (porridgeTemperature.equals('help'));
```

Note that since `porridgeTemperature` is accessed _outside_ of the curly brackets, we must define it _before_ the curly brackets for the `do/while` block.

---

## Let's Do It Together

- If I wanted to ask the user for a message, then display it five times, how would I do this?
- If I wanted to pick a number, then ask the user to guess it, how might I do this?
  - What if I wanted my program to pick a random number?

---

## It Never Stops

Infinite loops aren't fun. You're sure to encounter one at some point. When that happens, Node will recognize it and throw you a stack overflow error (that's where that [website](https://stackoverflow.com) gets its name...).

These happen when the circumstances never arise to make the condition for your loop become false:

```ts
while (true) {
  console.log('I will run forever!');
  console.log('(Or until you figure out how to stop me!)');
}
```

Usually it's not that straightforward, but the concept is the same. If your condition is never false when it is checked by the loop, then the loop never ends.

Bad loops just need to be put down. Let's try it out!

---

## You Can Do It!

For the following exercises, you'll need to figure out whether a `while` or a `do/while` loop is most appropriate:

- ATM: Prompt the user for a PIN. Display an error message if the user gets it wrong, and prompt again. If the user gets it right, print a congratulatory message.
  - Stretch goal: quit after three failed attempts with an apologetic message.
- Sum: Ask the user for an integer. Calculate the sum of the numbers from one to the integer the user entered. Example: If the user enters 6, your program should print 21 (1 + 2 + 3 + 4 + 5 + 6).
  - Stretch goal: Allow the user to enter a lower integer and a higher integer. Calculate the sum of the numbers from the lower to the higher, inclusive. Example: If the user entered 4, then 6, your program should print 15 (4 + 5 + 6).
  - Stretchier goal: If user enters a lower number for the second number, display an error message instead of calculating the sum.


While Loops


## Objective

- Students will employ good software design and testing principles in order to create a full-stack, server-side-rendered, web application.
- Students will build the front end portion using HTML, Handlebars, and CSS. (No frameworks, No front end JS... at all)
- Students will build the back end portion using Node/Express

## The Scenario

We've been hired by NobodyCares Inc. to build a Proof of Concept (PoC) application to make the next new hot blogging platform! This being a PoC app, we don't (yet) have to worry about all of the security and user management concerns that we would have in a fully functional application. All our client wants from us are the beginnings of the actual User eXperience (UX). Our client also wants an in depth and COMPLETE look at our applications User Interface (UI), so let's make it look good.

## Model Components

### `Post`

We can't very well have a blog without some posts. Each post should include:

- `title`
- `body`
- `Author`s
- `publishDate`
- `genre` or `category` (each Post should have only one)
- `tag`s

---

### `Author`

We'll also need to be able to make `Author`s. Each `Author` should have:

- `name`
- `post`s

---

### `Genre` or `Category`

- `name`
- `post`s

---

### `Tag`

Each Tag should have:

- `name`
- `post`s

---

## Views

We need View templates to display all of our Posts. But we should also be able to view our content based on the other identifying components we have. So each of our entities should be viewable in their own templates. We should have templates that display the collections of all entities as well as an individual instance of an entity. We also need a landing (home) page that welcomes the user to our application. We should have navigation very clearly presented on all pages so that the user is able to navigate through our application.

Users should be able to add an instance of _ANY_ entity from it's collections page. For example, a user should be able to create a new Tag from the all Tags page. Our users should also be able to add a new Post to the all Posts page. However, the users should not be able to _CREATE_ Authors, Genres, or Tags from the Post creation. Our users should have to _SELECT_ those options from existing options. (Think about the types of inputs that would allow this behavior)

Make sure all collections are organized with proper containing elements (i.e. `ol` or `ul` for list items, `fieldset` for `input`s)

## Controllers

Last, we need to direct traffic efficiently. All of our entities should be managed by their own Controller. For example, all interaction with Posts should be isolated to one Controller. You may have to _ACCESS_ other entities in your Controllers. But the main entities that Controller is meant to direct should be well organized.

## Tips for Getting Started

### Plan

1. **KEEP IT SIMPLE!** Our applications aren't complicated until **WE** make them that way.
2. **KEEP IT SIMPLE!** So important that it gets two rules.
3. Start by mapping out the relationships of your entities with your partner.
4. Figure out how Objects will be organized and constructed.
5. Think about how you will store and retrieve info from your database
6. Plan what components you will build in what order.

### Prepare

1. Get a project started on GitHub and make some issues.
2. Create a project with the Express Generator
3. Get everything connected in VSCode.
4. Make sure your partner is also connected and you can both contribute to the project.
5. Make the branches you'll need for your project (`master` and `dev` to start).

### Program

1. Decide which of you will start as the driver and which will be the navigator.
2. Get started with your first component.
3. Once you finish your first issue, close it and switch places.
4. Move on to the next component.
5. Repeat this process until you're done. :)

## Things You Will Be Graded On

- TDD
- Agile approach
- Proper VCS usage (git)
- Clean Code
- Running application


Blog Platform


## Objective

You and your partner will be building an API using Node/Express to catalog some collection of data. It is up to the two of you exactly what it is you want your API to contain. This could be a collection of movies and their individual details, astronauts and their mission details, or a list of histories most significant programmers and their contributions. You can also catalog fictional data (so long as it's appropriate!).

You will also build a corresponding Single Page App (SPA) that will use your API to present this data. You are free to use React if you feel like you have a good enough handle on it, but it is not required. You are, however, required to build a modular JavaScript application. So, if you use [Create React App](https://facebook.github.io/create-react-app/), this functionality is natively built in. If you are not, you will have to setup a bundler of your own. I **HEAVILY** suggest [Webpack](https://webpack.js.org/) for this as it doesn't require any configuration. You should follow the same component and utility based structure that we did for Module 5 with a single `app.js` access point at the root of your application.

Your front and back end should be totally decoupled for this project (so no need to bundle until the very end!) This means you should have two project directories. You may house them in the same root project directory though you can just have two separate repositories. If you choose to house both in one project directory (recommended). It should look like this:

```
my-project (This is where your Git repo will be)
|- my-project-api (All Node/Express material)
|- my-project-front-end (All front end material)
```

---

## Tasks

### Back-end/API

Your back end should be responsible ONLY for creating, reading, updating, and deleting data. Your database will be connected here as well so that your data can be persisted. Your `Controllers` should send/receive JSON data.

You must have multiple entities that interact with each other in some way.

#### API Interactions:

- All `CRUD` operations for all entities
- A root endpoint for all entities
- Endpoints for individual instances of all entities

#### Relationships

Make appropriate relationships between entities and map them such that you can access lower level entities from parent entities.

---

### Front-end

Our front-end should be an SPA that uses JS to build out components that our users can interact with. Use modular JS along with parcel to create reusable components.

Users should be able to add new entities, remove existing entities, and update existing entities.


Make an API of your choosing


## Objective

- Students will employ good software design and testing principles in order to create a class hierarchy using OO principles (Abstraction, Polymorphism, Inheritance and Encapsulation).
- Students will be able to define **super**, **extends**,**isA** and **`typeof`**

## The Scenario

High St. Hospital is an organizational mess. They have unkempt files of employee information scattered throughout manilla folders, computer data files, and old tin filing cabinets. With the madness of the daily grind, patients are the priority. But the utmost care cannot be given to the patients if the hospital is disorganized. High St. Hospital wants to get it together. They have subcontracted We Can Code IT full-stack apprentices (who work for the relatively inexpensive price of free) to come in and organize. They enable you to set up shop with a few company laptops in an old disheveled break room. Your mission is to create a set of classes that contain information on the employees at High St. Hospital:

## Patients Should Have

- default `BLOOD_LEVEL` of 20 (What does this [naming convention](https://stackoverflow.com/questions/66066/what-is-the-best-way-to-implement-constants-in-java) suggest again???)
- default `HEALTH_LEVEL` of 10

## High St. Hospital has the following classifications at its facility

- `Employee` represents a base employee. All others Hospital employees _are_ `Employee`s
- `Doctor` is a Hospital Employee and gets paid 90,000
- `Nurse` is a Hospital Employee and gets paid 50,000
- `Surgeon` is a Doctor and gets paid 120,000
- `Receptionist` is a Hospital Employee and gets paid 45,000
- `Janitor` is a Hospital Employee and gets paid 40,000

## The Data

The following **Instance Data** will need to be taken care of for each employee

- **`Employee`s** have a name and ID number
- **`Doctor`s** have a name, ID number, and a specialty area (Heart, Brain, Foot, etc…).
- **`Surgeon`s** have a name, ID number, a specialty area, and whether they are operating or not.
- **`Nurse`s** have a name, ID number, a `Collection` of `Patient`s.
- **`Receptionist`s** have a name, ID number, and whether they are on the phone or not.
- **`Janitor`s** have a name, ID number, and whether they are sweeping or not.
- **`VampireJanitor`s** have a name, ID number, whether they are sweeping or not.

### Special Duties

Not all employees in the hospital have the same capabilities. Only certain staff members can **implement** certain medical duties such as `drawBlood()` or `careForPatient()`

## Getting Started

### Plan -> Prepare -> Program

1.  First, start by mapping out relationships. See what Classes you will need and how they interact with each other. (Pen and paper)
2.  Next, prepare a project using NPM. Set up a git repository for your project and a corresponding one on GitHub. If you are pairing, make sure your partner has access to the repo and the ability to push and pull. Make sure you are following [best practices](https://nvie.com/posts/a-successful-git-branching-model/). (Make sure to have a `master` branch, a `dev` branch, and give `feature-branches` a shot)
3.  Start programming. Remember to start with specifics and work toward generality. Choose one type of employee to create, test drive that class. Once that one is finished, pick another and pull similarities up into a parent class or interface.

## Example Output

```
Here are the employees at High St. Hospital
Doctor Phil	111	Brain
Surgeon Harry 222 Plastic true
Nurse Jackie 333 [list of patients]
Receptionist Janine 444	true
Janitor Rosie 555 true
VampireJanitor Vlad 666 false

Here are the pay rates at High St. Hospital
Phil gets paid a salary of 90000 per year.
Harry gets paid a salary of 120000 per year.
Jackie gets paid a salary of 50000 per year.
Janine gets paid a salary of 45000 per year.
Rosie gets paid a salary of 40000 per year.

Some Employees can draw blood
Phil is capable of drawing blood.
Harry is capable of drawing blood.
Jackie is capable of drawing blood.

Some Employees can administer patient care
Phil has increased patient health to 20
Harry has increased patient health to 20
Jackie has increased patient health to 15
```

As you look at this output to the console, the true/false attached to some of the employees simply represents the state they are in relative to if they are currently involved in their jobs or not.

## Stretch Tasks

Give Stretch Tasks a shot **ONLY** after requirements have been met. Completion of stretch tasks won't give you any extra credit, but, if your attempt breaks a requirement, that will cost you points. I suggest using feature branches to implement Stretch Tasks after requirements are finished.

- Stretch task: Tina is an `EmergencyDispatcher`. She is a trained medical professional and a first responder. She also has great people skills and can answer calls and manage what ambulance gets sent to a situation. She sometimes joins the crew and respondes to calls on the fly. Add her as an employee and give her the proper functionality. This job pays 45,000.
- Stretch task: Search for an individual employee by name and access their info/what they are doing
- Stretch task: add an employee, fire an employee

| Things to keep in mind                               |
| ---------------------------------------------------- |
| Care for all `Patient`s                              |
| Care for an individual `Patient`                     |
| Manage cleanliness of Hospital                       |
| Proper `tick()` method to change state of `Patient`s |
| Proper game loop                                     |
| Encapsulate all instance variables                   |
| Proper Class structure for all entities              |
| TDD                                                  |
| Clean Code                                           |
| Proper Version Control Usage                         |
| Agile approach to work                               |



This is just section that has definitions for some keywords we explore through the course.

<h2 id="children">Children</h2>

Children or child elements are directories or files that sit inside of another [parent](/#parent) directory.

<h2 id="parent">Parent</h2>

Parent is a term that refers to directory that houses other directories and/or files. These directories and files are referred to as [children](/#children).

<h2 id="relative-paths">Relative Paths</h2>

This is a way to refer to a file with it's relationship to the making the reference. For example, let's say you have a directory structure that looks like the following.

```
src
|-- index.html
|-- style.css
```

You can now make reference to your CSS file in your HTML with a tag that looks like the one below.

```html
<link rel="stylesheet" href="./style.css" />
```

<h2 id="separation-of-concerns">Separation of Concerns</h2>

<h2 id="siblings">Siblings</h2>

Siblings refer to any files that exist in the same directory referred to as the [parent](/#parent) directory.

<h2 id="viewport">Viewport</h2>


Definitions


Model-View-Controller

## What is MVC?

MVC stands for **Model–View–Controller**

It is an architectural pattern commonly used for developing web applications, which are most websites you visit that have user interfaces and interactivity. As we build larger and larger applications, we need a better way to manage them.

MVC takes a large application and divides it into three interconnected parts:

- The Model
- The View
- The Controller

---

## Why Use MVC?

Separating our application into distinct parts does a few things:

- First, it allows us to simplify our code. Thus, we can look only in the part that matches the functionality of interest rather than searching everywhere.
- Next, it allows us to reuse our code. Instead of writing unique code for each part, we can write more generally and reuse the code where appropriate.

---

## When Should MVC Be Used?

Traditionally used for desktop graphical user interfaces (GUIs), the MVC architecture has become popular for designing web applications and even mobile, desktop and other clients.

Popular programming languages like Java, C#, Python, Ruby, and PHP have MVC frameworks that are used in web application development straight out of the box.

---

## Model

The _Model_ handles all of the data and contains the business logic.

It is the application's dynamic data structure, independent of the user interface.

For example, the classes you create for your application (with attributes and methods) belong in the model. The model represents what is being displayed. For example, if you check your email via Gmail, the content of your emails represents the model.

---

## View

The _View_ is how the model is shown to the user.

It is the front-end of the application where HTML, CSS, and JavaScript languages belong.

For example, the interface you’re looking at when you check Facebook, including its styling (fonts, borders, etc) represents the view. Different people checking their Facebook will see the same interface, but different content because their feeds are unique. In other words, different people will see the same _view_ but different _models_.

---

## Controller

The _Controller_ is the link between a user and the system.

It is responsible for controlling the flow of the program, including the interactions between the models and the views. It receives user input, translates it into the appropriate messages, and passes these messages on to one or more of the views.

For example, when you want to create or delete an email in your email client, you’re sending a message to the controller. It is responsible for updating the model (creating or deleting the email), then refreshing the view (showing you what you see on the screen).

---

## Interactions

![mvc image](/images/Model View Controller.png)

In addition to dividing the application into three components, the Model–View–Controller design defines the interactions between them.

The Model is responsible for managing the data of the application. It receives user input from the Controller.

The View presents the Model to the user in a particular format.

The Controller responds to user input and performs interactions on the data model objects. It receives the input, optionally validates it, and then passes the input to the Model.

---


Intro to MVC


Getting Data to the Browser

## Introduction

Finally! Here we find ourselves ready to move into the browser where we can render robust applications that anyone anywhere in the world can interact with! This is an exciting time. But just what is going on here? Where does our application actually exist? How do I get anything _to_ a browser? Well let's answer just that.

## Server vs Client

Regardless of the kinds of applications that you build on the web, these two words will be ones that you deal with extensively. The server environment is essentially the big invisible part of the web that hosts or provides access to web applications. This is where all of the files that are used to build your applications live once you are ready to give people access to your app.

The client environment describes any environment that people use to access your applications. Usually we're talking about a web browser when we're discussing the client, but there are others.

So, in short, we put our applications on a server, so that our users can access them via the client.

## What happens when I navigate to a website??

So how exactly are these things working together to provide the robust user experiences we interact with everyday?

We start at the Uniform Resource Identifier (URI) which is what you type into your browser to go to different locations on the web (i.e. [Google](https://google.com)). When you type a URI into your browser, your machine (provided it is indeed connected to the internet) makes a request to your Internet Service Provider (ISP) for what ever exists at that address.

Your ISP doesn't have any idea, however, what that URI means. This is because locations on the web are not identified by those easy to remember names you type in. Locations on the web are identified by Internet Protocol (IP) addresses which look like this: 127.0.0.1. (If you want to know more about how IP addresses work, [Wikipedia](https://en.wikipedia.org/wiki/IP_address) is actually a great resource) So to obtain this IP addresses, your ISP sends a request to a Domain Name Server (DNS) with the URI that you typed into your browser.

The DNS sends back the IP addresses that is registered to that URI and your ISP then sends that back to the user. Once the requesting browser has the IP address it can make an actual request to that server location. (That IP address actually represents a physical location on a server somewhere in the world) Once the request is received by that server, the application actually decides how to respond.

This response, pending it being valid, usually responds in the form of some combination of HTML, CSS, and JS. The browser accepts these files, pending them also being valid, and renders them on the users screen. The user is then able to click a link and start the process all over again.

## MVC

When we're dealing with these worts of requests, more often than not, we're dealing with a Model-View-Controller (MVC) ecosystem. MVC describes a web app paradigm that processes requests through a controller, manages data through a model, and renders all of that through a view layer. MVC based applications use things called (template engines)[https://stackoverflow.com/questions/9547028/what-is-a-template-engine#9547082] to turn dynamic data into static HTML. The one you use will vary based on the programming language you're learning.

The important concept is that in this ecosystem, when our application receives a request from a browser, dynamic data is pulled from a data store somewhere, and passed to a specified template to render that data. The resulting HTML that we get back will have CSS and JS attached to it. Once this process is finished all of that resulting static material is sent from the application to the browser to be rendered. This is what we are referring to when we discuss Server-Side Rendered applications. In these environments, we're only dealing with dynamic data on the server end of the transaction, not in the browser.

## Conclusion

Server-Side Rendered applications ae a powerful tool for building web apps because they handle all of the application logic in the controlled environment of the server and pass back fast, efficient static material to the browser when they're done processing. It is a tool that you will use extensively in your career as a web developer.


Server Side Rendered Applications


## APIs & Client Side Rendering/Album Collection

## Objective

Our super hip ironic friend needs an easy way to curate soundscapes for the Italian scooter/coffee hybrid co-op startup at which they volunteer (they also fix old polaroid cameras).

They have tasked us with creating an application that can easily keep track of their _EXTENSIVE_ record collection and access music by artists, albums, or individual tracks.

---

## Tasks

The best way to approach this is with a Single Page Application (SPA). So we are going to need to independent pieces that will interact with each other.

### Back-end/API

We are going to need to create an API using Node/Express that will handle our DB and interactions with it.

#### API Interactions:

- All `CRUD` operations for `artist`s
- All `CRUD` operations for `album`s
- All `CRUD` operations for `song`s
- An endpoint to view all `artist`s
- An endpoint to view all `album`s
- An endpoint to view all `song`s

#### Relationships

Our user should be able to:

- access `song`s from the `album` the song is on.
- access `album`s from the `artist` that made them

#### User Input

Each entity should have fields the user can interact with:

- Should have ratings (rating system can be your own design)
- Should have comments with a way to add them
- Should have tags

### Front-end

Our front-end should be an SPA that uses JS to build out components that our users can interact with. Use modular JS along with parcel to create reusable components.

### User Interaction

Our users should be able to add new instances of all entities as well as comments, tags, and ratings

---

## Entities

### `artist`

- name
- image
- albums
- any other pertinent info. Could include:
  - age
  - record label
  - hometown

### `album`

- title
- image
- songs
- record label

### `song`

- title
- link (optional)
- duration

---

## Resources

### General

- [REST](/resources/web/rest)
- [APIs and Heavy Front Ends](/resources/web/apis-and-heavy-frontends)

### MongoDB

- [MongoDB](/resources/data/mongo)
- [Mongoose](/resources/data/mongoose)

### JS

- [AJAX](/resources/javascript/ajax)
- [Fetch](/resources/javascript/fetch)
- [Fluent APIs](/resources/javascript/fluent-apis)

### React

- [React Intro](/resources/react/intro)
- [React Components](/resources/react/components)
- [React State](/resources/react/state)
- [React Testing](/resources/react/testing)

### APIs

- [What is an API, In English, please.](https://medium.freecodecamp.org/what-is-an-api-in-english-please-b880a3214a82)
- [Building a RESTful Web Service](https://spring.io/guides/gs/rest-service/)
- [API List](https://apilist.fun/)
- [IBM Watson: Speech to Text](https://www.ibm.com/watson/services/speech-to-text/)
- [Public APIs](https://public-apis.xyz/)

---

## Articles

- [Redux Basics](https://levelup.gitconnected.com/redux-basics-cebf8e921f3)
- [Writing Tests for React Applications Using Jest and Enzyme](https://css-tricks.com/writing-tests-for-react-applications-using-jest-and-enzyme/)
- [How to connect React to Redux - a diagrammatic guide](https://www.freecodecamp.org/news/how-to-connect-react-to-redux-a-diagrammatic-guide-d2687c14750a/)
- [How to Choose the Right Database](https://towardsdatascience.com/how-to-choose-the-right-database-afcf95541741)


Module 5


## DOM Manipulation/Black Jack

===== WARNING =====

DON'T Copy and paste JS from sites into your project.

You will spend your whole week debugging instead of learning. Feel free to dig into the examples to get an idea of what your code should look like. Ask questions instead!

===== WARNING =====

---

## Overview

Time to get dynamic in the browser! We are going to make an interactive, browser-based version of the popular card game, Black Jack.

---

## Tasks

Use the provided libraries along with your own JS code to build elements in the browser including playing cards, buttons, text fields, etc. to make a simple Black Jack game that the user can interact and play with.

### Dependency

[Blackjack Dealer Logic](https://www.npmjs.com/package/blackjack-dealer-logic)

#### Example

[Blackjack Console Example](https://github.com/donhamiltoniii/blackjack-console-example)

### Functionality

#### User should

- Have drop-down navigation that includes:
  - the ability to restart the game
  - the ability to enter their name which is then displayed somewhere on the screen
- Be displayed with their dealt hand as well as the dealers hand with only one card showing (per standard Black Jack rules)
- Have buttons that `hit`, `stand`, and `double`
- Have running list of games that they win, lose, or push

---

## Tips

- Remember to look at Stack Overflow and Google problems when you have them.
- [Mozilla Developer Network: JavaScript](https://developer.mozilla.org/en-US/docs/Web/javascript)

---

## Resources

- [Black Jack Rules](https://en.wikipedia.org/wiki/Blackjack#Rules_of_play_at_casinos)
- [Javascript: DOM Manipulation](/resources/frontend/js-dom-manipulation)
- [Jest Testing](/resources/testing/jest-testing)
- [The Two Pillars of JS](/resources/objects/oop/node)
- [Webpack](/resources/javascript/webpack)
- [Linting](/resources/linting/node)

---

## Articles

- [A guide to prototype-based class inheritance in JavaScript](https://medium.freecodecamp.org/a-guide-to-prototype-based-class-inheritance-in-javascript-84953db26df0)


Module 4


## TOC

- [TOC](#toc)
- [Personal Portfolio Requirements](#personal-portfolio-requirements)
- [Skills Required](#skills-required)
- [Sprint One Resources](#sprint-one-resources)
- [Tasks](#tasks)
  - [Build the document structure](#build-the-document-structure)
  - [Lay out and style your portfolio](#lay-out-and-style-your-portfolio)
  - [Using online resources](#using-online-resources)
- [Tips](#tips)
- [External Resources](#external-resources)

## Personal Portfolio Requirements

Create a portfolio site highlighting your work that can be shared with potential employers. Focus first on building a good structure, then later style and lay out with with CSS.

## Skills Required

- HTML
- CSS

## Sprint One Resources

- [HTML](/materials/html)
- [CSS: Intro](/materials/css-intro)
- [CSS: Layouts Without Layout Tools](/materials/css-layouts-without-layout-tools)
- [CSS: Progressive Enhancement](/materials/css-progressive-enhancement)
- [CSS: Grid](/materials/css-grid)
- [CSS: Flexbox](/materials/css-flexbox)

## Tasks

- [ ] Make a repository for your portfolio called `your-username.github.io`

### Build the document structure

- [ ] Create a main page (`index.html`) representing a professional portfolio, including the following:
  - [ ] an appropriate `<header>` element
  - [ ] a `<nav>` element linking to each of the sections
  - [ ] an `<h1>` element with your page title (**there can be only one per page**)
  - [ ] a `<section>` element for each of the following, each of which should contain an appropriate heading element:
  - [ ] **About Me**, consisting of:
    - [ ] brief biographical information
    - [ ] photo
    - [ ] contact information
    - [ ] links to your professional networking site profiles, including at least GitHub and LinkedIn
    - [ ] list of skills
    - [ ] Include whatever other information you consider pertinent.
  - [ ] **Projects**, consisting of at least three, each represented as an `<article>`
    - [ ] name of project, linked to GitHub repository or the repository/project's GitHub Pages
    - [ ] screenshot
    - [ ] skills / technologies used
          D [ ]on't worry that your available projects are limited now. You'll have time to increase the size of your portfolio.
  - [ ] an appropriate `<footer>` element

### Lay out and style your portfolio

- [ ] Use css grid and flexbox to position elements on your page.
- [ ] To contain the elements of your grid, you may want to create a `<div>`, something like `<div id="container">...</div>`.
- [ ] Create CSS rules to style page elements appropriately.

### Using online resources

Any resources (images, etc) you use should be:

- free for non-commercial use
- copied to your repository and referenced there rather than via a uri pointing to another site

## Tips

- Section ids can be used to create anchors linking to those sections inside the page.
- See the appropriate Mozilla Developer Network reference pages for guidance regarding tag usage:

## External Resources

- [Resilient CSS (7 Part series)](https://www.youtube.com/watch?v=u00FY9vADfQ)
- [MDN HTML Tutorials](https://developer.mozilla.org/en-US/docs/Web/HTML)
- [Grid Garden](https://cssgridgarden.com/)
- [A Complete Guide to Grid](https://css-tricks.com/snippets/css/complete-guide-grid/)
- [Flexbox and Grid, Your Layout's Best Friend](https://aerolab.co/blog/flexbox-grids/)
- [How to make your HTML responsive by adding a single line of CSS](https://medium.freecodecamp.org/how-to-make-your-html-responsive-by-adding-a-single-line-of-css-2a62de81e431)
- [FlexBox Zombies](https://mastery.games/p/flexbox-zombies)
- [A Complete Guide to Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
- [How to Section Your HTML](https://css-tricks.com/how-to-section-your-html/)
- [CSS In Real Life](https://css-irl.info/)
- [Create a responsive grid layout with no media queries, using CSS grid](https://andy-bell.design/wrote/create-a-responsive-grid-layout-with\no-media-queries-using-css-grid/)
- [How to combine Flexbox and Grid for efficient layouts](https://getflywheel.com/layout/combine-flexbox-and-css-grids-for-layouts-how-to/?utm_source=CSS-Weekly&utm_campaign=Issue-279&utm_medium=RSS)


Sprint One: Core Web Languages (HTML & CSS)


MVC/Reviews Site

## Module Resources

Opinions. You know the saying...everyone has one. And the Internet has made them easier to consume, or ignore.

Acquisitions, Inc. has many, many products from its years of, well, acquiring things. They have asked you to build a reviews site for some of their current products. The data gathered will help them gain insight into their customer base and the products they have come to enjoy...or enjoy less.

Acquisitions, Inc. requires:

- Development of a MVC Web Application by a team that practices agile, utilizes test driven design, and values clean code
- Appropriate use of Git and access to your application on GitHub
- Useful instructions in the form of a README.md file
- Ability for Users to:
  - View reviews on products
  - Create, update, and delete their own reviews

---

## Sprint 1

Prototype pages for:

- **All**:
  - Reviews
  - Categories
  - Tags
- **Two single pages for each**:
  - Review
  - Category
  - Tag
- Hard code all data and make sure all links connect to the right pages
- Make HTML pages for each of these entities and add CSS styling using BEM syntax.

---

## Sprint 2

### Materials

#### Version Control

- [Advanced GIT](/resources/version-control/advanced-git)

#### MVC and Server Side Rendering

- [Intro to MVC](/resources/mvc/intro)
- [Server-Side Rendered Applications](/resources/web/ssr-applications)
- [Rapid Prototyping](/resources/rapid-prototyping/node)

#### Node

- [Node](/resources/javascript/node)
- [Node Testing](/resources/javascript/node-testing)
- [NPM](/resources/javascript/npm)

#### Node packages

- [Express](/resources/javascript/express)
- [Express Middleware](/resources/javascript/express/middleware)
- [Handlebars](/resources/javascript/handlebars)

#### Advanced Jest

- [Jest Test Doubles](/resources/testing/jest-test-doubles)

#### Sending Requests from the Browser

- [HTML Forms](/resources/web/html-forms)

### Resources

- [The definitive Node.js Handbook](https://medium.freecodecamp.org/the-definitive\node-js-handbook-6912378afc6e)
- [Test Doubles - Fakes, Mocks, and Stubs](https://blog.pragmatists.com/test-doubles-fakes-mocks-and-stubs-1a7491dfa3da)

### Goal

- Use static resources to start building out each section of the MVC structure
- Simulate a data layer that will provide

#### Model

Use the data that you put in your static pages to guide the creation of all of your models. Now that you have pages for two Reviews, two Categorys, and two Tags, you can actually use that data to inform excatly what fields you model Objects will need

#### View

To build our view layer, all we need to do is make templates out of the static pages that we created and convert them to Handlebars files

#### Controller

For our controller layer we need to have two separate pieces, routers and actual controllers. The routers will handle the actual directing of traffic, or more literally, executing specific tasks based on the URI endpoint that are requested from the user. The controllers will encapsulate the actual logic that is executed.

#### Data Layer

Create a class that correponds to each Model element that will contain a collection of example elements along with methods to retrieve them in specific ways (i.e. `findAll`, `findById`, etc.). Naming should reflect the data that is held in that service. (i.e. `ReviewService`)

---

## Sprint 3

### Materials

- [MySQL](/resources/data/mysql)
- [SQL](/resources/data/sql)
- [Sequelize](/resources/data/sequelize)
- [Service Layers](/resources/data/service-layer/node)
- [Promises](/resources/javascript/promises)
- [Async/Await](/resources/javascript/async-await)

### Goal

- Include and incorporate an actual database to store our data.
- Maintain all current Objects and add support for database management

### Articles

- [6 Reasons Why JavaScript Async/Await Blows Promises Away](https://hackernoon.com/6-reasons-why-javascripts-async-await-blows-promises-away-tutorial-c7ec10518dd9)
- [How to Choose the Right Database](https://towardsdatascience.com/how-to-choose-the-right-database-afcf95541741)

---

## Sprint 4

### Goal

- Make it so a user can add multiple tags at one time
- Add ability to add comments to reviews. Comments should be listed on a review's page after the review's content.

---

## Sprint 5

### Day 1

- Finish features
- Finalize test coverage

### Day 2

- Bug fixes
- Finalizing styling

### Day 3

- Presentations
- Reflection
