Covid-tracker-js Alternatives

covid-tracker-js reviews and mentions

• COVID-19 Tracker 2021
  1 project | dev.to | 20 Jul 2021

  Corona has made everyone suffer in various aspects, and I do hope it doesn't get any more worst of it. So, I've made an active COVID19 tracker for India 2021. The basic idea of making this project in the first place was to make it informative enough so that people know that how much of the population has been affected by covid-19 in 2021 too. Without any further ado let's begin with today's post. The website is hosted on Netlify but why netlify though? Comment down if you want to know about it, I will definitely add another post for that over here. COVID TRACKER 2021 This project looks a very simple one yet uses big concepts like how does fetch works in JavaScript this one question is one of the favorites' question for the recruiter to ask to any JavaScript Developer. First step open your code editor create one index.html file then proceed further with the steps given below: Step1: Let's begin with the html boiler plate Covid Tracker for India Step2: Next we need to create div sections for the container. In the image given below we can clearly see the div tags class names that are used to edit them in the CSS later: div section board is the child div of the container then comes the six different blocks which are named as follows: div section c: this is the div for telling the active cases div section cr: this is the div for telling the critical cases div section r: this is the div for telling the recovered cases div section ca: this is the div for telling the total cases div section d: this is the div for telling the total death cases div section t: this is the div for telling the total tests done The code for this using these divs in your index.html file: COVID -19 Cases in Active Cases //h5 tag is used for writing text in web page Total Cases Critical Cases Total Deaths Recovered Cases Total Testes Done The alignment of these div classes is done in the CSS section which you can get access via my GitHub. Step 3: Creating and editing the Script File(script.js). The main concept here is of fetching the data through an India Corona -tracker API. Syntax of using a fetch funtion n javascript is giving below: fetch('URL') .then(response => response.json()) .then(data => console.log(data)); What does fetch do and how does it works internally with your web browser? fetch is used for making AJAX(Asynchronous JavaScript XML) calls in JavaScript to store data. fetch sends an HTTP request to the server and we can get sure whether the request was successful or not via promises Below image displays how does it actually works diagrammatically: promise tells you whether the request was successful or not if it was successful then we can see the data on our web-page but if it wasn't then we will know there is some issue with our fetch and we can improvise that. Below is the promise's working shown diagrammatically: This is your code for Script.js file fetch("https://corona.lmao.ninja/v2/countries/India") .then((response) => { return response.json(); }) .then((data) => { console.log(data); document.getElementById("country").innerHTML = data.country; document.getElementById( "active" ).innerHTML = data.active.toLocaleString(); document.getElementById("cases").innerHTML = data.cases.toLocaleString(); document.getElementById( "critical" ).innerHTML = data.critical.toLocaleString(); document.getElementById("death").innerHTML = data.deaths.toLocaleString(); document.getElementById( "recovered" ).innerHTML = data.recovered.toLocaleString(); document.getElementById("tests").innerHTML = data.tests.toLocaleString(); document.getElementById("flag").src = data.countryInfo.flag; }); So as we discussed fetch, promise and how will the APIs work this will be the end of the post. Hope you liked it. For the icons I've used font-awesome which is a great site to use fav-icons from. Take care and keep coding💜