A web application built by the Super4minions as a project for the 3rd week of the GSG full time coding bootcamp. https://super4minions.github.io/WebApp/
After running the website make sure to disable protection on your browser.
If you are using Firefox click on the LOCK symbol on the left side of your window
If you are using Chrome click on the protection symbol on the right side of your window
As a client looking for data webapp.
I want a web app that takes
my current location
as its default country for data search.
As a client looking for data webapp.
I want a web app that allows me to toggle through available data in other locations/countries.
As a client looking for data webapp.
I want a web app that displays stats in a visual, comparable, easy to
grasp way/ charts preferably.
- Sketching.
- Writing the code (TDD approach).
- Fetching the index and style sheet files.
- Uploading to github pages.
It's basically about integrating 3 APIs to make specific data (statistics) available in the form of charts based on the user's location.
- Tests file (test.js)
-
Check if function
getlocation
exists. -
check if
getlocation
returns data. -
Make sure that
getlocation
returns country as output. -
Check if funtion
country
returns countries and touches the DOM to make the countries option available. -
Check if funtion
sts
takes current location as input. -
Check if
sts
returns data. -
Check if function
gcharts
takes stats. -
Check if function
drawcharts
is working (fetches stats tables). -
Check if function
drawcharts
draws chart (updates the DOM).
- Source file (src.js)
function request(url, cb) {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var json = JSON.parse(xhr.responseText);
// console.log("THis is console log", json)
cb(undefined, json)
} else {
// console.log("waiting for response");
}
};
xhr.open("GET", url, true);
xhr.send();
}
- We had to use XMLHttpRequest asynchronously. which means, we receive a callback when the data has been received and that lets the browser continue to work as normal while the request is being handled.
- Created the function
getlocation
and used the API "https://wtfismyip.com/json" to get users location by their IP. - Created the funtion
sts
that gets the data we want to use from the API "http://api.population.io:80/1.0/countries". - Created the funtion
gchart
that uses Google Visualization as its API, the function also includes two other functionscomparef
anddrawchart
.