## Natalia and Dominic's HTTP Project --- ## Our project We have constructed an app, World GeoData, that draws statistics from two different APIs on countries around the world. The statistics will include information on each country's capital city, area size, languages, currency, geographical position, GDP, and numerous other variables. The app also displays the weather in the capital city of that country. --- - The user will be able to type in the name of a country in a Search bar, and the page will then be populated with data relating to that specific country - The name of the country will be displayed, together with its flag and offical name - There will be a table on the page containing the data - There will be a link to the country in Google Maps and Open Street Map - The current weather in that country will be displayed --- ## Mock-up visualisations ![](https://i.imgur.com/suyKwWF.png) --- ![](https://i.imgur.com/2q3Zpf0.png) --- ### Data fields: - Area (km squared) - Population - Capital - Currencies - Official Languages --- ### Data fields (continued): - See on Map (with links to Google Maps and Open Street Map) - Borders - Continent - Region - Landlocked - UN Member - Current weather --- ### API #1 REST Countries ![](https://i.imgur.com/SOY8ycY.jpg) --- ### API #2 Heroku Weather API ![](https://i.imgur.com/ACgJpWD.png) --- ### User Stories User journey: The user opens our web page and enters in a country in the Search bar. The website fetches the APIs straight away and brings up information about that country. That information is then displayed in a table on the screen. The user has to enter in at least two characters. --- **Challenge #1:** Some countries can feature twice - for example, Ireland brings up the United Kingdom of Great Britain & Northern Ireland as well as the Republic of Ireland, while Korea and the Congo bring up two different countries. --- A similar principle apples with other issues over country names - for example, if the user types in 'China', they will have to choose between the 'People's Republic of China' (China), the 'Republic of China' (Taiwan), Hong Kong, and Macau. In all similar cases, the user will be prompted to choose from one of the options displayed. --- **Challenge #2:** Another challenge is when the live weather of the country's capital is displayed if the user scrolls down. However, please note that the weather API can be erratic, and sometimes fails to provide data. We've tried to do our best to handle all errors and display it to you, but sometimes it is simply not possible. --- **Challenge #3:** The raw data displays the area and population statistics of each country with no commas or area unit of size, which makes the statistics difficult to read. For example, the area size (by km<sup>2</sup>) of Russia, the largest country in the world by size, is displayed as 17098242, and the population as 144104080. --- We addressed this by adding Regular Expressions to our code, with the result that Russia is now displayed as 17,098,242 km<sup>2</sup>, and the population as 144,104,080. This is much better on the eye. --- - [x] See an interesting mashup of different data: - [x] Input information to change the displayed result - [x] View the app on all of my devices --- ### Stretch Stories - [x] As an impatient user, I want to see some indication that data is loading - [x] As a confused user, I want to be told when something goes wrong --- ### :bulb: Acceptance Criteria - [x] Query at least two APIs using fetch - [x] Dynamic content generated with JS - [x] A clearly defined user journey, documented in your readme - [x] A responsive, mobile-first design - [x] Ensure your app is accessible to as many different users as possible --- ### Accessibility ![](https://i.imgur.com/QvLakOn.png) --- ### Planning - [x] Exploring APIs you are interested in working with - [x] Considering your user journey - [x] Deciding what you need to build for your Minimum Viable Product (MVP) and splitting up the tasks --- ### Choosing your APIs - [ ] Does it support CORS (cross-origin requests)? - [ ] Is there a high enough rate limit? - [x] Is a free API key available? - [x] Are you able to use the API without user authentication (OAuth)? - [x] Is good documentation available? --- ### Thank you xxx ![](https://i.imgur.com/InDvDGx.jpg)
{"metaMigratedAt":"2023-06-17T12:04:34.896Z","metaMigratedFrom":"Content","title":"Untitled","breaks":true,"contributors":"[{\"id\":\"0fe1acd5-d513-4022-b015-e7ca6ce695e9\",\"add\":5112,\"del\":718}]"}
    231 views