-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
151 lines (146 loc) · 6.17 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Covid Stats</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<link rel=stylesheet href="https://s3-us-west-2.amazonaws.com/colors-css/2.2.0/colors.min.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Sarabun:wght@200;400;600&display=swap');
body {
font-family: 'Sarabun', sans-serif;
}
.container {
max-width: 760px;
margin-top: 2em;
margin-bottom: 2em;
}
.stats {
margin: 5px 0;
}
.card {
text-align: center;
}
.title h1,
.title h2 {
font-weight: bold;
}
.title p {
font-size: .9em;
padding: 1%;
}
.card .card-body {
cursor: pointer;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-8">
<div class="title">
<h1>สถานการณ์ COVID-19</h1>
<h2>ในประเทศไทย</h2>
<p class="badge badge-pill badge-success">ข้อมูล ณ <span id="update_date"></span></p>
</div>
</div>
<div class="col-4">
<img src="https://images.squarespace-cdn.com/content/v1/5768a935414fb5c446224407/1586399666577-47KWNGZCZURO9LB41VV4/Leaf-Medical---Coronavirus.png?format=1000w" style="width: 100%; cursor: pointer;">
</div>
</div>
<div class="card mt-3">
<div class="card-body text-dark bg-light">
<div class="row">
<div class="col-6">
<div class="card stats bg-danger text-white">
<div class="card-body">
<h5>ติดเชื้อเพิ่มวันนี้</h5>
<h1>+<span id="new_case"></span></h1>
</div>
</div>
</div>
<div class="col-6">
<div class="card stats bg-success text-white">
<div class="card-body">
<h5>หายป่วยวันนี้</h5>
<h1>+<span id="new_recovered"></span></h1>
</div>
</div>
</div>
<div class="col-6">
<div class="card stats bg-warning text-dark">
<div class="card-body">
<h5>ติดเชื้อสะสม</h5>
<h1><span id="total_case"></span></h1>
</div>
</div>
</div>
<div class="col-6">
<div class="card stats bg-info text-white">
<div class="card-body">
<h5>หายป่วยสะสม</h5>
<h1><span id="total_recovered"></span></h1>
</div>
</div>
</div>
<div class="col-6">
<div class="card stats bg-dark text-white">
<div class="card-body">
<h5>เสียชีวิตวันนี้</h5>
<h1>+<span id="new_death"></span></h1>
</div>
</div>
</div>
<div class="col-6">
<div class="card stats bg-secondary text-white">
<div class="card-body">
<h5>เสียชีวิตสะสม</h5>
<h1><span id="total_death"></span></h1>
</div>
</div>
</div>
</div>
</div>
<div class="card-footer">
<small class="text-muted">รายงานผู้ป่วยยืนยันประจำวัน จาก กรมควบคุมโรค <a href=" https://covid19.ddc.moph.go.th/api/Cases/today-cases-all">API</a></small>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$.ajax({
method: "GET",
url: "https://covid19.ddc.moph.go.th/api/Cases/today-cases-all"
})
.done(function(msg){
let new_case = msg[0].new_case;
let new_recovered = msg[0].new_recovered;
let total_case = msg[0].total_case;
let total_recovered = msg[0].total_recovered;
let new_death = msg[0].new_death;
let total_death = msg[0].total_death;
let update_date = msg[0].update_date;
$("#update_date").html(update_date);
$("#new_case").html(new_case);
$("#new_recovered").html(new_recovered);
$("#total_case").html(total_case);
$("#total_recovered").html(total_recovered);
$("#new_death").html(new_death);
$("#total_death").html(total_death);
$("h1 span").digits();
})
.fail(function(){
alert("error");
});
$.fn.digits = function(){
return this.each(function(){
$(this).text( $(this).text().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,") );
})
}
})
</script>
</body>
</html>