here in this post, you will learn how to show the latest updated Covid-19 or CoronoVirus Data in your website.for that we will use HTML for view and jquery fetch for getting the latest data.
for view index.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- google fonts --> <link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i&display=swap" rel="stylesheet"> <link rel="shortcut icon" type="image/x-icon" href="assets/images/x-icon/01.png"> <link rel="stylesheet" href="assets/css/animate.css"> <link rel="stylesheet" href="assets/css/bootstrap.min.css"> <link rel="stylesheet" href="assets/css/style.css"> <title>Covid-19 Response Team</title> </head> <body> <section class="banner-section home-3"> <div class="banner-area"> <div class="container"> <div class="row align-items-center justify-content-center"> <div class="col-md-6 col-12"> <div class="content-part"> <div class="banner-content"> <h2>COVID-19 Tracker</h2> <h4>Total Confirmed Corona Cases</h4> <h2 id="totalCount" class="count-people">0</h2> <ul class="lab-ul"> <li>Recovered cases <span id="recoverdCount" class="count-people">0</span></li> <li>Deaths <span id="deathCount" class="count-people">0</span></li> </ul> </div> </div> </div> <div class="col-md-6 col-12"> <div class="banner-round"> <img src="assets/images/banner/home-3/01.png" alt="banner"> </div> </div> </div> </div> </div> </section> <script src="assets/js/jquery.js"></script> <script src="assets/js/bootstrap.min.js"></script> <script src="assets/js/jquery.countdown.min.js"></script> <script src="assets/js/functions.js"></script> </body> </html> |
for getting live covid-19 data we are using Jquery fetch() method.
in function.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 |
(function($){ $(document).ready(function() { //https://www.w3schools.com/jquery/eff_animate.asp //api link //The fetch() method used to fetch a resource. fetch('https://wuhan-coronavirus-api.laeyoung.endpoint.ainize.ai/jhu-edu/brief') // asynchronously load contents of the url // return a Promise that resolves when res is loaded .then(res => res.json()) // call this function when res is loaded // return a Promise with result of above function .then(data => { // call this function when the above chained Promise resolves console.log("hellow data"); console.log(data); document.getElementById('totalCount').innerHTML = data.confirmed; document.getElementById('recoverdCount').innerHTML = data.recovered; document.getElementById('deathCount').innerHTML = data.deaths; }) .finally(() => { // counterup js start here $('.count-people').each(function () { console.log("count-people 1"); //split :Split a string into an array of substrings // console.log($(this).text().split(".")[1]); //var size = $(this).text().split(".")[1] ? $(this).text().split(".")[1].length : 0; // duration - sets the speed of the animation // step - specifies a function to be executed for each step in the animation $(this).prop('Counter', 0).animate({ Counter: $(this).text() }, { duration: 2000, step: function (func) { console.log("func"); console.log(func); $(this).text(parseFloat(func).toFixed(0)); "635.787" 635.787 636 } }); }); }); }); }(jQuery)); |
for rotating or animate the image(png file) we use the following line in the style.css
|
1 2 |
.banner-section.home-3 .banner-area .banner-round { animation: lab_round 20s linear infinite; } |
Video Description:
Share with:
