From f93c4a548cccbe477b63ae2db817430ed01ae39a Mon Sep 17 00:00:00 2001 From: Shuklaaa Date: Sat, 2 Jul 2022 09:01:51 +0530 Subject: [PATCH] Final Project --- css/style.css | 33 +++++++++++++++++++++++++++++++++ index.html | 20 ++++++++++++++++++++ js/script.js | 40 ++++++++++++++++++++++++++++++++++++++++ 3 files changed, 93 insertions(+) create mode 100644 css/style.css create mode 100644 index.html create mode 100644 js/script.js diff --git a/css/style.css b/css/style.css new file mode 100644 index 0000000..c41abc0 --- /dev/null +++ b/css/style.css @@ -0,0 +1,33 @@ +body { + background-color: skyblue; + } + h1 { + text-align: center; + background-color: black; + color: white; + padding: 20px; + border-radius: 20px; + font-family: Arial, Helvetica, sans-serif; + } + #myDiv { + width: 500px; + height: 400px; + background-color: coral; + margin: auto; + } + h2 { + text-align: center; + color: purple; + font-family: Arial, Helvetica, sans-serif; + padding-top: 20px; + } + pre { + font-family: Arial, Helvetica, sans-serif; + line-height: 50px; + margin-left: 50px; + font-size: 24px; + } + span { + color: white; + font-weight: bold; + } \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..233b2af --- /dev/null +++ b/index.html @@ -0,0 +1,20 @@ + + + + + + + + COVID-19 CASES + + + + +

Fetching Data using Covid API

+
+

Today Covid Cases

+
+ + + + \ No newline at end of file diff --git a/js/script.js b/js/script.js new file mode 100644 index 0000000..da278e2 --- /dev/null +++ b/js/script.js @@ -0,0 +1,40 @@ +const url = "https://api.covid19api.com/summary"; + +getApiData = (url) => { + fetch(url) + .then((res) => { + return res.json(); + }) + .then((data) => { + console.log(data); + + let country = data.Countries[77].Country; + let totalCases = data.Countries[77].TotalConfirmed; + let totalDeaths = data.Countries[77].TotalDeaths; + let newCase = data.Countries[77].NewConfirmed; + let newDeaths = data.Countries[77].NewDeaths; + let today = new Date().toDateString(); + + displayData( + country, + totalCases, + totalDeaths, + newCase, + newDeaths, + today + ); + }) + .catch((error) => { + console.log(error); + }); +} + +function displayData(c, tc, td, nc, nd, t) { + let pre = document.createElement("pre"); + console.log(tc); + pre.innerHTML = `Country Name: ${c}\nDate: ${t} \nTotal Cases: ${tc} \nTotal Deaths: ${td} \nNew Cases: ${nc} \nNew Deaths: ${nd}`; + + document.getElementById("myDiv").appendChild(pre); +} + +getApiData(url); \ No newline at end of file