Skip to content

Commit d8aeb97

Browse files
cindyliu923cindyliu923
authored
Merge pull request #36 from cindyliu923/cindy/add-day-6
Add day 6
2 parents 84421e1 + 0ab9592 commit d8aeb97

File tree

4 files changed

+136
-1
lines changed

4 files changed

+136
-1
lines changed

‎index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -464,7 +464,7 @@ <h5 class="font-weight-bold font-italic text-white team-tag">TEAM</h5>
464464
<li>Day#05｜<span>Flex Panel Gallery</span>
465465
</li>
466466
</a>
467-
<a class="project-item" href="#">
467+
<a class="project-item" href="team/Cindy/Day6 - Type Ahead/index.html">
468468
<li>Day#06｜<span>Type Ahead</span>
469469
</li>
470470
</a>

‎team/Cindy/Day6 - Type Ahead/index.html‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Type Ahead 👀</title>
6+
<link rel="stylesheet" href="./style.css">
7+
</head>
8+
<body>
9+
<form class="search-form">
10+
<input type="text" class="search" placeholder="City or State">
11+
<ul class="suggestions">
12+
<li>Filter for a city</li>
13+
<li>or a state</li>
14+
</ul>
15+
</form>
16+
<script src="./main.js"></script>
17+
</body>
18+
</html>

‎team/Cindy/Day6 - Type Ahead/main.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+
const searchInput = document.querySelector('.search');
6+
const suggestions = document.querySelector('.suggestions');
7+
const originHtml = suggestions.innerHTML
8+
9+
fetch(endpoint)
10+
.then(blob => blob.json())
11+
.then(data => cities.push(...data));
12+
13+
const findMatches = (wordToMatch, cities) => {
14+
return cities.filter(place => {
15+
const regex = new RegExp(wordToMatch, 'gi');
16+
return place.city.match(regex) || place.state.match(regex);
17+
});
18+
}
19+
20+
const numberWithCommas = (x) => {
21+
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
22+
}
23+
24+
const displayMatches = (e) => {
25+
if (e.target.value === '') { return suggestions.innerHTML = originHtml }
26+
27+
const matchArray = findMatches(e.target.value, cities);
28+
const html = matchArray.map(place => {
29+
const regex = new RegExp(e.target.value, 'gi');
30+
const cityName = place.city.replace(regex, `<span class="hl">${e.target.value}</span>`);
31+
const stateName = place.state.replace(regex, `<span class="hl">${e.target.value}</span>`);
32+
return `
33+
<li>
34+
<span class="name">${cityName}, ${stateName}</span>
35+
<span class="population">${numberWithCommas(place.population)}</span>
36+
</li>
37+
`;
38+
}).join('');
39+
suggestions.innerHTML = html;
40+
}
41+
42+
searchInput.addEventListener('change', displayMatches);
43+
searchInput.addEventListener('keyup', displayMatches);

‎team/Cindy/Day6 - Type Ahead/style.css‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
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+
9+
*, *:before, *:after {
10+
box-sizing: inherit;
11+
}
12+
13+
input {
14+
width: 100%;
15+
padding: 20px;
16+
}
17+
18+
.search-form {
19+
max-width: 400px;
20+
margin: 50px auto;
21+
}
22+
23+
input.search {
24+
margin: 0;
25+
text-align: center;
26+
outline: 0;
27+
border: 10px solid #F7F7F7;
28+
width: 120%;
29+
left: -10%;
30+
position: relative;
31+
top: 10px;
32+
z-index: 2;
33+
border-radius: 5px;
34+
font-size: 40px;
35+
box-shadow: 0 0 5px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.19);
36+
}
37+
38+
.suggestions {
39+
margin: 0;
40+
padding: 0;
41+
position: relative;
42+
/*perspective: 20px;*/
43+
}
44+
45+
.suggestions li {
46+
background: white;
47+
list-style: none;
48+
border-bottom: 1px solid #D8D8D8;
49+
box-shadow: 0 0 10px rgba(0, 0, 0, 0.14);
50+
margin: 0;
51+
padding: 20px;
52+
transition: background 0.2s;
53+
display: flex;
54+
justify-content: space-between;
55+
text-transform: capitalize;
56+
}
57+
58+
.suggestions li:nth-child(even) {
59+
transform: perspective(100px) rotateX(3deg) translateY(2px) scale(1.001);
60+
background: linear-gradient(to bottom, #ffffff 0%,#EFEFEF 100%);
61+
}
62+
63+
.suggestions li:nth-child(odd) {
64+
transform: perspective(100px) rotateX(-3deg) translateY(3px);
65+
background: linear-gradient(to top, #ffffff 0%,#EFEFEF 100%);
66+
}
67+
68+
span.population {
69+
font-size: 15px;
70+
}
71+
72+
.hl {
73+
background: #ffc600;
74+
}

0 commit comments

Comments
 (0)