describe('removeCharX function', () => {
  it('should remove the first character', () => {
    const str = "We're in the endgame now."
    const result = fn.removeCharX(str, 0)
    expect(result).toEqual("e're in the endgame now.")
  })
  it('return the original string', () => {
    const str = 'a'
    const result = fn.removeCharX(str, 3)
    expect(result).toEqual('a')
  })
  it('return the original string', () => {
    const str = 'abc'
    const result = fn.removeCharX(str, -3)
    expect(result).toEqual('abc')
  })
})

1. Function Shape

   const removeCharX = (str, idx) => {}
   
   

2. Explanation

   1. We need a variable to keep track of where we are i and it starts from 0. We need another variable result to collect all the new letters.
   2. If i goes to the end of the string, we return the result.
   3. If i is not equal to idx, we add letter to the result
   4. Continue to next iteration of i

3. Code

   const removeCharX = (str, idx, i = 0, result = '') => {
     if (i === str.length) {
       return result
     }
     if (i !== idx) {
       result = result + str[i]
     }
     return removeCharX(str, idx, i + 1, result)
   }
   
   

Run it directly from the library: node_modules/jest/bin/jest.js

If that doesn't work:

• Try installing jest globally: npm i -g jest, and run it again: jest
• If you get an EACCES error, then you need to run it with sudo: sudo npm i -g jest

1. Tests

   describe('less3Diff function', () => {
     it('should return false on strings with >= 3 letters different', () => {
       const result = fn.less3Diff('spiderman', 'mary jane')
       expect(result).toEqual(false)
     })
     it('should return true if < 3 letters different', () => {
       const result = fn.less3Diff('spiderman', 'spyderman')
       expect(result).toEqual(true)
     })
     it('should always return true on strings < 3 characters', () => {
       const result = fn.less3Diff('jk', 'lm')
       expect(result).toEqual(true)
     })
     it('should return false on strings equal to 3 and that are different', () => {
       const result = fn.less3Diff('cho', 'tis')
       expect(result).toEqual(false)
     })
   })
   
   

2. Shape

   const less3Diff = (str1, str2) => {}
   
   

3. Explanation

   • You are given string str1 and string str2.
   • We will need an additional variable for index (let's say i) which starts at 0.
   • We will need an additional variable to keep count of different characters (let's say differences ) which starts at 0 as well.
   • When index i equals the length of str1,
     • return true.
   • When differences is greater than 2,
     • return false.
   • When the first character of string str1 does not equal first character of second string str2,
     • Update differences by incrementing it by 1.
   • Continue.

4. Code

   const less3Diff = (str1, str2, i = 0, differences = 0) => {
     if (differences > 2) {
       return false
     }
     if (i === str1.length) {
       return true
     }
     if (str1[i] !== str2[i]) {
       differences = differences + 1
     }
     return less3Diff(str1, str2, i + 1, differences)
   }
   
   

1. Tests

   From here on you'll notice that some of our test suites include tests on unlikely input. After all, most people who use your reverso function probably won't try to reverse an empty string. But your code should ready to handle situations that test the limits of the data types it works with. Engineers call these edge cases, and you'll see them pop up in many of our tests!

   describe('reverso function', () => {
     it('should reverse "sneakers"', () => {
       const result = fn.reverso('sneakers')
       expect(result).toEqual('srekaens')
     })
     it('should reverse strings of one letter', () => {
       const result = fn.reverso('s')
       expect(result).toEqual('s')
     })
     it('should return an empty string when given an empty string', () => {
       const result = fn.reverso('')
       expect(result).toEqual('')
     })
   })
   
   

2. Shape

   const reverso = (str, i = 0, result = '') => {}
   
   

3. Explanation

   • You are given a string str.
   • We will need a second variable for index (let's say i) which starts at 0.
   • We will need a third variable to keep track of our reversed string (let's say result ) which starts at empty string "".
   • When the length of string result equals to the length of string str,
     • return result.
   • Continue.

4. Code

   const reverso = (str, i = 0, result = '') => {
     if (result.length === str.length) {
       return result
     }
     return reverso(str, i + 1, str[i] + result)
   }
   
   

1. Tests

   // Don't worry about understanding all the functions used to test
   //   this function. But they use natural language, so you might
   //   be able to figure them out!
   describe('delayAndCall function', () => {
     jest.useFakeTimers()
     it('should run function after 1000 milliseconds', () => {
       const callback = jest.fn()
       const fun = fn.delayAndCall(1000, callback)
       fun()
       expect(callback).not.toBeCalled() // It shouldn't run right away
       jest.advanceTimersByTime(1000)
       expect(callback).toBeCalled() // But after 1000ms
       // it should have run
     })
     it('should run callback repeatedly', () => {
       const callback = jest.fn()
       const fun = fn.delayAndCall(1000, callback)
       fun()
       expect(callback).not.toBeCalled() // It shouldn't run right away
       jest.runAllTimers()
       expect(callback).toHaveBeenCalledTimes(1) // Should have been
       // called once
       fun()
       jest.runAllTimers()
       expect(callback).toHaveBeenCalledTimes(2) // Now it should have
       // been called twice
     })
   })
   
   

2. Shape

   const delayAndCall = (time, fn) => {}
   
   

3. Explanation

   • You are given number time and a function fn.
   • Inside the return function,
     • call setTimeout with given function fn and number time.

4. Code

   const delayAndCall = (time, fn) => {
     return () => {
       setTimeout(fn, time)
     }
   }
   
   

Step 1: Examples

I'm going to start writing a few examples (x3) to make sure I understand the problem.

// example 1: I intentionally picked a negative number
const getPrime1 = primeMachine(-2)
getPrime1() // Should return 2? Interviewer: Yes
getPrime1() // Should return 3? Interviewer: Yes

// example 2: I intentionally picked a prime number to start
const getPrime2 = primeMachine(5)
getPrime2() // Should return 7? Interviewer: Yes
getPrime2() // Should return 11? Interviewer: Yes

// example 3: Just used the example I was given
const getPrime3 = primeMachine(10)
getPrime3() // Should return 11? Interviewer: Yes
getPrime3() // Should return 13? Interviewer: Yes
getPrime3() // Should return 17? Interviewer: Yes

Step 2: Function Shape

Just so I don't have to think about this much, I'll just write out the shape of the function because it is obvious and get it out of the way. (Interviewer: OK)

I know that the primeMachine function takes in a parameter, and returns a function.

const primeMachine = start => {
  return () => {}
}

Step 3: Explaining the Solution

Okay, so we probably need a few helper functions. I need a function to check to see if a number is prime. And then I also need another function to get the next prime number. I'll assume I have these 2 functions that I need and will just focus on solving the primeMachine function first. Then I'll come back to them.

When the primeMachine function is called, we need to check for out-of-range input (like < 2) and change them to 1. Also, if the input is a prime number itself, we should add 1 to it so we get the next one.

When the returned function is called, it will return the result of calling the getNextPrime function. After getting the result, we need to increment the input number by 1.

Step 4: Coding the Solution

In this step, our main task is to write the codes for primeMachine function.

We will write the codes for isPrime and getNetPrime functions in step 5 if requested by the interviewer.

const isPrime = num => {
  // Returns true or false. Don't actually write anything more beyond this.
  // we will write the codes in step 5 if requested
}

const getNextPrime = num => {
  // Returns the next prime number which is >= than the num input.
  // Don't write anything beyond this.
  // we will write the codes in step 5 if requested
}

const primeMachine = start => {
  if (start < 2) {
    start = 1 // Any number smaller than 2 is not a prime.
  }
  if (isPrime(start)) {
    start = start + 1
  }
  return () => {
    const result = getNextPrime(start)
    start = start + 1
    return result
  }
}

Step 5: Testing Original Examples

I went through the original 3 examples from step 1 to make sure the result was correct step by step.

Then I asked the interviewer: Do you want me to implement (write) the isPrime and getNextPrime functions?

• Usually at this point, the interviewer might be impressed enough to know that you know how to implement these 2 functions and move on to the next question.
• If not, they might pick either one of the 2 functions and tell you to implement it. Just repeat these 5 steps.

If you could not figure out this function yourself, follow the 5 steps above and solve for isPrime and getNextPrime functions. Answers are included in the answer toggle for this problem.

1. Tests

   describe('primeMachine function', () => {
     it('should return next 2 primes starting with a negative number', () => {
       const getPrime1 = fn.primeMachine(-2)
       expect(getPrime1()).toEqual(2)
       expect(getPrime1()).toEqual(3)
     })
     it('should not return starting number if prime', () => {
       const getPrime2 = fn.primeMachine(5)
       expect(getPrime2()).toEqual(7)
       expect(getPrime2()).toEqual(11)
     })
     it('should return next 3 primes starting at 10', () => {
       const getPrime3 = fn.primeMachine(10)
       expect(getPrime3()).toEqual(11)
       expect(getPrime3()).toEqual(13)
       expect(getPrime3()).toEqual(17)
     })
   })
   
   

2. Shape

   const isPrime = num => {}
   
   const getNextPrime = () => {}
   
   const primeMachine = () => {}
   
   

3. Explanation

   • You are given a number num .
   • You need a helper function isPrime to determine which number is a prime.
   • You need another helper function getNextPrime to get the next prime number starting from the given number num.
   • In the primeMachine function,
     • Pass in the result from running the getNextPrime function as a parameter.
     • We name the result from running the getNextPrime function on start to be passed in as a parameter.
     • When the value of start is less than 2,
       • change to value of start to 1.
   • When start is prime,
     • increment start by 1.
   • Inside the return function,
     • We need an additional variable (let's say result) that stores the result of running getNextPrime function.
     • Pass in start as argument inside this getNextPrime function.
     • Now start equals result plus 1.
     • return result

4. Code

   const isPrime = (num, start = 2) => {
     if (num < start) {
       return false
     }
     if (num === start) {
       return true
     }
     if (num % start === 0) {
       return false
     }
     return isPrime(num, start + 1)
   }
   
   const getNextPrime = start => {
     if (isPrime(start)) {
       return start
     }
     return getNextPrime(start + 1)
   }
   
   const primeMachine = start => {
     if (start < 2) {
       start = 1 // any number smaller than 2 is not a prime.
     }
     if (isPrime(start)) {
       start = start + 1
     }
     return () => {
       const result = getNextPrime(start)
       start = result + 1
       return result
     }
   }
   
   

1. Create an input, h1 and submit button
2. Add a class to all three elements and target them using querySelector
3. When button is clicked, set the innerText of the h1 tag to the input value

1. Create a container and inside of that container put a start button
2. Select the start button with querySelector and set the start button's onclick event to a function. This function replaces the container’s innerHTML with an input box and a cancel button
   1. Set the cancel button onclick's event to a function that replaces the container's innerHTML with a start button.
   2. Repeat #2 (need to turn step 2 into a function startApp )
3. Run startApp function.

1. Start with a <div> element named container. Within the <div> element, add an input box that only allows numerical value to be entered and a button named start. You also need a h1 Tag (outside the container).
2. Using querySelector, get the h1 and container div elements.
3. Create a function named solution that takes in a number as a parameter and returns a function. Let's name the number as a.
   1. Before returning the function, select the input element and get the numerical value of the input element. Set the h1 element's innerText to that value and a "+" character (Example: 5 + )
   2. The returned function takes in a number as a parameter. When this function is run, select the input element and pass the numerical value as an argument to the returned function. Return the sum of this value and the number a from step 3 above.
4. Select the start button. When start button is clicked,
   1. Get the input element. Pass the value (convert to number first) as an argument into the function named solution .
   2. store the return value result .
   3. Set container's innerHTML to input, add button, and clear button.
   4. when clear button is clicked, replace the elements inside the container with an input box element and a start button element. Clear h1 element, then run step 4 (to add onclick function for the start button).
   5. When add button is clicked, select the input element and get the value. Run the result function and pass in the value (convert to number). Set h1 element's inner text. (Example: 5 + 244 = 249 )

1. Create an input box that takes in a number, a generate button, h1 element
2. Write a function named solution that takes in a number named x and returns a string of "hello" repeated x number of times.
3. When the generate button is clicked, run solution . The h1 element's innerText is set to the result string.

1. Create an input box, generate button and a container div.

2. Write a function named solution that takes in a string and returns a string. Example:

   solution('hello')
   // returns "<h1>h</h1><h1>e</h1><h1>l</h1><h1>l</h1><h1>o</h1>"
   
   

3. When the generate button is clicked, run the solution function and pass the inputbox value as argument. Set container div's innerHTML to the returned value.

1. Create a helper function named isPrime that takes in a number as a parameter and returns a boolean: if the number is prime.

2. Create another helper function named printAllPrimes that takes in a number as a parameter and returns a string of all prime numbers from 2 to the number:

   printAllPrimes(7)
   // returns "2...3...5...7..."
   
   

3. In your HTML code, create an Input box, start button and h1 tag.

4. Finally, when the user clicks on the start button, run the second helper function printAllPrimes with the input box value (turn it into a number) as argument

5. Set the returned value into h1 element's innerText.

Now would be a good time to git add and git commit your changes so that if you mess up, you can undo quickly and restart from here.

If you did not initialize your repository yet, run git init and now you will be able to use git in that folder!

Simply change the printAllPrimes function to return a different string:

printAllPrimes(7)
// returns "<h1>2</h1><h1>3</h1><h1>5</h1><h1>7</h1>"

Change the h1 element to a div element instead

Change innerText to innerHTML

1. Create an h1 input, and button tag. Select them.

2. Write a function that takes in 1 arguments: a string.

   type('hello')
   // Will put into h1 element:
   /*
   ...200ms...
   h
   ...200ms...
   he
   ...200ms...
   hel
   ...200ms...
   hell
   ...200ms...
   hello
   */
   
   

3. When user clicks on the button, now you can run your amazing function! Run the type function (above) and pass in the input value as an argument

   button.onclick = () => {
     type(input.value)
   }
   
   

You need two display elements: an h1 element to display the typing, and a div element to hold all of the typed strings.

When the typing is done (which should be your base case), you must clear the h1 element and then set the div element's innerHTML to its existing value plus the string (enclosed inside a h1 tag) that just completed in the timeouts.

if (i === str.length) {
  // str is the user's input
  h1Element.innerText = ''
  allMessages.innerHTML = `${allMessages.innerHTML} <h1>${str}</h1>`
  return
}

1. Add a h1 tag, get the element

2. At the end of the type function above, add the string into the h1 element.

   // allMessages is the h1 element from the previous step
   type = (str, i=0) => {
     if (i === str.length) {
       ...
       allMessages.innerHTML = allMessages.innerHTML + '<h1>' + str + '</h1>'
       return
     }
     ....
   }
   
   

1. We need an h1 and a button element. Select them.

2. We need a variable timeVal to keep track of how much time has passed. The initial value of timeVal is 0.

3. We need a variable isRunning to keep track of whether the timer has started or not. The initial value of isRunning is false.

4. We need a function (named display) that takes in a number and returns a string that displays the second and millisecond. There are 1000ms in a second.

   display(2000) // return "02:00"
   display(28000) // return "28:00"
   display(28290) // return "28:29"
   
   

   If you are struggling to write the display function, try to break it down:

   • Are you able to figure out how to return just the seconds?
   • Are you able to figure out how to return just the milliseconds?
     • If given 28290 , you may need to get out 290 .
     • To extract the last 3 numbers from a number, you use % remainder.
     • 28290 % 1000 will give you 290
     • Get 29 from 290 (hundredths of a second)
     • Trouble with the math? Make sure you take the time to review these math exercises!

5. We need a helper function setTimer that will call setTimeout with 2 arguments, a function and 100 (because we want to update the clock every 100 ms). The callback function should:

   • Update timeVal with timeVal + 10
   • run display function and pass in timeVal as argument.
   • set h1 element's innerText to the result of the display function.
   • call setTimer

   To test this step, run setTimer function and refresh your page. You should see the timer increase second by second.

6. When you click on start button, the onclick event function should do this:

   • Check if isRunning is true. If it is, return.
   • Set isRunning to true
   • run setTimer function.

Make sure you test each button to check that it is working before moving on!

Add 2 button (Pause & Stop) elements and select them.

1. Pause button — the onclick event function will:

   if isRunning is true, set isRunning to false and set button text to Unpause.

   Otherwise, set isRunning to true and button text to Pause and run the setTimer function

2. Stop button — the onclick event function will:

   Set isRunning to false and timeVal to 0

3. setTimer function — Add codes:

   if we are stopped or paused, (isRunning is false), return from the function and don't do anything.

How did you do? Stopwatch was definitely the most complex program we've built so far, so don't worry if you had to use mulitple hints! Good software engineers don't hesitate to ask for help when they need it.

As you might have expected, the basic structure for the JavaScript on this page revolves around the onClick event functions of each of the three buttons: Start, Pause/Unpause, and Stop. But one key variable that ties them all together is the isRunning flag. This has to be defined early on in the script and checked whenever a button is clicked so the setTimeout functions don't go out of control! If you want to see time fly by, remove the isRunning checks from your solution and press Start a few times.

Possible variants

The more complex the problem, the more ways there are to solve it. For example, you might have kept two separate counters, one for seconds and one for hundredths of a second, and thus avoided using Math.floor, or you might have wrapped the isRunning and isPaused flags into one. These variants are fine as long as your stopwatch functions exactly the same as the solution page.

1. Add two input boxes, one for text and a numeric input box for speed of blinking, and a tag (named p) for displaying the text. Select them
2. Add a helper function named blink . This function will run:
   • if the p element has innerText value, reset it to ''
   • otherwise, set p element to display the text input's value
   • determine the wait time: divide 1000 by numeric input's value
   • make sure to convert input's value to a number!
   • then run blink again.
3. Run blink function

1. Create an input box, button, and h1 tag. Select the elements
2. Write a function named countDown that takes in a number (x) as parameter and
   • If x is smaller than or equal to 0, return.
   • set h1 element's innerText to x
   • runs setTimeout function which takes in 2 arguments. A function and 1000 (for 1 second). The callback function should run countDown again with x-1 as argument
3. When button is clicked, get the value from input element, convert it to number, and pass it into countDown function.

1. Create an input box, div, and a button tag. Select the elements
2. When button is clicked, get the input value and append it to the div innerHTML property. Make sure to wrap your input value around h1 elements: <h1> string </h1>

1. Write a function named createFilter that takes in a string and returns a function. It should work like the following:

   // Example 1:
   let fn = createFilter('i')
   fn('finding') // should return "fndng"
   
   // Example 2:
   fn = createFilter('b')
   fn('breaking bad') // should return 'reaking ad'
   
   

2. Add a h1 tag (for the title), div tag (to hold the input and button tags), and h1 tag (for displaying result) and select them.

3. Add a variable called filterFunction. We need this to store the result from createFilter

4. Create a function called startApp that:

   • sets the div element's innerHTML with input tag and a button tag.
   • select the input and button element inside the div
   • set the button's onclick function to do this:
     • run the createFilter function and pass in input value as argument. Store the result in filterFunction
     • set the title element string to "Filtering out: <whatever value inside input>
     • set the div element's innerHTML with input tag and 2 button tags.
     • Select the elements
     • Set the GoBack button's onclick property to run startApp function
     • Set Filter button's onlick function to do this:
       • Run filterFunction, and store the result in result h1 element's innerText property.
       • Set input element's value to "" to clear it

5. Run startApp function

1. Create an add button and a h1 tag.
2. Select both button and h1 elements.
3. Add a number variable counter and set its value to zero.
4. set button's onclick event to do :
   • Add 1 to counter .
   • set h1 element's innerText property to value of counter

1. Add button named Create, and a h1 tag.
2. Select them.
3. Add a boolean variable named isShowing and set its value to false.
4. When the button is clicked, do the following (via onclick event function):
   • if isShowing
     • the h1 tag will display blank ( "")
     • reset isShowing variable to false
     • stop running of the function (with return)
   • set isShowing to true
   • the h1 tag will display "Hello World"