This project is a simple web application that fetches city data from an external API, allows users to search for cities, and displays population data. The goal of this project was to gain hands-on experience with HTML, CSS, and JavaScript, and to learn about data fetching, filtering, and UI updates.

I gained an understanding of how to fetch data from an external API using the fetch API in JavaScript. The process involves making a network request, handling the response, and using the data in the application.

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

I learned how to dynamically update the user interface based on user input. The displayMatches function is triggered on change and keyup events on the search input, updating the displayed city results.

const searchInput = document.querySelector('.search');
searchInput.addEventListener('change', displayMatches);
searchInput.addEventListener('keyup', displayMatches);

Regular expressions (regex) were used to match and highlight parts of the city and state names that match the search term. This allowed for a more user-friendly display of search results.

const regex = new RegExp(this.value, 'gi');
const cityName = place.city.replace(regex, `<span class="hl">${this.value}</span>`);

The project involved working with the core web technologies: HTML for structuring the page, CSS for styling, and JavaScript for adding interactivity. This helped reinforce the fundamental concepts of web development.

I encountered asynchronous operations when fetching data using fetch. This led to a better understanding of promises and how to handle asynchronous code using .then().

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

Template literals were used for creating dynamic HTML strings. This allowed for easy concatenation of strings and variables, improving code readability.

return `
  <li>
    <span class="name">${cityName}, ${stateName}</span>
    <span class="population">${numberWithCommas(place.population)}</span>
  </li>
`;

While working on this project, I identified areas for improvement and encountered challenges:

• Error Handling: Enhance the application with proper error handling during data fetching to provide a better user experience.

• Pagination: Implement pagination for large datasets to improve performance and user interaction.

• UI Enhancements: Add more features to enhance the user interface, such as sorting options and additional details about each city.

• Async/Await: The asynchronous nature of data fetching required a clear understanding of promises and the use of .then(). Exploring async/await syntax could simplify the code further.

• Dynamic Highlighting: Achieving dynamic highlighting in search results using regular expressions required experimentation and testing.

This project provided a practical learning experience in web development, covering fundamental concepts such as data fetching, UI updates, regular expressions, and asynchronous operations.