-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
194 lines (186 loc) · 9.53 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
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My Wheather App</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<link rel="stylesheet" href="styles.css">
<script type='text/javascript' src='config.js'></script>
<script src="script.js"></script>
</head>
<body>
<!-- <h1>WANNA KNOW THE WHEATHER OF A LOCATION?</h1> -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN"
crossorigin="anonymous"></script>
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand" href="#">KnowYourWheather</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Services
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#"></a></li>
<li><a class="dropdown-item" href="#">Live Location</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">Send Safety Massage</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
<form class="d-flex" role="search">
<input id="inputField" class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit" id="submitMessage" onclick="printInput()">Search</button>
</form>
</div>
</div>
</nav>
<div class="conatainer text-center mx-5">
<main>
<h1 class="mx-4 text-center">Weather for <span id="output"></span></h1>
<div class="row row-cols-1 row-cols-md-3 mb-3 text-center">
<div class="col">
<div class="card mb-4 rounded-3 shadow-sm">
<div class="card-header py-3 text-bg-primary border-primary">
<h4 class="my-0 fw-normal">Temperature <span class="symbol" ><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 5000 512"><!--! Font Awesome Free 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. --><path d="M176 322.9V112c0-8.75-7.25-16-16-16s-16 7.25-16 16v210.9c-18.62 6.625-32 24.25-32 45.13c0 26.5 21.5 48 48 48s48-21.5 48-48C208 347.1 194.6 329.5 176 322.9zM272 278.5V112c0-61.87-50.12-112-111.1-112S48 50.13 48 112v166.5c-19.75 24.75-32 55.5-32 89.5c0 79.5 64.5 143.1 144 143.1S304 447.5 304 368C304 334 291.8 303.1 272 278.5zM160 448c-44.13 0-80-35.87-80-79.1c0-25.5 12.25-48.88 32-63.75v-192.3c0-26.5 21.5-48 48-48s48 21.5 48 48v192.3c19.75 14.75 32 38.25 32 63.75C240 412.1 204.1 448 160 448z"/></svg></span></h4>
<span id="temp"></span><span id="degree">°C</span>
</div>
<div class="card-body">
<h1 class="card-title pricing-card-title"></h1>
<ul class="list-unstyled mt-3 mb-4">
<li>Feels like : <span id="feels_like"></span>°C</li>
<li>Humidity : <span id="humidity"></span></li>
<li>the Minimum Temperature is : <span id="min_temp"></span>°C</li>
<li>the Maximum Temperature is : <span id="max_temp"></span>°C</li>
</ul>
<!-- <button type="button" class="w-100 btn btn-lg btn-outline-primary">Wohoo! ;-; </button> -->
</div>
</div>
</div>
<div class="col">
<div class="card mb-4 rounded-3 shadow-sm">
<div class="card-header py-3 text-bg-primary border-primary">
<h4 class="my-0 fw-normal">Cloud <br><span><svg xmlns="http://www.w3.org/2000/svg" width="70" height="70" fill="currentColor" class="bi bi-cloud" viewBox="0 0 16 16"> <path d="M4.406 3.342A5.53 5.53 0 0 1 8 2c2.69 0 4.923 2 5.166 4.579C14.758 6.804 16 8.137 16 9.773 16 11.569 14.502 13 12.687 13H3.781C1.708 13 0 11.366 0 9.318c0-1.763 1.266-3.223 2.942-3.593.143-.863.698-1.723 1.464-2.383zm.653.757c-.757.653-1.153 1.44-1.153 2.056v.448l-.445.049C2.064 6.805 1 7.952 1 9.318 1 10.785 2.23 12 3.781 12h8.906C13.98 12 15 10.988 15 9.773c0-1.216-1.02-2.228-2.313-2.228h-.5v-.5C12.188 4.825 10.328 3 8 3a4.53 4.53 0 0 0-2.941 1.1z"/> </svg></span></h4>
</div>
<div class="card-body">
<!-- <h1 class="card-title pricing-card-title">$15<small class="text-muted fw-light">/mo</small></h1> -->
<ul class="list-unstyled mt-3 mb-4">
<li>Cloud CPT : <span id="cloud_pct"></span></li>
</ul>
<!-- <button type="button" class="w-100 btn btn-lg btn-primary">Get started</button> -->
</div>
</div>
</div>
<div class="col">
<div class="card mb-4 rounded-3 shadow-sm border-primary">
<div class="card-header py-3 text-bg-primary border-primary">
<h4 class="my-0 fw-normal">Wind Speed <span class="symbol"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 5000 512"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M288 32c0 17.7 14.3 32 32 32h32c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32 14.3-32 32s14.3 32 32 32H352c53 0 96-43 96-96s-43-96-96-96H320c-17.7 0-32 14.3-32 32zm64 352c0 17.7 14.3 32 32 32h32c53 0 96-43 96-96s-43-96-96-96H32c-17.7 0-32 14.3-32 32s14.3 32 32 32H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H384c-17.7 0-32 14.3-32 32zM128 512h32c53 0 96-43 96-96s-43-96-96-96H32c-17.7 0-32 14.3-32 32s14.3 32 32 32H160c17.7 0 32 14.3 32 32s-14.3 32-32 32H128c-17.7 0-32 14.3-32 32s14.3 32 32 32z"/></svg></span><span id="wind_speed"></span>m/s</h4>
</div>
<div class="card-body">
<!-- <h1 class="card-title pricing-card-title">$29<small class="text-muted fw-light">/mo</small></h1> -->
<ul class="list-unstyled mt-3 mb-4">
<li>Wind Degrees : <span id="wind_degrees"></span></li>
<li>Sunrise : <span id="sunrise"></span></li>
<li>Sunset : <span id="sunset"></span></li>
</ul>
<!-- <button type="button" class="w-100 btn btn-lg btn-primary">Contact us</button> -->
</div>
</div>
</div>
</div>
<!-- EXTRAS -->
<h2 class="display-6 text-center mb-4">Get Wheather of other locations</h2>
<div class="table-responsive">
<table class="table text-center">
<thead>
<tr>
<th style="width: 22%;">CLOUD_PCT</th>
<th style="width: 22%;">FEELS_LIKE</th>
<th style="width: 22%;">HUMIDITY</th>
<th style="width: 22%;">MAX_TEMP</th>
<th style="width: 22%;">MIN_TEMP</th>
<th style="width: 22%;">SUNRISE</th>
<th style="width: 22%;">SUNSET</th>
<th style="width: 22%;">TEMP</th>
<th style="width: 22%;">WIND_DEGREES</th>
<th style="width: 22%;">WIND_SPEED</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row" class="text-start">Delhi</th>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<th scope="row" class="text-start">Mumbai</th>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
</tbody>
<tbody>
<tr>
<th scope="row" class="text-start">Seattle</th>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<th scope="row" class="text-start">Helsinki</th>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
</tbody>
</table>
</div>
</main>
</div>
</body>
</html>
</html>