Corona Live Tracker Using LWC

Today everyone is worried about Corona(covid 19). I hope you all are doing well. There are many live tracker available for Corona. As a developer it make me curious and I started looking for API which are used by other portal so that I can use the same and can create the tracker, I found some API, So I have created Corona Live Tracker Using LWC.
In this tracker we will get company wise details of total number of case, how many patient get recovered and what are the current status. It get updated daily.

• 

• 

Now we will check the code. I have made a request to the covid19 API. As this is a public API so we don’t need to perform any authentication for this. In the response we are getting JSON. So I have used Wrapper apex to parse this JSON and created a Countries type of list. This list have all the parameters which we need to display on the UI.
For now if we don’t get any result or if API is down we are not showing any message to users, you can add that part if needed.

CovidAPIController

public with sharing class CovidAPIController {

    @AuraEnabled(cacheable=true)
    public static List<Countries> getCovidData() {
        HttpRequest req = new HttpRequest();
        req.setMethod('GET');
        req.setEndpoint('https://api.covid19api.com/summary');
        req.setTimeout(60*1000);

        Http h = new Http();
        String resp;
        HttpResponse res = h.send(req);
        if(res.getStatusCode() < 299) {
            resp = res.getBody();
            CovidWrapper CoWrap = (CovidWrapper) System.JSON.deserialize(resp, CovidWrapper.class);
            List<Countries> coList = new List<Countries>();
            for(Countries co : CoWrap.Countries)
                if(String.isNotBlank(co.Country) && co.TotalConfirmed > 0)
                    coList.add(co);
            return coList;
        }
        return new List<Countries>();
    }

    public class CovidWrapper {

        public List<Countries> Countries;
        public String currDate;
    }

    public class Countries {
        @AuraEnabled
        public String Country;
        @AuraEnabled
        public String CountrySlug;
        @AuraEnabled
        public Integer NewConfirmed;
        @AuraEnabled
        public Integer TotalConfirmed;
        @AuraEnabled
        public Integer NewDeaths;
        @AuraEnabled
        public Integer TotalDeaths;
        @AuraEnabled
        public Integer NewRecovered;
        @AuraEnabled
        public Integer TotalRecovered;
    }
}

lwcCovidTracker.html

<template>
    <lightning-card>
        <h3 slot="title">
            <lightning-icon icon-name="utility:connected_apps" size="small"></lightning-icon>
            This Covid Tracker updates daily. Here you will find data of all countries. 
        </h3>
        <div slot="footer">
                
        </div>
            <table class="slds-table slds-table_bordered slds-table_cell-buffer slds-table_col-bordered slds-table_striped">
            <thead>
                <tr class="slds-text-title_caps">
                    <th scope="col">
                        <div title="country">Country</div>
                    </th>
                    <th scope="col" class="greyClass">
                        <div title="confirmedCase">New Confirmed Cases</div>
                    </th>
                    <th scope="col" class="greyClass">
                        <div title="totalcase">Total Confirmed Cases</div>
                    </th>
                    <th scope="col" class="redClass">
                        <div title="newD">New Death</div>
                    </th>
                    <th scope="col" class="redClass">
                        <div title="totalD">Total Death</div>
                    </th>
                    <th scope="col" class="greenClass">
                        <div title="recovered">New Recovered</div>
                    </th>
                    <th scope="col" class="greenClass">
                        <div title="newRecovered">Total Recovered</div>
                    </th>
                </tr>
            </thead>
            <tbody>
            <template for:each={covidList} for:item="co">
                    <tr key={co.key}>
                        <th scope="col">
                            {co.Country}
                        </th>
                        <th scope="col" class="greyClass">
                            {co.NewConfirmed}
                        </th>
                        <th scope="col" class="greyClass">
                            {co.TotalConfirmed}
                        </th>
                        <th scope="col" class="redClass">
                            {co.NewDeaths}
                        </th>
                        <th scope="col" class="redClass">
                            {co.TotalDeaths}
                        </th>
                        <th scope="col" class="greenClass">
                            {co.NewRecovered}
                        </th>
                        <th scope="col" class="greenClass">
                            {co.TotalRecovered}
                        </th>
                    </tr>
                </template>
            </tbody>
        </table>
    </lightning-card>
</template>

lwcCovidTracker.css

.greyClass{background-color: lightgrey !important;}

.redClass{background-color: red !important;}

.greenClass{background-color:#84dc84 !important;}

If you want to create same in your org, don’t forget to add Remote Site Setting. If you want to add similar Corona Live Tracker Using LWC in your blog, you can check my post, how we can use Lightning Web Components in External WebSite.
Here we have also covered how we can easily make HTTP request from LWC components, as the base concept remain same.

Do you have any questions, let me know in comments. Happy Programming 🙂