-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathhistory.html
153 lines (131 loc) · 7.47 KB
/
history.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Weather-Dashboard</title>
<!-- Bootstrap Styling -->
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
crossorigin="anonymous"
/>
<!-- BootStrap Icons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css">
<link rel="stylesheet" href="./css/style.css">
</head>
<body class="bg-secondary-subtle">
<nav class="navbar navbar-expand-lg bg-body-tertiary bg-dark border-bottom border-body sticky-top" data-bs-theme="dark">
<div class="container-fluid">
<a class="navbar-brand" href="./index.html">
<img src="./images/logo.png" alt="Logo" width="30" height="24" class="d-inline-block align-text-top" />
Weather
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-between" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link" href="./index.html">Home</a></li>
<li class="nav-item"><a class="nav-link active" aria-current="page" href="./history.html">History</a></li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="recent" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Recent<i class="bi bi-caret-down-fill ms-1"></i></a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="./temperature.html">Temperature</a></li>
<li><a class="dropdown-item" href="./humidity.html">Humidity</a></li>
<li><a class="dropdown-item" href="./wind.html">Wind Speed</a></li>
</ul>
</li>
<li class="nav-item"><a class="nav-link" href="./forecast.html">Forecast App</a></li>
</ul>
<ul class="navbar-nav">
<li class="nav-item dropdown dropstart">
<a class="nav-link dropdown-toggle" id="resources" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Resources <i class="bi bi-caret-left-fill d-lg-inline d-none"></i><i class="bi bi-caret-down-fill d-lg-none"></i></a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="https://flagpedia.net/" target="_blank">Flag API</a></li>
<li><a class="dropdown-item" href="https://open-meteo.com/en/docs/" target="_blank">Weather API</a></li>
<li><a class="dropdown-item" href="https://www.chartjs.org/" target="_blank">Chart.js</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<div id="scroll-bar"></div>
<div class="container">
<article>
<section class="row location-details"></section>
<section class="row row-cols-2">
<div class="col-md-6 input-fields">
<form class="city-input">
<div class="form-floating mb-3">
<input type="text" class="form-control city-holder" id="floatingInput" placeholder="Tampere">
<label for="floatingInput">City Name</label>
</div>
</form>
</div>
<div class="col-md-6 input-fields">
<select class="form-select" aria-label="Default select example" id="data-type">
<option value="temperature_2m_mean" selected>Average Temperature</option>
<option value="temperature_2m_min">Minimum Temperature</option>
<option value="temperature_2m_max">Maximum Temperature</option>
<option value="wind_speed_10m_max">Wind Speed</option>
<option value="wind_gusts_10m_max">Wind Gusts</option>
<option value="sunshine_duration">Sunshine Duration</option>
<option value="precipitation_sum">Percipitation Sum</option>
<option value="precipitation_hours">Percipitation Hours</option>
<option value="shortwave_radiation_sum">Shortwave Radiation Sum</option>
</select>
</div>
</section>
<section class="row my-3">
<div class="col-md-6 my-2 d-inline-flex justify-content-evenly">
<div class="col-lg-4 my-1">
<label class="text-center" for="start">Start Date:</label>
<input class="" type="date" id="start" value="" min="1940-01-01" max="" />
</div>
<div class="col-lg-4 my-1">
<label class="text-center" for="end">End Date:</label>
<input class="" type="date" id="end" value="" min="1940-01-01" max="" />
</div>
<div class="col-lg-4 my-1 align-self-end">
<button type="submit" value="Submit" id="submit" class="btn btn-primary btn-sm">Submit</button>
</div>
</div>
<div class="col-md-6 d-inline-flex justify-content-center align-items-center my-2">
<label class="col-8 text-end" for="graph-limit">Graph Limit:</label>
<select class="form-select" aria-label="Default select example" id="graph-limit" style="height:40px">
<option value="50" selected>50</option>
<option value="100">100</option>
<option value="200">200</option>
<option value="500">500</option>
<option value="1000">1000</option>
<option value="2500">2500</option>
</select>
</div>
</section>
<div id="not-found-container" class="not-found d-flex flex-column align-items-center "><h1 class="not-found">City not found.</h1><p class="not-found">Try again with another city name.</p></div>
<div id="content">
<section class="row">
<div class="col-lg-12">
<canvas class="my-charts" style="width: 100%; max-height: 70vh; min-height: 40vh;"><p>Your browser does not support the canvas element.</p></canvas>
</div>
</section>
<section class="data-table pt-0 mt-3"></section>
</div>
</article>
</div>
<footer class=" d-flex justify-content-evenly bg-dark border-top border-body py-2">
<a class="link-light link-offset-2 link-offset-3-hover link-underline link-underline-opacity-0 link-underline-opacity-75-hover" href="http://23bowd43.course.tamk.cloud/portfolio" target="_blank">©Jani O'Connell 2024</a>
</footer>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
crossorigin="anonymous"
></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="./js/history.js"></script>
<script defer>getInputLocation()</script>
</body>
</html>