Covid19 Live Status

COVID Live Status

The world was in recovering from the COVID pandemic. I have just tried live status of covid affected areas and death rates using Angular.

You can get covid details from live server json from covidtracking.com. Using HttpClient we gave responsive datas from live site through JSON.

covide.component.ts
readonly Root_url = 'https://api.covidtracking.com/v1/states/current.json';
posts : any;

constructor( private http:HttpClient ) { }

ngOnInit(): void {
  this.posts = this.http.get(this.Root_url);
}

And displaying those data using *ngFor in table formate

covid.component.html
<table class="table table-bordered">
    <tr>
        <th>No.</th>
        <th>Date of checking</th>
        <th>State</th>
        <th>Positive</th>
        <th>Negative</th>
        <th>Total Affected</th>
        <th>Death</th>
    </tr>
    <tr *ngFor="let post of posts | async ; let i = index" [ngClass]="post.death > 1000 ? 'red' : 'green'">
        <td>{{i+1}}</td>
        <td>{{post.checkTimeEt}}</td>
        <td>{{post.state}}</td>
        <td>{{post.positive}}</td>
        <td>{{post.negative}}</td>
        <td>{{post.total}}</td>
        <td>{{post.death}}</td>
    </tr>
</table>

You can get the result in Green and Red colors, for this is based on the state death rate.

below 1000 death rate i have mentioned in the Green Zone.

above 1000 death rate i have mentioned in the Red Zone.

Get Live status : http://uisatz.com/covid19/

You May Also Like

Angular Components

Beginner of Angular

Leave a Reply

Your email address will not be published. Required fields are marked *