Embedded Files
Title : Corona Tracker Using API | Covid-19 tracker App | News App | JavaScript Tutorial
HTML :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="main.css">
<link rel="shortcut icon" href="Images/favicon.png">
<title>COVID APP</title>
</head>
<body>
<section>
<div class="total-cases block">
<p class="numbers">0</p>
<p class="label">Total Cases</p>
</div>
<div class="active-cases block">
<p class="numbers">0</p>
<p class="label">Active Cases</p>
</div>
<div class="death-cases block">
<p class="numbers">0</p>
<p class="label">Deaths</p>
</div>
<div class="recovered-cases block">
<p class="numbers">0</p>
<p class="label">Recovered Cases</p>
</div>
<div class="news">
<!-- loaded with ajax request -->
</div>
</section>
<script src="main.js"></script>
</body>
</html>
CSS :
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Josefin Sans;
}
body {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #e5eff8;
}
section {
width: 80%;
height: 80vh;
display: grid;
grid-template-columns: 25% 50% 25%;
grid-template-rows: 30% 70%;
grid-gap: 15px;
}
.block {
border-radius: 15px;
box-shadow: 0 10px 25px -10px rgba(33,150,243,0.5);
background-color: #fff;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.block .numbers {
font-size: 3rem;
}
.block .label {
font-size: 1.2rem;
padding: 15px 0 0 0 ;
color:#424242;
}
.total-cases {
color:#2196F3;
grid-column: 1/2;
grid-row: 1/2;
}
.active-cases {
color:#FFC107;
grid-column: 2/3;
grid-row: 1/2;
}
.death-cases {
color:#F44336;
grid-column: 3/4;
grid-row: 1/2;
}
.recovered-cases {
color:#4CAF50;
grid-column: 1/2;
grid-row: 2/3;
}
.news {
grid-column: 2/4;
grid-row: 2/3;
background: #fff;
box-shadow: 0 10px 25px -10px rgba(33,150,243,0.5);
border-radius: 15px;
overflow-y: auto;
display: flex;
flex-wrap: wrap;
}
.news .card {
width: 35%;
background: #e5eff8;
display: flex;
flex-direction: column;
margin: 50px auto;
border-radius: 15px;
}
.card img {
width: 100%;
border-radius: 15px 15px 0 0;
}
.card .headline,.summary {
padding: 10px 15px;
font-size: 1.5rem;
}
.summary {
font-size: 1rem;
color: #424242;
}
.read-more button{
width: 100%;
padding: 15px 0;
border: none;
font-size: 1.1rem;
border-radius: 0 0 15px 15px ;
background: #2196F3;
color: #fff;
transition: 0.3s;
outline: none;
}
.read-more button:hover{
background: #FFC107;
color: #000;
cursor: pointer;
}
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: #fff;
}
::-webkit-scrollbar-thumb {
background: #9e999e;
}
JavaScript :
fetch("https://covid-19-statistics.p.rapidapi.com/reports/total?date=2020-04-07", {
"method": "GET",
"headers": {
"x-rapidapi-key": "2d2dea647fmsh577c57bb54abd69p13249djsn06827c6f1fe8",
"x-rapidapi-host": "covid-19-statistics.p.rapidapi.com"
}
})
.then(response => response.json())
.then(data => {
var numbers = document.querySelectorAll('.numbers');
num = new Intl.NumberFormat('en-US');
numbers[0].innerHTML = num.format(data.data.confirmed);
numbers[1].innerHTML = num.format(data.data.active);
numbers[2].innerHTML = num.format(data.data.deaths);
numbers[3].innerHTML = num.format(data.data.recovered);
})
.catch(err => {
console.error(err);
});
// news ajax request
fetch("https://covid-19-news.p.rapidapi.com/v1/covid?q=covid&lang=en&media=True", {
"method": "GET",
"headers": {
"x-rapidapi-key": "2d2dea647fmsh577c57bb54abd69p13249djsn06827c6f1fe8",
"x-rapidapi-host": "covid-19-news.p.rapidapi.com"
}
})
.then(response => response.json())
.then(data => {
var news = document.querySelector('.news');
for (let i=0 ;i<20;i++) {
var newsData = `<div class="card">
<img src="${data.articles[i].media}" alt="news_image">
<p class="headline">${data.articles[i].title}</p>
<p class="summary">${data.articles[i].summary}</p>
<a href="${data.articles[i].link}" class="read-more">
<button>Read More</button>
</a>
</div>`;
news.innerHTML += newsData;
}
})
.catch(err => {
console.error(err);
});
Page updated
Google Sites
Report abuse