Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Covid Widget</title>
    <style>
    	.covid__widget {
            position: relative;
            padding-bottom: 20px;
        }

        @media (min-width: 768px) {

            .covid__widget {
                padding-bottom: 0;
            }
        }

        .covid__wrap {
            width: 100%;
            padding: 10px 0;
        }

        @media (min-width: 768px) {
            .covid__wrap {
                display: -webkit-box;
                /* OLD - iOS 6-, Safari 3.1-6, BB7 */
                display: -ms-flexbox;
                /* TWEENER - IE 10 */
                display: -webkit-flex;
                /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
                display: flex;
                /* NEW, Spec - Firefox, Chrome, Opera */
                flex-wrap: wrap;
                align-content: space-evenly;
            }
        }
        .covid__col {
            position: relative;
            width: 100%;
            display: block;
        }

        @media (min-width: 768px) {
            .covid__col {
                width: calc(100% / 2);
            }
        }

        .covid__box {
            position: relative;
            display: -webkit-box;
            /* OLD - iOS 6-, Safari 3.1-6, BB7 */
            display: -ms-flexbox;
            /* TWEENER - IE 10 */
            display: -webkit-flex;
            /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
            display: flex;
            /* NEW, Spec - Firefox, Chrome, Opera */
            flex-wrap: wrap;
            align-content: space-evenly;
        }

        .covid__box2 {
            position: relative;
            font-size: 22px;
            font-weight: 700;
            line-height: 1;
            color: #fff;
            text-align: center;
            width: calc(100% / 3);
            padding: 10px 0;
        }

        .covid__box2 span {
            font-family: "Roboto Condensed", sans-serif;
            font-size: 14px;
            font-weight: 700;
            display: block;
            padding: 0 0 5px;
            text-transform: uppercase;
        }

        .covid__box2 i {
            font-family: inherit;
            font-size: 9px;
            font-weight: 400;
            padding: 0 5px;
            font-style: normal;
            vertical-align: middle;
            display: inline-block;
        }

        .covid__box2.-cases {
            width: 100%;
            background: #8F8F8F;
            font-size: 31px;
        }

        .covid__box2.-odp {
            background: #FE9B44;
        }

        .covid__box2.-gone {
            background: #F24E4E;
        }

        .covid__box2.-health {
            background: #44C644;
        }

        .covid__banner {
            width: 50%;
            height: auto;
            position: relative !important;
            display: block;
            z-index: 999;
            flex: 1;
        }

        @media (min-width: 768px) {
        	.covid__banner {
            	width: 50%;
        	}
        }

        @media (max-width: 720px) {
            .covid__wrap {
                display: block !important;
            }

            .covid__banner {
                height: 90px;
                padding-bottom: 0;
                width: auto;
                background-size: cover;
            }
        }

        .covid__bottom {
            padding: 0 5px 10px;
        }

        @media (min-width: 768px) {
            .covid__bottom {
                padding: 0 20px 10px;
            }
        }

        .covid__bottom span {
            text-align: left;
            font-family: "Roboto Condensed", sans-serif;
            font-size: 12px;
            font-weight: 700;
        }

        .covid__date {
            padding: 2px 0;
            text-align: center;
            display: block;
            font-size: 12px;
            font-weight: 400;
            line-height: 1;
            color: #fff;
        }

        @media (min-width: 768px) {
            .covid__date {
                padding: 7px 0 0;
                float: right;
                font-size: 14px;
                text-align: right;
            }
        }

        .covid__date span {
            font-weight: 700;
        }
    </style>
</head>
<body>
    <div class="covid__widget">
    	<div class="covid__wrap">
    		<div class="covid__col">
    			<div class="covid__box">
    				<div class="covid__box2 -cases"></div>
    			</div>
    			<div class="covid__box">
    				<div class="covid__box2 -odp"></div>
    				<div class="covid__box2 -gone"></div>
    				<div class="covid__box2 -health"></div>
    			</div>
    		</div>
			<a class="covid__banner" style="background-image: url('https://www.trenasia.co/wp-content/uploads/2020/03/banner-web-2.png');background-size: contain;background-repeat: no-repeat;background-position: right center;" href="https://www.trenasia.co/covid-19/" rel="bookmark"></a>
    	</div>
    	<div class="covid__bottom">
			<div class="latest">
				Updated at:
				<span class="dates"></span>
			</div>
		</div>
    </div>
    <script>
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function () {
            if (this.readyState == 4 && this.status == 200) {
               const dataJson = JSON.parse(this.response);
                const summary = dataJson.features.filter(f => {
                    return f.attributes.Jumlah_Kasus_Baru_per_Hari !== null
                });
                const latest = summary[summary.length - 1];
                const { attributes } = latest
                const dates = new Date(attributes.Tanggal).toDateString();
                const times = new Date(attributes.Tanggal).toLocaleTimeString();

                // inject data into html element
                document.querySelector('.-cases').innerHTML = `<span>Terkonfirmasi</span>${attributes.Jumlah_Kasus_Kumulatif} <i>+${attributes.Jumlah_Kasus_Baru_per_Hari} Kasus</i>`;
                document.querySelector('.-odp').innerHTML = `<span>Dirawat</span>${attributes.Jumlah_pasien_dalam_perawatan}<i>${attributes.Persentase_Pasien_dalam_Perawatan.toFixed(2)}% dari terkonfirmasi</i>`;
                document.querySelector('.-gone').innerHTML = `<span>Meninggal</span>${attributes.Jumlah_Pasien_Meninggal} <i>${attributes.Jumlah_Pasien_Meninggal.toFixed(2)}% dari terkonfirmasi</i>`;
                document.querySelector('.-health').innerHTML = `<span>Sembuh</span>${attributes.Jumlah_Pasien_Sembuh} <i>${attributes.Persentase_Pasien_Sembuh.toFixed(2)}% dari terkonfirmasi</i>`;
                document.querySelector('.dates').innerHTML = `${dates} ${times}`;
            }
        };
        xmlhttp.open("GET", "https://services5.arcgis.com/VS6HdKS0VfIhv8Ct/ArcGIS/rest/services/Statistik_Perkembangan_COVID19_Indonesia/FeatureServer/0/query?where=1%3D1&objectIds=&time=&resultType=standard&outFields=*&returnIdsOnly=false&returnUniqueIdsOnly=false&returnCountOnly=false&returnDistinctValues=false&cacheHint=false&orderByFields=&groupByFieldsForStatistics=&outStatistics=&having=&resultOffset=&resultRecordCount=&sqlFormat=standard&f=pjson&token=", true);
        xmlhttp.send();
    </script>
</body>
</html>