Build a live Corona tracker using JQuery

Posted by Adarshreddy Adelli

Thursday, April 16, 2020

Well, coronavirus is everywhere now and most countries are suffering from its effect. I hope everything should be fine within a short period. In this post, we shall build a basic live corona tracker using a javascript's jquery library.

Developers will be ready to create solutions to supplement to the world whenever a pandemic enters. Now let us create something !. Thanks to sources like NovelCovid API for providing the live data.
As always we will go with the Html first.

<div id="total"><span></span></div><div id="d"><span></span></div><div id="ac"><span class="count"></span></div><div id="rc"><span class="count"></span></div>

Here total stands for total, d, ac, rc stands for total cases, deaths, active cases, recovered cases respectively.
For now, I am going to build this tracker only for India but you could build it for global without changing anything except API URL. If you open the API in the browser, It shows a JSON.

{"updated":1587037599908,"country":"India","countryInfo":{"_id":356,"iso2":"IN","iso3":"IND","lat":20,"long":77,"flag":"https://raw.githubusercontent.com/NovelCOVID/API/master/assets/flags/in.png"},"cases":12456,"todayCases":86,"deaths":423,"todayDeaths":1,"recovered":1513,"active":10520,"critical":0,"casesPerOneMillion":9,"deathsPerOneMillion":0,"tests":274599,"testsPerOneMillion":199}

Now let us write jquery to pull and display the data from this JSON.

  <script>
     $.getJSON('https://corona.lmao.ninja/countries/India', function(data) {
     var text = `${data.cases}<br>`
     var deathsc = `${data.deaths}`
     var activec = `${data.active}`
     var recoveredc = `${data.recovered}`
     var todayCasesc = `${data.todayCases}`
     $('#mypanel').html(text);
     $('#d').html(deathsc);
     $('#ac').html(activec);
     $('#rc').html(recoveredc);});
    </script>

Initially, we are fetching the JSON data and then we are storing them in some variables and appending the data to the HTML DOM containers.
This is a very basic version and I didn't style the HTML here. However, I have built a site using the above code with styling Click here to open the site.
Github repo:https://github.com/Adarshreddyash/Corona_india_live_stats

Adarshreddy Adelli Thursday, April 16, 2020 javascript web development