day 7

fullstackNRJ · fullstackNRJ · commit 18e7e73d9909 · 2020-04-12T20:57:44.000+05:30
diff --git a/README.md b/README.md
@@ -23,4 +23,5 @@ Motivate yourself to code daily till 60 days, and see the magic!
 | [Day 4](./each%20day%20build%20day!/Day%204/) | [Array Methods](./each%20day%20build%20day!/Day%203/) | [demo](https://powerofflex.z22.web.core.windows.net/) | [Takeaways](./each%20day%20build%20day!/Day%204/README.md/) |
 | [Day 5](./each%20day%20build%20day!/Day%205/) | [Memory Game](./each%20day%20build%20day!/Day%205/) | [demo](https://powerofflex.z22.web.core.windows.net/) | [Takeaways](./each%20day%20build%20day!/Day%205/README.md/) |
 | [Day 6](./each%20day%20build%20day!/Day%206/) | [The Broken Piano](./each%20day%20build%20day!/Day%206/) | [demo](https://powerofflex.z22.web.core.windows.net/) | [Takeaways](./each%20day%20build%20day!/Day%206/README.md/) |
+| [Day 7](./each%20day%20build%20day!/Day%207/) | [The Broken Piano](./each%20day%20build%20day!/Day%207/) | [demo](https://powerofflex.z22.web.core.windows.net/) | [Takeaways](./each%20day%20build%20day!/Day%207/README.md/) |
 
diff --git a/each day build day!/Day 6/README.md b/each day build day!/Day 6/README.md
@@ -10,3 +10,8 @@ Try it out here :
 - The piano layout
 - html5 audio
 
+# Snap
+
+![snapshot]('./../rsz_2020-04-11-191628_1360x768_scrot.png')
+
+
diff --git a/each day build day!/Day 6/rsz_2020-04-11-191628_1360x768_scrot.png b/each day build day!/Day 6/rsz_2020-04-11-191628_1360x768_scrot.png
diff --git a/each day build day!/Day 7/README.md b/each day build day!/Day 7/README.md
@@ -0,0 +1,13 @@
+# Instant Search AJAX
+
+when google first introduced ajax for its search engine, it was an instant hhit and developers all over the world loved it. That was one important milestone in the history web development. This is my take on ajax like type ahead search. It hits an open source api to get all the cities at once, then we use javascript magic to provide great user-experience by suggesting all the matches way ahead so users don't have to type.
+
+# Challenges
+- fetch api
+- filter method
+- regex
+- change and keyup events
+
+# demo
+
+![link to the gif]('')
diff --git a/each day build day!/Day 7/index.html b/each day build day!/Day 7/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Instant search 👀</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 defer src="main.js"></script>
+</body>
+</html>
diff --git a/each day build day!/Day 7/main.js b/each day build day!/Day 7/main.js
@@ -0,0 +1,46 @@
+const endpoint = 'https://gist.githubusercontent.com/Miserlou/c5cd8364bf9b2420bb29/raw/2bf258763cdddd704f8ffd3ea9a3e81d25e2c6f6/cities.json';
+
+const suggestions = document.querySelector('.suggestions');
+const searchBox = document.querySelector('.search');
+
+//load cities
+let cities =[];
+fetch(endpoint)
+            .then(res=>res.json())
+            .then(data => cities.push(...data));
+
+
+function findMatches(wordToMatch, cities) {
+    return cities.filter(place => {
+      // here we need to figure out if the city or state matches what was searched
+      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, ',');
+  }
+
+
+//trigger search after events like keyup, change
+searchBox.addEventListener('change', displayMatches);
+searchBox.addEventListener('keyup', displayMatches);
+
+function displayMatches(){
+   
+    const matchArray = findMatches(this.value, cities);
+    const html = matchArray.map(place => {
+      const regex = new 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;
+}
diff --git a/each day build day!/Day 7/style.css b/each day build day!/Day 7/style.css
@@ -0,0 +1,75 @@
+html {
+    box-sizing: border-box;
+    background: #363636;
+    font-family: 'helvetica neue';
+    font-size: 20px;
+    font-weight: 200;
+  }
+  
+  *, *:before, *:after {
+    box-sizing: inherit;
+  }
+  
+  input {
+    width: 100%;
+    padding: 20px;
+  }
+  
+  .search-form {
+    max-width: 400px;
+    margin: 50px auto;
+  }
+  
+  input.search {
+    margin: 0;
+    text-align: center;
+    outline: 0;
+    border: 10px solid #F7F7F7;
+    width: 120%;
+    left: -10%;
+    position: relative;
+    top: 10px;
+    z-index: 2;
+    border-radius: 5px;
+    font-size: 40px;
+    box-shadow: 0 0 5px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.19);
+  }
+  
+  .suggestions {
+    margin: 0;
+    padding: 0;
+    position: relative;
+    /*perspective: 20px;*/
+  }
+  
+  .suggestions li {
+    background: white;
+    list-style: none;
+    border-bottom: 1px solid #D8D8D8;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.14);
+    margin: 0;
+    padding: 20px;
+    transition: background 0.2s;
+    display: flex;
+    justify-content: space-between;
+    text-transform: capitalize;
+  }
+  
+  .suggestions li:nth-child(even) {
+    transform: perspective(100px) rotateX(3deg) translateY(2px) scale(1.001);
+    background: linear-gradient(to bottom,  #ffffff 0%,#EFEFEF 100%);
+  }
+  
+  .suggestions li:nth-child(odd) {
+    transform: perspective(100px) rotateX(-3deg) translateY(3px);
+    background: linear-gradient(to top,  #ffffff 0%,#EFEFEF 100%);
+  }
+  
+  span.population {
+    font-size: 15px;
+  }
+  
+  .hl {
+    background: #50504f;
+  }
+  
