-
Notifications
You must be signed in to change notification settings - Fork 7
/
Copy pathcountrywise.html
1 lines (1 loc) · 3.75 KB
/
countrywise.html
1
<!DOCTYPE html><html lang="en"> <head> <script async src="https://www.googletagmanager.com/gtag/js?id=UA-160780833-1" ></script> <script>window.dataLayer=window.dataLayer || []; function gtag(){dataLayer.push(arguments);}gtag("js", new Date()); gtag("config", "UA-160780833-1"); </script> <meta charset="UTF-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <title>Covid-19 App By Ankit Sharma</title> <link rel="stylesheet" href="style.css"/> <script src="script-min.js" defer></script> </head> <body> <div class="main-container"> <header class="header"> <div class="toggler"><span></span> <span></span> <span></span></div><div class="close"> <svg class="navbar--svg_close" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="18px" height="18px" viewBox="0 0 20 20" enable-background="new 0 0 20 20" xml:space="preserve" style="display: block;" > <line fill="none" x1="5.4" y1="15.6" x2="5.4" y2="15.6"></line> <line fill="none" stroke="#fff" stroke-width="1.5" stroke-miterlimit="10" x1="0.5" y1="0.6" x2="19.4" y2="19.4" ></line> <line fill="none" stroke="#fff" stroke-width="1.5" stroke-miterlimit="10" x1="19.4" y1="0.6" x2="0.6" y2="19.4" ></line> </svg> </div><ul> <li><a href="index.html">Overview</a></li><li><a href="countrywise.html">Countrywise Data</a></li><li><a href="datewise.html">DateWise Data</a></li><li><a href="datavisualization.html">Data Visualizations</a></li></ul> </header> <h2 class="heading text-center">Covid-19 Country Wise Data</h2> <div class="error"> <span class="error-close">x</span> <p class="error-message">Data Not Found</p></div><div class="choose-country"> <h4>Please select a country</h4> <select name="country" id="country"> <option value="select_country" selected>Select Country</option> </select> </div><div class="display-data"> <h3 class="case_title">Confirmed Cases</h3> <div id="confirmedCases"></div><h3 class="case_title">Recovered Cases</h3> <div id="recoveredCases"></div><h3 class="case_title">Death Cases</h3> <div id="deathCases"></div></div></div><script>document.addEventListener("DOMContentLoaded", ()=>{fetchApiData(); function fetchApiData(){fetch(fetchCountryUrl) .then((response)=>{if (!response.ok){throw Error(response.statusText);}else{return response.json();}}) .then((data)=>{response=data; setData();}) .catch((err)=> setError(err));}function setData(){ if (response !==null){var countriesData=Object.values(response["countries"]); var html='<option value="" selected>Select Country</option>'; countriesData.forEach((country)=>{html +=`<option value="${country['name']}">${country['name']}</option>`;}); countrySelect.innerHTML=html;}}countrySelect.addEventListener("change", function (){if (this.value !==""){ fetchContryWiseData(this.value);}}); function fetchContryWiseData(country){fetch("https://covid19.mathdro.id/api/countries/" + country) .then((data)=>{if (!data.ok){throw Error(data["error"]);}else{return data.json();}}) .then((response)=> setFigures(response)) .catch((error)=> setError(error));}function setFigures(fetchedData){ var confirmedNumber=fetchedData["confirmed"]["value"]; var recoveredNumber=fetchedData["recovered"]["value"]; var deathNumber=fetchedData["deaths"]["value"]; confirmed.textContent=confirmedNumber; recovered.textContent=recoveredNumber; deaths.textContent=deathNumber; showElement(".display-data"); hideElement(".error");}function setError(error){if (error !==null){errorMessage.textContent="No Data Available"; showElement(".error"); hideElement(".display-data");}}function showElement(element){document.querySelector(element).style.display="block";}function hideElement(element){document.querySelector(element).style.display="none";}errorClose.addEventListener("click", function (){hideElement(".error");});}); </script> </body></html>