Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 7674cf1

Browse files
sengeezersengeezer
committed
Finished day 6
1 parent dbbc181 commit 7674cf1

File tree

3 files changed

+115
-80
lines changed

3 files changed

+115
-80
lines changed

‎06 - Type Ahead/app.js

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

‎06 - Type Ahead/index-START.html

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,9 +14,6 @@
1414
<li>or a state</li>
1515
</ul>
1616
</form>
17-
<script>
18-
const endpoint = 'https://gist.githubusercontent.com/Miserlou/c5cd8364bf9b2420bb29/raw/2bf258763cdddd704f8ffd3ea9a3e81d25e2c6f6/cities.json';
19-
20-
</script>
17+
<script src="app.js"></script>
2118
</body>
2219
</html>

‎06 - Type Ahead/style.css

Lines changed: 76 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -1,87 +1,87 @@
1-
html {
2-
box-sizing: border-box;
3-
background:#ffc600;
4-
font-family:'helvetica neue';
5-
font-size: 20px;
6-
font-weight: 200;
7-
}
8-
*, *:before, *:after {
9-
box-sizing: inherit;
10-
}
11-
input {
12-
width: 100%;
13-
padding:20px;
14-
}
1+
html {
2+
box-sizing: border-box;
3+
background: #ffc600;
4+
font-family: 'helvetica neue';
5+
font-size: 20px;
6+
font-weight: 200;
7+
}
158

16-
.search-form {
17-
max-width:400px;
18-
margin:50px auto;
19-
}
9+
*, *:before, *:after { box-sizing: inherit; }
2010

21-
input.search {
22-
margin: 0;
23-
text-align: center;
24-
outline:0;
25-
border: 10px solid #F7F7F7;
26-
width: 120%;
27-
left: -10%;
28-
position: relative;
29-
top: 10px;
30-
z-index: 2;
31-
border-radius: 5px;
32-
font-size: 40px;
33-
box-shadow: 0 0 5px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.19);
34-
}
11+
input {
12+
width: 100%;
13+
padding: 20px;
14+
}
3515

16+
.search-form {
17+
max-width: 400px;
18+
margin: 50px auto;
19+
}
3620

37-
.suggestions {
38-
margin: 0;
39-
padding: 0;
40-
position: relative;
41-
/*perspective:20px;*/
42-
}
43-
.suggestions li {
44-
background:white;
45-
list-style: none;
46-
border-bottom: 1px solid #D8D8D8;
47-
box-shadow: 0 0 10px rgba(0, 0, 0, 0.14);
48-
margin:0;
49-
padding:20px;
50-
transition:background 0.2s;
51-
display:flex;
52-
justify-content:space-between;
53-
text-transform: capitalize;
54-
}
21+
input.search {
22+
margin: 0;
23+
text-align: center;
24+
outline: 0;
25+
border: 10px solid #f7f7f7;
26+
width: 120%;
27+
left: -10%;
28+
position: relative;
29+
top: 10px;
30+
z-index: 2;
31+
border-radius: 5px;
32+
font-size: 40px;
33+
box-shadow: 0 0 5px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.19);
34+
}
5535

56-
.suggestions li:nth-child(even) {
57-
transform: perspective(100px) rotateX(3deg) translateY(2px) scale(1.001);
58-
background: linear-gradient(to bottom, #ffffff 0%,#EFEFEF 100%);
59-
}
60-
.suggestions li:nth-child(odd) {
61-
transform: perspective(100px) rotateX(-3deg) translateY(3px);
62-
background: linear-gradient(to top, #ffffff 0%,#EFEFEF 100%);
63-
}
36+
.suggestions {
37+
margin: 0;
38+
padding: 0;
39+
position: relative;
40+
/*perspective:20px;*/
41+
}
6442

65-
span.population {
66-
font-size: 15px;
67-
}
43+
.suggestions li {
44+
background: #fff;
45+
list-style: none;
46+
border-bottom: 1px solid #d8d8d8;
47+
box-shadow: 0 0 10px rgba(0, 0, 0, 0.14);
48+
margin: 0;
49+
padding: 20px;
50+
transition: background 0.2s;
51+
display: flex;
52+
justify-content: space-between;
53+
text-transform: capitalize;
54+
}
6855

56+
.suggestions li:nth-child(even) {
57+
transform: perspective(100px) rotateX(3deg) translateY(2px) scale(1.001);
58+
background: linear-gradient(to bottom, #ffffff 0%,#EFEFEF 100%);
59+
}
6960

70-
.details {
71-
text-align: center;
72-
font-size: 15px;
73-
}
61+
.suggestions li:nth-child(odd) {
62+
transform: perspective(100px) rotateX(-3deg) translateY(3px);
63+
background: linear-gradient(to top, #ffffff 0%,#EFEFEF 100%);
64+
}
7465

75-
.hl {
76-
background:#ffc600;
77-
}
66+
span.population {
67+
font-size: 15px;
68+
}
7869

79-
.love {
80-
text-align: center;
81-
}
70+
.details {
71+
text-align: center;
72+
font-size: 15px;
73+
}
8274

83-
a {
84-
color:black;
85-
background:rgba(0,0,0,0.1);
86-
text-decoration: none;
87-
}
75+
.hl {
76+
background: #ffc600;
77+
}
78+
79+
.love {
80+
text-align: center;
81+
}
82+
83+
a {
84+
color: #000;
85+
background: rgba(0,0,0,0.1);
86+
text-decoration: none;
87+
}

0 commit comments

Comments
 (0)