-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
131 lines (121 loc) · 6.66 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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Weather App</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<link rel="icon" href="favicon.ico">
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navcol">
<div class="container-fluid">
<a class="navbar-brand" href="index.html"><img class="app-img" src="favicon.ico" alt=""><strong> Weather
App</strong></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="index.html">Home</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
aria-expanded="false">
Common cities
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#" id="Patna">Patna</a></li>
<li><a class="dropdown-item" href="#" id="Delhi">Delhi</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#" id="Kolkata">Kolkata</a></li>
</ul>
</li>
</ul>
<form class="d-flex" role="search">
<input id="city" class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit" id="submit">Search</button>
</form>
</div>
</div>
</nav>
<h1 class="my-4 text-center heading"><span id="head">Weather at </span><span id="cityName"></span></h1>
<div>
<div class="container">
<main>
<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">
<h4 class="my-0 fw-normal">Temperature</h4>
</div>
<div class="card-body">
<h1 class="card-title pricing-card-title"><span id="temp2"></span><small
class="text-muted fw-light"><span>℃</span>
</small>
</h1>
<ul class="list-unstyled mt-3 mb-4">
<li>Teamperature is <span id="temp"></span><span>℃</span></li>
<li>Atmospheric Pressure is <span id="pressure"></span><span> mb</span></li>
<li>Gust is <span id="gust"></span><span> kph</span></li>
</ul>
</div>
</div>
</div>
<div class="col">
<div class="card mb-4 rounded-3 shadow-sm">
<div class="card-header py-3">
<h4 class="my-0 fw-normal">Humidity Info</h4>
</div>
<div class="card-body">
<h1 class="card-title pricing-card-title"><span id="humidity2"></span></span><small
class="text-muted fw-light"> %</small>
</h1>
<ul class="list-unstyled mt-3 mb-4">
<li>Wind Speed is <span id="wind_speed"></span> km/hr</li>
<li>Feels Like is <span id="feels_like"></span><span>℃</span></li>
<li>Humidity is <span id="humidity"></span> %</li>
</ul>
</div>
</div>
</div>
<div class="col">
<div class="card mb-4 rounded-3 shadow-sm">
<div class="card-header py-3">
<h4 class="my-0 fw-normal">Wind Info</h4>
</div>
<div class="card-body">
<h1 class="card-title pricing-card-title"><span id="wind_degrees2"></span><small
class="text-muted fw-light"><span>°</span></small>
</h1>
<ul class="list-unstyled mt-3 mb-4">
<li>Wind Degree is <span id="wind_degrees"></span><span>°</span>
</li>
<li>Time Zone is <span id="timeZone"></span></li>
<li>Last updated on <span id="lastUpdate"></span></li>
</ul>
</div>
</div>
</div>
</div>
</main>
</div>
</div>
<div class="bottom-container">
<p>We recognize our responsibility to use data and technology for good. Take control of your data.</p>
<p>This website is developed by Kriti Raj.</p>
<p>© Copyright Kriti Raj, <span id="year">2022</span></p>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
crossorigin="anonymous"></script>
<script src="script.js"></script>
</body>
</html>