For this pull request I worked on a Open sources weather app called whtrapp.github.io. The app shows the general weather of a city. It shows their temperature, their current time and date, humidity, windspeed, etc.

Issue

For this project I wanted to add an autocomplete feature on the search bar for the cities, Issue #18. A feature would create a div element below the search bar and shows a list of suggested cities based on what has the user have typed. It will keep updating as the user type more letters on the search bar. For instance, the user typed "Du", below the search bar will show "Dubai", "Dublin" and so on.

Pull request PR #35

I try to be more modular when I implemented this feature. I put the new feature on a separate file and export them to the main JavaScript file. Doing like this minimize the potential conflict in the project and also isolating the code that I implemented. So my code is easy to track in case something went wrong with the PR.

As for the feature itself, it was relatively easy to implement. I found online the code for autocomplete, courtesy of W3School. All I had to do was revise it to work on the project.

Though their was one issue I found when trying to implement this feature. I could not find an API endpoint where it would return a list of all the cities in the world, that is free and does not require an API key. I need a list of cities for the autocomplete feature. I didn't want to add more required API on the project cause it would add more work to the other contributors. So I ended up just getting a very very long list of cities and add it as an array list. I did not like doing this cause it can visually bloat the code but this is the only way I found that works.