Skip to content

Commit 465806a

Browse files
author
vanntile
committed
Day 6
1 parent 0d8eab1 commit 465806a

File tree

9 files changed

+88
-84
lines changed

9 files changed

+88
-84
lines changed

‎01 - JavaScript Drum Kit/README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ functionality.
1111
or all three measures (each with a distinctive color)
1212

1313
## Learning notes
14-
Some concepts thaught:
14+
Some concepts taught:
1515
- ES6 `template literals`
1616
- `transitioned` event
1717
- `audio` element API

‎05 - Flex Panel Gallery/README.md‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ the flow adding focus in every state. Adding greyscale puts further accent on
1212
the currnt panel.
1313

1414
## Learning notes
15-
Some concepts thaught:
15+
Some concepts taught:
1616
- CSS3 `flexbox` layout and nested flexbox
1717
- timing css events
1818
- JavaScript class toggle logic
@@ -34,3 +34,4 @@ var toggleOpen = function () {
3434
}
3535
}
3636
```
37+

‎06 - Type Ahead/README.md‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
# Type Ahead
2+
3+
This tutorial shows how to `filter data` for a quick search type ahead.
4+
5+
![06 - Type Ahead](../assets/img/06 - Type Ahead.png)
6+
7+
## Learning notes
8+
9+
Some concepts taught:
10+
11+
- managing `Promises` with `fetch`
12+
- `ES6 aray spreading`
13+
- `RegEx` string filter
14+
- using `Array.prototype.map` to turn data into **HTML** nodes
15+
- inserting generated nodes with `element.innerHTML`
16+
17+
```javascript
18+
// turn matched data to a node and then joining it to a string
19+
20+
const html = matchArr.map(place => {
21+
const cityName = place.city.replace(regex, `<span class="hl">${this.value}</span>`)
22+
const stateName = place.state.replace(regex, `<span class="hl">${this.value}</span>`)
23+
24+
return `
25+
<li>
26+
<span class="name">${cityName}, ${stateName}</span>
27+
<span class="population">${numberWithCommas(place.population)}</span>
28+
</li>
29+
`
30+
}).join('')
31+
```
32+
33+
34+

‎06 - Type Ahead/index-FINISHED.html‎

Lines changed: 0 additions & 61 deletions
This file was deleted.

06 - Type Ahead/index-START.html renamed to 06 - Type Ahead/index.html

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
11
<!DOCTYPE html>
22
<html lang="en">
3+
34
<head>
45
<meta charset="UTF-8">
56
<title>Type Ahead 👀</title>
67
<link rel="stylesheet" href="style.css">
78
</head>
9+
810
<body>
911

1012
<form class="search-form">
@@ -14,9 +16,7 @@
1416
<li>or a state</li>
1517
</ul>
1618
</form>
17-
<script>
18-
const endpoint = 'https://gist.githubusercontent.com/Miserlou/c5cd8364bf9b2420bb29/raw/2bf258763cdddd704f8ffd3ea9a3e81d25e2c6f6/cities.json';
19-
20-
</script>
19+
<script src="script.js"></script>
2120
</body>
21+
2222
</html>

‎06 - Type Ahead/script.js‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
const endpoint = 'https://gist.githubusercontent.com/Miserlou/c5cd8364bf9b2420bb29/raw/2bf258763cdddd704f8ffd3ea9a3e81d25e2c6f6/cities.json';
2+
3+
const cities = []
4+
5+
fetch(endpoint)
6+
.then(response => response.json())
7+
.then(data => cities.push(...data))
8+
9+
function findMatches(wordToMatch, cities) {
10+
return cities.filter(place => {
11+
const regex = new RegExp(wordToMatch, 'gi')
12+
return place.city.match(regex) || place.state.match(regex)
13+
})
14+
}
15+
16+
function numberWithCommas(x) {
17+
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
18+
}
19+
20+
function displayMatches() {
21+
const matchArr = findMatches(this.value, cities)
22+
const regex = new RegExp(this.value, 'gi')
23+
24+
const html = matchArr.map(place => {
25+
const cityName = place.city.replace(regex, `<span class="hl">${this.value}</span>`)
26+
const stateName = place.state.replace(regex, `<span class="hl">${this.value}</span>`)
27+
28+
return `
29+
<li>
30+
<span class="name">${cityName}, ${stateName}</span>
31+
<span class="population">${numberWithCommas(place.population)}</span>
32+
</li>
33+
`
34+
}).join('')
35+
suggestions.innerHTML = html;
36+
}
37+
38+
39+
const searchInput = document.querySelector('.search')
40+
const suggestions = document.querySelector('.suggestions')
41+
42+
searchInput.addEventListener('change', displayMatches)
43+
searchInput.addEventListener('keyup', displayMatches)

‎PULL_REQUEST_TEMPLATE.md‎

Lines changed: 0 additions & 14 deletions
This file was deleted.

‎README.md‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,13 +12,14 @@ Check the course at [https://JavaScript30.com](https://JavaScript30.com)
1212
## Table of contents
1313

1414
1. [x] [JavaScript Drum Kit](https://vanntile.github.io/JavaScript30/01%20-%20JavaScript%20Drum%20Kit/)
15-
and my [notes](./01%20-%20JavaScript%20Drum%20Kit)
15+
and my [notes](./01%20-%20JavaScript%20Drum%20Kit)
1616
2. [x] [JS + CSS Clock](https://vanntile.github.io/JavaScript30/02%20-%20JS%20and%20CSS%20Clock/)
1717
3. [x] [CSS Variables](https://vanntile.github.io/JavaScript30/03%20-%20CSS%20Variables/)
1818
4. [x] [Array Cardio, Day 1](https://vanntile.github.io/JavaScript30/04%20-%20Array%20Cardio%20Day%201/)
1919
5. [x] [Flex Panel Gallery](https://vanntile.github.io/JavaScript30/05%20-%20Flex%20Panel%20Gallery/)
20-
and my [notes](./05%20-%20Flex%20Panel%20Gallery)
21-
6. [ ] Type Ahead
20+
and my [notes](./05%20-%20Flex%20Panel%20Gallery)
21+
6. [x] [Type Ahead](https://vanntile.github.io/JavaScript30/06%20-%20Type%20Ahead)
22+
and my [notes](./06%20-%20Type%20Ahead)
2223
7. [ ] Array Cardio, Day 2
2324
8. [ ] Fun with HTML5 Canvas
2425
9. [ ] Dev Tools Domination

‎assets/img/06 - Type Ahead.png‎

156 KB
Loading

0 commit comments

Comments
 (0)