-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathwind.html
131 lines (110 loc) · 6.07 KB
/
wind.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
<!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" href="./history.html">History</a></li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle active" 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 active" aria-current="page" 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-md">
<article>
<section class="row location-details"></section>
<section class="row mb-5">
<div class="col 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 input-fields">
<select class="form-select" aria-label="Default select example" id="length-select">
<option value="0" selected>Today</option>
<option value="1">Past 2 days</option>
<option value="2">Past 3 days</option>
<option value="6">Past Week</option>
<option value="30">Past Month</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-6">
<div class="border border-secondary mb-2 rounded">
<canvas class="my-charts" style="width: 100%; min-height: 30vh;"><p>Your browser does not support the canvas element.</p></canvas>
</div>
<div class="border border-secondary my-2 rounded">
<canvas class="statistics"><p>Your browser does not support the canvas element.</p></canvas>
<table class="stat-table text-center"></table>
</div>
</div>
<div class="col-lg-6">
<div class="data-table pt-0 mb-2"></div>
</div>
</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/statistics.js"></script>
<script src="./js/script.js"></script>
<script defer>getInputLocation("wind")</script>
</body>
</html>