Finished exercise 06

cwkosman · cwkosman · commit 54691f636398 · 2016-12-17T16:53:01.000-08:00
diff --git a/06 - Type Ahead/index.html b/06 - Type Ahead/index.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Type Ahead 👀</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+
+  <form class="search-form">
+    <input type="text" class="search" placeholder="City or State">
+    <ul class="suggestions">
+      <li>Filter for a city</li>
+      <li>or a state</li>
+    </ul>
+  </form>
+<script>
+const endpoint = 'https://gist.githubusercontent.com/Miserlou/c5cd8364bf9b2420bb29/raw/2bf258763cdddd704f8ffd3ea9a3e81d25e2c6f6/cities.json';
+
+const cities = [];
+
+fetch(endpoint)
+  .then(blob => blob.json()) //fetch is new browser API. Returns a 'promise'. Then methods returns a set of data with no formatting otherwise hence calling it "blob"
+  .then(data => cities.push(...data)) //... means spread and is new is ES6. Regular push with spread would nest all objects in the 'data' as the first index of 'cities', not make an individual array entry for each object.
+  //newlines don't interrupt here: this is chain .then methods to eventually extract json data and enter each object as an entry into the cities array
+  //note also that you can push things to a variable assigned with const, even though you cant reassign variables
+
+function findMatches(wordToMatch, cities) {
+  return cities.filter(place => {
+    //here we need to figure out if the city/state matches what was searched
+    //we'll need some regex to verify a match, but we need the regex to contain a variable (whatever the user searches)
+    const regex = new RegExp(wordToMatch, 'gi');
+    return place.city.match(regex) ||  place.state.match(regex)
+  });
+}
+
+function numberWithCommas(x) {
+  return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+} //crazy regex, stack overflox to the rescue
+
+function displayMatches () {
+  const matchArray = findMatches(this.value, cities);
+  const html = matchArray.map(place => {
+    const regex = RegExp(this.value, 'gi');
+    const cityName = place.city.replace(regex,`<span class="hl">${this.value}</span>`);
+    const stateName = place.state.replace(regex,`<span class="hl">${this.value}</span>`);
+    return `
+      <li>
+        <span class="name">${cityName} ${stateName}</span>
+        <span class="population">${numberWithCommas(place.population)}</span>
+      </li>
+     `;
+  }).join('');
+  suggestions.innerHTML = html;
+}
+
+const searchInput = document.querySelector('.search');
+const suggestions = document.querySelector('.suggestions');
+
+searchInput.addEventListener('change',displayMatches);
+searchInput.addEventListener('keyup',displayMatches);
+
+</script>
+  </body>
+</html>
