Skip to content

Add day 6 #36

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
cindyliu923 merged 1 commit into from
May 9, 2020
Merged

Add day 6 #36

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -464,7 +464,7 @@ <h5 class="font-weight-bold font-italic text-white team-tag">TEAM</h5>
<li>Day#05｜<span>Flex Panel Gallery</span>
</li>
</a>
<a class="project-item" href="#">
<a class="project-item" href="team/Cindy/Day6 - Type Ahead/index.html">
<li>Day#06｜<span>Type Ahead</span>
</li>
</a>
Expand Down
18 changes: 18 additions & 0 deletions team/Cindy/Day6 - Type Ahead/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Type Ahead 👀</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 src="./main.js"></script>
</body>
</html>
43 changes: 43 additions & 0 deletions team/Cindy/Day6 - Type Ahead/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
const endpoint = 'https://gist.githubusercontent.com/Miserlou/c5cd8364bf9b2420bb29/raw/2bf258763cdddd704f8ffd3ea9a3e81d25e2c6f6/cities.json';

const cities = []

const searchInput = document.querySelector('.search');
const suggestions = document.querySelector('.suggestions');
const originHtml = suggestions.innerHTML

fetch(endpoint)
.then(blob => blob.json())
.then(data => cities.push(...data));

const findMatches = (wordToMatch, cities) => {
return cities.filter(place => {
const regex = new RegExp(wordToMatch, 'gi');
return place.city.match(regex) || place.state.match(regex);
});
}

const numberWithCommas = (x) => {
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
}

const displayMatches = (e) => {
if (e.target.value === '') { return suggestions.innerHTML = originHtml }

const matchArray = findMatches(e.target.value, cities);
const html = matchArray.map(place => {
const regex = new RegExp(e.target.value, 'gi');
const cityName = place.city.replace(regex, `<span class="hl">${e.target.value}</span>`);
const stateName = place.state.replace(regex, `<span class="hl">${e.target.value}</span>`);
return `
<li>
<span class="name">${cityName}, ${stateName}</span>
<span class="population">${numberWithCommas(place.population)}</span>
</li>
`;
}).join('');
suggestions.innerHTML = html;
}

searchInput.addEventListener('change', displayMatches);
searchInput.addEventListener('keyup', displayMatches);
74 changes: 74 additions & 0 deletions team/Cindy/Day6 - Type Ahead/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}