├── README.md ├── index.html ├── resources ├── css │ ├── Gilroy-Regular.woff │ └── style.css ├── img │ ├── bg.jpg │ ├── close.svg │ └── logo.png └── js │ ├── app.js │ └── countries.js └── starter template ├── index.html └── resources ├── css ├── Gilroy-Regular.woff └── style.css ├── img ├── bg.jpg ├── close.svg └── logo.png └── js ├── app.js └── countries.js /README.md: -------------------------------------------------------------------------------- 1 | # COVID-19_TRACKER_HTML_CSS_JAVASCRIPT 2 | COVID-19 with HTML5, CSS3 and JavaScript 3 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | COVID-19 STATS - JAVASCRIPT 10 | 11 | 12 |
13 |
14 |

Any Support From Your Side Will Be Appreciated

15 |

Paypal ME

16 |
17 |
18 |
19 | 23 | 29 |
30 | 31 |
32 |
33 |
34 |
35 |
Loading...
36 |
change
37 |
38 |
39 | 44 | 45 |
46 |
47 |
48 |
49 |
50 |
Total Cases
51 |
0
52 |
+0
53 |
54 |
55 |
Recovered
56 |
0
57 |
+0
58 |
59 |
60 |
Deaths
61 |
0
62 |
+0
63 |
64 |
65 |
66 | 67 |
68 |
69 |
70 | 71 | 78 | 79 | 84 | 85 | 86 | 87 | 88 | -------------------------------------------------------------------------------- /resources/css/Gilroy-Regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeExplainedRepo/COVID-19_TRACKER_HTML_CSS_JAVASCRIPT/d16cfb6ef15c04f57c22a3293d427172d4b56d63/resources/css/Gilroy-Regular.woff -------------------------------------------------------------------------------- /resources/css/style.css: -------------------------------------------------------------------------------- 1 | /* ---------------------------------------------- */ 2 | /* CODE EXPLAINED TUTORIALS */ 3 | /* www.youtube.com/CodeExplained */ 4 | /* ---------------------------------------------- */ 5 | 6 | /* ---------------------------------------------- */ 7 | /* LOAD FONTS */ 8 | /* ---------------------------------------------- */ 9 | @font-face{ 10 | font-family: 'Gilroy'; 11 | src: url(./Gilroy-Regular.woff) format(woff); 12 | } 13 | /* ---------------------------------------------- */ 14 | /* GENERAL */ 15 | /* ---------------------------------------------- */ 16 | *{ 17 | padding: 0; 18 | margin: 0; 19 | box-sizing: border-box; 20 | font-family: 'Gilroy', sans-serif; 21 | } 22 | html{ 23 | font-size: 16px; 24 | } 25 | .hide{ 26 | display: none; 27 | } 28 | .fadeIn{ 29 | animation: fade 0.5s ease-in-out; 30 | } 31 | @keyframes fade{ 32 | 0%{ 33 | opacity: 0; 34 | } 35 | 100%{ 36 | opacity: 1; 37 | } 38 | } 39 | /* ---------------------------------------------- */ 40 | /* HEADER */ 41 | /* ---------------------------------------------- */ 42 | header{ 43 | display: flex; 44 | align-items: center; 45 | justify-content: space-between; 46 | 47 | max-width: 1200px; 48 | width: 100%; 49 | height: 60px; 50 | 51 | margin: 0 auto; 52 | 53 | background-color: #F3F2F2; 54 | } 55 | /* -------- LOGO -------- */ 56 | .logo{ 57 | display: flex; 58 | align-items: center; 59 | padding-left: 20px; 60 | } 61 | .logo img{ 62 | width: 60px; 63 | } 64 | .logo p { 65 | font-weight: bold; 66 | color: #6a149b; 67 | } 68 | /* -------- NAV -------- */ 69 | nav{ 70 | 71 | } 72 | 73 | nav ul{ 74 | display: flex; 75 | align-items: center; 76 | } 77 | nav ul li{ 78 | list-style: none; 79 | } 80 | nav ul li:last-child{ 81 | padding-right: 20px; 82 | } 83 | nav ul li a { 84 | text-decoration: none; 85 | color: #6a149b; 86 | padding: 10px; 87 | } 88 | /* ---------------------------------------------- */ 89 | /* MAIN */ 90 | /* ---------------------------------------------- */ 91 | main{ 92 | max-width: 1200px; 93 | margin: 0 auto; 94 | } 95 | /* -------- BG IMAGE -------- */ 96 | .stats{ 97 | width: 100%; 98 | background-image: linear-gradient(rgba(0,0,0,0.9), rgba(0,0,0,0.9)) ,url('../img/bg.jpg'); 99 | background-size: cover; 100 | } 101 | /* -------- LATEST REPORT -------- */ 102 | .latest-report{ 103 | display: flex; 104 | justify-content: space-between; 105 | align-items: center; 106 | 107 | width: 80%; 108 | margin: 0 auto; 109 | padding-top: 50px; 110 | 111 | color: #FFF; 112 | } 113 | 114 | .country, 115 | .total-cases, 116 | .recovered, 117 | .deaths{ 118 | height: 100px; 119 | } 120 | 121 | .name{ 122 | font-size: 2.2em; 123 | color: #be64f1; 124 | font-weight: bold; 125 | } 126 | 127 | .change-country{ 128 | cursor: pointer; 129 | } 130 | 131 | .title{ 132 | font-size: 1.3em; 133 | } 134 | .total-cases .value{ 135 | font-size: 2em; 136 | font-weight: bold; 137 | } 138 | .recovered .value{ 139 | font-size: 2em; 140 | font-weight: bold; 141 | color: #009688; 142 | } 143 | .deaths .value{ 144 | font-size: 2em; 145 | font-weight: bold; 146 | color: #f44336; 147 | } 148 | .new-value{ 149 | font-size: 1.3em; 150 | } 151 | /* -------- CHART -------- */ 152 | .chart{ 153 | width: 80%; 154 | height: 70vh; 155 | min-height: 500px; 156 | 157 | margin: 0 auto; 158 | padding: 50px 0; 159 | } 160 | /* -------- SEARCH COUNTRY -------- */ 161 | .search-country{ 162 | position: relative; 163 | top: 10px; 164 | } 165 | .search-box{ 166 | position: absolute; 167 | 168 | display: flex; 169 | align-items: center; 170 | justify-content: space-between; 171 | 172 | width: 400px; 173 | height: 30px; 174 | 175 | background-color: #111; 176 | 177 | z-index: 1; 178 | } 179 | .search-box input{ 180 | width: 360px; 181 | height: 25px; 182 | 183 | border: none; 184 | 185 | background-color: transparent; 186 | color: #FFF; 187 | 188 | padding-left: 15px; 189 | 190 | font-size: 1.1em; 191 | } 192 | .search-box img{ 193 | width: 20px; 194 | padding-right: 5px; 195 | cursor: pointer; 196 | } 197 | 198 | .country-list{ 199 | display: flex; 200 | 201 | position: absolute; 202 | top: 30px; 203 | 204 | width: 400px; 205 | height: 300px; 206 | 207 | background-color: #111; 208 | opacity: 0.9; 209 | 210 | overflow-y: scroll; 211 | } 212 | 213 | .country-list ul{ 214 | width: 100%; 215 | } 216 | 217 | .country-list ul li{ 218 | list-style: none; 219 | cursor: pointer; 220 | padding: 10px; 221 | color: #FFF; 222 | } 223 | .country-list ul li:hover{ 224 | border-left: 1px solid #FFF; 225 | } 226 | /* SCROLL BAR */ 227 | .country-list::-webkit-scrollbar { 228 | width: 10px; 229 | } 230 | 231 | /* Track */ 232 | .country-list::-webkit-scrollbar-track { 233 | background: #111; 234 | } 235 | 236 | /* Handle */ 237 | .country-list::-webkit-scrollbar-thumb { 238 | background: #F1F1F1; 239 | } 240 | 241 | /* Handle on hover */ 242 | .country-list::-webkit-scrollbar-thumb:hover { 243 | background: #FFF; 244 | } 245 | /* ---------------------------------------------- */ 246 | /* FOOTER */ 247 | /* ---------------------------------------------- */ 248 | footer{ 249 | max-width: 1200px; 250 | height: 60px; 251 | 252 | margin: 0 auto; 253 | background-color: #6a149b; 254 | } 255 | 256 | .footer-container{ 257 | height: 100%; 258 | display: flex; 259 | justify-content: center; 260 | } 261 | 262 | .copyright{ 263 | height: 100%; 264 | display: flex; 265 | flex-direction: column; 266 | justify-content: center; 267 | } 268 | 269 | .copyright p{ 270 | color: #FFF; 271 | } 272 | /* ---------------------------------------------- */ 273 | /* SCREEN WIDTH < 600px */ 274 | /* ---------------------------------------------- */ 275 | @media screen and (max-width: 600px){ 276 | .latest-report{ 277 | display: flex; 278 | flex-direction: column; 279 | align-items: flex-start; 280 | } 281 | } -------------------------------------------------------------------------------- /resources/img/bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeExplainedRepo/COVID-19_TRACKER_HTML_CSS_JAVASCRIPT/d16cfb6ef15c04f57c22a3293d427172d4b56d63/resources/img/bg.jpg -------------------------------------------------------------------------------- /resources/img/close.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /resources/img/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeExplainedRepo/COVID-19_TRACKER_HTML_CSS_JAVASCRIPT/d16cfb6ef15c04f57c22a3293d427172d4b56d63/resources/img/logo.png -------------------------------------------------------------------------------- /resources/js/app.js: -------------------------------------------------------------------------------- 1 | /* ---------------------------------------------- */ 2 | /* CODE EXPLAINED TUTORIALS */ 3 | /* www.youtube.com/CodeExplained */ 4 | /* ---------------------------------------------- */ 5 | 6 | // SELECT ALL ELEMENTS 7 | const country_name_element = document.querySelector(".country .name"); 8 | const total_cases_element = document.querySelector(".total-cases .value"); 9 | const new_cases_element = document.querySelector(".total-cases .new-value"); 10 | const recovered_element = document.querySelector(".recovered .value"); 11 | const new_recovered_element = document.querySelector(".recovered .new-value"); 12 | const deaths_element = document.querySelector(".deaths .value"); 13 | const new_deaths_element = document.querySelector(".deaths .new-value"); 14 | 15 | const ctx = document.getElementById("axes_line_chart").getContext("2d"); 16 | 17 | // APP VARIABLES 18 | let app_data = [], 19 | cases_list = [], 20 | recovered_list = [], 21 | deaths_list = [], 22 | deaths = [], 23 | formatedDates = []; 24 | 25 | // GET USERS COUNTRY CODE 26 | fetch("https://api.ipgeolocation.io/ipgeo?apiKey=14c7928d2aef416287e034ee91cd360d") 27 | .then((res) => { 28 | return res.json(); 29 | }) 30 | .then((data) => { 31 | let country_code = data.country_code2; 32 | let user_country; 33 | country_list.forEach((country) => { 34 | if (country.code == country_code) { 35 | user_country = country.name; 36 | } 37 | }); 38 | fetchData(user_country); 39 | }); 40 | 41 | /* ---------------------------------------------- */ 42 | /* FETCH API */ 43 | /* ---------------------------------------------- */ 44 | function fetchData(country) { 45 | user_country = country; 46 | country_name_element.innerHTML = "Loading..."; 47 | 48 | (cases_list = []), 49 | (recovered_list = []), 50 | (deaths_list = []), 51 | (dates = []), 52 | (formatedDates = []); 53 | 54 | var requestOptions = { 55 | method: "GET", 56 | redirect: "follow", 57 | }; 58 | 59 | const api_fetch = async (country) => { 60 | await fetch( 61 | "https://api.covid19api.com/total/country/" + country + "/status/confirmed", 62 | requestOptions 63 | ) 64 | .then((res) => { 65 | return res.json(); 66 | }) 67 | .then((data) => { 68 | data.forEach((entry) => { 69 | dates.push(entry.Date); 70 | cases_list.push(entry.Cases); 71 | }); 72 | }); 73 | 74 | await fetch( 75 | "https://api.covid19api.com/total/country/" + country + "/status/recovered", 76 | requestOptions 77 | ) 78 | .then((res) => { 79 | return res.json(); 80 | }) 81 | .then((data) => { 82 | data.forEach((entry) => { 83 | recovered_list.push(entry.Cases); 84 | }); 85 | }); 86 | 87 | await fetch( 88 | "https://api.covid19api.com/total/country/" + country + "/status/deaths", 89 | requestOptions 90 | ) 91 | .then((res) => { 92 | return res.json(); 93 | }) 94 | .then((data) => { 95 | data.forEach((entry) => { 96 | deaths_list.push(entry.Cases); 97 | }); 98 | }); 99 | 100 | updateUI(); 101 | }; 102 | 103 | api_fetch(country); 104 | } 105 | 106 | // UPDATE UI FUNCTION 107 | function updateUI() { 108 | updateStats(); 109 | axesLinearChart(); 110 | } 111 | 112 | function updateStats() { 113 | const total_cases = cases_list[cases_list.length - 1]; 114 | const new_confirmed_cases = total_cases - cases_list[cases_list.length - 2]; 115 | 116 | const total_recovered = recovered_list[recovered_list.length - 1]; 117 | const new_recovered_cases = total_recovered - recovered_list[recovered_list.length - 2]; 118 | 119 | const total_deaths = deaths_list[deaths_list.length - 1]; 120 | const new_deaths_cases = total_deaths - deaths_list[deaths_list.length - 2]; 121 | 122 | country_name_element.innerHTML = user_country; 123 | total_cases_element.innerHTML = total_cases; 124 | new_cases_element.innerHTML = `+${new_confirmed_cases}`; 125 | recovered_element.innerHTML = total_recovered; 126 | new_recovered_element.innerHTML = `+${new_recovered_cases}`; 127 | deaths_element.innerHTML = total_deaths; 128 | new_deaths_element.innerHTML = `+${new_deaths_cases}`; 129 | 130 | // format dates 131 | dates.forEach((date) => { 132 | formatedDates.push(formatDate(date)); 133 | }); 134 | } 135 | 136 | // UPDATE CHART 137 | let my_chart; 138 | function axesLinearChart() { 139 | if (my_chart) { 140 | my_chart.destroy(); 141 | } 142 | 143 | my_chart = new Chart(ctx, { 144 | type: "line", 145 | data: { 146 | datasets: [ 147 | { 148 | label: "Cases", 149 | data: cases_list, 150 | fill: false, 151 | borderColor: "#FFF", 152 | backgroundColor: "#FFF", 153 | borderWidth: 1, 154 | }, 155 | { 156 | label: "Recovered", 157 | data: recovered_list, 158 | fill: false, 159 | borderColor: "#009688", 160 | backgroundColor: "#009688", 161 | borderWidth: 1, 162 | }, 163 | { 164 | label: "Deaths", 165 | data: deaths_list, 166 | fill: false, 167 | borderColor: "#f44336", 168 | backgroundColor: "#f44336", 169 | borderWidth: 1, 170 | }, 171 | ], 172 | labels: formatedDates, 173 | }, 174 | options: { 175 | responsive: true, 176 | maintainAspectRatio: false, 177 | }, 178 | }); 179 | } 180 | 181 | // FORMAT DATES 182 | const monthsNames = [ 183 | "Jan", 184 | "Feb", 185 | "Mar", 186 | "Apr", 187 | "May", 188 | "Jun", 189 | "Jul", 190 | "Aug", 191 | "Sep", 192 | "Oct", 193 | "Nov", 194 | "Dec", 195 | ]; 196 | 197 | function formatDate(dateString) { 198 | let date = new Date(dateString); 199 | 200 | return `${date.getDate()} ${monthsNames[date.getMonth()]}`; 201 | } 202 | -------------------------------------------------------------------------------- /resources/js/countries.js: -------------------------------------------------------------------------------- 1 | // ALL COUNTRY NAMES WITH THEIR ISO CODE 2 | let country_list = [ 3 | { name: 'USA', code: 'US' }, 4 | { name: 'Spain', code: 'ES' }, 5 | { name: 'Italy', code: 'IT' }, 6 | { name: 'France', code: 'FR' }, 7 | { name: 'Germany', code: 'DE' }, 8 | { name: 'UK', code: 'GB' }, 9 | { name: 'Turkey', code: 'TR' }, 10 | { name: 'Iran', code: 'IR' }, 11 | { name: 'Russia', code: 'RU' }, 12 | { name: 'Belgium', code: 'BE' }, 13 | { name: 'Brazil', code: 'BR' }, 14 | { name: 'Canada', code: 'CA' }, 15 | { name: 'Netherlands', code: 'NL' }, 16 | { name: 'Switzerland', code: 'CH' }, 17 | { name: 'Portugal', code: 'PT' }, 18 | { name: 'India', code: 'IN' }, 19 | { name: 'Ireland', code: 'IE' }, 20 | { name: 'Austria', code: 'AT' }, 21 | { name: 'Peru', code: 'PE' }, 22 | { name: 'Sweden', code: 'SE' }, 23 | { name: 'Japan', code: 'JP' }, 24 | { name: 'S. Korea', code: 'KR' }, 25 | { name: 'Chile', code: 'CL' }, 26 | { name: 'Saudi Arabia', code: 'SA' }, 27 | { name: 'Poland', code: 'PL' }, 28 | { name: 'Ecuador', code: 'EC' }, 29 | { name: 'Romania', code: 'RO' }, 30 | { name: 'Pakistan', code: 'PK' }, 31 | { name: 'Mexico', code: 'MX' }, 32 | { name: 'Denmark', code: 'DK' }, 33 | { name: 'Norway', code: 'NO' }, 34 | { name: 'UAE', code: 'AE' }, 35 | { name: 'Czechia', code: 'CZ' }, 36 | { name: 'Australia', code: 'AU' }, 37 | { name: 'Singapore', code: 'SG' }, 38 | { name: 'Indonesia', code: 'ID' }, 39 | { name: 'Serbia', code: 'RS' }, 40 | { name: 'Philippines', code: 'PH' }, 41 | { name: 'Ukraine', code: 'UA' }, 42 | { name: 'Qatar', code: 'QA' }, 43 | { name: 'Malaysia', code: 'MY' }, 44 | { name: 'Belarus', code: 'BY' }, 45 | { name: 'Dominican Republic', code: 'DO' }, 46 | { name: 'Panama', code: 'PA' }, 47 | { name: 'Finland', code: 'FI' }, 48 | { name: 'Colombia', code: 'CO' }, 49 | { name: 'Luxembourg', code: 'LU' }, 50 | { name: 'South Africa', code: 'ZA' }, 51 | { name: 'Egypt', code: 'EG' }, 52 | { name: 'Argentina', code: 'AR' }, 53 | { name: 'Morocco', code: 'MA' }, 54 | { name: 'Thailand', code: 'TH' }, 55 | { name: 'Algeria', code: 'DZ' }, 56 | { name: 'Moldova', code: 'MD' }, 57 | { name: 'Bangladesh', code: 'BD' }, 58 | { name: 'Greece', code: 'GR' }, 59 | { name: 'Hungary', code: 'HU' }, 60 | { name: 'Kuwait', code: 'KW' }, 61 | { name: 'Bahrain', code: 'BH' }, 62 | { name: 'Croatia', code: 'HR' }, 63 | { name: 'Iceland', code: 'IS' }, 64 | { name: 'Kazakhstan', code: 'KZ' }, 65 | { name: 'Uzbekistan', code: 'UZ' }, 66 | { name: 'Estonia', code: 'EE' }, 67 | { name: 'Iraq', code: 'IQ' }, 68 | { name: 'New Zealand', code: 'NZ' }, 69 | { name: 'Azerbaijan', code: 'AZ' }, 70 | { name: 'Slovenia', code: 'SI' }, 71 | { name: 'Lithuania', code: 'LT' }, 72 | { name: 'Armenia', code: 'AM' }, 73 | { name: 'Bosnia and Herzegovina', code: 'BA' }, 74 | { name: 'Oman', code: 'OM' }, 75 | { name: 'North Macedonia', code: 'MK' }, 76 | { name: 'Slovakia', code: 'SK' }, 77 | { name: 'Cuba', code: 'CU' }, 78 | { name: 'Hong Kong', code: 'HK' }, 79 | { name: 'Cameroon', code: 'CM' }, 80 | { name: 'Afghanistan', code: 'AF' }, 81 | { name: 'Bulgaria', code: 'BG' }, 82 | { name: 'Tunisia', code: 'TN' }, 83 | { name: 'Ghana', code: 'GH' }, 84 | { name: 'Ivory Coast', code: 'CI' }, 85 | { name: 'Cyprus', code: 'CY' }, 86 | { name: 'Djibouti', code: 'DJ' }, 87 | { name: 'Latvia', code: 'LV' }, 88 | { name: 'Andorra', code: 'AD' }, 89 | { name: 'Lebanon', code: 'LB' }, 90 | { name: 'Costa Rica', code: 'CR' }, 91 | { name: 'Niger', code: 'NE' }, 92 | { name: 'Burkina Faso', code: 'BF' }, 93 | { name: 'Albania', code: 'AL' }, 94 | { name: 'Kyrgyzstan', code: 'KG' }, 95 | { name: 'Nigeria', code: 'NG' }, 96 | { name: 'Bolivia', code: 'BO' }, 97 | { name: 'Guinea', code: 'GN' }, 98 | { name: 'Uruguay', code: 'UY' }, 99 | { name: 'Honduras', code: 'HN' }, 100 | { name: 'San Marino', code: 'SM' }, 101 | { name: 'Palestine', code: 'PS' }, 102 | { name: 'Malta', code: 'MT' }, 103 | { name: 'Taiwan', code: 'TW' }, 104 | { name: 'Jordan', code: 'JO' }, 105 | { name: 'Réunion', code: 'RE' }, 106 | { name: 'Georgia', code: 'GE' }, 107 | { name: 'Senegal', code: 'SN' }, 108 | { name: 'Mauritius', code: 'MU' }, 109 | { name: 'DRC', code: 'CD' }, 110 | { name: 'Montenegro', code: 'ME' }, 111 | { name: 'Isle of Man', code: 'IM' }, 112 | { name: 'Sri Lanka', code: 'LK' }, 113 | { name: 'Mayotte', code: 'YT' }, 114 | { name: 'Kenya', code: 'KE' }, 115 | { name: 'Vietnam', code: 'VN' }, 116 | { name: 'Guatemala', code: 'GT' }, 117 | { name: 'Venezuela', code: 'VE' }, 118 | { name: 'Mali', code: 'ML' }, 119 | { name: 'Paraguay', code: 'PY' }, 120 | { name: 'El Salvador', code: 'SV' }, 121 | { name: 'Jamaica', code: 'JM' }, 122 | { name: 'Tanzania', code: 'TZ' }, 123 | { name: 'Martinique', code: 'MQ' }, 124 | { name: 'Guadeloupe', code: 'GP' }, 125 | { name: 'Rwanda', code: 'RW' }, 126 | { name: 'Congo', code: 'CG' }, 127 | { name: 'Brunei', code: 'BN' }, 128 | { name: 'Somalia', code: 'SO' }, 129 | { name: 'Gibraltar', code: 'GI' }, 130 | { name: 'Cambodia', code: 'KH' }, 131 | { name: 'Madagascar', code: 'MG' }, 132 | { name: 'Trinidad and Tobago', code: 'TT' }, 133 | { name: 'Gabon', code: 'GA' }, 134 | { name: 'Myanmar', code: 'MM' }, 135 | { name: 'Ethiopia', code: 'ET' }, 136 | { name: 'Aruba', code: 'AW' }, 137 | { name: 'French Guiana', code: 'GF' }, 138 | { name: 'Monaco', code: 'MC' }, 139 | { name: 'Bermuda', code: 'BM' }, 140 | { name: 'Togo', code: 'TG' }, 141 | { name: 'Liechtenstein', code: 'LI' }, 142 | { name: 'Equatorial Guinea', code: 'GQ' }, 143 | { name: 'Liberia', code: 'LR' }, 144 | { name: 'Barbados', code: 'BB' }, 145 | { name: 'Sudan', code: 'SD' }, 146 | { name: 'Guyana', code: 'GY' }, 147 | { name: 'Zambia', code: 'ZM' }, 148 | { name: 'Cabo Verde', code: 'CV' }, 149 | { name: 'Cayman Islands', code: 'KY' }, 150 | { name: 'Bahamas', code: 'BS' }, 151 | { name: 'French Polynesia', code: 'PF' }, 152 | { name: 'Uganda', code: 'UG' }, 153 | { name: 'Maldives', code: 'MV' }, 154 | { name: 'Libya', code: 'LY' }, 155 | { name: 'Guinea-Bissau', code: 'GW' }, 156 | { name: 'Macao', code: 'MO' }, 157 | { name: 'Haiti', code: 'HT' }, 158 | { name: 'Syria', code: 'SY' }, 159 | { name: 'Eritrea', code: 'ER' }, 160 | { name: 'Mozambique', code: 'MZ' }, 161 | { name: 'Saint Martin', code: 'MF' }, 162 | { name: 'Benin', code: 'BJ' }, 163 | { name: 'Chad', code: 'TD' }, 164 | { name: 'Mongolia', code: 'MN' }, 165 | { name: 'Nepal', code: 'NP' }, 166 | { name: 'Sierra Leone', code: 'SL' }, 167 | { name: 'Zimbabwe', code: 'ZW' }, 168 | { name: 'Angola', code: 'AO' }, 169 | { name: 'Antigua and Barbuda', code: 'AG' }, 170 | { name: 'Eswatini', code: 'SZ' }, 171 | { name: 'Botswana', code: 'BW' }, 172 | { name: 'Timor-Leste', code: 'TL' }, 173 | { name: 'Belize', code: 'BZ' }, 174 | { name: 'New Caledonia', code: 'NC' }, 175 | { name: 'Malawi', code: 'MW' }, 176 | { name: 'Fiji', code: 'FJ' }, 177 | { name: 'Dominica', code: 'DM' }, 178 | { name: 'Namibia', code: 'NA' }, 179 | { name: 'Saint Lucia', code: 'LC' }, 180 | { name: 'Grenada', code: 'GD' }, 181 | { name: 'Saint Kitts and Nevis', code: 'KN' }, 182 | { name: 'CAR', code: 'CF' }, 183 | { name: 'St. Vincent Grenadines', code: 'VC' }, 184 | { name: 'Turks and Caicos', code: 'TC' }, 185 | { name: 'Falkland Islands', code: 'FK' }, 186 | { name: 'Greenland', code: 'GL' }, 187 | { name: 'Montserrat', code: 'MS' }, 188 | { name: 'Seychelles', code: 'SC' }, 189 | { name: 'Suriname', code: 'SR' }, 190 | { name: 'Nicaragua', code: 'NI' }, 191 | { name: 'Gambia', code: 'GM' }, 192 | { name: 'Vatican City', code: 'VA' }, 193 | { name: 'Mauritania', code: 'MR' }, 194 | { name: 'Papua New Guinea', code: 'PG' }, 195 | { name: 'St. Barth', code: 'BL' }, 196 | { name: 'Burundi', code: 'BI' }, 197 | { name: 'Bhutan', code: 'BT' }, 198 | { name: 'Caribbean Netherlands', code: 'BQ' }, 199 | { name: 'British Virgin Islands', code: 'VG' }, 200 | { name: 'Sao Tome and Principe', code: 'ST' }, 201 | { name: 'South Sudan', code: 'SD' }, 202 | { name: 'Anguilla', code: 'AI' }, 203 | { name: 'Saint Pierre Miquelon', code: 'PM' }, 204 | { name: 'Yemen', code: 'YE' }, 205 | { name: 'China', code: 'CN' } 206 | ]; 207 | 208 | // SELECT SEARCH COUNTRY ELEMENTS 209 | const search_country_element = document.querySelector(".search-country"); 210 | const country_list_element = document.querySelector(".country-list"); 211 | const chang_country_btn = document.querySelector(".change-country"); 212 | const close_list_btn = document.querySelector(".close"); 213 | const input = document.getElementById('search-input') 214 | 215 | // CREATE TE COUNTRY LIST 216 | function createCountryList(){ 217 | const num_countries = country_list.length; 218 | 219 | let i = 0, ul_list_id; 220 | 221 | country_list.forEach( (country, index) => { 222 | if( index % Math.ceil(num_countries/num_of_ul_lists) == 0){ 223 | ul_list_id = `list-${i}`; 224 | country_list_element.innerHTML += ``; 225 | i++; 226 | } 227 | 228 | document.getElementById(`${ul_list_id}`).innerHTML += ` 229 |
  • 230 | ${country.name} 231 |
    • 232 | `; 233 | }) 234 | } 235 | 236 | let num_of_ul_lists = 3; 237 | createCountryList(); 238 | 239 | // SHOW/HIDE THE COUTRY LIST ON CLICK EVENT 240 | chang_country_btn.addEventListener("click", function(){ 241 | input.value = ""; 242 | resetCountryList(); 243 | search_country_element.classList.toggle("hide"); 244 | search_country_element.classList.add("fadeIn"); 245 | }); 246 | 247 | close_list_btn.addEventListener("click", function(){ 248 | search_country_element.classList.toggle("hide"); 249 | }); 250 | 251 | country_list_element.addEventListener("click", function(){ 252 | search_country_element.classList.toggle("hide"); 253 | }); 254 | 255 | // COUNTRY FILTER 256 | /* input event fires up whenever the value of the input changes */ 257 | input.addEventListener("input", function(){ 258 | let value = input.value.toUpperCase(); 259 | 260 | country_list.forEach( country => { 261 | if( country.name.toUpperCase().startsWith(value)){ 262 | document.getElementById(country.name).classList.remove("hide"); 263 | }else{ 264 | document.getElementById(country.name).classList.add("hide"); 265 | } 266 | }) 267 | }) 268 | 269 | // RESET COUNTRY LIST (SHOW ALL THE COUNTRIES ) 270 | function resetCountryList(){ 271 | country_list.forEach( country => { 272 | document.getElementById(country.name).classList.remove("hide"); 273 | }) 274 | } -------------------------------------------------------------------------------- /starter template/index.html: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /starter template/resources/css/Gilroy-Regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeExplainedRepo/COVID-19_TRACKER_HTML_CSS_JAVASCRIPT/d16cfb6ef15c04f57c22a3293d427172d4b56d63/starter template/resources/css/Gilroy-Regular.woff -------------------------------------------------------------------------------- /starter template/resources/css/style.css: -------------------------------------------------------------------------------- 1 | /* ---------------------------------------------- */ 2 | /* CODE EXPLAINED TUTORIALS */ 3 | /* www.youtube.com/CodeExplained */ 4 | /* ---------------------------------------------- */ 5 | 6 | /* ---------------------------------------------- */ 7 | /* LOAD FONTS */ 8 | /* ---------------------------------------------- */ 9 | 10 | /* ---------------------------------------------- */ 11 | /* GENERAL */ 12 | /* ---------------------------------------------- */ 13 | 14 | /* ---------------------------------------------- */ 15 | /* HEADER */ 16 | /* ---------------------------------------------- */ 17 | 18 | /* -------- LOGO -------- */ 19 | 20 | /* -------- NAV -------- */ 21 | 22 | /* ---------------------------------------------- */ 23 | /* MAIN */ 24 | /* ---------------------------------------------- */ 25 | 26 | /* -------- BG IMAGE -------- */ 27 | 28 | /* -------- LATEST REPORT -------- */ 29 | 30 | /* -------- CHART -------- */ 31 | 32 | /* -------- SEARCH COUNTRY -------- */ 33 | 34 | /* SCROLL BAR */ 35 | 36 | /* ---------------------------------------------- */ 37 | /* FOOTER */ 38 | /* ---------------------------------------------- */ 39 | 40 | /* ---------------------------------------------- */ 41 | /* SCREEN WIDTH < 600px */ 42 | /* ---------------------------------------------- */ -------------------------------------------------------------------------------- /starter template/resources/img/bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeExplainedRepo/COVID-19_TRACKER_HTML_CSS_JAVASCRIPT/d16cfb6ef15c04f57c22a3293d427172d4b56d63/starter template/resources/img/bg.jpg -------------------------------------------------------------------------------- /starter template/resources/img/close.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /starter template/resources/img/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeExplainedRepo/COVID-19_TRACKER_HTML_CSS_JAVASCRIPT/d16cfb6ef15c04f57c22a3293d427172d4b56d63/starter template/resources/img/logo.png -------------------------------------------------------------------------------- /starter template/resources/js/app.js: -------------------------------------------------------------------------------- 1 | /* ---------------------------------------------- */ 2 | /* CODE EXPLAINED TUTORIALS */ 3 | /* www.youtube.com/CodeExplained */ 4 | /* ---------------------------------------------- */ 5 | 6 | /* ---------------------------------------------- */ 7 | /* API URL AND KEY */ 8 | /* ---------------------------------------------- */ 9 | /* 10 | fetch(`https://covid19-monitor-pro.p.rapidapi.com/coronavirus/cases_by_days_by_country.php?country=country`, { 11 | "method": "GET", 12 | "headers": { 13 | "x-rapidapi-host": "covid19-monitor-pro.p.rapidapi.com", 14 | "x-rapidapi-key": "7e269ec140msh8a5df9cfc21b4b4p1c1e3ejsn9aba26afc6e0" 15 | } 16 | }) 17 | */ -------------------------------------------------------------------------------- /starter template/resources/js/countries.js: -------------------------------------------------------------------------------- 1 | // ALL COUNTRY NAMES WITH THEIR ISO CODE 2 | let country_list = [ 3 | { name: 'USA', code: 'US' }, 4 | { name: 'Spain', code: 'ES' }, 5 | { name: 'Italy', code: 'IT' }, 6 | { name: 'France', code: 'FR' }, 7 | { name: 'Germany', code: 'DE' }, 8 | { name: 'UK', code: 'GB' }, 9 | { name: 'Turkey', code: 'TR' }, 10 | { name: 'Iran', code: 'IR' }, 11 | { name: 'Russia', code: 'RU' }, 12 | { name: 'Belgium', code: 'BE' }, 13 | { name: 'Brazil', code: 'BR' }, 14 | { name: 'Canada', code: 'CA' }, 15 | { name: 'Netherlands', code: 'NL' }, 16 | { name: 'Switzerland', code: 'CH' }, 17 | { name: 'Portugal', code: 'PT' }, 18 | { name: 'India', code: 'IN' }, 19 | { name: 'Ireland', code: 'IE' }, 20 | { name: 'Austria', code: 'AT' }, 21 | { name: 'Peru', code: 'PE' }, 22 | { name: 'Sweden', code: 'SE' }, 23 | { name: 'Japan', code: 'JP' }, 24 | { name: 'S. Korea', code: 'KR' }, 25 | { name: 'Chile', code: 'CL' }, 26 | { name: 'Saudi Arabia', code: 'SA' }, 27 | { name: 'Poland', code: 'PL' }, 28 | { name: 'Ecuador', code: 'EC' }, 29 | { name: 'Romania', code: 'RO' }, 30 | { name: 'Pakistan', code: 'PK' }, 31 | { name: 'Mexico', code: 'MX' }, 32 | { name: 'Denmark', code: 'DK' }, 33 | { name: 'Norway', code: 'NO' }, 34 | { name: 'UAE', code: 'AE' }, 35 | { name: 'Czechia', code: 'CZ' }, 36 | { name: 'Australia', code: 'AU' }, 37 | { name: 'Singapore', code: 'SG' }, 38 | { name: 'Indonesia', code: 'ID' }, 39 | { name: 'Serbia', code: 'RS' }, 40 | { name: 'Philippines', code: 'PH' }, 41 | { name: 'Ukraine', code: 'UA' }, 42 | { name: 'Qatar', code: 'QA' }, 43 | { name: 'Malaysia', code: 'MY' }, 44 | { name: 'Belarus', code: 'BY' }, 45 | { name: 'Dominican Republic', code: 'DO' }, 46 | { name: 'Panama', code: 'PA' }, 47 | { name: 'Finland', code: 'FI' }, 48 | { name: 'Colombia', code: 'CO' }, 49 | { name: 'Luxembourg', code: 'LU' }, 50 | { name: 'South Africa', code: 'ZA' }, 51 | { name: 'Egypt', code: 'EG' }, 52 | { name: 'Argentina', code: 'AR' }, 53 | { name: 'Morocco', code: 'MA' }, 54 | { name: 'Thailand', code: 'TH' }, 55 | { name: 'Algeria', code: 'DZ' }, 56 | { name: 'Moldova', code: 'MD' }, 57 | { name: 'Bangladesh', code: 'BD' }, 58 | { name: 'Greece', code: 'GR' }, 59 | { name: 'Hungary', code: 'HU' }, 60 | { name: 'Kuwait', code: 'KW' }, 61 | { name: 'Bahrain', code: 'BH' }, 62 | { name: 'Croatia', code: 'HR' }, 63 | { name: 'Iceland', code: 'IS' }, 64 | { name: 'Kazakhstan', code: 'KZ' }, 65 | { name: 'Uzbekistan', code: 'UZ' }, 66 | { name: 'Estonia', code: 'EE' }, 67 | { name: 'Iraq', code: 'IQ' }, 68 | { name: 'New Zealand', code: 'NZ' }, 69 | { name: 'Azerbaijan', code: 'AZ' }, 70 | { name: 'Slovenia', code: 'SI' }, 71 | { name: 'Lithuania', code: 'LT' }, 72 | { name: 'Armenia', code: 'AM' }, 73 | { name: 'Bosnia and Herzegovina', code: 'BA' }, 74 | { name: 'Oman', code: 'OM' }, 75 | { name: 'North Macedonia', code: 'MK' }, 76 | { name: 'Slovakia', code: 'SK' }, 77 | { name: 'Cuba', code: 'CU' }, 78 | { name: 'Hong Kong', code: 'HK' }, 79 | { name: 'Cameroon', code: 'CM' }, 80 | { name: 'Afghanistan', code: 'AF' }, 81 | { name: 'Bulgaria', code: 'BG' }, 82 | { name: 'Tunisia', code: 'TN' }, 83 | { name: 'Ghana', code: 'GH' }, 84 | { name: 'Ivory Coast', code: 'CI' }, 85 | { name: 'Cyprus', code: 'CY' }, 86 | { name: 'Djibouti', code: 'DJ' }, 87 | { name: 'Latvia', code: 'LV' }, 88 | { name: 'Andorra', code: 'AD' }, 89 | { name: 'Lebanon', code: 'LB' }, 90 | { name: 'Costa Rica', code: 'CR' }, 91 | { name: 'Niger', code: 'NE' }, 92 | { name: 'Burkina Faso', code: 'BF' }, 93 | { name: 'Albania', code: 'AL' }, 94 | { name: 'Kyrgyzstan', code: 'KG' }, 95 | { name: 'Nigeria', code: 'NG' }, 96 | { name: 'Bolivia', code: 'BO' }, 97 | { name: 'Guinea', code: 'GN' }, 98 | { name: 'Uruguay', code: 'UY' }, 99 | { name: 'Honduras', code: 'HN' }, 100 | { name: 'San Marino', code: 'SM' }, 101 | { name: 'Palestine', code: 'PS' }, 102 | { name: 'Malta', code: 'MT' }, 103 | { name: 'Taiwan', code: 'TW' }, 104 | { name: 'Jordan', code: 'JO' }, 105 | { name: 'Réunion', code: 'RE' }, 106 | { name: 'Georgia', code: 'GE' }, 107 | { name: 'Senegal', code: 'SN' }, 108 | { name: 'Mauritius', code: 'MU' }, 109 | { name: 'DRC', code: 'CD' }, 110 | { name: 'Montenegro', code: 'ME' }, 111 | { name: 'Isle of Man', code: 'IM' }, 112 | { name: 'Sri Lanka', code: 'LK' }, 113 | { name: 'Mayotte', code: 'YT' }, 114 | { name: 'Kenya', code: 'KE' }, 115 | { name: 'Vietnam', code: 'VN' }, 116 | { name: 'Guatemala', code: 'GT' }, 117 | { name: 'Venezuela', code: 'VE' }, 118 | { name: 'Mali', code: 'ML' }, 119 | { name: 'Paraguay', code: 'PY' }, 120 | { name: 'El Salvador', code: 'SV' }, 121 | { name: 'Jamaica', code: 'JM' }, 122 | { name: 'Tanzania', code: 'TZ' }, 123 | { name: 'Martinique', code: 'MQ' }, 124 | { name: 'Guadeloupe', code: 'GP' }, 125 | { name: 'Rwanda', code: 'RW' }, 126 | { name: 'Congo', code: 'CG' }, 127 | { name: 'Brunei', code: 'BN' }, 128 | { name: 'Somalia', code: 'SO' }, 129 | { name: 'Gibraltar', code: 'GI' }, 130 | { name: 'Cambodia', code: 'KH' }, 131 | { name: 'Madagascar', code: 'MG' }, 132 | { name: 'Trinidad and Tobago', code: 'TT' }, 133 | { name: 'Gabon', code: 'GA' }, 134 | { name: 'Myanmar', code: 'MM' }, 135 | { name: 'Ethiopia', code: 'ET' }, 136 | { name: 'Aruba', code: 'AW' }, 137 | { name: 'French Guiana', code: 'GF' }, 138 | { name: 'Monaco', code: 'MC' }, 139 | { name: 'Bermuda', code: 'BM' }, 140 | { name: 'Togo', code: 'TG' }, 141 | { name: 'Liechtenstein', code: 'LI' }, 142 | { name: 'Equatorial Guinea', code: 'GQ' }, 143 | { name: 'Liberia', code: 'LR' }, 144 | { name: 'Barbados', code: 'BB' }, 145 | { name: 'Sudan', code: 'SD' }, 146 | { name: 'Guyana', code: 'GY' }, 147 | { name: 'Zambia', code: 'ZM' }, 148 | { name: 'Cabo Verde', code: 'CV' }, 149 | { name: 'Cayman Islands', code: 'KY' }, 150 | { name: 'Bahamas', code: 'BS' }, 151 | { name: 'French Polynesia', code: 'PF' }, 152 | { name: 'Uganda', code: 'UG' }, 153 | { name: 'Maldives', code: 'MV' }, 154 | { name: 'Libya', code: 'LY' }, 155 | { name: 'Guinea-Bissau', code: 'GW' }, 156 | { name: 'Macao', code: 'MO' }, 157 | { name: 'Haiti', code: 'HT' }, 158 | { name: 'Syria', code: 'SY' }, 159 | { name: 'Eritrea', code: 'ER' }, 160 | { name: 'Mozambique', code: 'MZ' }, 161 | { name: 'Saint Martin', code: 'MF' }, 162 | { name: 'Benin', code: 'BJ' }, 163 | { name: 'Chad', code: 'TD' }, 164 | { name: 'Mongolia', code: 'MN' }, 165 | { name: 'Nepal', code: 'NP' }, 166 | { name: 'Sierra Leone', code: 'SL' }, 167 | { name: 'Zimbabwe', code: 'ZW' }, 168 | { name: 'Angola', code: 'AO' }, 169 | { name: 'Antigua and Barbuda', code: 'AG' }, 170 | { name: 'Eswatini', code: 'SZ' }, 171 | { name: 'Botswana', code: 'BW' }, 172 | { name: 'Timor-Leste', code: 'TL' }, 173 | { name: 'Belize', code: 'BZ' }, 174 | { name: 'New Caledonia', code: 'NC' }, 175 | { name: 'Malawi', code: 'MW' }, 176 | { name: 'Fiji', code: 'FJ' }, 177 | { name: 'Dominica', code: 'DM' }, 178 | { name: 'Namibia', code: 'NA' }, 179 | { name: 'Saint Lucia', code: 'LC' }, 180 | { name: 'Grenada', code: 'GD' }, 181 | { name: 'Saint Kitts and Nevis', code: 'KN' }, 182 | { name: 'CAR', code: 'CF' }, 183 | { name: 'St. Vincent Grenadines', code: 'VC' }, 184 | { name: 'Turks and Caicos', code: 'TC' }, 185 | { name: 'Falkland Islands', code: 'FK' }, 186 | { name: 'Greenland', code: 'GL' }, 187 | { name: 'Montserrat', code: 'MS' }, 188 | { name: 'Seychelles', code: 'SC' }, 189 | { name: 'Suriname', code: 'SR' }, 190 | { name: 'Nicaragua', code: 'NI' }, 191 | { name: 'Gambia', code: 'GM' }, 192 | { name: 'Vatican City', code: 'VA' }, 193 | { name: 'Mauritania', code: 'MR' }, 194 | { name: 'Papua New Guinea', code: 'PG' }, 195 | { name: 'St. Barth', code: 'BL' }, 196 | { name: 'Burundi', code: 'BI' }, 197 | { name: 'Bhutan', code: 'BT' }, 198 | { name: 'Caribbean Netherlands', code: 'BQ' }, 199 | { name: 'British Virgin Islands', code: 'VG' }, 200 | { name: 'Sao Tome and Principe', code: 'ST' }, 201 | { name: 'South Sudan', code: 'SD' }, 202 | { name: 'Anguilla', code: 'AI' }, 203 | { name: 'Saint Pierre Miquelon', code: 'PM' }, 204 | { name: 'Yemen', code: 'YE' }, 205 | { name: 'China', code: 'CN' } 206 | ]; --------------------------------------------------------------------------------