Step1. apiでFetch してみる。
<html>
<!DOCTYPE html>
<html>
<head>
<title>COVID Tracker</title>
<link rel="shortcut icon" href="corona.jpeg">
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="styles.css">
<script type="text/javascript" src="app1.js"></script>
</head>
<body>
<h1 class="title">COVID-19 Tracker</h1>
<h2 class="subtitle">The latest statistics regarding the "Corona Virus".</h2>
<div class="data-container">
<div class="stats-container">
<h4>Cases</h4>
<h1 id="cases"></h1>
<h4>Deaths</h4>
<h1 id="deaths"></h1>
<h4>% of Deaths</h4>
<h1 id="percent"></h1>
</div>
<div class="location-container">
<h4>Country</h4>
<h1 id="country">Japan</h1>
<h4>Population</h4>
<h1 id="population"></h1>
<h4>Last Updated</h4>
<h1 id="update"></h1>
</div>
</div>
<h1 class="footer">Information provided by <a href="https://systems.jhu.edu/research/public-health/ncov/">Johns Hopkins University</a></h1>
</body>
</html>
<html>
<head>
<title>COVID Tracker</title>
<link rel="shortcut icon" href="corona.jpeg">
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="styles.css">
<script type="text/javascript" src="app1.js"></script>
</head>
<body>
<h1 class="title">COVID-19 Tracker</h1>
<h2 class="subtitle">The latest statistics regarding the "Corona Virus".</h2>
<div class="data-container">
<div class="stats-container">
<h4>Cases</h4>
<h1 id="cases"></h1>
<h4>Deaths</h4>
<h1 id="deaths"></h1>
<h4>% of Deaths</h4>
<h1 id="percent"></h1>
</div>
<div class="location-container">
<h4>Country</h4>
<h1 id="country">Japan</h1>
<h4>Population</h4>
<h1 id="population"></h1>
<h4>Last Updated</h4>
<h1 id="update"></h1>
</div>
</div>
<h1 class="footer">Information provided by <a href="https://systems.jhu.edu/research/public-health/ncov/">Johns Hopkins University</a></h1>
</body>
</html>
app.js (consoleに表示）
window.onload = function() {
getCovidStats();
}
function getCovidStats() {
fetch('https://coronavirus-tracker-api.herokuapp.com/v2/locations/139')
.then(function(resp) { return resp.json() })
.then(function(data) {
console.log(data);
})
.catch(function() {
console.log("error");
})
}
getCovidStats();
}
function getCovidStats() {
fetch('https://coronavirus-tracker-api.herokuapp.com/v2/locations/139')
.then(function(resp) { return resp.json() })
.then(function(data) {
console.log(data);
})
.catch(function() {
console.log("error");
})
}
apiは
https://github.com/ExpDev07/coronavirus-tracker-api
All endpoints are located at
coronavirus-tracker-api.herokuapp.com/v2/ and are accessible via https. For instance: you can get data per location by using this URL: https://coronavirus-tracker-api.herokuapp.com/v2/locations'https://coronavirus-tracker-api.herokuapp.com/v2/locations/139'
で取得できるJSONデータ
app.js (完成版）
window.onload = function() {
getCovidStats();
}
function getCovidStats() {
fetch('https://coronavirus-tracker-api.herokuapp.com/v2/locations/139')
.then(function(resp) { return resp.json() })
.then(function(data) {
let population = data.location.country_population;
let update = data.location.last_updated;
let confirmedCases = data.location.latest.confirmed;
let deaths = data.location.latest.deaths;
document.getElementById('population').innerHTML = population.toLocaleString('en');
document.getElementById('update').innerHTML = update.substr(0, 10);
document.getElementById('cases').innerHTML = confirmedCases.toLocaleString('en');
document.getElementById('deaths').innerHTML = deaths.toLocaleString('en');
document.getElementById('percent').innerHTML = ((Number(deaths)/Number(confirmedCases))*100).toLocaleString("en", {minimumFractionDigits: 2, maximumFractionDigits: 2}) + "%";
})
.catch(function() {
console.log("error");
})
setTimeout(getCovidStats, 43200000) // update every 12 hours
}
getCovidStats();
}
function getCovidStats() {
fetch('https://coronavirus-tracker-api.herokuapp.com/v2/locations/139')
.then(function(resp) { return resp.json() })
.then(function(data) {
let population = data.location.country_population;
let update = data.location.last_updated;
let confirmedCases = data.location.latest.confirmed;
let deaths = data.location.latest.deaths;
document.getElementById('population').innerHTML = population.toLocaleString('en');
document.getElementById('update').innerHTML = update.substr(0, 10);
document.getElementById('cases').innerHTML = confirmedCases.toLocaleString('en');
document.getElementById('deaths').innerHTML = deaths.toLocaleString('en');
document.getElementById('percent').innerHTML = ((Number(deaths)/Number(confirmedCases))*100).toLocaleString("en", {minimumFractionDigits: 2, maximumFractionDigits: 2}) + "%";
})
.catch(function() {
console.log("error");
})
setTimeout(getCovidStats, 43200000) // update every 12 hours
}
setTimeout(getCovidStats, 43200000) // update every 12 hours
Windows.onloadでロードする都度、getCovidStats();をCallする設定にしたが、
このsetTimeout(関数名, ミリセコンド)は、最後の実行から指定したミリセコンドの間はCallされない。
0 件のコメント:
コメントを投稿