File index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Covid19 Tracker</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style type="text/css">
ul.list_world {
padding: 0;
margin: 0;
list-style: none;
}
ul.list_world li {
border: 1px dashed #000;
width: 24%;
padding: 10px;
margin: 5px;
background: beige;
float: left;
height: 280px;
}
</style>
</head>
<body>
<div class="container">
<div class="col-md-12">
<h3>COVID-19 tracker</h3>
<p>Link API Covid : <a href="">https://github.com/ExpDev07/coronavirus-tracker-api</a></p>
<p>Theo dõi tình trạng covid tại : <span id="title"></span></p>
<select id="select_world">
<option value="">---Chọn quốc gia---</option>
</select>
<table class="table table-striped">
<thead>
<tr>
<th>ID</th>
<th>Quốc gia</th>
<th>Mã Quốc gia</th>
<th>Dân số</th>
<th>Bị nhiễm</th>
<th>Tử vong</th>
<th>Hồi phục</th>
<th>Cập nhật gần nhất</th>
<th>% tử vong</th>
</tr>
</thead>
<tbody>
<tr>
<td><div id="id"></div></td>
<td><span style="color:red" id="quocgia"></span><span style="color:red" id="tinh"></span></td>
<td><div id="code"></div></td>
<td><div id="danso"></div></td>
<td><div id="canhiem"></div></td>
<td><div id="tuvong"></div></td>
<td><div id="hoiphuc"></div></td>
<td><div id="capnhat"></div></td>
<td><div id="phantram"></div></td>
</tr>
</tbody>
</table>
<!-------world--------->
<p>Theo dõi tình trạng covid toàn thế giới</p>
<p>Ca nhiễm : <span id="tong_canhiem"></span> ca</p>
<p>Tử vong : <span id="tong_tuvong"></span></p>
<p>Phục hồi : <span id="tong_phuchoi"></span></p>
<div id="list"></div>
</div>
</div>
</body>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script type="text/javascript" src="app.js"></script>
</html>
File App.js
getCovidWorld();
getCovidCountry();
getSelectCountry();
const btnSelect = document.getElementById("select_world");
btnSelect.addEventListener("click",getCountryById);
function getCountryById(e){
fetch('https://coronavirus-tracker-api.herokuapp.com/v2/locations/'+e.target.value)
.then(res => res.json())
.then(data => {
let id = data.location.id;
let code = data.location.country_code;
let tinh = data.location.province;
let quocgia = data.location.country;
let danso = data.location.country_population;
let capnhat = data.location.last_updated;
let canhiem = data.location.latest.confirmed;
let hoiphuc = data.location.latest.recovered;
let tuvong = data.location.latest.deaths;
if(data.location.province!=""){
document.getElementById("quocgia").innerHTML = quocgia.toLocaleString('en') + '-' + tinh.toLocaleString('en');
document.getElementById("title").innerText = quocgia.toLocaleString('en') + '-' + tinh.toLocaleString('en');
document.getElementById("tinh").innerHTML = '-' + tinh.toLocaleString('en');
}else{
document.getElementById("quocgia").innerHTML = quocgia.toLocaleString('en');
document.getElementById("title").innerText = quocgia.toLocaleString('en');
}
document.getElementById("id").innerHTML = id;
document.getElementById("quocgia").innerHTML = quocgia.toLocaleString("en");
document.getElementById("code").innerHTML = code.toLocaleString("en");
document.getElementById("danso").innerHTML = danso.toLocaleString("en");
document.getElementById("capnhat").innerHTML = capnhat.substring(0,10);
document.getElementById("canhiem").innerHTML = canhiem.toLocaleString("en");
document.getElementById("tuvong").innerHTML = tuvong.toLocaleString("en");
document.getElementById("hoiphuc").innerHTML = hoiphuc.toLocaleString("en");
document.getElementById('phantram').innerHTML = ((Number(tuvong)/Number(canhiem))*100).toLocaleString("en", {minimumFractionDigits: 2, maximumFractionDigits: 2} ) + "%";
}).catch(error => console.log('Error'));
}
function getCovidCountry(){
fetch('https://coronavirus-tracker-api.herokuapp.com/v2/locations/266')
.then(res => res.json())
.then(data => {
let id = data.location.id;
let code = data.location.country_code;
let quocgia = data.location.country;
let tinh = data.location.province;
let danso = data.location.country_population;
let capnhat = data.location.last_updated;
let canhiem = data.location.latest.confirmed;
let hoiphuc = data.location.latest.recovered;
let tuvong = data.location.latest.deaths;
if(data.location.province!=""){
document.getElementById("quocgia").innerHTML = quocgia.toLocaleString('en') + '-' + tinh.toLocaleString('en');
document.getElementById("title").innerText = quocgia.toLocaleString('en') + '-' + tinh.toLocaleString('en');
document.getElementById("tinh").innerHTML = '-' + tinh.toLocaleString('en');
}else{
document.getElementById("quocgia").innerHTML = quocgia.toLocaleString('en');
document.getElementById("title").innerText = quocgia.toLocaleString('en');
}
document.getElementById("id").innerHTML = id;
document.getElementById("quocgia").innerHTML = quocgia.toLocaleString("en");
document.getElementById("code").innerHTML = code.toLocaleString("en");
document.getElementById("danso").innerHTML = danso.toLocaleString("en");
document.getElementById("capnhat").innerHTML = capnhat.substring(0,10);
document.getElementById("canhiem").innerHTML = canhiem.toLocaleString("en");
document.getElementById("tuvong").innerHTML = tuvong.toLocaleString("en");
document.getElementById("hoiphuc").innerHTML = hoiphuc.toLocaleString("en");
document.getElementById('phantram').innerHTML = ((Number(tuvong)/Number(canhiem))*100).toLocaleString("en", {minimumFractionDigits: 2, maximumFractionDigits: 2} ) + "%";
}).catch(error => console.log('Error'));;
}
function getCovidWorld(){
fetch('https://coronavirus-tracker-api.herokuapp.com/v2/locations')
.then(res => res.json())
.then(data => {
console.log(data);
let nguoinhiem = data.latest.confirmed;
let chet = data.latest.deaths;
let phuchoi = data.latest.recovered;
document.getElementById("tong_canhiem").innerHTML = new Intl.NumberFormat().format(nguoinhiem);
document.getElementById("tong_tuvong").innerHTML = chet.toLocaleString("en");
document.getElementById("tong_phuchoi").innerHTML = phuchoi.toLocaleString("en");
const html = data.locations.map(covid => {
const id = covid.id;
const code = covid.country_code;
const quocgia = covid.country;
const tinh = covid.province;
const danso = covid.country_population;
const capnhat = covid.last_updated;
const canhiem = covid.latest.confirmed;
const hoiphuc = covid.latest.recovered;
const tuvong = covid.latest.deaths;
return `
<ul class="list_world">
<li>
<p>id:${id}</p>
<p style='color:red'>Quốc gia:${quocgia.toLocaleString("en")}</p>
<p style='color:blue'>${tinh.toLocaleString("en")}</p>
<p>Mã Quốc gia:${code}</p>
<p>Dân số:${new Intl.NumberFormat().format(danso)}</p>
<p>Cập nhật:${capnhat.substring(0,10)}</p>
<p>Ca nhiễm:${new Intl.NumberFormat().format(canhiem)}</p>
<p>Tử vong:${new Intl.NumberFormat().format(tuvong)}</p>
<p>Phần trăm:${
((Number(tuvong)/Number(canhiem))*100).toLocaleString("en", {minimumFractionDigits: 2, maximumFractionDigits: 2} ) + "%"}
</p>
</li>
</ul>
`
}).join("");
document.getElementById("list").insertAdjacentHTML("afterbegin",html);
}).catch(error => console.log('Error'));;
}
function getSelectCountry(){
fetch('https://coronavirus-tracker-api.herokuapp.com/v2/locations')
.then(res => res.json())
.then(data => {
const html = data.locations.map(list => {
const id = list.id;
const quocgia = list.country;
var option = document.createElement('option');
option.value = id;
if(list.province!=""){
option.innerHTML = quocgia + '-' + list.province;
}else{
option.innerHTML = quocgia;
}
document.getElementById("select_world").appendChild(option);
});
}).catch(error => console.log('Error'));;
}
