-
Notifications
You must be signed in to change notification settings - Fork 0
/
weather.html
133 lines (115 loc) · 5.01 KB
/
weather.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>What's the weather like?</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://code.jquery.com/jquery-3.7.1.slim.js"
integrity="sha256-UgvvN8vBkgO0luPSUl2s8TIlOSYRoGFAX4jlCIm9Adc=" crossorigin="anonymous"></script>
<style>
.waffle-chart-container {
display: flex;
flex-wrap: wrap;
}
.waffle-chart {
display: grid;
margin: 10px;
}
.waffle-block {
width: 20px;
height: 20px;
border: 1px solid #333;
}
.year-label {
text-align: center;
margin-bottom: 5px;
}
.wet-day {
background-color: blue;
}
.showery-day {
background-color: lightblue;
}
.dry-day {
background-color: yellow;
}
</style>
</head>
<body>
<div class="container mt-5">
<h1>What's the weather like?</h1>
<div class="row justify-content-center">
<div class="col">
<label for="cityInput">City Name</label>
<input type="text" id="cityInput" class="form-control mb-3" placeholder="Enter city name">
<div id="cityOptions" class="list-group"></div>
<label for="plannedStartDate">Planned Start Date</label>
<input type="date" id="plannedStartDate" class="form-control mt-3" placeholder="Planned start date">
<label for="numberOfDays">Number of Days</label>
<input type="number" id="numberOfDays" class="form-control mt-3" placeholder="Number of days" value="7">
<button id="getWeatherBtn1" class="btn btn-primary mt-3">Get Historic Weather Summary</button>
<div class="d-none" id="tripInfoTableContainer">
<p> </p>
<h3 class="mt-4 pt-4">10-year Historic Temperatures</h3>
<div class="table-responsive">
<table class="table" id="tripInfoTable">
<tbody>
<tr>
<td>Typical Daily High</td>
<td id="medianDailyTemperature"></td>
</tr>
<tr>
<td>Typical Daily High Range<br>
<small>Median +/- 1 SD</small>
</td>
<td id="typicalDailyHighRange"></td>
</tr>
<tr>
<td>Max Daily High</td>
<td id="maxDailyHigh"></td>
</tr>
<tr>
<td>Min Daily High</td>
<td id="minDailyHigh"></td>
</tr>
</tbody>
</table>
</div>
<div id="temperatureChartContainer" style="height:400px" class="mt-3">
<canvas id="temperatureChart"></canvas>
</div>
<p> </p>
<h3 class="mt-4 pt-4">10-year Historic Rainy-ness</h3>
<div class="table-responsive">
<table class="table" id="tripInfoTable">
<tbody>
<tr>
<td>Typical Dry Days</td>
<td id="typicalDryDays"></td>
</tr>
<tr>
<td>Typical Days with Shower</td>
<td id="typicalDaysWithShower"></td>
</tr>
<tr>
<td>Typical Rainy Days</td>
<td id="typicalRainyDays"></td>
</tr>
</tbody>
</table>
</div>
<div id="barChartContainer" class="mt-3" style="height:400px">
<canvas id="barChart"></canvas>
</div>
<small><strong>Dry</strong>: less than 1 hour of rainfall per day | <strong>Showers</strong>:
less than 6 hours of rain per day |
<strong>Rainy</strong>: more than 5 hours per day</small>
</div>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>