Ajax Type Ahead done

corneliugaina · Jun 10, 2019 · 57b4e9a · 57b4e9a
1 parent a1cebbb
commit 57b4e9a
Show file tree

Hide file tree

Showing 4 changed files with 170 additions and 1 deletion.
diff --git a/6-ajax-type-ahead/index.html b/6-ajax-type-ahead/index.html
@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+    <meta charset="UTF-8">
+    <title>Type Ahead 👀</title>
+    <link rel="stylesheet" href="style.css">
+    </head>
+        <body>
+            <style>
+                p {
+                    font-size: 4em;
+                    font-weight: bold;
+                }
+            </style>
+            <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>
+// the source of cities to match (API)
+const endpoint = 'https://gist.githubusercontent.com/Miserlou/c5cd8364bf9b2420bb29/raw/2bf258763cdddd704f8ffd3ea9a3e81d25e2c6f6/cities.json';
+
+// we are going 'fetch' (API method) our data 
+const cities = [];
+
+// we fetch the 'endpoint' ; 
+fetch(endpoint)
+    .then(blob => blob.json()) // à ce stade on convertit les data recues en JS Object Notation (JSON)
+
+//  .then(data => console.log(data)) // on peut vérifier que les datas sont bien récupérées
+    .then(data => cities.push(...data)) // spread operator   
+
+// TROUVER résultats
+function findMatches(wordToMatch, cities) {
+    return cities.filter(place => {
+
+        // ici on doit savoir si la ville ou l'Etat coincide avec la recherche effectuée: RegEx
+        // return place.city.match(/wordToMatch/i)
+
+        const regex = new RegExp(wordToMatch, 'gi');
+        return place.city.match(regex) || place.state.match(regex) // la recherche va matcher la vile ou l'Etat
+    });  
+}
+
+
+// mettre des virgules tous les 3 chiffres 
+function numberWithCommas(x){
+    return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+}
+
+
+// AFFICHER résultats
+function displayMatches() {
+    const matchArray = findMatches(this.value, cities);
+
+    // insérer dans le HTML nos résultats avec les valeurs ville, Etat, population.
+    const html = matchArray.map(place => { 
+        const regex = new RegExp(this.value, 'gi');
+        const cityName = place.city.replace(regex, `<span class="h1">${this.value}</span>`);
+        const stateName = place.state.replace(regex, `<span class="h1">${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>
diff --git a/6-ajax-type-ahead/style.css b/6-ajax-type-ahead/style.css
@@ -0,0 +1,74 @@
+    html {
+    box-sizing: border-box;
+    background: #ffc600;
+    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: #ffc600;
+    }
diff --git a/index.html b/index.html
@@ -7,7 +7,17 @@
     <title>Document</title>
 </head>
 <body>
-    <h1>Javascript30 Challenge - by Wes Bos</h1>
+    <header>
+        <nav></nav>
+        <h1>Javascript30 Challenge - by Wes Bos</h1>
+
+    </header>
+    <main class="displayChallenges">
+
+    </main>
+    <footer>
+
+    </footer>
     <div>
 
     </div>

diff --git a/style.css b/style.css