CLI 2.1.4 Released! Upgrade on your terminal --> 

Write a function that takes in 2 numbers and returns their sum.

Here's how another developer might use your function:

```
solution(5,9) // Should return 14
solution(4,1) // Should return 5 
```

Sum of 2 Numbers

Write a function that takes in 3 numbers and returns their sum.

Here's how another developer might use your function:

```
solution(5,9,2) // Should return 16
solution(4,1,9) // Should return 14
```

Sum of 3 Numbers

Write a function that takes in a number and returns true if that number is greater than 5. Otherwise, return false.

Here's how another developer might use your function:

```
solution(9) // Should return true
solution(4) // Should return false
```

Greater than 5

Write a function that takes in 2 numbers and return the largest out of them.

Here's how another developer might use your function:

```
solution(5,9) // Should return 9
solution(4,1) // Should return 4
```
Note: Try to implement your solution without the Math.max function

Biggest Num out of 2

Write a function that takes in 3 numbers and return the largest out of them.


Here's how another developer might use your function:

```
solution(5,9,14) // Should return 14
solution(4,5,1) // Should return 5
```

Note: Try to implement your solution without the Math.max function

Biggest Num Out of 3

Write a function that takes in 2 numbers and returns true if the first number is greater than the second, false otherwise.

Here's how another developer might use your function:

```
solution(5,9) // Should return false
solution(4,1) // Should return true
```

Is First Num Bigger

Write a function that takes in 2 numbers and returns true if their sum is greater than 10.

Here's how another developer might use your function:

```
solution(5,9) // Should return true
solution(4,1) // Should return false
```

Is Sum > 10

Takes in 2 numbers, return a function that returns the sum when the function is called 

Example:

```
const a = solution(5,6) // a is a function, and a() will return 11
```

Functional Sum

Write a function that takes in 2 numbers, return a function that takes in a number that returns the sum of all 3 numbers when called. 
Example:

``` 
const a = solution(1,2); // a is a function
// a(1) returns 4 because 1+2+1
// a(5) returns 8 because 1 + 2 + 5 
// a(2) returns 5 because 1 + 2 + 2
```

Functional 3 Sum

Write a function that takes in 2 functions and returns the sum of the result of the 2 functions
Example:

```
const a = () => {  return 5; }
const b = () => {  return 6; }
const c = solution(a, b) // c should be 11 because a() + b()
```

Functional Sums

A super simple introduction to help you get started!

Foundations of JavaScript

Write a function called solution that takes in a number and returns a function. 

whenever the returned function is called, the next incremental number will be returned

Example:

``` 
let resf = solution(5)
result = resf() // 6
result = resf() // 7

resf = solution(-5)
result = resf() // -4
result = resf() // -3
```

Incremental Closure

Write a function called solution that takes in 2 parameters, a number and a function, and returns a function

The returned function can only be called the input number of times.

Whenever the returned function is called, it returns whatever the input function returns.  
After the returned function has been called up to the first parameter number of times, calling returned function will always return null.  

```
resf = solution(3, () => {
  return "hello"
})
result = resf() // "hello"
result = resf() // "hello"
result = resf() // "hello"
result = resf() // null
...
result = resf() // null

resf = solution(1, () => {
  return 100
})
result = resf() // 100
result = resf() // null
...
result = resf() // null
```

Closure x times

Write a function called solution that takes in 2 parameters, a number and string and returns the string repeated input parameter number of times

```
result = solution(3, "abc") // "abcabcabc"
result = solution(0, "hello") // ""
```

Reminder for students with prior experience: you are not allowed to use `for` and `while` loops. [Reason](https://www.notion.so/garagescript/Recursion-973993e8ed144d8a87cb5695fd1ea8b1)

Repeated String

Write a function called solution that takes in a function. 

The function will be called with increasing indexes (starting from 0) until the input function returns false

```
solution((e) => {
  // this function will be run 7 times with e: 0,1,2,3,4,5,6
  return e < 6
})

solution((e) => {
  // this function will be run 1 time with e: 0
  return false
})

solution((e) => {
  // this function will be run 4 times with e: 0,1,2,3
  return e < 3
})
```

Reminder for students with prior experience: you are not allowed to use `for` and `while` loops. [Reason](https://www.notion.so/garagescript/Recursion-973993e8ed144d8a87cb5695fd1ea8b1)

Calling input function

Write a function called solution that takes in 2 parameters, a number X and a function, and calls the function X number of times and then returns null.

Basically, `solution` should run the user provided function X times.

```
solution(88, () => { console.log('hello') }) // 'hello' should be printed out 88 times.

solution(9, () => { alert('hello') }) // alert('hello') should be ran 9 times.
```

Reminder for students with prior experience: you are not allowed to use `for` and `while` loops. [Reason](https://www.notion.so/garagescript/Recursion-973993e8ed144d8a87cb5695fd1ea8b1)

Call function X Times

Write a function called solution that takes in a number and returns true if it's prime, false otherwise. 

A prime number is a number that is greater than 1, and not divisible by any number other than itself. 

There are a number of approaches to do this, but the simplest is to start a number `i` at 2, and keep using `%` to check if the input number is divisible by i.

```
result = solution(2) // true
result = solution(1) // false
result = solution(8) // false
result = solution(13) // true
```

Reminder for students with prior experience: you are not allowed to use `for` and `while` loops. [Reason](https://www.notion.so/garagescript/Recursion-973993e8ed144d8a87cb5695fd1ea8b1)

isPrime

Write a function called solution that takes in 2 parameters, a string and a letter, and returns true if the character exists in the string, false if the character does not exist in the string. 

```
result = solution('abc', 'a') // true
result = solution('abc', 'd') // false
```

Reminder for students with prior experience: you are not allowed to use `for` and `while` loops. [Reason](https://www.notion.so/garagescript/Recursion-973993e8ed144d8a87cb5695fd1ea8b1)

Letter Find

Write a function called solution that takes in 2 parameters, a string and a letter, and returns the number of times the character shows up in the string

```
result = solution('abc', 'a') // 1
result = solution('bccbccb', 'b') // 3
```

Reminder for students with prior experience: you are not allowed to use `for` and `while` loops. [Reason](https://www.notion.so/garagescript/Recursion-973993e8ed144d8a87cb5695fd1ea8b1)

Letter Count

Write a function called solution that takes in 2 parameters, a string and a function, and returns combined result of the function being called with every character in the string.

```
fun = (e) => {
  return '9'
}
result = solution('hello', fun) // "99999"

fun = (e) => {
  return e + '123'
}
result = solution('blah', fun) // "b123l123a123h123"
```

Reminder for students with prior experience: you are not allowed to use `for` and `while` loops. [Reason](https://www.notion.so/garagescript/Recursion-973993e8ed144d8a87cb5695fd1ea8b1)

Letter Map

Write a function called solution that takes in 2 parameters, a string and a function, and returns a function.

1. When the returned function is called for the first time, the input function will be called with the first character of the string.

2. When the returned function is called for the second time, the input function will be called with the second character of the string.

After the input function is called with the last character of the string, calling the returned function will repeat #1, then #2, etc.

```
fun = solution('hel2', (e) => {
  console.log(e)
})
fun() // prints-> 'h'
fun() // prints-> 'e'
fun() // prints-> 'l'
fun() // prints-> '2'
fun() // prints-> 'h'
fun() // prints-> 'e'
```

Letter Loop

Write a function called solution takes in 2 parameters, a number and a function, and returns a function.

When the returned function is called, the input function will execute after input number milliseconds.

```
fun = solution(1800, () => {
  console.log('hello')
})
fun() // 'hello' will be printed out 1800ms after this function is called
fun() // 'hello' will be printed out 1800ms after this function is called
```

Delayed Closure

Write a function called solution that takes in 2 parameters, a number and a function. 

1. solution should execute the input function (which returns a number) after first input parameter milliseconds. 
2. The input function should be run again after waiting the returned number of milliseconds

```
solution(2000, () => {
  // This function will be run 2000ms after solution is called,
  //   and after that, it will be run after another 3000ms
  console.log('hello')
  return 3000
})
```

Delay 1 and 2

Learn how to solve simple algorithm problems recursively with the following exercises

Variables & Functions

Write a function called solution that takes in a number and returns an array with the length equal to the input number.

Every element in the array must numbered with the correct index: 0,1,2,3,4...

```
solution(5) // returns [0,1,2,3,4]
solution(3) // returns [0,1,2]
```

Array Generator

Write a function called solution that takes in a function and returns an array. 

As long as the input function returns false, array keeps growing with the index.

```
solution((e) => {
  return e > 10
}) // returns [0,1,2,3,4,5,6,7,8,9,10]

solution((e) => {
  return true
}) // returns []

solution((e) => {
  return e % 7 === 0 && e !== 0
}) // returns [0,1,2,3,4,5,6]
```

Array Callback Generator

Write a function called solution that takes in 2 numbers and returns an array with the length equal to the first input number

Every element in the array is an array that is equal to the length of the second input number. All values in the array is 0.

```
solution(5,2) // returns [[0,0], [0,0], [0,0], [0,0], [0,0]]
solution(3, 3) // returns: [ [0,0,0], [0,0,0], [0,0,0] ]
```

2D Array Generator

Write a function called `solution` that does the following: 

```
resf = solution([5,2,1,3], (e) => {
  return e+1
})
resf() // returns 6
resf() // returns 3
resf() // returns 2
resf() // returns 4
resf() // returns 6

resf = solution(["hello", "what", "a", "day"], (e) => {
  if (e.length < 2) return ""
  return e
})
resf() // returns "hello"
resf() // returns "what"
resf() // returns ""
resf() // returns "day"
resf() // returns "hello"
resf() // returns "what"
...
```

Closure iterator

Write a function called solution that takes in an array of functions and a number, and calls every function input milliseconds later

```
const func = () => {
  console.log('hello')
}
solution([func,func,func], 300) 
// console.log('hello') will be run 3 times, after 300ms
```

Delayed function calls

Write a function called solution that that takes in an array of functions and a number, and calls each function input milliseconds after another

```
const func = () => {
  console.log('hello')
}
solution([func,func,func], 300) 
// console.log('hello') will be run after 300ms
// console.log('hello') will be run after 300ms
// console.log('hello') will be run after 300ms
```

Sequential delayed function calls

Write a function called solution that replicates Array.prototype.forEach and call it cForEach

Callback takes 3 input parameters, element, index and original array.
[documentation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach)

```
[5,8,7].cForEach( (e, i, arr) => {
  console.log(e, i, arr)
})
// console.log will be called 3 times:
//    5, 0, original array
//    8, 1, original array
//    7, 2, original array
```

cForEach

Write a function called solution that replicates Array.prototype.map function and call it cMap

Callback takes 3 input parameters, element, index and original array. 
[documentation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map)

```
result = [5,8,7].cMap( (e, i, arr) => {
  console.log(e, i, arr)
  return e + i
})
// console.log will be called 3 times:
//    5, 0, original array
//    8, 1, original array
//    7, 2, original array
// result will be [5, 9, 9]
```

cMap

Write a function called solution that replicates Array.prototype.reduce and call it cReduce.

Callback takes 4 input parameters, accumulator, element, index and original array. 
[documentation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce)

```
result = [5,8,7].cReduce( (acc, e, i, arr) => {
  console.log(acc, e, i, arr)
  return acc + e + i
}, 'hi')
// console.log will be called 3 times:
//    'hi', 5, 0, original array
//    'hi50', 8, 1, original array
//    'hi5081', 7, 2, original array
// result will be 'hi508172'
```

It is best practice to pass in 2 arguments into `reduce` function. Therefore, for this challenge, you can assume that when your function, `cReduce`, will always be called with 2 arguments: a function and initial value.

cReduce

Write a function called solution that replicates Array.prototype.filter and call it cFilter.

Callback takes 3 input parameters, element, index and original array. 
[documentation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter)

```
result = [5,8,7,6,9].cFilter( (e, i, arr) => {
  console.log(e, i, arr)
  return e % 2 === 0
})
// console.log will be called 5 times:
//    5, 0, original array
//    8, 1, original array
//    7, 2, original array
//    6, 3, original array
//    9, 4, original array
// result will be [8,6]
```

cFilter

Write a function called solution that replicates Array.prototype.find and call it cFind.

Callback takes 3 input parameters, element, index and original array. 
[documentation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find)

```
result = [5,8,7].cFind( (e, i, arr) => {
  console.log(e, i, arr)
  return e % 2 === 0
})
// console.log will be called 2 times:
//    5, 0, original array
//    8, 1, original array
// result will be 8
```

cFind

These exercises will help you gain a better understanding of what it means for a data structure to be non-primitive.

Arrays

Given an array of strings (keys) and object, return a new array of values using the given array elements as keys to access the given object. 

```
solution(['123', 'abc'], {123: 'hi', 345: 'world', abc: 'world'});
// will return ['hi', 'world']
```

Return array of values

Given 2 integers, create 2d arrays of objects. First integer represents the amount of nested arrays, 2nd integer represents the amount of objects within each nested array.

```
solution(3,2)
// will return the following:
[
    [{x: 0, y:0}, {x:1, y: 0}],
    [{x: 0, y: 1}, {x:1, y: 1}],
    [{x: 0, y: 2}, {x:1, y: 2}],
]

solution(99,2)
// will return the following:
[
    [{x: 0, y:0}, {x:1, y: 0}],
    [{x: 0, y: 1}, {x:1, y: 1}],
    [{x: 0, y: 2}, {x:1, y: 2}],
    ...
    [{x: 0, y: 98}, {x:1, y: 98}],
]
```

Create 2d Array of Objects

Write a function called solution that takes in an array of strings and returns a function.

returned function will return an object with only keys that exist in the input array.

```
const resp = solution(['apollo', 'bella', 'cinderella'])
console.log(resp({'apple': 25, 'apollo': 45, 'cindy': 84}))
// will console.log this object: {"apollo": 45}

console.log(resp({orange: 80, 'apollo': 95}))
// will console.log this object: {'apollo': 95}

console.log(resp({iron: 'man', billy: 'joel'}))
// will console.log this object: {}
```

Return function from array of strings

Write a function that takes in an array of numbers and a number, and returns true if any pairs add up to the number. (The numbers in the array is not unique, meaning there may be duplicate numbers)

```
solution([1,2,22,333,23], 25)   // returns true
solution([1,2,22,333,23], 24)   // returns true
```

2 sum

Given object of key-string values and an object of key - function values, call the functions in 2nd object (if possible) using the values in 1st object as function params. Return new object.

```javascript
solution ({
   "name": "drake",
   "age": "33",
   "power": 'finessing',
   "color": "platinum"
}, {
   "name": (e) => { return e + "kendrick" },
   "power": (e) => { return "motivating" + e }
});

// will return : 
   {
      "name": "drakekendrick",
      "age": "33",
      "power": "motivatingfinessing",
      "color": "platinum"
   }
```

Function call between Objects

Write a function that takes in an array of numbers, and returns a new array of all duplicate numbers.

```
solution([1, 2, 2, 3, 1])  // should return [1, 2]
solution([1, 1, 1, 1, 2, 3, 3])  // should return [1, 3]
```


Duplicate Numbers

Write a map function for objects

```
const info = {
   ironman: 'arrogant',
   spiderman: 'naive',
   hulk: 'strong',
}
const result = info.map( (key, value, i) => {
   return key + i + value
})
console.log(result)

// will print out ['ironman0arrogant', 'spiderman1naive', 'hulk2strong']
```

Map Objects

Write a function that takes in an object and a number (milli-seconds). 

   * you must call each function value of the object: 
     * Given an object: `{"nVal": (k) => {...}}`
     * `{"nVal": (k) => {...When this function runs, k is "nVal"...}}`

```
const a = {
   "jayZ": (key) => console.log(key),
   "tupac": (key) => console.log(key + 2),
   "name3": (key) => console.log(key === "name3"),
   "level": (key) => console.log(key + key + key)
}
solution(a, 500)

// should print out: 
"jayZ"
... 500 millieseconds later...
"tupac2"
...500 millieseconds later...
"true"
...500 millieseconds later...
levellevellevel
```

Call function values of an Object

Create a JavaScript file `9.js` so that when you run it with `node 9.js`, the computer will output an HTML file `9.html` that displays each pokemon's name and image. There cannot be any JavaScript in the generated html file. 

1. Send a request to [https://pokeapi.co/api/v2/pokemon/](https://pokeapi.co/api/v2/pokemon/). 
2. Look at the response, you will notice that each pokemon has a url. You need to send another request for each pokemon to get the image url. It is located under `sprites` key of the object.
3. Use the responses to create an HTML string to display the name and pokemon's image. 
4. Write the resulting string into a file using `fs.writeFile` 

The `img` tag with the `src` attribute are instructions for the browser to get the image data from the url and display it. For example: put this tag into an html file to display a picture of a cat.

`<img src="https://placekitten.com/g/200/300" />`

Send a request

Send a request to https://pokeapi.co/api/v2/pokemon/ and create [a Pokemon Viewer](https://songz.c0d3.com/js3/pokeview.html) . Have the viewer include previous and next buttons at the top of the page, and display 20 images and names of pokemon per page. 

Build this Pokemon Viewer

These exercises will test your understanding of objects, which includes linked lists and trees

Objects

Create a smart watch UI. [Demo](https://www.c0d3.com/challenges/watch.html)

1. To embed an iFrame of google maps, go to [google maps](https://www.google.com/maps) and search for a location. Then click on the hamburger menu on the left and select `share or embed map`. Copy the embed iframe code.

2. The watch asset is located in [https://c0d3.com/challenges/assets/watch.jpg](https://c0d3.com/challenges/assets/watch.jpg). Watch image is `600x800` pixels, Font size for Time: `5em` with margin-top of `30px`. Day and date are simple `h2` tags.

4. **Acceptance Criteria** Make sure to pick a specific location so the red marker shows up!
  * When user clicks anywhere on the white background that has the time, the white background must slide up. On another click, it must slide back down and toggle back and forth based on user clicks.
  * The info box (including direction and rating etc.) should not appear (because it doesn't fit the screen and it creates a bad user experience). The solution is pure css, you do not have to do anything with the iframe.
  * When the page loads, the time must reflect the current time (does not have to update)

5. Steps and Points:
  * (20 points) Make a watch show up on the bottom left of the page.
  * (20 points) Create a div that is positioned where the watch face is supposed to be.
  * (30 points) Put in the map and the content that slides up and down when clicked.
  * (30 points) Add in the JavaScript to get the correct date. 

Sample Code:

```
const d = new Date();
["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"][d.getDay()]; // Get Day
["January", "February", "March", "April", "May", "June",
"July", "August", "September", "October", "November", "December"][d.getMonth()]; // Get Month
```

Smart Watch UI

Create a file rating component. [Demo](https://www.c0d3.com/challenges/stars.html)  
**Hint** If you notice the selected stars growing larger than the other stars, it is simply an effect of adding a 3px border so that when you apply a color you can still see the stars clearly. Css:

```
    -webkit-text-stroke-width: 3px;
    -webkit-text-stroke-color: black;
```

* You need to add a free, open-source, font library called [font-awesome](https://fontawesome.com/how-to-use/on-the-web/setup/getting-started?using=web-fonts-with-css). Add the css file from their cdn (content delivery network) or use [this stylesheet ](https://use.fontawesome.com/releases/v5.2.0/css/all.css) you should be able to create basic star icons with `<i class="far fa-star"></i>` and stuffed star icons with `<i class="fas fa-star"></i>`

* **Acceptance Criteria** All stars mentioned here is an example. Please do not hardcode.
  - Hover over the 4th star. Go straight down out of the div (so that all 4 stars are still selected). Go straight up on the 2nd star, then go straight down. Only stars 1 and 2 should be selected.
  - Click on the 4th star. When you hover over the other stars (without leaving the div), the current selection should not change.
  - Click on the 4th star. Then click on the 2nd star. Only stars 1 and 2 should be selected.
  - Click on the 4th star. When you move mouse out of the stars container and move mouse back in, you should be able to resume selection as normal.

* **Steps and Points** 
  - (10 points) Get 5 stars to show up on the HTML. 
  - (20 points) Create a class function for each star, replace 5 stars in step one (html) by creating an array of stars objects.
  - (35 points) Add hover functionality to highlight the appropriate stars.
  - (35 points) Solve click functionality and text.

Stars UI

Recreate a Google Doodle of the First World's Fair. [Demo](https://www.c0d3.com/challenges/fair.html)  

* You are given three images: [Small Image](https://c0d3.com/challenges/assets/fair/small.jpg), [Large Image](https://c0d3.com/challenges/assets/fair/big.jpg), [Scope](https://c0d3.com/challenges/assets/fair/scope.png) to create the experience.

* **Acceptance Criteria** is pretty straightforward.
  - Recreate the demo experience, make sure the main functionality works.
  - Image must be centered in the page.
  - Make sure the area that is magnified is accurate to where the cursor is supposed to be.
  - Make sure the cursor does not show up in the magnified experience because it creates a bad user experience.

* **Steps and Points** 
  - (35 points) Get the small image to show, and a circular div that moves when the mouse is over the image.
  - (50 points) Map the position of the mouse to the background position of the div and display magnified div.
  - (15 points) Add scope image to the div.

* **Hint**
  - You need the `css` property `pointer-events: none;` on the scope so your mouse events go directly to the small image. Without it, your mouse movement may not be smooth and the scope may only update when your mouse moves out of the scope.

Google Fair

Create a simple game. [Demo](https://c0d3.com/challenges/lightsoff/lightsoff.html)  

**Hint** The game starts with one light turned on. When you click on it, it toggles (therefore turning off), and its surrounding lights (up, down, left right) will also toggle. The game ends when all the lights are turned off.

* **Acceptance Criteria**   
  - You should detect when game is over (all lights are off).  
  - At the end of the game, user should be able to input a new size for the board and replay the game.  

* **Steps and Points** 
  - (40 points) Create a 2D array of Block objects that displays blocks on the page.
  - (20 points) When a lit block is clicked, trigger neighbors to toggle (if already lit up, then make it light off; if already lit off, then make it light up) (using the 2D array). When a non lit block is clicked, nothing happens.
  - (20 points) Add a check for game to be over.
  - (20 points) Wrap code into a create game function.

Lights Off

Create a task board with the following [css specs](https://raw.githubusercontent.com/garageScript/c0d3/master/public/challenges/assets/kanban.png).  
[Demo](https://c0d3.com/challenges/kanban/kanban.html)   
Make sure to try out the undo functionality on the bottom right of the page.    

* **Acceptance Criteria** This should be a fully functional KanBan board.
  - Users should be able to add todos, click on each todo to have an option to delete it, and move items between boards.
  - You should be storing todo list into localStorage so that when your users revisit the board, they will see their items.
  - You should support an undo button so that users can undo their actions. Undo functionality does not have to persist between sessions. 

* **Steps and Points** 
  - (15 points) Create HTML (with sample todo) for the board.
  - (15 points) Style your html elements to make sure your board is pixel perfect.
  - (15 points) Convert your html into function objects, so that when submit is clicked todos are added.
  - (20 points) Implement delete, right / left functionality.
  - (20 points) Implement localStorage
  - (15 points) Implement undo.

Kanban Board

* **Build a selection box**   
![selection box gif](https://raw.githubusercontent.com/garageScript/c0d3/master/public/images/selection-box.gif)

* **Acceptance Criteria** 
  - Once you click and drag, area that the mouse covered turn grey, and boxes selected turn blue.
  - Once you release the mouse, boxes selected stay blue and grey area disappear.

* **Steps and Points (select)** 
  - (20 points) Create a box class and use that to create a 2D array to display a nxn box. (here you can have n=5)
  - (40 points) Implement the coloring of the boxes as you drag.
  - (40 points) Implement the grey area (with opacity) as you drag.

**or**

* **Create a simple snake&food game** [Demo](https://c0d3.com/challenges/snake/snake.html)  
**Hint** If you think about it, you need an object called block. A food is a block, a snake is made up of a chain of blocks (linkedList) . 

* **Acceptance Criteria**   
  - You should detect when game is over (snake hit a wall or onto itself).  
  - User should be able to change direction of the snake with arrow keys.  
  - Use a linked list for efficiency  


Select or Snake

Create a game called MineSweeper [Demo](https://c0d3.com/challenges/mine/mine.html)  

* **Acceptance Criteria**   
  - Generate a 10x10 board. There should be 10 bombs hidden within the board.  
  - If user clicks on a bomb, they lose. If not, the box reveals a number. This number represents how many bombs there are in the 8 boxes surrounding it. (Therefore it is not possible to have a number greater than 8)
  - If the revealed number is 0, reveal all 8 boxes around the 0. If any of the revealed boxes are also 0, reveal all the unrevealed 8 boxes around them and recursively continue.
  - Users should be able to `ctrl+click` or right click on a box to flag it as a potential bomb, but they can still click on it  
  - Game ends when all the non-bomb boxes are revealed.  
  - At the end of the game, user should be able to replay the game.  

* **Steps and Points** 
  - (15 points) Create a box class and use that to create a 2D array to display a nxn box.
  - (15 points) Write a function that randomly makes n boxes with a bomb inside, and add logic to end the game once a bomb is clicked.
  - (15 points) Write a function that returns the array of neighbors when you click on a non-bomb box, then display the number of bombs around that box.
  - (25 points) Recursively call surrounding boxes when its count is 0.
  - (15 points) Write function to check if user has won (number of revealed boxes + bombs) should equal nxn.
  - (15 points) Polish (like control-click to label).

MineSweeper

Create challenging front-end mini-projects and build an understanding of Web Development. Covers the last fundamental JavaScript concept: (Complex Objects)

Front End Engineering

[Demo Link](https://js5.c0d3.com/location)

1. Create a route `/visitors` that displays the google map of where your visitors are and a list of the cities and the count of visits to this page.
2. Create a route `/api/visitors` that sends back a JSON of all the visitors that have visited your site. 
3. Make sure to use `x-forwarded-for` headers!

Use the following API to get an estimate of where the user is coming from:  
`https://js5.c0d3.com/location/api/ip/<Replace with an IP address you want to look up> `

To send a request from your server, you need to use a fetch library like [node-fetch](https://www.npmjs.com/package/node-fetch)

If you do not want to spend money creating your own Google Maps API key, use ours! Right the source code of the demo site and then copy the script from the code into your own project:

```
<script src="https://maps.googleapis.com....></script>
```

IP Geolocation

[Demo Link](https://js5.c0d3.com/command.html)

1. Create a route `/commands` that takes in an input box that lets you execute commands directly on your server. 
2. You must be able to see the response on the page. 
3. Use `execFile` or `spawn` function from Node's [`child_process` library](https://nodejs.org/api/child_process.html) to execute the command. 
4. To protect your code from malicious users, you should only allow these commands: `ls`, `cat`, `pwd`. 

P.S.: The `child_process` library also includes a `exec` function which takes a string containing the entire command to execute. This potentially may be used to trigger arbitrary command execution, and so, it's a unsafer alternative.

Commands

[Demo Link](https://js5.c0d3.com/imggen)

Create a url `/memegen/api/write some text here` that generates an image meme.   
Use the [jimp library](https://www.npmjs.com/package/jimp) to help you draw text into the image.  
Allow users to specify the following in the URL parameters:

* blur - (Optional). Amount of pixels to blur by.
* src - (Optional). URL for the meme image. If no url is provided, use https://placeimg.com/640/480/any
* black - (Optional). If true, draws the text in the image in black. Otherwise, white.

Cache the last 10 images searched in memory so your server will return the images faster if it has been loaded before.

Example:

* https://js5.c0d3.com/imggen/api/great%20job?blur=4&black=true&src=https://placeimg.com/640/480/nature

Using Jimp:

* `Jimp.loadFont(....)` takes in a font variable and returns a promise. 
    * For font, you can use a built in font like `Jimp.FONT_SANS_32_WHITE` or ...BLACK. 
    * When the promise resolves, you get a `font` object.
* `Jimp.read(...)` takes in a url and returns a promise 
    * When the promise resolves, you get a `image` object.
* Using your image object you can run these functions:
    * `image.print` takes in a font object, starting x position, starting y position, and the text you want to write.
    * `image.getBuffer` takes in a fileType and returns a promise.
        * For fileType, you can use the built in type `Jimp.MIME_JPEG`.
        * When the promise resolves, you get a `buffer` object. You can turn the buffer into a string and call `fs.writeFile` to create a meme file, but we don't want to create unnecessary files. We can simply send the buffer back as a response with `res.send(buffer)`

Make sure to set the response `content-type` header to `image/jpeg` before sending back the response!

Meme Gen

[Demo Link](https://js5.c0d3.com/assetExercise/simple/)

Build APIs for powering the text editing site. Acceptance criteria:

1. Listen to incoming `POST` requests to `/api/files` to create a file.
2. Listen to incoming `GET` requests to `/api/files` to get the an array containing all the files.
3. Listen to incoming `GET` requests to `/api/files/file-name` to get the content of file-name.

Note: `fs.readdir` takes in an argument (the path of folder) and a function. The function will be called with 2 arguments (error, data) when computer finishes.

To prevent your server from getting filled up with junk files, your server must automatically delete files after a 5 minute mark for each file. 

Asset Creation

[Demo Link](https://js5.c0d3.com/chatroom)

First, you will use the same API that you used in JS5 Todo exercise section to check if user is logged in, signup a user, and get information about the user with this API:

[https://js5.c0d3.com/auth/api/session](https://js5.c0d3.com/auth/api/session)

Please review the Todo exercise if you need to understand how it works and what API requests you must send.

When the user goes to the site, send the request to your server with the `Authorization` header in the request. Your server sends the request to [the auth api](https://js5.c0d3.com/auth/api/session) to get information about your user. 

Sample header
```
Authorization: "Bearer a-jwt-token"
```

Provide the following APIs. Respond with a 403 status code if user is not not logged in.  

* GET `/api/session` - sends back the user information. The front end uses this to determine whether to render the login page or enter room page.
* POST `/api/:room/messages` - Creates a new message in the room.
* GET `/api/:room/messages` - Gets the messages in the room.

Note: You should be using a middleware to set the user into the request object. 

In this example, you are using a 3rd party user signup / login service to store your user's login credentials. In the industry, some companies choose not to implement their own signup / login services and use a third party service.

Chatroom using JWT Auth

[Demo](https://js5.c0d3.com/auth)

Build your own backend for authentication the same way that the authentication backend for chatroom works. It must support:

* POST `/api/users` to create a new user
    * `password` field cannot be blank and must be > 5 letters
    * `username` field cannot be blank, only contains letters and numbers (alphanumeric), is unique
    * `email` field must contain @ symbol and must be unique
    * Users should be able to pass in any additional key/value data pairs in the body.
* POST `/api/sessions` to create a new session (aka login a user)
    * `username` field can be either username or email.
    * `password` field must match the password for the user.
* GET `/api/sessions` to get the currently logged in user. You must accept a json web token in the header field.

To generate a `jwt` token, use [jsonwebtoken](https://www.npmjs.com/package/jsonwebtoken) library. 

* `jwt.sign( {userId: 1234 }, 'secret password' )` - will return a secure jwt token.
* `jwt.decode( token )` - will return the data in the token, which would be `{userId: 1234, iat: ...}` if encoded like the example above. `iat` field gives you the time (in seconds) when the token has been signed.

Make sure you properly secure user passwords with [bcrypt](https://www.npmjs.com/package/bcrypt)

Authentication

[Demo](https://js5.c0d3.com/imageAnalysis)

1. For file uploads, use a [library](https://github.com/expressjs/multer) called `multer`.
2. To use multer, first create an upload object `upload = multer({ dest: 'files/' })`
3. Next, pass your upload object into your post request as a middleware: `app.post('/files', upload.array('userFiles'), (req, res) => ...`
3. After the middleware, you can access files in the request object: `req.files`

After you can successfully upload the file, you need to pass each file into [Tesseract](https://tesseract.projectnaptha.com/) Library for text analysis. Since this will take time for each image, response status should be `202` and you should create and return a job url that the user can visit to view the status of the job.

You would need to provide an API `/api/job/:jobid` to lookup the status of each processed file. 

Sample Tesseract Code

```
const Tesseract = require('tesseract.js')
Tesseract.recognize( ..path to image file... , 'eng', { logger: console.log }).then( ... callback ...)
```

If your application experiences crashes during the text recognition, you may have to delete the generated file `eng.traineddata`. 


Image Text Extraction

In this challenge, you will be building an application where users can go to your website and [take a picture](https://js5.c0d3.com/examples/webcam).

1. [Get user's webcam](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia) by calling `navigator.mediaDevices.getUserMedia({...})`, which returns a promise.
2. When the promise resolves, you will get the webcam video stream object in your callback. Make sure you have a `video` element to display the video, and set the video element's `srcObject` property to the video stream so users can see their video.
3. When users click on the snap button, you need to draw the video into your canvas element to get an image of the video. To do this, first get the context (think of context as a paintbrush): `const context = canvas.getContext('2d')`. 
4. Then, draw the video by passing the video element into the drawImage function: `context.drawImage(video, 0, 0)`
5. Next, you want to get the image data from context using `canvas.toDataURL()`
5. The data returned looks like the following format: `data:image/png;base64,ENCODED_IMAGE_DATA`. Since we only want the ENCODED_IMAGE_DATA, we can delete the the metadata.
6. Send the data to your server.
6. When your server receives the data, you can simply write the image data into your server. Since the image is encoded as base 64, make sure you specify it: `fs.writefile(filePath, imgData, 'base64', () => {})`
2. On your client page, make sure you request to the server for a list of images so users can see all the pictures that was ever taken by the site.

Selfie Queen

**Final Project**: Complete a chatroom

1. When the user first goes to your site, send them to a simple login page that asks for a username (make sure to set a cookie!). Keep it simple this time, no need to create an account or use a password, only the username.
2. After getting in, user should see his video and input box. When user types something and hits enter, his image and text will be sent to server.
3. When server receives image data, it needs to decode the base64 image data to Buffer so the image can be manipulated: `const imageData = Buffer.from(req.body.data, 'base64');`
4. Next, use `Jimp` just like in challenge 3 to draw the text onto the image and write it to file as `username.png`. Jimp can load an image from a buffer the same way it loads from an url: `Jimp.read(imageData)`.
5. When the user types into the input box and hits enter again, the meme will be saved as `username.png`. Every user should always only have 1 image.
6. When another person joins the room, they should see memes of everybody in the chatroom that updates in realtime. 
7. When you get this far, you will notice that images do not change even though the files have changed. This is because of browser caching. To bust the cache, you can add a date query params to the end of the image request, for example: `username.png?${Date.now}`.
8. If you bust the cache this way, you will see that images are now always flickering. Flickering is happening because it takes the browser awhile to retrieve the image. To get around this problem, you should render all the images into an invisible div. When all the images are loaded, then show the invisible div and hide the current div. This way, users will see a smooth instantaneous update of the images.

Create a MemeChat

These exercises will help you build a strong understanding of how the web works.

End To End

Create server side graphql endpoint that manages lessons, challenges, and pokemons!

1. Install Apollo's graphql middleware so your server has the playground. [Follow the documentation](https://www.apollographql.com/docs/apollo-server/integrations/middleware/).
2. Create typedefs for lessons and pokeman provided by [lessons api](https://www.c0d3.com/api/lessons) and [pokemon api](https://pokeapi.co/). Typedefs are the documentation for inputs and outputs of your app. Sample typedef provided below. Must match functionality of [existing documentation](https://js5.c0d3.com/js6c1/graphql)
3. Create your resolver, which are functions that will run when a graphql request is received. Since your resolver will be asynchronous (you need to send request to other services), make sure it returns a promise!

Sample Typedef:

```
const server = new ApolloServer({
  typeDefs: gql(`
    type User {
      name: String
    }
    type Query {
      users: [User]
    }
  `),
   resolvers: {
     Query: {
       users: () => {
         return [{name: 'Terman Hong'}, {name: 'Kahul Ralra'}]
       }
     }
   }
});
```

Please test your graphql endpoints against the [example of how your queries would be used](https://js5.c0d3.com/js6/pokemonSearch.html) and change the following:

1. `debounce` function argument to `300`ms. If you don't know what debounce is, ask in chatroom!
2. Change the graphql url to your own server's url.

Do not include the example front end code.

GraphQL Intro

Continue from previous problem (make sure its approved and merged in first). Use the UI from [this example](https://js5.c0d3.com/js6/addLessons.html) to allow user to login as a pokemon and enroll in classes. Look at [this example playground](https://js5.c0d3.com/js6c2/graphql) to determine what resolves you need to support.

1. You need to store user sessions. You can use [express-session](https://github.com/expressjs/session) middleware.
2. To pass the request into your resolver, you need to pass in a `context` function when initializing ApolloServer. This function takes in an object with `req`, and `res` keys. Whatever your function returns will be passed into all your resolvers as the 3rd argument. [Documentation](https://www.apollographql.com/docs/apollo-server/api/apollo-server/)
3. Query is reserved for retrieving data. To create or update data, we should use a mutation. Sample code below.

Sample codes:

```
// Setting up Apollo Server with request in the context:
const server = new ApolloServer({
  ...
  context: ({ req }) => {
    return { req } 
  })
})

// Creating a mutation: first define the mutation typeDef, then create a Mutation resolver, almost exactly like your Query resolver
type Mutation {
  addMessage(value: String): Message
}
... {
  Query: ...,
  Mutation: {
    addMessage: (_, args, context) => {
      // The second parameter (args), will contain the user input.
      // Context is a variable you can setup yourself when creating the server. Example below.
    }
  }
}
```


GraphQL 2

Go through the tutorial first!
https://reactjs.org/tutorial/tutorial.html

Part 1
---

Add React JavaScript library and turn Stars UI into a react component called `Stars`

First, you want to add react libraries into your html file.

```
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
```

React's `<component>` tags are not JavaScript, they are merely syntax extension to JavaScript that needs to be compiled into JavaScript that browser understands (ie `document.createElement...`). To do this compilation, we need to add Babel:

```
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
```

With these 3 scripts, you can now write JSX and include it as a babel template (for babel to parse / compile it). Make sure to label your script with the `type` attribute!

```
<script type="text/babel" src="/app.js"></script>
```

To render a component into the DOM:

```
ReactDOM.render( 
  <h1>Hello World</h1>,
  document.getElementById('root')
);
```

Example of a simple react component:

```
const AddCount = (props) => {
  const arr = useState(props.start)
  const countVal = arr[0]
  const setCountVal = arr[1]
  const clickFn = () => {
    setCountVal( countVal + 1 )
  }
  return (
    <div>
      <h1> Count {countVal} </h1>
      <button onClick={ clickFn }> Increase </button>
    </div>
  )
}

```

Part 2: 
---

Rebuild Kanban Board in react (no need for undo functionality). When users go to `/kanban`, display Kanban Board. When users go to `/stars`, display stars.

On the client code, you can get the url path like this: `window.location.pathname`

*Note* The web pack configuration might load slowly. If you don't see your changes reflect, make sure to check your web pack build to make sure that it is done.

React - Stars and Kanban

Continue from previous problem (make sure it's approved and merged in first). Refactor the previous lesson (stars) by removing all the libraries you included in your HTML file and use webpack to build a file that contains all the JavaScript you need to run. All the functionalities should stay the same.

In production, you don't want the browser to be always be using Babel to render your React code into JavaScript that browser understands. Instead, you want to compile it first, then add the output JavaScript to your HTML. `Webpack` helps you with the compilation. Your goal in this challenge is to setup webpack to build your previous challenge (and future challenges) into JavaScript that your browser can understand. With Webpack, you can now use any npm modules in your application!

1. First, you want to create a webpack config. The file must be named `webpack.config.js`. 
2. To compile your code, run `webpack --watch`. We include the watch option so that whenever our file changes, webpack compiles the file automatically.
3. Change your html file to use the compiled file.

Sample Webpack File:


```
const path = require('path');

module.exports = {
  entry: './src/app.js', // The first file to look into. Move your JavaScript here!
  mode: 'production',
  output: {
    path: path.resolve(__dirname, 'public/dist'), // We will put the compiled file into public/dist
  },
  module: {
    rules: [
      { // This section tells Webpack to use Babel to translate your React into JavaScript
        test: /\.js$/, // Regex for all JavaScript file
        exclude: /node_modules/,
        loader: 'babel-loader',
        options: {
          'presets': ['@babel/preset-react'],
        },
      },
    ],
  },
};
```

After you have webpack installed, rebuild the front end [Pokemon Lesson Enrollment example](https://js5.c0d3.com/js6/addLessons.html) in React. Make sure to split your components into separate files!

Webpack + Pokemon Classes

Build a react native app on Expo. Take a picture, send the picture to JS5 Challenge 8.

React Native Selfie Queen

Starting from your Pokemon Lessons project, add ability for the logged in Pokemon to rate each lesson. You must use the Stars component to give each file a rating. 

1. First, use GraphQL to send back dummy data so you can focus on the front end. Make sure that you are sending mutation requests whenever user clicks on the file component. 
2. Store lesson ratings into an object. 

Star Lesson

Add [React-Apollo](https://www.apollographql.com/docs/react/get-started/) into your project, refactor Star Lesson to use Apollo Client's `useQuery` and `useMutation` hooks. Apollo helps you send requests to your graphql server so you don't have to do it manually.

1. To integrate with apollo, first you need to create a client object that specifies your graphql API

```
const client = new ApolloClient({
  uri: "https://example.c0d3.com/myGraphql"
});
```

2. wrap your app within an apollo provider and pass client in as a prop: 

```
<ApolloProvider client={client}>
  <App />
</ApolloProvider>
```

3. If your component needs data, you can use the `useQuery` hook provided by Apollo, passing your query string to it:

```jsx
import { useQuery } from '@apollo/client';

const App = () => {
  const { loading, error, data } = useQuery(FILES_QUERY);
  if (loading) return <h3>Loading...</h3>;
  if (error) return <h3>Error</h3>;
  return <Component data={data} />;
}
```

4. To trigger a mutation call, you can use the `useMutation` hook:

```jsx
import { useMutation } from '@apollo/client';

const App = () => {
  const [rateFile, { loading, error, data }] = useQuery(RATE_MUTATION);
  if (loading) return <h3>Loading...</h3>;
  if (error) return <h3>Error</h3>;
  
  const trigger = () => {
    rateFile({variables: {name: 'data1', value: 'data2'}})
  };
  return (
    <div>
      <button onClick={trigger}>Trigger</button>;
    </div>
  );
}
```

Apollo

Create realtime chatroom, without using setTimeout. Chatroom should show users currently logged into the chatroom as well as realtime chat information

1. First, design the UI. Should include list of online users on the left, chat messages / inputbox on the right.

2. Add socket to your server. Instead of `app.listen`, you need to use `http.listen`. The [`http`](https://nodejs.org/api/http.html) module comes by default with Node.js, so it doesn't need to be installed with your package manager.

  ```
  const app = require('express')();
  const http = require('http').Server(app);
  const io = require('socket.io')(http);

  io.on('connection', (socket) => {
    console.log('socket.id', socket.id)
  });

  http.listen(3000, () => console.log('Server listening on http://localhost:3000'))
  ```

3. On the front end add the socketio javascript library that your `http` server provides:
`<script src="/socket.io/socket.io.js"></script>`

4. Then, you should be able to connect to the server socket. You should see logs from both the server and the client. The socket on the server side refers to the browser that is connected to the server. If 2 users goes to your website, you should see 2 socket ids being logged. Every socket corresponds to a user.

  ```
  const socket = io();
  socket.on('connect', () => {
    console.log('connected');
  });
  ```

5. To send data from server to client, `socket.emit('eventName', data)` sends to one user, `io.emit('eventName', data)`  sends to every user connected, and `socket.broadcast.emit('eventName', data)` sends to every user except the socket user.

6. Client sends data to the server the same way, by using `socket.emit`. 

7. To listen to events, simply bind an event listener to the socket: `socket.on('eventName', (data) => ....)`

8. There is system default events as well. On the server, you can listen to disconnect events to know when a socket (aka user) has been disconnected: `socket.on('disconnect', () => {...})`


SocketIo

React, GraphQL, SocketIO

Write a function that clears all existing timeouts on a page. Since this is overwriting system `setTimeout` function, you need to restart the test every time you change the file.

ClearAllTimeouts

Given an function (f1) and a time, return a debounced function that executes after the given time. Debounce is most commonly used for window resize events so page doesn't rerender hundreds of times per second. 

***Example 1:***
```
const func = debounce( () => console.log('hi'), 200);
window.onresize = func;
// "hi" will be printed out once, 200ms after you finish resizing the window.
```

***Example 2:***
```
bouncedLog = debounce(console.log, 1000); // We are planning to debounce console.log
setInterval( () => bouncedLog("Hello"), 200);
// "Hello" will be never be called.
```

***Example 3:***
```
bouncedLog = debounce(console.log, 1000); // We are planning to debounce console.log
bouncedLog("Hey!");
bouncedLog("Hello");
bouncedLog("Hello World");
// "Hello World" will be called once, after 1000ms
```

Debounce

Given an function (f1) and a time, return a throttled function that executes once during the given time. Throttle is most commonly used during mouse drag events to make UI fluid but also prevent rendering from firing hundreds of times per second (30-60 times per second is good enough, hence 60 frames per second)

***Example 1***
```
const func = throttle( () => console.log("hi"), 500);
document.body.onmousemove = func;
// "hi" will be printed out every 500 ms as the mouse moves over the document body
```

***Example 2***
```
throttleLog = throttle(console.log, 1000); // We are planning to throttle console.log
throttleLog("Hey!");
throttleLog("Hello");
throttleLog("Hello World");
// "Hello World" will be called once, after 1000ms
```

***Example 3***
```
throttleLog = throttle(console.log, 1000); // We are planning to throttle console.log
setInterval( () => throttleLog("Hello"), 200);
// "Hello" will be called once, after every 1000ms
```

Throttle

Given an function (f1) and a time, return a serialized function that executes consecutively with the given wait time between each function call. For example:

```
const func = serialize( (v) => console.log(v), 5000);
func('hi1');
func('hi2');
func('hi3');
// "hi1" will be printed after 5 seconds
// "hi2" will be printed out 5 seconds after hi1 is printed,
// and after another 5 seconds "hi3" will be printed out
```

Serialize

Given an function (f1) that takes in `n` number of parameters, return a function (b) that will always return a function until `b` has been called with sufficient parameters.

Example 1:
```
const sum = (a, b, c) => a + b + c;
const csum = curry(sum);
const a = csum(1); // a is a function
const b = a(2); // b is a function
const c = a(3); // c is 6, because 3 parameters have been passed in.
```


Example 2:
```
const sum = (a, b, c) => a + b + c;
const csum = curry(sum);
const a = csum(1,2); // a is a function
const b = a(3); // b is 6, because 3 parameters have been passed in.
```

Curry

Write the `primeMaker` function that takes a starting number and returns a function that will return the next prime number greater than its previously returned number.

```
const getNextPrime = primeMaker(4);
const a = getNextPrime(); // a will be 5
const b = getNextPrime(); // b will be 7
const c = getNextPrime(); // c will be 11
```

Next Prime

Given an array an a function (f1), call f1 with the sorted array. You are not allowed to use sort, you can only use setTimeout.

```
sleepSort([9,8,1,5], console.log) // will print out [1,5,8,9]
```

sleep sort

Given an array, return a promise that resolves with the sorted array. If there are duplicate values, reject, do not resolve.

```
sleepSort([9,8,1,5]).then(console.log) // will print out [1,5,8,9]
sleepSort([9,8,1,5,1]).then(console.log) // will never resolve
sleepSort([9,8,1,5,1]).then(console.log).catch( () => console.log('hi') ) // will console.log 'hi'
```

Promised sleep sort

Write a function `resolveAll` that has the same functionality as Promise.all. Given an array of promises, resolve after all the promises have resolved with the values of all the resolved promises. You can assume that every element in the array is a promise object.

***Example:***
```
resolveAll([new Promise((s,_) => s(7)), new Promise((s,_) => s(8)), new Promise((s,_) => s(2)])
  .then(console.log)
```
Should log `[7,8,2]`, in the order the promise was inputted.

Promise all

Given a JSON string of an object, return the parsed object. Ignore arrays and you can assume keys will always be alpha numeric (numbers and letters)

parseJSON

Write a higher order function so that users can call asyncReduce on an array of promises. 

***Example:***
```
[Promise1, Promise2....].asyncReduce( (acc, e, i) => {
  // acc will start with a, then the return of previous reduce functions.
  // e will be the result for every resolve, in the order of the array.
  return acc + e;
, 'a').then( result => {
  // result would be the final accumulated value.
});
```

Async Reduce

Problems that are commonly asked to test your JavaScript knowledge

JavaScript Algorithms

Example:

![tree](https://c0d3.com/apis/draw?tree={%22v%22:30,%22children%22:[{%22v%22:50},{%22v%22:40}]})
 
```
const a = {val: 30, right: {val: 40}, left: {val: 50}};
solution(a); // should return 50
```

Given a binary tree, find the largest value

Examples: 

![tree1](https://c0d3.com/apis/draw?tree={%22v%22:30,%22children%22:[{%22v%22:50},{%22v%22:50,%22children%22:[{%22v%22:10},{%22v%22:10}]}]})

```
const a = (above tree);
solution(a); // should return 2
```


![tree1](https://c0d3.com/apis/draw?tree={%22v%22:30})

```
const a = (above tree);
solution(a); // should return 0
```

Given a binary tree, find the maximum depth

Examples: 

```
const a = {
  val: 30, 
  right: {
    val: 50,
    right: { val: 10 },
    left: { val: 10 },
  }, 
  left: {val: 50}
};
solution(a); // should return 3

const a = {
  val: 30,
  left: { val: 1},
  right: {val: 2}
};
solution(a); // should return 2
```

Given a binary tree, return the maximum distance between any 2 nodes

Given a binary tree, return the sum of the values of the biggest subtree

Biggest subtree value

Given a binary tree and a node, find the distance to that node.

Example 1:
```
const a = {};
solution(a, a) // should return 0
```

Example 2:
```
const a = {};
const b = {};
a.left = b;
solution(a, b) // should return 1
```


Given a binary tree and a node, find the distance to that node.

Given a hierarchy of employee (tree) and the following conditions:
* Each employee has a fun value. ie `{val: 10}`
* Each employee has an array of employees or empty array (manager)
* If an employee goes to a party, his direct manager will not go to party.
* Find the max fun of the party.

Max Fun

Given 2 strings, return the minimum sum of ASCII values of characters that you need to delete in the 2 strings in order to have the same string

```
solution("bit", "it"); // returns 98 because 'b' ascii value is 98
```
```
solution("dit", "nit"); // returns 210 because 'd' (100) and 'n' (110) is deleted
```

**Hint** To get the sum of ascii value of a string, do `"string".split('').reduce( (acc, c) => acc + c.charCodeAt(0), 0)`

Edit distance

Given an array representing a neighborhood where every element is a house with a specific number value of loot inside.
Return the maximum loot you can achieve, with the condition that if you steal from the house of index n, you cannot steal
from index n-1, and n+1. 

```
solution([1000, 2000, 1001]) // returns 2001
solution([1000, 5000, 3000]) // returns 5000
```

Maximum Loot

Given an array of numbers, return the longest length of the sequence that is increasing,
but does not have to be consecutive (side by side) with each other.

```
solution([1,3,2]) // returns 2

solution([3, 1, 10, 5, 20]) // returns 3
```

Longest Increasing Non-Consecutive Sequence

Given an array of coin values and a target number of change to create with any combination of the coin values,
find the minimum number of coins to make up the value of change. There will always be an infinite number of 1 cent coin available.

```
solution([], 40) // return 40

solution([4, 5], 8) // return 2
```

Minimum Coins for Change

Given an array of weight values to carry, return the largest amount of weight possible to carry.
Note: you can carry any number of weights for a specific value

```
solution([4, 5], 9) // returns 9
solution([4], 9) // returns 8
```

Maximum Weight to Carry

Given an array of integers, and a target value k,
return true or false whether or not any combination of values can sum to the target value.

```
Input: integers = [5,6,2], k = 8
Output: true
Explanation: 6 and 2 sum to 8
```

```
Input: integers = [1, 3, 2, 4, 5], k = 7
Output: true
Explanation: 3 and 4 sum up to 11
```

```
Input: integers = [1, 2, 0, 3], k = 6
Output: true
Explanation: 1, 2, 3 sum to 6
```

```
Input: integers = [1, -33, 2, 5], k = 6
Output: false
Explanation: no subarray adds up to 6
```

Subarray Sum Equals K

Trees

Write a function that takes in an array of integers and a target value and returns true / false if there exists a contiguous subarray that sums to the target value

2 sum continuous

Given a matrix that represents a map,
return the number of isolated islands in the map.

The map has each value in the matrix representing a tile.
A tile with a value of 1 is a land tile, and a tile with a value of 0 is a water tile.

A land tile is part of the same island as any land tile that is on the top, bottom, left, or right of the current tile.

Land tiles that are diagonal of each other are isolated islands as long as there is no land tile,
top, bottom, left, or right that connects both tiles.

```
solution([
  [1, 0, 0],
  [0, 1, 1],
  [0, 1, 0]
]) // returns 2
```

Join C0D3 now and start your software engineering journey!

Foundations of JavaScript

Foundations of JavaScript

Variables & Functions

Variables & Functions

Arrays

Arrays

Objects

Objects

Front End Engineering

Front End Engineering

End To End

End To End

React, GraphQL, SocketIO

React, GraphQL, SocketIO

JavaScript Algorithms

JavaScript Algorithms

Trees

Trees

General Algorithms

General Algorithms

Join C0D3 now and start your software engineering journey!

General Announcements

ADDITIONAL RESOURCES

MDN Web Docs

The encyclopedia of web development

The Modern JavaScript Tutorial

In-depth overview of javascript language

The Missing Semester

Introduction to shell, git, vim, tmux and etc.

Teach Yourself Computer Science

Self-study guide