easella/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Covid 19 Api in Javascript</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
</head>
<body>
<div class="container">
<h1 class="text-center mt-5">Covid 19 Live Data in Table</h1>
<br><br>
<div class="container">
  <table class="table table-hover">
    <thead>
      <tr>
        <th>Total Cases</th>
        <th>Total Deaths</th>
        <th>Total Recovered</th>
      </tr>
    </thead>
    <tbody>
      <tr id="data"></tr>
    </tbody>
  </table>
  <br>
  <button onclick="refreshData()" class="btn btn-danger btn-block">
  Refresh Data
  </button>
</div>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>

init()


function init(){
var url = "https://api.covid19api.com/summary"

var data = ''

$.get(url,function(data){
console.log(data.Global)

data = `
<td>${data.Global.TotalConfirmed}</td>
<td>${data.Global.TotalDeaths}</td>
<td>${data.Global.TotalRecovered}</td>
`

$("#data").html(data)
})
}


function refreshData(){
clearData()
init()
}

function clearData(){
$("#data").empty()
init()
}

</script>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Covid 19 Api in Javascript</title>
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
	</head>
	<body>
	<div class="container">
	<h1 class="text-center mt-5">Covid 19 Live Data in Table</h1>
	<br><br>
	<div class="container">
	<table class="table table-hover">
	<thead>
	<tr>
	<th>Total Cases</th>
	<th>Total Deaths</th>
	<th>Total Recovered</th>
	</tr>
	</thead>
	<tbody>
	<tr id="data"></tr>
	</tbody>
	</table>
	<br>
	<button onclick="refreshData()" class="btn btn-danger btn-block">
	Refresh Data
	</button>
	</div>
	</div>
	</body>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
	<script>

	init()



	function init(){
	var url = "https://api.covid19api.com/summary"

	var data = ''

	$.get(url,function(data){
	console.log(data.Global)

	data = `
	<td>${data.Global.TotalConfirmed}</td>
	<td>${data.Global.TotalDeaths}</td>
	<td>${data.Global.TotalRecovered}</td>
	`

	$("#data").html(data)
	})
	}


	function refreshData(){
	clearData()
	init()
	}

	function clearData(){
	$("#data").empty()
	init()
	}

	</script>
	</html>