1. Tests

   Remember how this works? Create a solution file (like preflight.js) and a test file (like preflight.test.js). Make sure your solution file module.exports an object with all the functions, and your test file requires the solution file and gives the object a name (we use fn in our tests).

   describe('mergeArrays function', () => {
     it('should merge 2 arrays of strings', () => {
       const arr1 = ['Rattata', 'Raticate']
       const arr2 = ['Bulbasaur', 'Ivysaur', 'Venusaur']
       const result = fn.mergeArrays(arr1, arr2)
       expect(result).toEqual([
         'Rattata',
         'Raticate',
         'Bulbasaur',
         'Ivysaur',
         'Venusaur'
       ])
     })
     it('should merge two arrays of numbers', () => {
       const result = fn.mergeArrays([9, 3, 5], [10])
       expect(result).toEqual([9, 3, 5, 10])
     })
     it('should merge an empty array', () => {
       const result = fn.mergeArrays(['Pikachu', 'Raichu'], [])
       expect(result).toEqual(['Pikachu', 'Raichu'])
     })
   })
   
   

2. Shape

   const mergeArrays = (arr1, arr1) => {}
   
   

3. Explanation

   • You are given array arr1 and array arr2.
   • Use [...a...b] to combine arrays a and b.
   • return new array with arr1 and arr2 in it.

4. Code

   const mergeArrays = (arr1, arr2) => {
     return [...arr1, ...arr2]
   }
   
   

1. Tests

   describe('firstLongerThan function', () => {
     it('should find a string in the middle of an array', () => {
       const arr = ['Ekans', 'Arbok', 'Pikachu', 'Raichu']
       const result = fn.firstLongerThan(arr, 5)
       expect(result).toEqual('Pikachu')
     })
     it('should find a string at the end of an array', () => {
       const arr = ['Caterpie', 'Metapod', 'Butterfree']
       const result = fn.firstLongerThan(arr, 9)
       expect(result).toEqual('Butterfree')
     })
     it('should find the first string longer than 0', () => {
       const result = fn.firstLongerThan(['a', 'b', 'c'], 0)
       expect(result).toEqual('a')
     })
     it('should return undefined', () => {
       const result = fn.firstLongerThan([], 5)
       expect(result).toEqual(undefined)
     })
   })
   
   

2. Shape

   const firstLongerThan = (arr, num) => {}
   
   

3. Explanation

   • You are given an array arr and a number num.
   • Use array helper function arr.find() to find the string length bigger than num and return it.

4. Code

   const firstLongerThan = (arr, num) => {
     return arr.find(e => {
       return e.length > num
     })
   }
   
   

1. Tests

   describe('getReturnValues function', () => {
     const fn1 = () => {
       return 25
     }
     const fn2 = () => {
       return true
     }
     const fn3 = () => {
       return 'Pikachu'
     }
     const fn4 = () => {
       "I'm function four"
     }
   
     it('should get 3 return values of various types', () => {
       const result = fn.getReturnValues([fn1, fn2, fn3])
       expect(result).toEqual([25, true, 'Pikachu'])
     })
     it('should return an empty array if no functions', () => {
       const result = fn.getReturnValues([])
       expect(result).toEqual([])
     })
     it('should return undefined for functions with no return value', () => {
       const result = fn.getReturnValues([fn4])
       expect(result).toEqual([undefined])
     })
   })
   
   

2. Shape

   const getReturnValues = arr => {}
   
   

3. Explanation

   • You are given an array arr.
   • Use arr.map() function to go through arrays of functions.
     • return by calling each function and storing their output in the new array.

4. Code

   const getReturnValues = arr => {
     return arr.map(e => {
       return e()
     })
   }
   
   

This one won't be able to use the array helper functions we've learned so far—think recursion! Because we're dealing with a multi-dimensional array, your recursive function will need to pass around more than just one iterator or counter variable, and possibly more than one results array.

1. Tests

   describe('zeroSquare function', () => {
     it('should create a 1x1 array of zeroes', () => {
       const square1 = [[0]]
       expect(fn.zeroSquare(1)).toEqual(square1)
     })
     it('should create a 1x1 array of zeroes', () => {
       const square2 = [
         [0, 0],
         [0, 0]
       ]
       expect(fn.zeroSquare(2)).toEqual(square2)
     })
     it('should create a 1x1 array of zeroes', () => {
       const square3 = [
         [0, 0, 0],
         [0, 0, 0],
         [0, 0, 0]
       ]
       expect(fn.zeroSquare(3)).toEqual(square3)
     })
     it('should return an empty array for 0 value', () => {
       expect(fn.zeroSquare(0)).toEqual([])
     })
   })
   
   

2. Shape

   const makeRow = num => {}
   
   const zeroSquare = num => {}
   
   

3. Explanation

   • You are given a number num.
   • We need a helper function makeRow to help us make rows in the 2D array.
   • Inside the helper function makeRow,
     • We need an additional variable to keep track of how many rows to build (let's say i ) which start at 0.
     • We also need an additional variable to build the row array, (let's ray res) which will start with an empty array.
     • When counter i equals number num,
       • return array res.
       • return makeRow()
     • Inside the main function zeroSquare,
       • We need an additional variable to keep track of how many columns to build (let's say i ) which starts at 0.
       • We also need an additional variable to store the columns and rows, (let's ray res) which will start with an empty array.
       • When counter i equals num,
         • return array result.
       • Call makeRow function and pass number num as the argument.
       • Push the result of above step into res.
       • Continue

const makeRow = (num, i = 0, res = []) => {
  if (i === num) return res
  res.push(0)
  return makeRow(num, i + 1, res)
}

const zeroSquare = (num, i = 0, res = []) => {
  if (i === num) return res
  res.push(makeRow(num))
  return zeroSquare(num, i + 1, res)
}

// Example of something that will throw error for JSON.stringify
const a = []
a.push(a) // a[0] points to itself
const b = JSON.stringify(a)
// Computer will get stuck trying to stringify a and throw error.

const c = [() => {}]
JSON.stringify(c)
// Functions cannot be stringified.
// Since c has a function inside, it cannot be stringified.

/*
false because they have different addresses.
Because strings are primitive,
when you convert an array into a string,
the address to the array is gone.

When you convert a string into an array,
the computer creates a new array (at a new address).
*/

Instead of the Storage tab, you should click on the Applications tab:

1. Create a h1 , input , button and select HTML tags and select the elements by their class name. If you don't know what some of the tags do, read about them at w3schools and make sure you try them out.
2. set the button's onclick to be a function that does the following:
   • Grab the value from the input tag.
   • Create a string for option tag and add to existing select element's innerHTML
   • Set the select element's innerHTML to the new combined value

Because you'll be keeping the todo items in an array, and changing that array whenever the user marks an item as complete, you'll have to reload the todo list each time a todo item is clicked. Removing an item changes the other items' positions in the array, so you'll also have to remake all the other items' onclick functions. Write a function that does both of these things and make sure it's called when adding or removing an item.

Examples: Try adding and removing several items from various positions on the example page (first item, last item, middle item). The other items should reorder themselves.

Function shape: As mentioned in the hint, we'll need a function to load all the todo items onto the page. This will run whenever an item is added or removed, and has no parameters or return value. The only other function is a quick one to add a new element based on user input. Here are those two, along with a simple HTML template to record and display todo items:

<h1 class="display">TODO LIST</h1>
<input class="newText" type="text" />
<button class="add">Add</button>
<div class="todoList"></div>
<script>
const list = document.querySelector('.todoList')
const inputElement = document.querySelector('.newText')
const buttonElement = document.querySelector('.add')

const render = () => {
}

buttonElement.onclick = () => {
}
</script>

Think: We'll store the todo items in an array and then turn them into h2 elements each time the list is loaded. Each h2 should have an onclick that makes it go away. How do we do that? We haven't learned a way to remove the element directly, but if we remove the item from the array and then refresh the list, that will have the same effect. We could look through the array for the string we're removing, but what if the user had the same item in their todo list twice? We might remove the wrong one. So we'll include each item's current position in its onclick function. This will change every time an item is removed, but that's OK because the onclick functions will be rewritten as well.

Code: Before any of the functions use it, we should initialize the array:

const todos = []

For the render function, there are 2 steps: turn everything into HTML and give them their new onclick attributes. The onclick functions will need to call render again refresh the list.

const render = () => {
  list.innerHTML = todos.reduce((acc, e) => {
    return acc + `<h2 class="todo">${e}</h2>`
  }, '')
  const todoElements = document.querySelectorAll('.todo')
  todoElements.forEach((e, i) => {
    e.onclick = () => {
      todos.splice(i, 1)
      render()
    }
  })
}

All that's left is buttonElement's onclick function, which will be called when the user inputs a new todo item. We use unshift to add to the array so that it will start at the top of the list.

buttonElement.onclick = () => {
  const newValue = inputElement.value
  todos.unshift(newValue)
  render()
}

Test: Add some items and, again, make sure that whether you remove them from the beginning, middle, or end, the other items move correctly.

Right now, our todo list is only good as long as you keep the page open. In the next part, you'll make it a lot more practical.

There are many ways to solve this. Our answer is one way that we feel is more organized. Please take the time to understand the steps.

1. Create a h1 , input , button and div HTML tags and select the elements by their class name.

2. We need an array to hold all of the todo items, let's call it todoList

   const todoList = []

3. Write a function called render that sets the div's innerHTML property to a string of h1 elements from todoList array

   const todoList = ['hello', 'student', 'coder']
   const result = render()
   /*
   div 's innerHTML will be set to:
   '<h1 class="todo">hello</h1><h1 class="todo">student</h1><h1 class="todo">coder</h1>'
   */
   
   

4. Run the button's addEventListener property and pass in two arguments: 'click' and a function that:

   • Adds the input value into todoList
   • Run render function

5. Delete: Update the render function so that after the div's innerHTML property is updated:

   • Get array of .todo elements
   • For each element, add click event listener to each element. When element is clicked:
     • Remove the element (at that index)
     • Run render function

That wasn't too bad, was it? It only takes a few lines of code to implement localStorage. When the page first loads we load existing todo items from localStorage (using localStorage.getItem('todo') || '[]' in case there's nothing there). But we need to update localStorage every time an item is added or removed, because the user could close the page at any time.

1. Repeat the steps in part 1 of this exercise.
2. In the render function, add localStorage.setItem to update you list in local storage.
3. When the page loads, set todoList to JSON.parse(localStorage.getItem("storedTasks") || '[]')
   • Notice how we add || '[]'so that if the localStorage is empty(user's first time on the page), we parse an empty array string instead. So todoList is set to an empty array.
4. Run the render function after you set todoList when the page loads.

1. Please follow all the steps in the previous part(part 2) of this exercise.
2. Create an additional button and input tags and select elements by their class name.
3. Change render function:
   • Get the value of the filter input.
   • Use filter to get a new array of strings from todoList that has the strings in filter input
   • Generate string from the new Array
4. Attach a click event listener to the filter button. The function should run the filter function

1. Create a previous button tag, next button tag, a with hr tag, add a div to store individual stories in the UI, hr tag, textarea tag to allow users to write their individual story, another button to submit stories and finally a div to display all the stories.
2. Create a variable to track a given index. It starts at 0.
3. Display the first individual story in the first div we created.
4. Create a render function which allows you to,
   • Empty the div with all stories.
   • Displays the list items into the UI.
   • Items can be deleted when they're clicked upon.
   • Updates the list every time an item is deleted.
5. Call the render() function.
6. Attach click event listener to submit button,
   • Updates the list with new user input
   • Call the render() and update the UI with newly added stories.
7. Attach click event listener to previous button,
   • When index is 0, return alert the user that they have reached at the beginning of the book.
   • Decrement index by 1.
   • Update story div innertext to display the current index of the list.
8. Attach click event listener to next button,
   • When index has reached to the second to the last element of the list, it returns alert notifying the user that they have reached the end of the book.
   • Increment index by 1.
   • Update story div innertext to display the current index of the list.

1. Create an h1 tag, two input tags for name and age, one div tag to display name and age , and an add button. Select the elements by class name.

2. Create two different arrays to store input values for name and age. Let's call the arrays storeName and storeAge.

3. Create a render function. Inside this function,

   • Attach reduce method to the array storeName.

     • Create a variable age inside the reduce method and set it current index of array storeAge.

   • Set the innerHTML of div to :

     <div>
       <h2 class="displayName">${e}</h2>
       <h3 class="displayAge">${age}</h3>
     </div>
     
     

     If you are having hard time figuring out where e is coming from in the code, then please review the array method reduce and how it works.

4. Attach addEventListener to add button. It takes in two arguments.

   • Pass in "click" as the first argument.
   • Pass in a function as the second argument.
     • This function grabs the input values and stores them inside the storeName and storeAge arrays.
     • Runs the render function.

1. Follow and complete all the steps from the previous part before you begin this particular exercise.
2. When the page loads,
   • JSON.parse both arrays that you have stored in the localStorage.
   • Run the render function.
3. Update your render function to do:
   • Hide elements from the array storeAge in the UI.
   • Select the h2 element by its class name. (This h2 element was created in the first part of this exercise.)
   • Attach onclick method to each h2 element. This onclick will run the alert function which will display the age.
4. Add localStorage.setItem to store the updated arrays inside the event listener for the add button.