MASIGNASUKAv102
6510051498749449419

Build a live Corona tracker using JQuery

Build a live Corona tracker using JQuery
Add Comments
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

As an Engineering Lead with deep expertise in Artificial Intelligence, Cybersecurity, and Systems Architecture, I guide teams in building innovative, secure, and scalable solutions.I am passionate about tackling challenging technical problems, fostering engineering excellence, and delivering solutions that balance innovation, security, and performance. I actively share knowledge through blogging and community engagement, contributing to the advancement of AI and cybersecurity practices.