soundclip.currentTime = 0; // Play sound

(() => {

const endpoint = 'https://gist.githubusercontent.com/Miserlou/c5cd8364bf9b2420bb29/raw/2bf258763cdddd704f8ffd3ea9a3e81d25e2c6f6/cities.json';

// Step 1

const cities = [],

searchInput = document.querySelector('.search'),

suggestions = document.querySelector('.suggestions');

// Step 2

fetch(endpoint)

.then(blob => blob.json())

.then(data => cities.push(...data))

// Step 4

const matchInput = (inputString, cities) => cities.filter((location) => {

// Step 6

const numberWithCommas = (x) => x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');

// Step 5

const displayMatches = (el) => {

const matchArray = matchInput(el.value, cities)

const suggestionList = matchArray.map((location => {

const regex = new RegExp(el.value, 'gi');

const cityName = location.city.replace(regex, `<span class ="hl">${el.value}</span>`);

const stateName = location.state.replace(regex, `<span class="hl">${el.value}</span>`);

return `

})).join('');

suggestions.innerHTML = suggestionList;

}

// Step 3

searchInput.addEventListener('keyup', (e) => displayMatches(searchInput));

})();

1. [JavaScript Drum Kit](./exercises/01\ -\ JavaScript\ Drum\ Kit/)

2. [JS + CSS Clock](./exercises/02\ -\ JS\ +\ CSS\ Clock/)

3. [CSS Variables](./exercises/03\ -\ CSS\ Variables/)

4. [Array Cardio, Day 1](./exercises/04\ -\ Array\ Cardio\ Day\ 1/)

5. [Flex Panel Gallery](./exercises/05\ -\ Flex\ Panel\ Gallery/)

6. [Type Ahead](./exercises/06\ -\ Type\ Ahead/)

7. [Array Cardio, Day 2](./exercises/07\ -\ Array\ Cardio\ Day\ 2/)

8. [Fun with HTML5 Canvas](./exercises/08\ -\ Fun\ with\ HTML5\ Canvas/)

9. [Dev Tools Domination](./exercises/09\ -\ DevTools\ Domination/)

10. [Hold Shift and Check Checkboxes](./exercises/10\ -\ Hold\ Shift\ and\ Check\ Checkboxes/)

11. [Custom Video Player](./exercises/11\ -\ Custom\ Video\ Player/)

12. [Key Sequence Detection](./exercises/12\ -\ Key\ Sequence\ Detection/)

13. [Slide in on Scroll](./exercises/13\ -\ Slide\ in\ on\ Scroll/)

14. [JavaScript References vs. Copying](./exercises/14\ -\ JavaScript\ References\ VS\ Copying)

15. [LocalStorage](./exercises/15\ -\ LocalStorage/)

16. [Mouse Move Shadow](./exercises/16\ -\ Mouse\ Move\ Shadow/)

17. [Sort Without Articles](./exercises/17\ -\ Sort\ Without\ Articles/)

18. [Adding Up Times with Reduce](./exercises/18\ -\ Adding\ Up\ Times\ with\ Reduce/)

19. [Webcam Fun](./exercises/19\ -\ Webcam\ Fun/)

20. [Speech Detection](./exercises/20\ -\ Speech\ Detection/)

21. [Geolocation](./exercises/21\ -\ Geolocation/)

22. [Follow Along Link Highlighter](./exercises/22\ -\ Follow\ Along\ Link\ Highlighter/)

23. [Speech Synthesis](./exercises/23\ -\ Speech\ Synthesis/)

24. [Sticky Nav](./exercises/24\ -\ Sticky\ Nav/)

25. [Event Capture, Propagation, Bubbling, and Once](./exercises/25\ -\ Event\ Capture,\ Propagation,\ Bubbling\ and\ Once/)

26. [Stripe Follow Along Nav](./exercises/26\ -\ Stripe\ Follow\ Along\ Nav/)

27. [Click and Drag](./exercises/27\ -\ Click\ and\ Drag/)

28. [Video Speed Controller](./exercises/28\ -\ Video\ Speed\ Controller/)

29. [Countdown Timer](./exercises/29\ -\ Countdown\ Timer/)

30. [Whack A Mole](./exercises/30\ -\ Whack\ A\ Mole/)