corona tracker

GEOPLUGIN API IS USED IN THIS PROJECT

 

call back vs promises

Synchronous Code

function loadData(url){

     return data;

}

function showData(data){

     console.log(data);

}

let data = loadData("./data.json");

showData(data);

The above code will load data and show that data in no time and without waiting.

Asynchronous Code

If we want to bring data from another website then we will have to wait for sometime for the data to be received. Now in below code showData() gets executed first because loadData() is taking time.

function loadData(url){

    setTimeout () => {

        return data;

    }, 2000)

     return data;

}

function showData(data){

     console.log(data);

}

let data = loadData("example.com/data.json");

showData(data);

Now to solve the above issue we will use callbacks. 

After using Callback

function loadData(url, callback){

    setTimeout () => {

        callback(data);

    }, 2000)

}

function showData(data){

     console.log(data);

}

loadData("example.com/data.json", showData);

Now show data will be executed only after load data. Now the problem with callback is that it will lead to callback hell. Which means that if you want to execute any code which takes long execution time during fetching data and then want to run another code then callback become unmanageble. Therefore we will use promises.

After using Promises

Now when loadData() gets executed then only showData() gets executed.

function loadData(url){

      setTimeout( ()=> { 

            return promise;

      }, 2000)

} 

loadData("example.com/data.json")

.then( data => {

     showData(data)

})

How to handle error if occurs while accessing data?

.catch(error){

     console.log(error)

}

Fetch()

fetch('Example.com')

.then( response => {

       return response.json()     // This will read and return data in json format

})

.then( data => {

      // Do something with data which comes from above function

})

.catch(error => {

     // Do something with error

})

Summarising above code : We are sending request to a website and getting data in JSON format which we are using for our work.

Properties of Object

Suppose we have below object :

let car = {

   name: "CAR",

   model: "1950",

}

Now to extract properties of this object we will use below code :

let properties = Object.keys(car);

The properties will store data in array : Array ["name", "model"]

Now since we have property array we can easily extract any value. Example : car[properties[0]] will return "CAR"

Some important terms

app_data.push(DATA)     // Push data into array

parseINT(DATA)            // Parse data in integer format

DATA.replace(/,/g, "")    // Replace ',' with nothing

Some information about JSON data which we are fetching

Since we need to display current total case, current total recovered, current total deaths. These information will be found at the last index of data. So basically we get this data as : app_data[app.data.length()-1]

Chart.js

We will use chart.js to display data in chart format

Search Bar

We will also have a search bar where user can type in country name and search.

const input = document.getElementById("search-input");

This code will extract anything which is written in search bar. Then we will add an event listener to this input which will only fire up if anything is typed in the box. Now we will loop over all country and check if entered value exist in our country or not. Also we have declared .hide class in our CSS file which hides the country name so if country is found we will use remove() function to remove that class inside if block. Else we will add that to hide that value.

input.addEventListener("input", function(){

     let value = input.value.toUpperCase();

     country_list.forEach(country => {

           if(country.name.toUpperCase().startswith(value)){

              document.getElementById(country.name).classList.remove("hide") ;

           } else {

              document.getElementById(country.name).classList.add("hide") ;

          }

     })

})

Now when user clears the input field we should remove hide class so that all country become visible again. So for this we will use a function in which we will traverse and remove the class.

function resetCountryList(){

     country_list.forEach( country => {

           document.getElementById(country.name).classList.remove("hide");

     })

}

Wrote most of the logic part in commented code. The project is completed but the API is not working so its useless...