Build a Coronavirus COVID-19 Global Tracker With Google Adsense Ads Online Tool Using HTML5 CSS3 and Javascript Full Project For Beginners

 

FREE DEMO

 

Coronavirus COVID-19 Global Tracker

 

 

 

index.html

 

 

 

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>brijesh</title>
    <meta content="width=device-width, initial-scale=1" name="viewport" />
    <meta content="Webflow" name="generator" />
    <style>/* Generated on: Thu Apr 02 2020 14:35:17 GMT+0000 (Coordinated Universal Time) */
        /* ==========================================================================
           normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css 
           ========================================================================== */
        /*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */html{scroll-behavior: smooth; font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:none}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:bold}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}
        
        /* ==========================================================================
           Start of base Webflow CSS - If you're looking for some ultra-clean CSS, skip the boilerplate and see the unminified code below.
           ========================================================================== */
        @font-face{font-family:'webflow-icons';src:url("data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMg8SBiUAAAC8AAAAYGNtYXDpP+a4AAABHAAAAFxnYXNwAAAAEAAAAXgAAAAIZ2x5ZmhS2XEAAAGAAAADHGhlYWQTFw3HAAAEnAAAADZoaGVhCXYFgQAABNQAAAAkaG10eCe4A1oAAAT4AAAAMGxvY2EDtALGAAAFKAAAABptYXhwABAAPgAABUQAAAAgbmFtZSoCsMsAAAVkAAABznBvc3QAAwAAAAAHNAAAACAAAwP4AZAABQAAApkCzAAAAI8CmQLMAAAB6wAzAQkAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADpAwPA/8AAQAPAAEAAAAABAAAAAAAAAAAAAAAgAAAAAAADAAAAAwAAABwAAQADAAAAHAADAAEAAAAcAAQAQAAAAAwACAACAAQAAQAg5gPpA//9//8AAAAAACDmAOkA//3//wAB/+MaBBcIAAMAAQAAAAAAAAAAAAAAAAABAAH//wAPAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAEBIAAAAyADgAAFAAAJAQcJARcDIP5AQAGA/oBAAcABwED+gP6AQAABAOAAAALgA4AABQAAEwEXCQEH4AHAQP6AAYBAAcABwED+gP6AQAAAAwDAAOADQALAAA8AHwAvAAABISIGHQEUFjMhMjY9ATQmByEiBh0BFBYzITI2PQE0JgchIgYdARQWMyEyNj0BNCYDIP3ADRMTDQJADRMTDf3ADRMTDQJADRMTDf3ADRMTDQJADRMTAsATDSANExMNIA0TwBMNIA0TEw0gDRPAEw0gDRMTDSANEwAAAAABAJ0AtAOBApUABQAACQIHCQEDJP7r/upcAXEBcgKU/usBFVz+fAGEAAAAAAL//f+9BAMDwwAEAAkAABcBJwEXAwE3AQdpA5ps/GZsbAOabPxmbEMDmmz8ZmwDmvxmbAOabAAAAgAA/8AEAAPAAB0AOwAABSInLgEnJjU0Nz4BNzYzMTIXHgEXFhUUBw4BBwYjNTI3PgE3NjU0Jy4BJyYjMSIHDgEHBhUUFx4BFxYzAgBqXV6LKCgoKIteXWpqXV6LKCgoKIteXWpVSktvICEhIG9LSlVVSktvICEhIG9LSlVAKCiLXl1qal1eiygoKCiLXl1qal1eiygoZiEgb0tKVVVKS28gISEgb0tKVVVKS28gIQABAAABwAIAA8AAEgAAEzQ3PgE3NjMxFSIHDgEHBhUxIwAoKIteXWpVSktvICFmAcBqXV6LKChmISBvS0pVAAAAAgAA/8AFtgPAADIAOgAAARYXHgEXFhUUBw4BBwYHIxUhIicuAScmNTQ3PgE3NjMxOAExNDc+ATc2MzIXHgEXFhcVATMJATMVMzUEjD83NlAXFxYXTjU1PQL8kz01Nk8XFxcXTzY1PSIjd1BQWlJJSXInJw3+mdv+2/7c25MCUQYcHFg5OUA/ODlXHBwIAhcXTzY1PTw1Nk8XF1tQUHcjIhwcYUNDTgL+3QFt/pOTkwABAAAAAQAAmM7nP18PPPUACwQAAAAAANciZKUAAAAA1yJkpf/9/70FtgPDAAAACAACAAAAAAAAAAEAAAPA/8AAAAW3//3//QW2AAEAAAAAAAAAAAAAAAAAAAAMBAAAAAAAAAAAAAAAAgAAAAQAASAEAADgBAAAwAQAAJ0EAP/9BAAAAAQAAAAFtwAAAAAAAAAKABQAHgAyAEYAjACiAL4BFgE2AY4AAAABAAAADAA8AAMAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAADgCuAAEAAAAAAAEADQAAAAEAAAAAAAIABwCWAAEAAAAAAAMADQBIAAEAAAAAAAQADQCrAAEAAAAAAAUACwAnAAEAAAAAAAYADQBvAAEAAAAAAAoAGgDSAAMAAQQJAAEAGgANAAMAAQQJAAIADgCdAAMAAQQJAAMAGgBVAAMAAQQJAAQAGgC4AAMAAQQJAAUAFgAyAAMAAQQJAAYAGgB8AAMAAQQJAAoANADsd2ViZmxvdy1pY29ucwB3AGUAYgBmAGwAbwB3AC0AaQBjAG8AbgBzVmVyc2lvbiAxLjAAVgBlAHIAcwBpAG8AbgAgADEALgAwd2ViZmxvdy1pY29ucwB3AGUAYgBmAGwAbwB3AC0AaQBjAG8AbgBzd2ViZmxvdy1pY29ucwB3AGUAYgBmAGwAbwB3AC0AaQBjAG8AbgBzUmVndWxhcgBSAGUAZwB1AGwAYQByd2ViZmxvdy1pY29ucwB3AGUAYgBmAGwAbwB3AC0AaQBjAG8AbgBzRm9udCBnZW5lcmF0ZWQgYnkgSWNvTW9vbi4ARgBvAG4AdAAgAGcAZQBuAGUAcgBhAHQAZQBkACAAYgB5ACAASQBjAG8ATQBvAG8AbgAuAAAAAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==") format('truetype');font-weight:normal;font-style:normal}[class^="w-icon-"],[class*=" w-icon-"]{font-family:'webflow-icons' !important;speak:none;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.w-icon-slider-right:before{content:"\e600"}.w-icon-slider-left:before{content:"\e601"}.w-icon-nav-menu:before{content:"\e602"}.w-icon-arrow-down:before,.w-icon-dropdown-toggle:before{content:"\e603"}.w-icon-file-upload-remove:before{content:"\e900"}.w-icon-file-upload-icon:before{content:"\e903"}*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}html{height:100%}body{margin:0;min-height:100%;background-color:#fff;font-family:Arial,sans-serif;font-size:14px;line-height:20px;color:#333}img{max-width:100%;vertical-align:middle;display:inline-block}html.w-mod-touch *{background-attachment:scroll !important}.w-block{display:block}.w-inline-block{max-width:100%;display:inline-block}.w-clearfix:before,.w-clearfix:after{content:" ";display:table;grid-column-start:1;grid-row-start:1;grid-column-end:2;grid-row-end:2}.w-clearfix:after{clear:both}.w-hidden{display:none}.w-button{display:inline-block;padding:9px 15px;background-color:#3898EC;color:white;border:0;line-height:inherit;text-decoration:none;cursor:pointer;border-radius:0}input.w-button{-webkit-appearance:button}html[data-w-dynpage] [data-w-cloak]{color:transparent !important}.w-webflow-badge,.w-webflow-badge *{position:static;left:auto;top:auto;right:auto;bottom:auto;z-index:auto;display:block;visibility:visible;overflow:visible;overflow-x:visible;overflow-y:visible;box-sizing:border-box;width:auto;height:auto;max-height:none;max-width:none;min-height:0;min-width:0;margin:0;padding:0;float:none;clear:none;border:0 none transparent;border-radius:0;background:none;background-image:none;background-position:0 0;background-size:auto auto;background-repeat:repeat;background-origin:padding-box;background-clip:border-box;background-attachment:scroll;background-color:transparent;box-shadow:none;opacity:1;transform:none;transition:none;direction:ltr;font-family:inherit;font-weight:inherit;color:inherit;font-size:inherit;line-height:inherit;font-style:inherit;font-variant:inherit;text-align:inherit;letter-spacing:inherit;text-decoration:inherit;text-indent:0;text-transform:inherit;list-style-type:disc;text-shadow:none;font-smoothing:auto;vertical-align:baseline;cursor:inherit;white-space:inherit;word-break:normal;word-spacing:normal;word-wrap:normal}.w-webflow-badge{position:fixed !important;display:inline-block !important;visibility:visible !important;z-index:2147483647 !important;top:auto !important;right:12px !important;bottom:12px !important;left:auto !important;color:#AAADB0 !important;background-color:#fff !important;border-radius:3px !important;padding:6px 8px 6px 6px !important;font-size:12px !important;opacity:1 !important;line-height:14px !important;text-decoration:none !important;transform:none !important;margin:0 !important;width:auto !important;height:auto !important;overflow:visible !important;white-space:nowrap;box-shadow:0 0 0 1px rgba(0,0,0,0.1),0 1px 3px rgba(0,0,0,0.1);cursor:pointer}.w-webflow-badge>img{display:inline-block !important;visibility:visible !important;opacity:1 !important;vertical-align:middle !important}h1,h2,h3,h4,h5,h6{font-weight:bold;margin-bottom:10px}h1{font-size:38px;line-height:44px;margin-top:20px}h2{font-size:32px;line-height:36px;margin-top:20px}h3{font-size:24px;line-height:30px;margin-top:20px}h4{font-size:18px;line-height:24px;margin-top:10px}h5{font-size:14px;line-height:20px;margin-top:10px}h6{font-size:12px;line-height:18px;margin-top:10px}p{margin-top:0;margin-bottom:10px}blockquote{margin:0 0 10px 0;padding:10px 20px;border-left:5px solid #E2E2E2;font-size:18px;line-height:22px}figure{margin:0;margin-bottom:10px}figcaption{margin-top:5px;text-align:center}ul,ol{margin-top:0;margin-bottom:10px;padding-left:40px}.w-list-unstyled{padding-left:0;list-style:none}.w-embed:before,.w-embed:after{content:" ";display:table;grid-column-start:1;grid-row-start:1;grid-column-end:2;grid-row-end:2}.w-embed:after{clear:both}.w-video{width:100%;position:relative;padding:0}.w-video iframe,.w-video object,.w-video embed{position:absolute;top:0;left:0;width:100%;height:100%}fieldset{padding:0;margin:0;border:0}button,html input[type="button"],input[type="reset"]{border:0;cursor:pointer;-webkit-appearance:button}.w-form{margin:0 0 15px}.w-form-done{display:none;padding:20px;text-align:center;background-color:#dddddd}.w-form-fail{display:none;margin-top:10px;padding:10px;background-color:#ffdede}label{display:block;margin-bottom:5px;font-weight:bold}.w-input,.w-select{display:block;width:100%;height:38px;padding:8px 12px;margin-bottom:10px;font-size:14px;line-height:1.42857143;color:#333333;vertical-align:middle;background-color:#ffffff;border:1px solid #cccccc}.w-input:-moz-placeholder,.w-select:-moz-placeholder{color:#999}.w-input::-moz-placeholder,.w-select::-moz-placeholder{color:#999;opacity:1}.w-input:-ms-input-placeholder,.w-select:-ms-input-placeholder{color:#999}.w-input::-webkit-input-placeholder,.w-select::-webkit-input-placeholder{color:#999}.w-input:focus,.w-select:focus{border-color:#3898EC;outline:0}.w-input[disabled],.w-select[disabled],.w-input[readonly],.w-select[readonly],fieldset[disabled] .w-input,fieldset[disabled] .w-select{cursor:not-allowed;background-color:#eeeeee}textarea.w-input,textarea.w-select{height:auto}.w-select{background-color:#f3f3f3}.w-select[multiple]{height:auto}.w-form-label{display:inline-block;cursor:pointer;font-weight:normal;margin-bottom:0}.w-radio{display:block;margin-bottom:5px;padding-left:20px}.w-radio:before,.w-radio:after{content:" ";display:table;grid-column-start:1;grid-row-start:1;grid-column-end:2;grid-row-end:2}.w-radio:after{clear:both}.w-radio-input{margin:4px 0 0;margin-top:1px \9;line-height:normal;float:left;margin-left:-20px}.w-radio-input{margin-top:3px}.w-file-upload{display:block;margin-bottom:10px}.w-file-upload-input{width:.1px;height:.1px;opacity:0;overflow:hidden;position:absolute;z-index:-100}.w-file-upload-default,.w-file-upload-uploading,.w-file-upload-success{display:inline-block;color:#333333}.w-file-upload-error{display:block;margin-top:10px}.w-file-upload-default.w-hidden,.w-file-upload-uploading.w-hidden,.w-file-upload-error.w-hidden,.w-file-upload-success.w-hidden{display:none}.w-file-upload-uploading-btn{display:flex;font-size:14px;font-weight:normal;cursor:pointer;margin:0;padding:8px 12px;border:1px solid #cccccc;background-color:#fafafa}.w-file-upload-file{display:flex;flex-grow:1;justify-content:space-between;margin:0;padding:8px 9px 8px 11px;border:1px solid #cccccc;background-color:#fafafa}.w-file-upload-file-name{font-size:14px;font-weight:normal;display:block}.w-file-remove-link{margin-top:3px;margin-left:10px;width:auto;height:auto;padding:3px;display:block;cursor:pointer}.w-icon-file-upload-remove{margin:auto;font-size:10px}.w-file-upload-error-msg{display:inline-block;color:#ea384c;padding:2px 0}.w-file-upload-info{display:inline-block;line-height:38px;padding:0 12px}.w-file-upload-label{display:inline-block;font-size:14px;font-weight:normal;cursor:pointer;margin:0;padding:8px 12px;border:1px solid #cccccc;background-color:#fafafa}.w-icon-file-upload-icon,.w-icon-file-upload-uploading{display:inline-block;margin-right:8px;width:20px}.w-icon-file-upload-uploading{height:20px}.w-container{margin-left:auto;margin-right:auto;max-width:940px}.w-container:before,.w-container:after{content:" ";display:table;grid-column-start:1;grid-row-start:1;grid-column-end:2;grid-row-end:2}.w-container:after{clear:both}.w-container .w-row{margin-left:-10px;margin-right:-10px}.w-row:before,.w-row:after{content:" ";display:table;grid-column-start:1;grid-row-start:1;grid-column-end:2;grid-row-end:2}.w-row:after{clear:both}.w-row .w-row{margin-left:0;margin-right:0}.w-col{position:relative;float:left;width:100%;min-height:1px;padding-left:10px;padding-right:10px}.w-col .w-col{padding-left:0;padding-right:0}.w-col-1{width:8.33333333%}.w-col-2{width:16.66666667%}.w-col-3{width:25%}.w-col-4{width:33.33333333%}.w-col-5{width:41.66666667%}.w-col-6{width:50%}.w-col-7{width:58.33333333%}.w-col-8{width:66.66666667%}.w-col-9{width:75%}.w-col-10{width:83.33333333%}.w-col-11{width:91.66666667%}.w-col-12{width:100%}.w-hidden-main{display:none !important}@media screen and (max-width:991px){.w-container{max-width:728px}.w-hidden-main{display:inherit !important}.w-hidden-medium{display:none !important}.w-col-medium-1{width:8.33333333%}.w-col-medium-2{width:16.66666667%}.w-col-medium-3{width:25%}.w-col-medium-4{width:33.33333333%}.w-col-medium-5{width:41.66666667%}.w-col-medium-6{width:50%}.w-col-medium-7{width:58.33333333%}.w-col-medium-8{width:66.66666667%}.w-col-medium-9{width:75%}.w-col-medium-10{width:83.33333333%}.w-col-medium-11{width:91.66666667%}.w-col-medium-12{width:100%}.w-col-stack{width:100%;left:auto;right:auto}}@media screen and (max-width:767px){.w-hidden-main{display:inherit !important}.w-hidden-medium{display:inherit !important}.w-hidden-small{display:none !important}.w-row,.w-container .w-row{margin-left:0;margin-right:0}.w-col{width:100%;left:auto;right:auto}.w-col-small-1{width:8.33333333%}.w-col-small-2{width:16.66666667%}.w-col-small-3{width:25%}.w-col-small-4{width:33.33333333%}.w-col-small-5{width:41.66666667%}.w-col-small-6{width:50%}.w-col-small-7{width:58.33333333%}.w-col-small-8{width:66.66666667%}.w-col-small-9{width:75%}.w-col-small-10{width:83.33333333%}.w-col-small-11{width:91.66666667%}.w-col-small-12{width:100%}}@media screen and (max-width:479px){.w-container{max-width:none}.w-hidden-main{display:inherit !important}.w-hidden-medium{display:inherit !important}.w-hidden-small{display:inherit !important}.w-hidden-tiny{display:none !important}.w-col{width:100%}.w-col-tiny-1{width:8.33333333%}.w-col-tiny-2{width:16.66666667%}.w-col-tiny-3{width:25%}.w-col-tiny-4{width:33.33333333%}.w-col-tiny-5{width:41.66666667%}.w-col-tiny-6{width:50%}.w-col-tiny-7{width:58.33333333%}.w-col-tiny-8{width:66.66666667%}.w-col-tiny-9{width:75%}.w-col-tiny-10{width:83.33333333%}.w-col-tiny-11{width:91.66666667%}.w-col-tiny-12{width:100%}}.w-widget{position:relative}.w-widget-map{width:100%;height:400px}.w-widget-map label{width:auto;display:inline}.w-widget-map img{max-width:inherit}.w-widget-map .gm-style-iw{text-align:center}.w-widget-map .gm-style-iw>button{display:none !important}.w-widget-twitter{overflow:hidden}.w-widget-twitter-count-shim{display:inline-block;vertical-align:top;position:relative;width:28px;height:20px;text-align:center;background:white;border:#758696 solid 1px;border-radius:3px}.w-widget-twitter-count-shim *{pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.w-widget-twitter-count-shim .w-widget-twitter-count-inner{position:relative;font-size:15px;line-height:12px;text-align:center;color:#999;font-family:serif}.w-widget-twitter-count-shim .w-widget-twitter-count-clear{position:relative;display:block}.w-widget-twitter-count-shim.w--large{width:36px;height:28px}.w-widget-twitter-count-shim.w--large .w-widget-twitter-count-inner{font-size:18px;line-height:18px}.w-widget-twitter-count-shim:not(.w--vertical){margin-left:5px;margin-right:8px}.w-widget-twitter-count-shim:not(.w--vertical).w--large{margin-left:6px}.w-widget-twitter-count-shim:not(.w--vertical):before,.w-widget-twitter-count-shim:not(.w--vertical):after{top:50%;left:0;border:solid transparent;content:" ";height:0;width:0;position:absolute;pointer-events:none}.w-widget-twitter-count-shim:not(.w--vertical):before{border-color:rgba(117,134,150,0);border-right-color:#5d6c7b;border-width:4px;margin-left:-9px;margin-top:-4px}.w-widget-twitter-count-shim:not(.w--vertical).w--large:before{border-width:5px;margin-left:-10px;margin-top:-5px}.w-widget-twitter-count-shim:not(.w--vertical):after{border-color:rgba(255,255,255,0);border-right-color:white;border-width:4px;margin-left:-8px;margin-top:-4px}.w-widget-twitter-count-shim:not(.w--vertical).w--large:after{border-width:5px;margin-left:-9px;margin-top:-5px}.w-widget-twitter-count-shim.w--vertical{width:61px;height:33px;margin-bottom:8px}.w-widget-twitter-count-shim.w--vertical:before,.w-widget-twitter-count-shim.w--vertical:after{top:100%;left:50%;border:solid transparent;content:" ";height:0;width:0;position:absolute;pointer-events:none}.w-widget-twitter-count-shim.w--vertical:before{border-color:rgba(117,134,150,0);border-top-color:#5d6c7b;border-width:5px;margin-left:-5px}.w-widget-twitter-count-shim.w--vertical:after{border-color:rgba(255,255,255,0);border-top-color:white;border-width:4px;margin-left:-4px}.w-widget-twitter-count-shim.w--vertical .w-widget-twitter-count-inner{font-size:18px;line-height:22px}.w-widget-twitter-count-shim.w--vertical.w--large{width:76px}.w-widget-gplus{overflow:hidden}.w-background-video{position:relative;overflow:hidden;height:500px;color:white}.w-background-video>video{background-size:cover;background-position:50% 50%;position:absolute;margin:auto;width:100%;height:100%;right:-100%;bottom:-100%;top:-100%;left:-100%;object-fit:cover;z-index:-100}.w-background-video>video::-webkit-media-controls-start-playback-button{display:none !important;-webkit-appearance:none}.w-slider{position:relative;height:300px;text-align:center;background:#dddddd;clear:both;-webkit-tap-highlight-color:rgba(0,0,0,0);tap-highlight-color:rgba(0,0,0,0)}.w-slider-mask{position:relative;display:block;overflow:hidden;z-index:1;left:0;right:0;height:100%;white-space:nowrap}.w-slide{position:relative;display:inline-block;vertical-align:top;width:100%;height:100%;white-space:normal;text-align:left}.w-slider-nav{position:absolute;z-index:2;top:auto;right:0;bottom:0;left:0;margin:auto;padding-top:10px;height:40px;text-align:center;-webkit-tap-highlight-color:rgba(0,0,0,0);tap-highlight-color:rgba(0,0,0,0)}.w-slider-nav.w-round>div{border-radius:100%}.w-slider-nav.w-num>div{width:auto;height:auto;padding:.2em .5em;font-size:inherit;line-height:inherit}.w-slider-nav.w-shadow>div{box-shadow:0 0 3px rgba(51,51,51,0.4)}.w-slider-nav-invert{color:#fff}.w-slider-nav-invert>div{background-color:rgba(34,34,34,0.4)}.w-slider-nav-invert>div.w-active{background-color:#222}.w-slider-dot{position:relative;display:inline-block;width:1em;height:1em;background-color:rgba(255,255,255,0.4);cursor:pointer;margin:0 3px .5em;transition:background-color 100ms,color 100ms}.w-slider-dot.w-active{background-color:#fff}.w-slider-arrow-left,.w-slider-arrow-right{position:absolute;width:80px;top:0;right:0;bottom:0;left:0;margin:auto;cursor:pointer;overflow:hidden;color:white;font-size:40px;-webkit-tap-highlight-color:rgba(0,0,0,0);tap-highlight-color:rgba(0,0,0,0);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.w-slider-arrow-left [class^="w-icon-"],.w-slider-arrow-right [class^="w-icon-"],.w-slider-arrow-left [class*=" w-icon-"],.w-slider-arrow-right [class*=" w-icon-"]{position:absolute}.w-slider-arrow-left{z-index:3;right:auto}.w-slider-arrow-right{z-index:4;left:auto}.w-icon-slider-left,.w-icon-slider-right{top:0;right:0;bottom:0;left:0;margin:auto;width:1em;height:1em}.w-dropdown{display:inline-block;position:relative;text-align:left;margin-left:auto;margin-right:auto;z-index:900}.w-dropdown-btn,.w-dropdown-toggle,.w-dropdown-link{position:relative;vertical-align:top;text-decoration:none;color:#222222;padding:20px;text-align:left;margin-left:auto;margin-right:auto;white-space:nowrap}.w-dropdown-toggle{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:inline-block;cursor:pointer;padding-right:40px}.w-icon-dropdown-toggle{position:absolute;top:0;right:0;bottom:0;margin:auto;margin-right:20px;width:1em;height:1em}.w-dropdown-list{position:absolute;background:#dddddd;display:none;min-width:100%}.w-dropdown-list.w--open{display:block}.w-dropdown-link{padding:10px 20px;display:block;color:#222222}.w-dropdown-link.w--current{color:#0082f3}@media screen and (max-width:767px){.w-nav-brand{padding-left:10px}}.w-lightbox-backdrop{color:#000;cursor:auto;font-family:serif;font-size:medium;font-style:normal;font-variant:normal;font-weight:normal;letter-spacing:normal;line-height:normal;list-style:disc;text-align:start;text-indent:0;text-shadow:none;text-transform:none;visibility:visible;white-space:normal;word-break:normal;word-spacing:normal;word-wrap:normal;position:fixed;top:0;right:0;bottom:0;left:0;color:#fff;font-family:"Helvetica Neue",Helvetica,Ubuntu,"Segoe UI",Verdana,sans-serif;font-size:17px;line-height:1.2;font-weight:300;text-align:center;background:rgba(0,0,0,0.9);z-index:2000;outline:0;opacity:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-webkit-tap-highlight-color:transparent;-webkit-transform:translate(0, 0)}.w-lightbox-backdrop,.w-lightbox-container{height:100%;overflow:auto;-webkit-overflow-scrolling:touch}.w-lightbox-content{position:relative;height:100vh;overflow:hidden}.w-lightbox-view{position:absolute;width:100vw;height:100vh;opacity:0}.w-lightbox-view:before{content:"";height:100vh}.w-lightbox-group,.w-lightbox-group .w-lightbox-view,.w-lightbox-group .w-lightbox-view:before{height:86vh}.w-lightbox-frame,.w-lightbox-view:before{display:inline-block;vertical-align:middle}.w-lightbox-figure{position:relative;margin:0}.w-lightbox-group .w-lightbox-figure{cursor:pointer}.w-lightbox-img{width:auto;height:auto;max-width:none}.w-lightbox-image{display:block;float:none;max-width:100vw;max-height:100vh}.w-lightbox-group .w-lightbox-image{max-height:86vh}.w-lightbox-caption{position:absolute;right:0;bottom:0;left:0;padding:.5em 1em;background:rgba(0,0,0,0.4);text-align:left;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.w-lightbox-embed{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%}.w-lightbox-control{position:absolute;top:0;width:4em;background-size:24px;background-repeat:no-repeat;background-position:center;cursor:pointer;-webkit-transition:all .3s;transition:all .3s}.w-lightbox-left{display:none;bottom:0;left:0;background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii0yMCAwIDI0IDQwIiB3aWR0aD0iMjQiIGhlaWdodD0iNDAiPjxnIHRyYW5zZm9ybT0icm90YXRlKDQ1KSI+PHBhdGggZD0ibTAgMGg1djIzaDIzdjVoLTI4eiIgb3BhY2l0eT0iLjQiLz48cGF0aCBkPSJtMSAxaDN2MjNoMjN2M2gtMjZ6IiBmaWxsPSIjZmZmIi8+PC9nPjwvc3ZnPg==")}.w-lightbox-right{display:none;right:0;bottom:0;background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii00IDAgMjQgNDAiIHdpZHRoPSIyNCIgaGVpZ2h0PSI0MCI+PGcgdHJhbnNmb3JtPSJyb3RhdGUoNDUpIj48cGF0aCBkPSJtMC0waDI4djI4aC01di0yM2gtMjN6IiBvcGFjaXR5PSIuNCIvPjxwYXRoIGQ9Im0xIDFoMjZ2MjZoLTN2LTIzaC0yM3oiIGZpbGw9IiNmZmYiLz48L2c+PC9zdmc+")}.w-lightbox-close{right:0;height:2.6em;background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii00IDAgMTggMTciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxNyI+PGcgdHJhbnNmb3JtPSJyb3RhdGUoNDUpIj48cGF0aCBkPSJtMCAwaDd2LTdoNXY3aDd2NWgtN3Y3aC01di03aC03eiIgb3BhY2l0eT0iLjQiLz48cGF0aCBkPSJtMSAxaDd2LTdoM3Y3aDd2M2gtN3Y3aC0zdi03aC03eiIgZmlsbD0iI2ZmZiIvPjwvZz48L3N2Zz4=");background-size:18px}.w-lightbox-strip{position:absolute;bottom:0;left:0;right:0;padding:0 1vh;line-height:0;white-space:nowrap;overflow-x:auto;overflow-y:hidden}.w-lightbox-item{display:inline-block;width:10vh;padding:2vh 1vh;box-sizing:content-box;cursor:pointer;-webkit-transform:translate3d(0, 0, 0)}.w-lightbox-active{opacity:.3}.w-lightbox-thumbnail{position:relative;height:10vh;background:#222;overflow:hidden}.w-lightbox-thumbnail-image{position:absolute;top:0;left:0}.w-lightbox-thumbnail .w-lightbox-tall{top:50%;width:100%;-webkit-transform:translate(0, -50%);-ms-transform:translate(0, -50%);transform:translate(0, -50%)}.w-lightbox-thumbnail .w-lightbox-wide{left:50%;height:100%;-webkit-transform:translate(-50%, 0);-ms-transform:translate(-50%, 0);transform:translate(-50%, 0)}.w-lightbox-spinner{position:absolute;top:50%;left:50%;box-sizing:border-box;width:40px;height:40px;margin-top:-20px;margin-left:-20px;border:5px solid rgba(0,0,0,0.4);border-radius:50%;-webkit-animation:spin .8s infinite linear;animation:spin .8s infinite linear}.w-lightbox-spinner:after{content:"";position:absolute;top:-4px;right:-4px;bottom:-4px;left:-4px;border:3px solid transparent;border-bottom-color:#fff;border-radius:50%}.w-lightbox-hide{display:none}.w-lightbox-noscroll{overflow:hidden}@media (min-width:768px){.w-lightbox-content{height:96vh;margin-top:2vh}.w-lightbox-view,.w-lightbox-view:before{height:96vh}.w-lightbox-group,.w-lightbox-group .w-lightbox-view,.w-lightbox-group .w-lightbox-view:before{height:84vh}.w-lightbox-image{max-width:96vw;max-height:96vh}.w-lightbox-group .w-lightbox-image{max-width:82.3vw;max-height:84vh}.w-lightbox-left,.w-lightbox-right{display:block;opacity:.5}.w-lightbox-close{opacity:.8}.w-lightbox-control:hover{opacity:1}}.w-lightbox-inactive,.w-lightbox-inactive:hover{opacity:0}.w-richtext:before,.w-richtext:after{content:" ";display:table;grid-column-start:1;grid-row-start:1;grid-column-end:2;grid-row-end:2}.w-richtext:after{clear:both}.w-richtext[contenteditable="true"]:before,.w-richtext[contenteditable="true"]:after{white-space:initial}.w-richtext ol,.w-richtext ul{overflow:hidden}.w-richtext .w-richtext-figure-selected.w-richtext-figure-type-video div:after,.w-richtext .w-richtext-figure-selected[data-rt-type="video"] div:after{outline:2px solid #2895f7}.w-richtext .w-richtext-figure-selected.w-richtext-figure-type-image div,.w-richtext .w-richtext-figure-selected[data-rt-type="image"] div{outline:2px solid #2895f7}.w-richtext figure.w-richtext-figure-type-video>div:after,.w-richtext figure[data-rt-type="video"]>div:after{content:'';position:absolute;display:none;left:0;top:0;right:0;bottom:0}.w-richtext figure{position:relative;max-width:60%}.w-richtext figure>div:before{cursor:default !important}.w-richtext figure img{width:100%}.w-richtext figure figcaption.w-richtext-figcaption-placeholder{opacity:.6}.w-richtext figure div{font-size:0;color:transparent}.w-richtext figure.w-richtext-figure-type-image,.w-richtext figure[data-rt-type="image"]{display:table}.w-richtext figure.w-richtext-figure-type-image>div,.w-richtext figure[data-rt-type="image"]>div{display:inline-block}.w-richtext figure.w-richtext-figure-type-image>figcaption,.w-richtext figure[data-rt-type="image"]>figcaption{display:table-caption;caption-side:bottom}.w-richtext figure.w-richtext-figure-type-video,.w-richtext figure[data-rt-type="video"]{width:60%;height:0}.w-richtext figure.w-richtext-figure-type-video iframe,.w-richtext figure[data-rt-type="video"] iframe{position:absolute;top:0;left:0;width:100%;height:100%}.w-richtext figure.w-richtext-figure-type-video>div,.w-richtext figure[data-rt-type="video"]>div{width:100%}.w-richtext figure.w-richtext-align-center{margin-right:auto;margin-left:auto;clear:both}.w-richtext figure.w-richtext-align-center.w-richtext-figure-type-image>div,.w-richtext figure.w-richtext-align-center[data-rt-type="image"]>div{max-width:100%}.w-richtext figure.w-richtext-align-normal{clear:both}.w-richtext figure.w-richtext-align-fullwidth{width:100%;max-width:100%;text-align:center;clear:both;display:block;margin-right:auto;margin-left:auto}.w-richtext figure.w-richtext-align-fullwidth>div{display:inline-block;padding-bottom:inherit}.w-richtext figure.w-richtext-align-fullwidth>figcaption{display:block}.w-richtext figure.w-richtext-align-floatleft{float:left;margin-right:15px;clear:none}.w-richtext figure.w-richtext-align-floatright{float:right;margin-left:15px;clear:none}.w-nav{position:relative;background:#dddddd;z-index:1000}.w-nav:before,.w-nav:after{content:" ";display:table;grid-column-start:1;grid-row-start:1;grid-column-end:2;grid-row-end:2}.w-nav:after{clear:both}.w-nav-brand{position:relative;float:left;text-decoration:none;color:#333333}.w-nav-link{position:relative;display:inline-block;vertical-align:top;text-decoration:none;color:#222222;padding:20px;text-align:left;margin-left:auto;margin-right:auto}.w-nav-link.w--current{color:#0082f3}.w-nav-menu{position:relative;float:right}[data-nav-menu-open]{display:block !important;position:absolute;top:100%;left:0;right:0;background:#C8C8C8;text-align:center;overflow:visible;min-width:200px}.w--nav-link-open{display:block;position:relative}.w-nav-overlay{position:absolute;overflow:hidden;display:none;top:100%;left:0;right:0;width:100%}.w-nav-overlay [data-nav-menu-open]{top:0}.w-nav[data-animation="over-left"] .w-nav-overlay{width:auto}.w-nav[data-animation="over-left"] .w-nav-overlay,.w-nav[data-animation="over-left"] [data-nav-menu-open]{right:auto;z-index:1;top:0}.w-nav[data-animation="over-right"] .w-nav-overlay{width:auto}.w-nav[data-animation="over-right"] .w-nav-overlay,.w-nav[data-animation="over-right"] [data-nav-menu-open]{left:auto;z-index:1;top:0}.w-nav-button{position:relative;float:right;padding:18px;font-size:24px;display:none;cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0);tap-highlight-color:rgba(0,0,0,0);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.w-nav-button.w--open{background-color:#C8C8C8;color:white}.w-nav[data-collapse="all"] .w-nav-menu{display:none}.w-nav[data-collapse="all"] .w-nav-button{display:block}.w--nav-dropdown-open{display:block}.w--nav-dropdown-toggle-open{display:block}.w--nav-dropdown-list-open{position:static}@media screen and (max-width:991px){.w-nav[data-collapse="medium"] .w-nav-menu{display:none}.w-nav[data-collapse="medium"] .w-nav-button{display:block}}@media screen and (max-width:767px){.w-nav[data-collapse="small"] .w-nav-menu{display:none}.w-nav[data-collapse="small"] .w-nav-button{display:block}.w-nav-brand{padding-left:10px}}@media screen and (max-width:479px){.w-nav[data-collapse="tiny"] .w-nav-menu{display:none}.w-nav[data-collapse="tiny"] .w-nav-button{display:block}}.w-tabs{position:relative}.w-tabs:before,.w-tabs:after{content:" ";display:table;grid-column-start:1;grid-row-start:1;grid-column-end:2;grid-row-end:2}.w-tabs:after{clear:both}.w-tab-menu{position:relative}.w-tab-link{position:relative;display:inline-block;vertical-align:top;text-decoration:none;padding:9px 30px;text-align:left;cursor:pointer;color:#222222;background-color:#dddddd}.w-tab-link.w--current{background-color:#C8C8C8}.w-tab-content{position:relative;display:block;overflow:hidden}.w-tab-pane{position:relative;display:none}.w--tab-active{display:block}@media screen and (max-width:479px){.w-tab-link{display:block}}.w-ix-emptyfix:after{content:""}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.w-dyn-empty{padding:10px;background-color:#dddddd}.w-dyn-hide{display:none !important}.w-dyn-bind-empty{display:none !important}.w-condition-invisible{display:none !important}
        
        /* ==========================================================================
           Start of custom Webflow CSS
           ========================================================================== */
        .nav {
          margin-top: 20px;
          padding: 10px;
          border-radius: 5px;
          background-color: #349697;
          opacity: 0.86;
          -webkit-transform-origin: 50% 50%;
          -ms-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
          color: #fff;
          font-size: 2.5vh;
        }
        
        .navbar {
          position: static;
          top: 0px;
          background-color: #1d2f57;
        }
        
        .body {
          background-color: #000;
        }
        
        .container {
          max-width: 95%;
          min-width: 88%;
        }
        
        .image {
          margin-bottom: 0px;
          -o-object-fit: fill;
          object-fit: fill;
        }
        
        .section {
          margin-top: 0px;
        }
        
        .heading {
          color: #fff;
        }
        
        .columns {
          margin-top: 20px;
          margin-bottom: 40px;
          margin-left: 50px;
        }
        
        .column {
          margin-top: 80px;
        }
        
        .image-2 {
          border: 1px none #000;
          border-radius: 20px;
          cursor: default;
        }
        
        .paragraph {
          margin-top: 40px;
          margin-right: 15px;
          color: #c5c5c5;
          font-size: 16px;
        }
        
        .button {
          margin-top: 20px;
          background-color: #88f67b;
          opacity: 1;
          color: #000;
        }
        
        .column-2 {
          padding-right: 40px;
        }
        
        .navbar-2 {
          position: relative;
          bottom: 0px;
          margin-right: 40px;
          margin-left: 40px;
          background-color: #1d2f57;
        }
        
        .image-3 {
          display: block;
        }
        
        .section-2 {
          display: -webkit-box;
          display: -webkit-flex;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-pack: center;
          -webkit-justify-content: center;
          -ms-flex-pack: center;
          justify-content: center;
          -webkit-box-align: center;
          -webkit-align-items: center;
          -ms-flex-align: center;
          align-items: center;
        }
        
        .button-2 {
          margin-top: 40px;
          background-color: #1d2f57;
          font-size: 24px;
        }
        
        .sticky-nav {
          position: -webkit-sticky;
          position: sticky;
          top: 0px;
          z-index: 1;
          padding: 0px 40px;
          background-color: #f4f4f4;
          opacity: 1;
        }
        
        .nav-grid {
          display: -ms-grid;
          display: grid;
          width: 100%;
          margin: 0px;
          padding: 0px;
          -webkit-box-pack: start;
          -webkit-justify-content: flex-start;
          -ms-flex-pack: start;
          justify-content: flex-start;
          -webkit-box-align: center;
          -webkit-align-items: center;
          -ms-flex-align: center;
          align-items: center;
          grid-auto-flow: column;
          grid-auto-columns: -webkit-max-content;
          grid-auto-columns: max-content;
          grid-column-gap: 20px;
          grid-row-gap: 20px;
          -ms-grid-columns: 1fr -webkit-max-content -webkit-max-content -webkit-max-content;
          -ms-grid-columns: 1fr max-content max-content max-content;
          grid-template-columns: 1fr -webkit-max-content -webkit-max-content -webkit-max-content;
          grid-template-columns: 1fr max-content max-content max-content;
          -ms-grid-rows: auto;
          grid-template-rows: auto;
          opacity: 1;
        }
        
        .nav-logo-link {
          display: block;
          height: 60px;
          margin-right: 0px;
          margin-left: 0px;
          padding: 0px;
        }
        
        .nav-logo {
          width: auto;
          height: 100%;
          -o-object-fit: contain;
          object-fit: contain;
          -o-object-position: 0% 50%;
          object-position: 0% 50%;
        }
        
        .nav-link {
          display: block;
          margin-right: 0px;
          margin-left: 0px;
          padding: 10px 0px;
          color: #444;
          text-decoration: none;
        }
        
        .nav-link:hover {
          text-decoration: underline;
        }
        
        .nav-link-2 {
          margin-top: 10px;
          opacity: 0.86;
          color: #fff;
          font-size: 2.5vh;
        }
        
        @media screen and (max-width: 991px) {
          .nav {
            margin-top: 10px;
          }
          .menu-button {
            display: block;
            margin-top: 24px;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
            -webkit-flex-direction: column;
            -ms-flex-direction: column;
            flex-direction: column;
            -webkit-box-pack: center;
            -webkit-justify-content: center;
            -ms-flex-pack: center;
            justify-content: center;
            -webkit-box-align: center;
            -webkit-align-items: center;
            -ms-flex-align: center;
            align-items: center;
          }
          .heading {
            font-size: 28px;
          }
          .columns {
            margin-left: 20px;
          }
          .column {
            margin-top: 30px;
          }
          .image-2 {
            margin-top: 80px;
          }
          .paragraph {
            margin-top: 10px;
            font-size: 14px;
          }
          .button {
            margin-top: 10px;
          }
          .navbar-2 {
            margin-right: 30px;
            margin-left: 30px;
          }
          .menu-button-2 {
            margin-top: 10px;
            color: #c4c4c4;
          }
          .nav-link-2 {
            margin-top: 0px;
          }
        }
        
        @media screen and (max-width: 767px) {
          .heading {
            font-size: 24px;
          }
          .column {
            margin-top: 10px;
          }
          .image-2 {
            margin-top: 40px;
            margin-left: 15px;
          }
          .paragraph {
            font-size: 12px;
          }
          .button {
            font-size: 12px;
          }
          .navbar-2 {
            margin-right: 20px;
            margin-left: 20px;
          }
          .sticky-nav {
            position: relative;
          }
          .nav-grid {
            text-align: center;
          }
        }
        
        @media screen and (max-width: 479px) {
          .nav {
            margin-top: 18px;
            padding: 10px;
            border-radius: 6px;
            background-color: #349697;
          }
          .image-2 {
            margin-top: 40px;
            margin-left: 8px;
          }
          .navbar-2 {
            margin-right: 10px;
            margin-left: 10px;
          }
          .menu-button-2 {
            margin-top: 10px;
          }
          .sticky-nav {
            padding: 0px;
          }
          .nav-grid {
            grid-auto-flow: row;
            grid-column-gap: 0px;
            grid-row-gap: 0px;
            -ms-grid-columns: 1fr;
            grid-template-columns: 1fr;
            -ms-grid-rows: 100px;
            grid-template-rows: 100px;
          }
          .nav-logo-link {
            border-top: 1px solid #c4c4c4;
          }
          .nav-link {
            padding-top: 10px;
            padding-bottom: 10px;
            border-top: 1px solid #c4c4c4;
          }
          .nav-link-2 {
            margin-top: 18px;
            padding-top: 10px;
            padding-bottom: 10px;
            color: #fff;
            font-size: 2.5vh;
          }
        }</style>


<!-- FOR ROOT -->
<link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
      integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
      crossorigin="anonymous"
    >
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.css"
      crossorigin="anonymous"
    >
    <style>.covid-data-table-wrapper {
        overflow-y: auto;
        height: 350px;
      }
      
      .covid-data-table-wrapper > table > thead th {
        position: sticky;
        top: 0;
        box-shadow: 0 0 0 1px #343a40;
      }
      
      .covid-data-table-wrapper > table > thead th[sortable] {
        cursor: pointer;
        white-space: nowrap;
      }
      
      .M1 {
        margin-top: 60px;
        margin-left: 30px;;
        margin-bottom: 15px;
      }
      
      .M2 {
        margin-left: 30px;
      }
      
      .M3 {
        margin-left: 30px;
      }
      
      .whh {
        color: #c5c5be;
      }
      
      .ccolor {
        color: #c5c5be;
      }
      
      </style>
<!-- END FOR ROOT -->

        
</head>

<body class="body">
   
    <div class="columns w-row">
       
    </div>
    <div style="margin-top: 120px;" id="stats" class="w-container">
        <div class="w-row">
            <div style="padding-left: 30px;" class="country w-col w-col-4">
                <h1 style="color: aliceblue;" class="heading">Corona Update</h3>
                    <p style="padding-right: 75px;" class="paragraph">Serving data from John Hopkins University CSSE as
                    a JSON API</p>
                    <p style="padding-right: 75px;" class="paragraph">Shows global data by default.<br>Select a country
                    to know that particular country's stats</p>
            </div>
            <div class="result w-col w-col-8">
                <div id="root"></div>
            </div>
        </div>
    </div>
    <div></div>


    <!-- SCRIPTS FOR ROOT -->
 
 <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
 <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
 <script
   src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"
   crossorigin="anonymous"
 ></script>
 <script
   src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
   integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
   crossorigin="anonymous"
 ></script>
 <script
   src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
   integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
   crossorigin="anonymous"
 ></script>
 <script src="https://unpkg.com/papaparse@5.1.1/papaparse.min.js" crossorigin></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js" crossorigin></script>
 <script>function useWindowSize() {
    const [width, setWidth] = React.useState(document.documentElement.clientWidth);
    const [height, setHeight] = React.useState(document.documentElement.clientHeight);
    React.useEffect(() => {
      const setSize = () => {
        setWidth(document.documentElement.clientWidth);
        setHeight(document.documentElement.clientHeight);
      };
      window.addEventListener('resize', setSize);
      window.addEventListener('orientationchange', setSize);
      return () => {
        window.removeEventListener('resize', setSize);
        window.removeEventListener('orientationchange', setSize);
      }
    }, []);
    return [width, height];
  }
  
  // @see: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions
  function escapeRegExp(string) {
    return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); // $& means the whole matched string
  }</script>
 <script>const covidSchema = {
    headerRow: 0,
    stateColumn: 0,
    countryColumn: 1,
    latColumn: 2,
    lonColumn: 3,
    dateStartColumn: 4,
  };
  
  const covidDataBaseURL = 'https://raw.githubusercontent.com/CSSEGISandData/COVID-19/master/csse_covid_19_data/csse_covid_19_time_series';
  
  const confirmedPalette = ['#FF9F40', '#703600', '#D66700', '#FF800A', '#A34E00'];
  const recoveredPalette = ['#4BC0C0', '#1D5353', '#379E9E', '#4BC0C0', '#2A7878'];
  const deathsPalette = ['#FF6384', '#93001D', '#F90031', '#FF2D57', '#C60027'];
  
  const covidDataTypes = {
    confirmed: {
      key: 'confirmed',
      title: 'Confirmed',
      dataSourceUrl: `${covidDataBaseURL}/time_series_covid19_confirmed_global.csv`,
      borderColor: confirmedPalette,
      alertClass: 'alert-dark',
      badgeClass: 'badge-warning',
    },
    recovered: {
      key: 'recovered',
      title: 'Recovered',
      dataSourceUrl: `${covidDataBaseURL}/time_series_covid19_recovered_global.csv`,
      borderColor: recoveredPalette,
      alertClass: 'alert-dark',
      badgeClass: 'badge-success',
    },
    deaths: {
      key: 'deaths',
      title: 'Deaths',
      dataSourceUrl: `${covidDataBaseURL}/time_series_covid19_deaths_global.csv`,
      borderColor: deathsPalette,
      alertClass: 'alert-dark',
      badgeClass: 'badge-danger',
    },
  };
  
  const covidCountries = {
    all: {
      key: 'Global',
      title: 'Global',
      index: -1,
    }
  };
  
  const covidSorts = {
    country: {
      key: 'country',
    },
    confirmed: {
      key: 'confirmed',
      dataKey: covidDataTypes.confirmed.key,
    },
    recovered: {
      key: 'recovered',
      dataKey: covidDataTypes.recovered.key,
    },
    deaths: {
      key: 'deaths',
      dataKey: covidDataTypes.deaths.key,
    },
    mortality: {
      key: 'mortality',
    },
  };
  
  const covidSortDirections = {
    asc: {
      key: 'asc',
    },
    desc: {
      key: 'desc',
    },
  };
  
  const covidFilters = {
    selectedTypes: {
      key: 'selectedTypes',
      defaultValue: Object.keys(covidDataTypes),
    },
    groupByCountry: {
      key: 'groupByCountry',
      defaultValue: true,
    },
    selectedRegions: {
      key: 'selectedRegions',
      defaultValue: [covidCountries.all.key]
    },
    useLogScale: {
      key: 'useLogScale',
      defaultValue: false,
    },
    countrySearchQuery: {
      key: 'countrySearchQuery',
      defaultValue: '',
    },
    dataSort: {
      key: 'dataSort',
      defaultValue: covidSorts.confirmed.key,
    },
    dataSortDirection: {
      key: 'dataSortDirection',
      defaultValue: covidSortDirections.desc.key,
    },
  };
  
  function loadCovidData() {
    const defaultDataContainer = {
      labels: [],
      ticks: {},
    };
    return Promise
      .all(Object.values(covidDataTypes).map(
        dataType => fetch(dataType.dataSourceUrl)
      ))
      .then(responses => Promise.all(
        responses.map(response => response.text())
      ))
      .then(dataTypesTicks => {
        return dataTypesTicks.reduce(
          (dataContainer, dataTypeTicksCSV, dataTypeIndex) => {
            const dataType = Object.keys(covidDataTypes)[dataTypeIndex];
            const dataTypeTicks = Papa.parse(dataTypeTicksCSV).data;
            dataContainer.labels = dataTypeTicks.shift();
            dataContainer.ticks[dataType] = dataTypeTicks
              .filter(regionTicks => {
                return regionTicks.length === dataContainer.labels.length;
              })
              .map(regionTicks => {
                return regionTicks.map((regionTick, tickIndex) => {
                  if (tickIndex < covidSchema.dateStartColumn) {
                    return regionTick;
                  }
                  if (!regionTick) {
                    return 0;
                  }
                  return parseInt(regionTick, 10);
                });
              })
              .sort((regionTicksA, regionTicksB) => {
                const regionNameA = getRegionKey(regionTicksA);
                const regionNameB = getRegionKey(regionTicksB);
                if (regionNameA > regionNameB) {
                  return 1;
                } else if (regionNameA < regionNameB) {
                  return -1;
                }
                return 0;
              });
            return dataContainer;
          },
          defaultDataContainer
        );
      });
  }
  
  function getRegionKey(regionTicks) {
    if (!regionTicks || !regionTicks.length) {
      return null;
    }
    const country = regionTicks[covidSchema.countryColumn];
    const state = regionTicks[covidSchema.stateColumn];
    return state ? `${country} - ${state}` : `${country}`;
  }
  
  function getRegionIndexByKey(covidData, dataTypeKey, regionKey) {
    return covidData.ticks[dataTypeKey].findIndex(
      regionTicks => getRegionKey(regionTicks) === regionKey
    );
  }
  
  function getRegionByKey(covidData, dataTypeKey, regionKey) {
    const regionIndex = getRegionIndexByKey(covidData, dataTypeKey, regionKey);
    return covidData.ticks[dataTypeKey][regionIndex];
  }
  
  function getGlobalTicks(covidData, dataTypeKey) {
    const totalTicks = covidData.ticks[dataTypeKey][0].length;
    const globalTicks = new Array(totalTicks).fill(0);
    globalTicks[covidSchema.stateColumn] = '';
    globalTicks[covidSchema.countryColumn] = covidCountries.all.title;
    globalTicks[covidSchema.latColumn] = '';
    globalTicks[covidSchema.lonColumn] = '';
    covidData.ticks[dataTypeKey].forEach(regionTicks => {
      regionTicks.forEach((regionTick, tickIndex) => {
        if (tickIndex < covidSchema.dateStartColumn) {
          return;
        }
        globalTicks[tickIndex] += regionTick;
      });
    });
    return globalTicks;
  }
  
  function getTotalCount(covidData, dataTypeKey, regionKeys) {
    if (regionKeys.includes(covidCountries.all.key)) {
      const globalTicks = getGlobalTicks(covidData, dataTypeKey);
      return globalTicks[globalTicks.length - 1];
    }
    return regionKeys.reduce((total, regionKey) => {
      const regionTicks = getRegionByKey(covidData, dataTypeKey, regionKey);
      if (!regionTicks) {
        return total;
      }
      total += regionTicks[regionTicks.length - 1];
      return total;
    }, 0);
  }
  
  function searchRegionTicks(covidData, dataTypeKey, regionKey) {
    if (!regionKey) {
      return null;
    }
    const regionsTicks = covidData.ticks[dataTypeKey];
    return regionsTicks.find((regionTicks) => getRegionKey(regionTicks) === regionKey);
  }
  
  function getCovidRegions(covidData) {
    return covidData.ticks[covidDataTypes.confirmed.key]
      .map((regionTicks, regionIndex) => {
        const key = getRegionKey(regionTicks);
        const numbers = {};
        Object.values(covidDataTypes).forEach((covidDataType) => {
          const regionTicksOfType = covidData.ticks[covidDataType.key][regionIndex];
          const regionKeyOfType = getRegionKey(regionTicksOfType);
          if (regionTicksOfType && regionTicksOfType.length === regionTicks.length && regionKeyOfType && regionKeyOfType === key) {
            numbers[covidDataType.key] = regionTicksOfType[regionTicksOfType.length - 1];
          } else {
            const foundRegionTicks = searchRegionTicks(covidData, covidDataType.key, key);
            if (foundRegionTicks && foundRegionTicks.length === regionTicks.length) {
              numbers[covidDataType.key] = foundRegionTicks[foundRegionTicks.length - 1];
            } else {
              numbers[covidDataType.key] = -1;
            }
          }
        });
        return {key, numbers};
      });
  }
  
  function getLastUpdatedDate(covidData) {
    const dateLabel = covidData.labels[covidData.labels.length - 1];
    return formatDateLabel(dateLabel);
  }
  
  function formatDateLabel(dateLabel) {
    const date = new Date(dateLabel);
    const options = {month: 'short', day: '2-digit'};
    return date.toLocaleDateString('en-US', options);
  }
  
  function groupCovidDataByCountries(covidData) {
    const covidDataByCountries = {
      labels: [],
      ticks: {},
    };
    covidDataByCountries.labels = [...covidData.labels];
    Object.values(covidDataTypes).forEach((covidDataType) => {
      covidDataByCountries.ticks[covidDataType.key] = Object.values(covidData.ticks[covidDataType.key]
        .reduce((countriesTicksMap, regionTicks) => {
          const countryName = regionTicks[covidSchema.countryColumn];
          if (!countriesTicksMap[countryName]) {
            countriesTicksMap[countryName] = [...regionTicks];
            countriesTicksMap[countryName][covidSchema.stateColumn] = '';
            return countriesTicksMap;
          }
          for (let columnIndex = covidSchema.dateStartColumn; columnIndex < regionTicks.length; columnIndex += 1) {
            countriesTicksMap[countryName][columnIndex] += regionTicks[columnIndex];
          }
          return countriesTicksMap;
        }, {}));
    });
    return covidDataByCountries;
  }
  
  function filterToUrl(filterKey, filterValue) {
    try {
      const url = new URL(document.location);
      url.searchParams.set(filterKey, JSON.stringify(filterValue));
      history.pushState(null, null, url.href);
    } catch (e) {
      console.error('Cannot send filters to URL');
    }
  }
  
  function filtersFromUrl() {
    const filtersInUrl = {};
    try {
      const url = new URL(document.location);
      Object.values(covidFilters).forEach((covidFilter) => {
        if (url.searchParams.has(covidFilter.key)) {
          filtersInUrl[covidFilter.key] = JSON.parse(
            url.searchParams.get(covidFilter.key)
          );
        }
      });
    } catch (e) {
      console.error('Cannot fetch filters from URL');
    }
    return filtersInUrl;
  }
  
  function deleteFiltersFromUrl() {
    try {
      const url = new URL(document.location);
      Object.values(covidFilters).forEach((covidFilter) => {
        url.searchParams.delete(covidFilter.key);
      });
      history.pushState(null, null, url.href);
    } catch (e) {
      console.error('Cannot delete filters from URL');
    }
  }
  
  function calculateMortality(confirmedNumber, deathsNumber) {
    if (confirmedNumber === 0) {
      return 0;
    }
    const mortality = deathsNumber / confirmedNumber;
    if (mortality < 0) {
      return 0;
    }
    return Math.floor(1000 * mortality) / 10;
  }
  </script>
 <script>// Globals.
    const r = React;
    const rd = ReactDOM;
    const e = r.createElement;
    
    document.addEventListener('DOMContentLoaded', () => {
      rd.render(e(App), document.getElementById('root'));
    });
    
    function App() {
      const defaultGroupByCountry = covidFilters.groupByCountry.defaultValue;
      const defaultSelectedTypes = covidFilters.selectedTypes.defaultValue;
      const defaultSelectedRegions = covidFilters.selectedRegions.defaultValue;
      const defaultUseLogScale = covidFilters.useLogScale.defaultValue;
      const defaultCountrySearchQuery = covidFilters.countrySearchQuery.defaultValue;
      const defaultDataSort = covidFilters.dataSort.defaultValue;
      const defaultDataSortDirection = covidFilters.dataSortDirection.defaultValue;
    
      const [covidData, setCovidData] = r.useState(null);
      const [covidDataByCountries, setCovidDataByCountries] = r.useState(null);
      const [errorMessage, setErrorMessage] = r.useState(null);
    
      const [groupByCountry, setGroupByCountry] = r.useState(defaultGroupByCountry);
      const [selectedTypes, setSelectedTypes] = r.useState(defaultSelectedTypes);
      const [selectedRegions, setSelectedRegions] = r.useState(defaultSelectedRegions);
      const [useLogScale, setUseLogScale] = r.useState(defaultUseLogScale);
      const [countrySearchQuery, setCountrySearchQuery] = r.useState(defaultCountrySearchQuery);
    
      const [dataSort, setDataSort] = r.useState(defaultDataSort);
      const [dataSortDirection, setDataSortDirection] = r.useState(defaultDataSortDirection);
    
      const onFiltersReset = () => {
        setGroupByCountry(defaultGroupByCountry);
        setSelectedTypes(defaultSelectedTypes);
        setSelectedRegions(defaultSelectedRegions);
        setUseLogScale(defaultUseLogScale);
        setCountrySearchQuery(defaultCountrySearchQuery);
        setDataSort(defaultDataSort);
        setDataSortDirection(defaultDataSortDirection);
        deleteFiltersFromUrl();
      };
    
      const onRegionChange = (changedRegionKey) => {
        let newRegions;
        if (selectedRegions.includes(changedRegionKey)) {
          newRegions = [...selectedRegions.filter(regionKey => regionKey !== changedRegionKey)];
          if (!newRegions.length) {
            newRegions = [covidCountries.all.key];
          }
        } else {
          newRegions = [...selectedRegions.filter(regionKey => regionKey !== covidCountries.all.key), changedRegionKey];
        }
        setSelectedRegions(newRegions);
        filterToUrl(covidFilters.selectedRegions.key, newRegions);
      };
    
      const onUseLogScale = (useLog) => {
        setUseLogScale(useLog);
        filterToUrl(covidFilters.useLogScale.key, useLog);
      };
    
      const onDataSort = (dataSortKey, dataSortDirectionKey) => {
        setDataSort(dataSortKey);
        setDataSortDirection(dataSortDirectionKey);
        filterToUrl(covidFilters.dataSort.key, dataSortKey);
        filterToUrl(covidFilters.dataSortDirection.key, dataSortDirectionKey);
      };
    
      const onTypeChange = (dataTypeKey) => {
        let newSelectedTypes;
        if (selectedTypes.includes(dataTypeKey)) {
          newSelectedTypes = [...selectedTypes.filter(dataType => dataType !== dataTypeKey)];
        } else {
          newSelectedTypes = [...selectedTypes, dataTypeKey];
        }
        setSelectedTypes(newSelectedTypes);
        filterToUrl(covidFilters.selectedTypes.key, newSelectedTypes);
      };
    
      const onCountrySearch = (query) => {
        const q = query || '';
        setCountrySearchQuery(q);
      };
    
      const onGroupByCountries = () => {
        const newGroupByCountry = !groupByCountry;
        setSelectedRegions(defaultSelectedRegions);
        setGroupByCountry(newGroupByCountry);
        filterToUrl(covidFilters.groupByCountry.key, newGroupByCountry);
        filterToUrl(covidFilters.selectedRegions.key, defaultSelectedRegions);
      };
    
      r.useEffect(() => {
        loadCovidData()
          .then((data) => {
            setCovidData(data);
            setCovidDataByCountries(groupCovidDataByCountries(data));
          })
          .catch(() => setErrorMessage('Cannot fetch the statistics data. It might be a network issue. Try to refresh the page.'));
      }, []);
    
      r.useEffect(() => {
        const populatedFilters = filtersFromUrl();
    
        if (populatedFilters.hasOwnProperty(covidFilters.groupByCountry.key)) {
          setGroupByCountry(populatedFilters[covidFilters.groupByCountry.key]);
        }
    
        if (populatedFilters.hasOwnProperty(covidFilters.useLogScale.key)) {
          setUseLogScale(populatedFilters[covidFilters.useLogScale.key]);
        }
    
        if (populatedFilters.hasOwnProperty(covidFilters.selectedTypes.key)) {
          setSelectedTypes(populatedFilters[covidFilters.selectedTypes.key]);
        }
    
        if (populatedFilters.hasOwnProperty(covidFilters.selectedRegions.key)) {
          setSelectedRegions(populatedFilters[covidFilters.selectedRegions.key]);
        }
    
        if (populatedFilters.hasOwnProperty(covidFilters.dataSort.key)) {
          setDataSort(populatedFilters[covidFilters.dataSort.key]);
        }
    
        if (populatedFilters.hasOwnProperty(covidFilters.dataSortDirection.key)) {
          setDataSortDirection(populatedFilters[covidFilters.dataSortDirection.key]);
        }
      }, []);
    
      if (errorMessage) {
        return e(ErrorMessage, {errorMessage});
      }
      if (!covidData || !covidDataByCountries) {
        return e(Spinner);
      }
    
      const covidDataInUse = groupByCountry ? covidDataByCountries : covidData;
    
      return (
        e('div', null,
          e('div', {className: 'M1'},
            e(LastUpdatedDate, {covidData})
          ),
          e('div', {className: 'M2'},
            e(DataTypes, {covidData: covidDataInUse, selectedRegions, selectedTypes, onTypeChange})
          ),
          e('div', {className: 'mb-4'},
            e(CovidChart, {covidData: covidDataInUse, regions: selectedRegions, selectedTypes, useLogScale})
          ),
          e('div', {className: 'M3'},
            e(TableFilters, {
              onFiltersReset,
              groupByCountry,
              onGroupByCountries,
              countrySearchQuery,
              onCountrySearch,
              useLogScale,
              onUseLogScale,
            })
          ),
          e('div', {className: 'mb-4'},
            e(RegionsTable, {
              groupByCountry,
              covidData: covidDataInUse,
              selectedRegions,
              onRegionChange,
              countrySearchQuery,
              dataSort,
              dataSortDirection,
              onDataSort,
            })
          ),
        )
      );
    }
    
    function LastUpdatedDate({covidData}) {
      const lastUpdatedDate = getLastUpdatedDate(covidData);
      return e('small', {className: 'text-muted'},
        'Last updated: ',
        e('span', {className: 'badge badge-light'}, lastUpdatedDate)
      );
    }
    
    function DataTypes({covidData, selectedRegions, selectedTypes, onTypeChange}) {
      const dataTypes = Object.values(covidDataTypes).map(dataType => {
        const checked = !!selectedTypes.includes(dataType.key);
        return e(DataType, {key: dataType.key, covidData, selectedRegions, dataType, checked, onTypeChange})
      });
      return e('form', {className: 'form-inline'}, dataTypes);
    }
    
    function DataType({covidData, selectedRegions, dataType, checked, onTypeChange}) {
      const alertClass = covidDataTypes[dataType.key].alertClass;
      const badgeClass = covidDataTypes[dataType.key].badgeClass;
      const totalCount = getTotalCount(covidData, dataType.key, selectedRegions);
      const onChange = () => {
        onTypeChange(dataType.key);
      };
      return (
        e('label', {className: `alert ${alertClass} mr-3 mb-3`},
          e('div', {className: 'form-group form-check mb-0'},
            e('input', {type: 'checkbox', className: 'form-check-input', checked, onChange}),
            e('div', {className: 'form-check-label'},
              dataType.title,
              e('span', {className: `badge ${badgeClass} ml-2`}, totalCount.toLocaleString())
            )
          )
        )
      )
    }
    
    function CovidChart({covidData, regions, selectedTypes, useLogScale}) {
      const canvasRef = r.useRef(null);
      const chartRef = r.useRef(null);
      const [screenWidth, screenHeight] = useWindowSize();
    
      let aspectRatio = 1;
      if (screenWidth > 450 && screenWidth <= 700) {
        aspectRatio = 2;
      } else if (screenWidth > 700 && screenWidth <= 1000) {
        aspectRatio = 3;
      } else if (screenWidth > 1000) {
        aspectRatio = 4;
      }
    
      r.useEffect(() => {
        if (!canvasRef.current) {
          return;
        }
        const labels = covidData.labels
          .slice(covidSchema.dateStartColumn)
          .map(formatDateLabel);
        const linearYAxisID = 'linearYAxis';
        const logYAxisID = 'logYAxis';
        const yAxesID = useLogScale ? logYAxisID : linearYAxisID;
        const datasets = [];
        regions.forEach((regionKey, regionIndex) => {
          selectedTypes.forEach(dataTypeKey => {
            let ticks = [];
            if (regionKey === covidCountries.all.key) {
              ticks = getGlobalTicks(covidData, dataTypeKey);
            } else {
              const regionIndex = getRegionIndexByKey(covidData, dataTypeKey, regionKey);
              if (regionIndex >= 0) {
                ticks = covidData.ticks[dataTypeKey][regionIndex];
              }
            }
            const paletteDepth = covidDataTypes[dataTypeKey].borderColor.length;
            const dataset = {
              label: `${covidDataTypes[dataTypeKey].title} (${regionKey})`,
              data: ticks.slice(covidSchema.dateStartColumn),
              borderWidth: 1,
              borderColor: covidDataTypes[dataTypeKey].borderColor[regionIndex % paletteDepth],
              fill: false,
              yAxisID: yAxesID,
            };
            datasets.push(dataset);
          });
        });
        if (chartRef.current) {
          chartRef.current.destroy();
        }
        const ctx = canvasRef.current.getContext('2d');
        chartRef.current = new Chart(ctx, {
          type: 'line',
          data: {labels, datasets},
          options: {
            responsive: true,
            maintainAspectRatio: true,
            aspectRatio,
            scales: {
              yAxes: [
                {
                  id: linearYAxisID,
                  type: 'linear',
                  display: 'auto',
                  ticks: {
                    callback: (value, index, values) => {
                      return value.toLocaleString();
                    }
                  }
                },
                {
                  id: logYAxisID,
                  type: 'logarithmic',
                  display: 'auto',
                  ticks: {
                    // callback: (value, index, values) => {
                    //   const numbers = {
                    //     '1000000000': '100B',
                    //     '100000000': '100M',
                    //     '10000000': '10M',
                    //     '1000000': '1M',
                    //     '100000': '100K',
                    //     '10000': '10K',
                    //     '1000': '1K',
                    //     '100': '100',
                    //     '10': '10',
                    //     '0': '0',
                    //   };
                    //   if (numbers.hasOwnProperty(`${value}`)) {
                    //     return numbers[`${value}`];
                    //   }
                    //   return null;
                    // }
                  }
                },
              ],
            },
          },
        });
      }, [useLogScale, selectedTypes, regions, aspectRatio]);
      return e('canvas', {ref: canvasRef}, 'Your browser does not support the canvas element.');
    }
    
    function TableFilters({
      onFiltersReset,
      groupByCountry,
      onGroupByCountries,
      countrySearchQuery,
      onCountrySearch,
      useLogScale,
      onUseLogScale,
    }) {
      const onReset = (e) => {
        e.preventDefault();
        onFiltersReset();
      };
    
      return (
        e('form', {className: 'form-inline'},
          e('div', {className: 'form-group mr-3 mb-2'},
            e(CountrySearch, {countrySearchQuery, onCountrySearch})
          ),
          e('div', {className: 'ccolor form-group form-check mr-3 mb-2'},
            e(Toggle, {checked: groupByCountry, onChange: onGroupByCountries, text: 'Group by countries'})
          ),
          e('div', {className: 'ccolor form-group form-check mr-3 mb-2'},
            e(Toggle, {text: 'Logarithmic scale', onChange: onUseLogScale, checked: useLogScale})
          ),
          e('button', {className: 'btn btn-light mb-2', onClick: onReset},
            e('i', {className: 'fas fa-trash-alt mr-2'}),
            'Reset Filters'
          )
        )
      );
    }
    
    function CountrySearch({countrySearchQuery, onCountrySearch}) {
      return (
        e('input', {
          type: 'search',
          className: 'form-control',
          placeholder: 'Search country',
          onChange: (e) => onCountrySearch(e.target.value),
          value: countrySearchQuery,
        })
      );
    }
    
    function RegionsTable({
      groupByCountry,
      covidData,
      selectedRegions,
      onRegionChange,
      countrySearchQuery,
      dataSort,
      dataSortDirection,
      onDataSort,
    }) {
      const onColumnSort = (columnName) => {
        if (columnName === dataSort) {
          const newDataSortDirection =
            dataSortDirection === covidSortDirections.asc.key ? covidSortDirections.desc.key : covidSortDirections.asc.key;
          onDataSort(columnName, newDataSortDirection);
        } else {
          onDataSort(columnName, dataSortDirection);
        }
      };
      const tHead = (
        e('thead', {className: 'thead-light'},
          e('tr', null,
            e('th', null, ''),
            e('th', null, ''),
            e('th', {sortable: 'sortable', onClick: () => onColumnSort(covidSorts.country.key)},
              groupByCountry ? 'Countries' : 'Regions',
              e(ColumnSorter, {sortDirection: dataSort === covidSorts.country.key ? dataSortDirection : null})
            ),
            e('th', {sortable: 'sortable', onClick: () => onColumnSort(covidSorts.confirmed.key)},
              covidDataTypes.confirmed.title,
              e(ColumnSorter, {sortDirection: dataSort === covidSorts.confirmed.key ? dataSortDirection : null})
            ),
            e('th', {sortable: 'sortable', onClick: () => onColumnSort(covidSorts.recovered.key)},
              covidDataTypes.recovered.title,
              e(ColumnSorter, {sortDirection: dataSort === covidSorts.recovered.key ? dataSortDirection : null})
            ),
            e('th', {sortable: 'sortable', onClick: () => onColumnSort(covidSorts.deaths.key)},
              covidDataTypes.deaths.title,
              e(ColumnSorter, {sortDirection: dataSort === covidSorts.deaths.key ? dataSortDirection : null})
            ),
            e('th', {sortable: 'sortable', onClick: () => onColumnSort(covidSorts.mortality.key)},
              'Mortality',
              e(ColumnSorter, {sortDirection: dataSort === covidSorts.mortality.key ? dataSortDirection : null})
            ),
          ),
        )
      );
      const rows = getCovidRegions(covidData)
        .filter((region) => {
          if (!countrySearchQuery) {
            return true;
          }
          const escapedCountrySearchQuery = escapeRegExp(countrySearchQuery.trim());
          return region.key.search(
            new RegExp(escapedCountrySearchQuery, 'i')
          ) >= 0;
        })
        .sort((regionA, regionB) => {
          let sortCriteriaA;
          let sortCriteriaB;
          switch (dataSort) {
            case covidSorts.country.key:
              sortCriteriaA = regionA.key;
              sortCriteriaB = regionB.key;
              break;
            case covidSorts.mortality.key:
              sortCriteriaA = calculateMortality(
                regionA.numbers[covidDataTypes.confirmed.key],
                regionA.numbers[covidDataTypes.deaths.key]
              );
              sortCriteriaB = calculateMortality(
                regionB.numbers[covidDataTypes.confirmed.key],
                regionB.numbers[covidDataTypes.deaths.key]
              );
              break;
            default:
              sortCriteriaA = regionA.numbers[covidSorts[dataSort].dataKey];
              sortCriteriaB = regionB.numbers[covidSorts[dataSort].dataKey];
          }
          if (sortCriteriaA === sortCriteriaB) {
            return 0;
          }
          if (sortCriteriaA > sortCriteriaB) {
            return dataSortDirection === covidSortDirections.desc.key ? -1 : 1;
          }
          return dataSortDirection === covidSortDirections.desc.key ? 1 : -1;
        })
        .map((region, regionIndex) => {
          const checked = !!selectedRegions.includes(region.key);
          const confirmedNumber = region.numbers[covidDataTypes.confirmed.key] >= 0 ? region.numbers[covidDataTypes.confirmed.key] : '';
          const recoveredNumber = region.numbers[covidDataTypes.recovered.key] >= 0 ? region.numbers[covidDataTypes.recovered.key] : '';
          const deathsNumber = region.numbers[covidDataTypes.deaths.key] >= 0 ? region.numbers[covidDataTypes.deaths.key] : '';
    
          const mortality = calculateMortality(
            region.numbers[covidDataTypes.confirmed.key],
            region.numbers[covidDataTypes.deaths.key]
          );
          let mortalityNumber = `${mortality}%`;
    
          return (
            e('tr', {key: region.key, onClick: () => onRegionChange(region.key)},
              e('td', null, e('input', {type: 'checkbox', checked, onChange: () => {}})),
              e('td', null, e('small', {className: 'text-muted'}, `#${regionIndex + 1}`)),
              e('td', null, region.key),
              e('td', null, confirmedNumber),
              e('td', null, recoveredNumber),
              e('td', null, deathsNumber),
              e('td', null, e('small', {className: 'text-muted'}, mortalityNumber)),
            )
          );
        });
      const tBody = e('tbody', null, rows);
      return (
        e('div', null,
          e('div', {className: 'table-responsive table-borderless'},
            e('table', {className: 'table table-hover whh'}, tHead, tBody)
          ),
          e('small', {className: 'text-muted'}, '')
        )
      );
    }
    
    function ColumnSorter({sortDirection}) {
      const className = sortDirection ? 'ml-2' : 'ml-2 text-muted';
      let sorter = null;
      if (!sortDirection) {
        sorter = e('i', {className: 'fas fa-sort'});
      } else if (sortDirection === covidSortDirections.asc.key) {
        sorter = e('i', {className: 'fas fa-sort-up'});
      } else {
        sorter = e('i', {className: 'fas fa-sort-down'});
      }
      return (
        e('span', {className}, sorter)
      );
    }
    
    function ErrorMessage({errorMessage}) {
      return e('div', {className: 'alert alert-danger'}, errorMessage);
    }
    
    function Spinner() {
      return e(
        'div', {className: 'd-flex justify-content-center mt-5 mb-5'},
        e('div', {className: 'spinner-border'})
      );
    }
    
    function Toggle({text, checked, onChange}) {
      return (
        e('label', {},
          e('div', {className: 'form-group form-check mb-0'},
            e('input', {
              type: 'checkbox',
              checked: checked,
              className: 'form-check-input',
              onChange: (event) => onChange(event.target.checked)
            }),
            e('div', {className: 'form-check-label'}, text)
          )
        )
      )
    }
    </script>

    <!-- SCRIPTS END FOR ROOT -->

</body>

</html>

Leave a Reply