Bitcoinera/index.html

## index.html
<!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>
const endpoint = 'https://gist.githubusercontent.com/Miserlou/c5cd8364bf9b2420bb29/raw/2bf258763cdddd704f8ffd3ea9a3e81d25e2c6f6/cities.json';
const cities = [];
const input = document.querySelector('.search');
let list = document.querySelector('.suggestions');

input.addEventListener('keyup', displayMatches);
input.addEventListener('change', displayMatches);

fetch(endpoint)
.then( blob => blob.json())
.then( data => {
  cities.push(...data);
  console.log(cities)
})
.catch( err => console.error(err));

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

function displayMatches() {
  console.log(this.value);
  const matchArray = findMatches(cities, this.value);
  console.log(matchArray);
  let arrayLi = [];

  matchArray.forEach( match => {
    let regex = new RegExp(this.value, 'gi');
    const cityName = match.city.replace( regex, `<span class="hl">${this.value}</span>`);
    const stateName = match.state.replace( regex, `<span class="hl">${this.value}</span>`);
    arrayLi.push(`
    <li>
      <span class="name">${cityName}, ${stateName}</span>
    </li>`);
  })
  list.innerHTML = arrayLi.join('');
}
</script>
</body>
</html>

## style.css
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;
}
	<!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>
	const endpoint = 'https://gist.githubusercontent.com/Miserlou/c5cd8364bf9b2420bb29/raw/2bf258763cdddd704f8ffd3ea9a3e81d25e2c6f6/cities.json';
	const cities = [];
	const input = document.querySelector('.search');
	let list = document.querySelector('.suggestions');

	input.addEventListener('keyup', displayMatches);
	input.addEventListener('change', displayMatches);

	fetch(endpoint)
	.then( blob => blob.json())
	.then( data => {
	cities.push(...data);
	console.log(cities)
	})
	.catch( err => console.error(err));

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

	function displayMatches() {
	console.log(this.value);
	const matchArray = findMatches(cities, this.value);
	console.log(matchArray);
	let arrayLi = [];

	matchArray.forEach( match => {
	let regex = new RegExp(this.value, 'gi');
	const cityName = match.city.replace( regex, `<span class="hl">${this.value}</span>`);
	const stateName = match.state.replace( regex, `<span class="hl">${this.value}</span>`);
	arrayLi.push(`
	<li>
	<span class="name">${cityName}, ${stateName}</span>
	</li>`);
	})
	list.innerHTML = arrayLi.join('');
	}
	</script>
	</body>
	</html>
	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;
	}