Add solutions for 2020-04-22 class.

src/www/js/ajax/ajax.js

@@ -13,7 +13,11 @@
  */
 export const Ajax = (() => {
   const raw = async (url, method, data) => {
-    // Implement this function.
+    const response = await fetch(
+      url,
+      { body: JSON.stringify(data), method },
+    )
+    return response.json()
   }
 
   // HTTP GET (Fetch resource).

src/www/js/es-syntax/syntax.test.js

@@ -5,22 +5,22 @@ describe('ES2015 syntax', () => {
        * Assume the codebase uses `let` declarations only for variables
        * that are reassigned. Use `const` otherwise.
        */
-      var a = 4
-      var b = [1, 2, 3]
+      let a = 4
+      const b = [1, 2, 3]
 
       if (b.length < 4) b.push(a)
       expect(b).toEqual([1, 2, 3, 4])
 
-      var a = 2
-      var c = [1, a, 3]
+      a = 2
+      const c = [1, a, 3]
       expect(c).toEqual([1, 2, 3])
     })
   })
 
   describe('loops', () => {
     it('rewrite the for loop to use a let variable', () => {
       const nums = []
-      for (var i = 0; i < 3; i++) {
+      for (let i = 0; i < 3; i++) {
         nums.push(i)
       }
       expect(nums).toEqual([0, 1, 2])
@@ -31,44 +31,39 @@ describe('ES2015 syntax', () => {
     it('rewrite using object function shorthand', () => {
       const person = {
         name: 'Andrew',
-        getName: function() { return this.name }
+        getName() { return this.name }
       }
       expect(person.getName()).toEqual('Andrew')
     })
 
     it('rewrite using object property shorthand', () => {
       const name = 'Andrew'
-      const person = { name: name }
+      const person = { name }
       expect(person.name).toEqual('Andrew')
     })
   })
 
   describe('functions', () => {
     it('rewrite the function declaration with arrow syntax', () => {
-      expect(foo()).toEqual('foo')
+      const foo = () => 'foo'
 
-      function foo() {
-        return 'foo'
-      }
+      expect(foo()).toEqual('foo')
     })
 
     it('rewrite the function declaration, and use implicit return for anonymous function', () => {
-      expect(addOneToValues([1, 2, 3])).toEqual([2, 3, 4])
-      expect(() => addOneToValues([])).toThrow('Values required')
-
-      function addOneToValues(xs) {
+      const addOneToValues = (xs) => {
         if (xs.length < 1) throw new Error('Values required')
         // HINT: you can use an implicit return arrow function by omitting the curly brackets
-        return xs.map(function (x) {
-          return x + 1
-        })
+        return xs.map(x => x + 1)
       }
+
+      expect(addOneToValues([1, 2, 3])).toEqual([2, 3, 4])
+      expect(() => addOneToValues([])).toThrow('Values required')
     })
 
     it('rewrite the logic in the function to use default parameters', () => {
-      const getIndexOfFoo = (str) => {
-        const strDefault = str || ''
-        return strDefault.indexOf('foo')
+      const getIndexOfFoo = (str = '') => {
+        return str.indexOf('foo')
       }
 
       expect(getIndexOfFoo('hello foo bar')).toEqual(6)
@@ -79,32 +74,20 @@ describe('ES2015 syntax', () => {
   describe('array spread and destructuring', () => {
     it('rewrite using array destructuring', () => {
       const favoriteThings = ['tea', 'chocolate', 'bicycles', 'mangoes']
-      const tea = favoriteThings[0]
-      const chocolate = favoriteThings[1]
-      const others = favoriteThings.slice(2)
+      const [tea, chocolate, ...others] = favoriteThings
       expect(tea).toEqual('tea')
       expect(chocolate).toEqual('chocolate')
       expect(others).toEqual(['bicycles', 'mangoes'])
     })
 
     it('rewrite to use rest parameters', () => {
       // takes the first number, and then adds it to each value in the remaining numbers and returns an array
-      const addNToNumbers = function () {
-        const n = arguments[0]
-        const nums = Array.prototype.slice.call(arguments, 1)
-        return nums.map(val => val + n)
-      }
+      const addNToNumbers = (n, ...nums) => nums.map(val => val + n)
       expect(addNToNumbers(3, 1, 2, 5)).toEqual([4, 5, 8])
     })
 
     it('rewrite using spread syntax to shallow-copy an array', () => {
-      const copyArray = (arr) => {
-        const copy = []
-        for (let i = 0; i < arr.length; i++) {
-          copy.push(arr[i])
-        }
-        return copy
-      }
+      const copyArray = (arr) => [...arr]
 
       const arr1 = [1, 2, 3]
       const copy = copyArray(arr1)
@@ -114,56 +97,32 @@ describe('ES2015 syntax', () => {
     })
 
     it('write a function that immutably adds a new item to an array', () => {
-      const concat = (arr, item) => {
-        arr.push(item)
-        return arr
-      }
+      const concat = (arr, item) => [...arr, item]
       const animals = ['cat', 'dog', 'bird']
       const moarAnimals = concat(animals, 'alpaca')
       expect(animals === moarAnimals).toEqual(false)
       expect(moarAnimals).toEqual(['cat', 'dog', 'bird', 'alpaca'])
     })
 
     it('write a function that immutably prepends a new item to an array', () => {
-      const prepend = (arr, item) => {
-        arr.unshift(item)
-        return arr
-      }
+      const prepend = (arr, item) => [item, ...arr]
       const animals = ['cat', 'dog', 'bird']
       const moarAnimals = prepend(animals, 'alpaca')
       expect(moarAnimals).toEqual(['alpaca', 'cat', 'dog', 'bird'])
       expect(animals === moarAnimals).toEqual(false)
     })
 
     it('rewrite using spread syntax to duplicate the contents of an array', () => {
-      const duplicateArrayContents = (arr) => {
-        const result = []
-        for (let i = 0; i < 2; i++) {
-          for (let j = 0; j < arr.length; j++) {
-            result.push(arr[j])
-          }
-        }
-        return result
-      }
+      const duplicateArrayContents = (arr) => [...arr, ...arr]
 
       expect(duplicateArrayContents([1, 2, 3])).toEqual([1, 2, 3, 1, 2, 3])
     })
 
     it('CHALLENGE: rewrite using spread syntax to duplicate and reverse contents of an array', () => {
       // HINT: You can immutably reverse an array with: `[...array].reverse()`
-      const duplicateAndReverseArrayContents = (arr) => {
-        const result = []
-        for (let i = 0; i < 2; i++) {
-          for (let j = 0; j < arr.length; j++) {
-            if (i === 0) {
-              result.push(arr[j])
-            } else {
-              result.push(arr[arr.length - 1 - j])
-            }
-          }
-        }
-        return result
-      }
+      const duplicateAndReverseArrayContents = (arr) => (
+        [...arr, ...[...arr].reverse()]
+      )
 
       expect(duplicateAndReverseArrayContents([1, 2, 3])).toEqual([1, 2, 3, 3, 2, 1])
     })
@@ -174,20 +133,15 @@ describe('ES2018 syntax', () => {
   describe('object spread and destructuring', () => {
     it('rewrite using object destructuring', () => {
       const person = { id: 42, name: 'Andrew', location: 'Seattle' }
-      const id = person.id
-      const name = person.name
-      const location = person.location
+      const { id, name, location } = person
       expect(id).toEqual(42)
       expect(name).toEqual('Andrew')
       expect(location).toEqual('Seattle')
     })
 
     it('rewrite using object spread and destructuring', () => {
       const withoutKey = (keyToRemove, obj) => {
-        const copy = {}
-        for (const [key, value] of Object.entries(obj)) {
-          if (key !== keyToRemove) copy[key] = value
-        }
+        const { [keyToRemove]: ignore, ...copy } = obj
         return copy
       }
 
@@ -200,15 +154,15 @@ describe('ES2018 syntax', () => {
 
     it('use object destructuring with a key rename', () => {
       const person = { id: 42, name: 'Andrew', location: 'Seattle' }
-      const personId = person.id // destructure this, but keep the variable name `personId`
+      const { id: personId } = person
       expect(personId).toEqual(42)
     })
 
     it('write a function that immutably records the todo IDs that are done', () => {
       // todos are expected to be like { 42: true, 63: true }
-      const markDone = (id, todos) => {
-        todos[id] = true
-      }
+      const markDone = (id, todos) => (
+        { ...todos, [id]: true }
+      )
       const doneTodos = { 42: true, 63: true }
       const moreDoneTodos = markDone(3, doneTodos)
       expect(moreDoneTodos).toEqual({ 42: true, 63: true, 3: true })
@@ -218,14 +172,11 @@ describe('ES2018 syntax', () => {
 
   describe('CHALLENGE: combining array and object spreads', () => {
     it('write a function that immutably updates the done flag on a list of todos', () => {
-      // helper function to locate a todo by its ID in an array. Returns the matched todo
-      const findTodo = (id, todos) => todos.find(todo => todo.id === id)
-
-      const setTodoDone = (id, todos) => {
-        const todo = findTodo(id, todos)
-        todo.done = true // :-(
-        return todos
-      }
+      const setTodoDone = (id, todos) => (
+        todos.map(todo => (
+          todo.id === id ? { ...todo, done: true } : todo
+        ))
+      )
 
       const todos = [{ id: 1, done: false }, { id: 2, done: false }]
       const updatedTodos = setTodoDone(2, todos)

src/www/js/events/events.js

@@ -13,3 +13,9 @@
 
 
 // Your code here.
+document.body.addEventListener('click', (e) => {
+  e.preventDefault()
+  const display = e.target.nextElementSibling
+  if (display.tagName !== 'SPAN') return
+  display.innerText = parseInt(display.innerText) + 1
+})

src/www/js/fetch/fetch.js

@@ -10,7 +10,8 @@
  * returning a Promise that resolves to the deserialized JSON data.
  */
 export const getArtists = (id) => {
-
-  // Your code goes here.
+  const url = '/api/artists' + (id ? `/${id}` : '')
+  return fetch(url)
+    .then(response => response.json())
 
 }

src/www/js/flags/flags.js

@@ -65,3 +65,31 @@
  */
 
 // Your code here.
+const bucketList = document.getElementById('bucket').getElementsByTagName('ul')[0]
+
+const flag1 = document.querySelector('#container .main li.foo')
+bucketList.appendChild(flag1)
+
+const flag2Text = document.querySelector('#articles .new')
+  .lastElementChild // p
+  .lastElementChild // a
+  .firstElementChild // span
+  .firstChild // text
+const flag2 = document.createElement('li')
+flag2.appendChild(flag2Text)
+bucketList.appendChild(flag2)
+
+const flag3Text = document.querySelector('.footer div div div div').firstChild
+const flag3 = document.createElement('li')
+flag3.appendChild(flag3Text)
+bucketList.appendChild(flag3)
+
+const flag4Text = document.querySelector('#article-3 p span').firstChild
+const flag4 = document.createElement('li')
+flag4.appendChild(flag4Text)
+bucketList.appendChild(flag4)
+
+const flag5Text = document.getElementById('article-3').lastElementChild.previousElementSibling.firstChild
+const flag5 = document.createElement('li')
+flag5.appendChild(flag5Text)
+bucketList.appendChild(flag5)