-
Notifications
You must be signed in to change notification settings - Fork 0
/
covid.html
157 lines (126 loc) · 4.93 KB
/
covid.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
152
153
154
155
156
157
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Covid Tracker</title>
<link rel="stylesheet" type="text/css" href="css/grid.css" media="screen">
<link rel="stylesheet" type="text/css" href="css/printstyle.css" media="print">
<script defer src="js/covidIE.js"></script>
</head>
<body>
<!-- This HTML5 main element was needed to keep the footer at the bottom of the page on mobile-->
<div id="main">
<!-- This HTML5 header element will contain a picture, title of the page, and the nav element -->
<header>
<figure>
<img src="images/covid.jpg" alt="Picture of coronavirus" title="Picture of coronavirus"
width="600" height="450"/>
<figcaption>Photo by CDC from Pexels</figcaption>
</figure>
<h1>Covid Tracker</h1>
<!-- This HTML5 nav element will contain the nav bar -->
<nav>
<ul>
<li><a href="index.html">Home</a> </li>
<li><a href="academic.html">School</a> </li>
<li><a href="professional.html">Work</a> </li>
<li class="dropdown">
<a href="#">Play</a>
<ul>
<li><a href="hiking.html">Hiking</a></li>
<li><a href="music.html">Music</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="active">Apps</a>
<ul>
<li><a href="weather.html">Weather</a></li>
<li><a href="stocks.html">Stocks</a></li>
<li><a href="covid.html" class="active">Covid</a></li>
<li><a href="todo.html">To-Do</a></li>
<li><a href="reviews.html">Reviews</a></li>
</ul>
</li>
</ul>
</nav>
<hr>
</header>
<!-- This HTML5 section element will my article(s) for this page -->
<section>
<h2 id="test">Covid Tracker</h2>
<article id="covid-dashboard">
<div class="header"><img src="images/usa.png" alt="American flag Icon made by www.flaticon.com/authors/freepik"> <h3 class="covid-header">United States</h3></div>
<div id="usa-cases">Total Cases</div>
<div id="usa-deaths">Total Deaths</div>
<div id="usa-recovered">Total Recovered</div>
<div class="header"><img id="globe" src="images/globe.png" alt="Globe Icon made by www.flaticon.com/authors/freepik"> <h3 class="covid-header">Global</h3></div>
<div id="global-cases">Total Cases</div>
<div id="global-deaths">Total Deaths</div>
<div id="global-recovered">Total Recovered</div>
</article>
<br>
<h3>Data Sources</h3>
<p id="covid-p">
USA and Global data is pulled from <a href="https://disease.sh/docs/#/" target="_blank">Worldometers</a>.
Numbers may differ from other publications due to differences in how the data is aggregated and updated.
<br>
<br>
<a href="#global-table">Click Here</a> to jump to the global table with data broken down by country.
</p>
<br>
<br>
<h3>USA Covid Data by State</h3>
<div id="MA-updated"></div>
<!-- USA table -->
<table id="usa-table" class="sticky-header">
<thead>
<tr>
<th>State</th>
<th>New Cases</th>
<th>New Deaths</th>
<th>Total Cases</th>
<th>Total Deaths</th>
</tr>
</thead>
<tbody id="display-USA">
</tbody>
</table>
<br>
<br>
<h3 id="global-table">Global Covid Data by Country</h3>
<div id="global-updated"></div>
<!-- World table -->
<table class="sticky-header">
<thead>
<tr>
<th>Country</th>
<th>New Cases</th>
<th>New Deaths</th>
<th>Total Cases</th>
<th>Total Deaths</th>
</tr>
</thead>
<tbody id="display">
</tbody>
</table>
<br>
<br>
<br>
</section>
<br>
<br>
<br>
<!-- This HTML5 footer element will contain my name, email, and last updated date, as well as printed from line -->
<footer>
<div id="footer-left"><p>© 2020 Henry Choy</p></div>
<div id="footer-center"><p><a href="mailto:[email protected]">[email protected]</a></p></div>
<div id="footer-right"><p id="last-updated"></p></div>
<p class="printed-from">Printed from http://henrychoy.com/</p>
</footer>
</div>
<script>
// last updated in footer
document.getElementById("last-updated").textContent = "Last Updated: " + document.lastModified;
</script>
</body>
</html>