This web app displays the population data of continents, countries and their cities. The data is fetched from two remote API's, and the app provides filtering and charting functionality of that data.
To get started with the project, follow these steps:
Clone the repository:
git clone https://github.com/MisterNooblet/weekend_assigment7_world_population.git
Install dependencies:
npm install -g live-server
Move your terminal to cloned repository directory:
cd <path-to-content>
Start the server:
live-server .
Open localhost:8080 in a browser
https://ar-worldpop.netlify.app/
- Displays population data for continents countries and their cities
- Allows filtering by continent, country and city
- Provides charting functionality for continent, country and city data
chart.js
for creating charts
RESTful API
https://restcountries.com/ for fetching continent data
POSTMAN API
https://documenter.getpostman.com/view/1134062/T1LJjU52/#intro for fetching country and cities data
- Basic structure of the application and analyzing the source API's data
- Filtering only countries that have data on both API's to avoid non functional buttons
- Displaying data using Graph's
- Disabling and enabling buttons while fetching data from remote API
- Basic styling
- Styling buttons , and country buttons with their flag as background
- Styling the graph's text color , background , and data colors
- Make comparison of countries between two diffrent API's with
Promise.all
to avoid "freezing" the apps functionality - Store all remote data in browsers localstorage
- Add a spinner to indicate to the user that the data is loading.
- Make application responsive for mobile and tablet devices.
- Wrap buttons in a scroll box on small screens to avoid losing graph's responsivness functionality
- Comment code for general explanation of the functionality's flow
- Add readme to the repository
-
Working with multiple API's to cross data and filter it
-
Data massaging to the "guts" of the data
-
Breaking down my application's code to small parts that communicate with each other through a main controller script
-
Taking in cosideration of how the Callback Queue works after some long hour's of headache figuring out why stuff don't work the way i wanted.
I'm a full stack development student.
Feel free to use the code and don't forget to Star ⭐ the repository.