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 fetchData = async(url) => {
    const response = await fetch(url)
    const data = await response.json();
    return data;
}


function displayItems(cities){
    const items = cities.map((place) => {
      return `
      <li>
        <span class="name">${place.city}</span>
        <span class="population">${place.population}</span>
      </li>
    `;
  }).join('');
  suggestions.innerHTML = items;

}



const startApp = async() => {

    const citiesData = await fetchData(endpoint);
    cities.push(...citiesData);  
    displayItems(cities)

    searchInput.addEventListener('keyup', function(e){
      const value = e.target.value;
      const regex = new RegExp(value, 'gi');
      const filteredCities = cities.filter((place) => {
       return place.city.match(regex);
      })

      displayItems(filteredCities);
    })

}


startApp();