-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
133 lines (133 loc) · 5.61 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta
name="description"
content="A Weather App using vanilla JS and custom API"
/>
<link rel="icon" type="image/x-icon" href="/assets/faviconpplogo.svg" />
<link rel="stylesheet" href="style.css" />
<title>Prakriti Patra: An indigenous weather application.</title>
</head>
<body>
<header id="heading">
<h1>
Prakriti
<img id="mainlogo" alt="PrakritiPatraLogo" src="./assets/pplogo.svg" />
Patra
</h1>
</header>
<section id="search">
<img
id="currentlocation"
alt="PrakritiPatraLogo"
src="./assets/loc.svg"
title="Use precise location"
/>
<div style="display: flex; align-items: center; gap: 20px">
<input
id="search-bar"
type="text"
name="Search City"
placeholder=" Enter City"
/>
<img
id="search-icon"
alt="PrakritiPatraLogo"
src="./assets/search.svg"
/>
</div>
<p id="today">Today's Date</p>
<span id="continent">7 Continents | All cities</span>
</section>
<div id="lorem">
<article id="article">
<section id="data">
<h1 id="headline">Weather predicted in ${city}:Says Report</h1>
<div id="subheadline">
<img id="main-img" src="" alt="" height="100px" />
<h2 id="h2-line">
City expected to have
<span id="description"><i>...</i></span>
</h2>
</div>
<div id="middle-info">
<span id="main-temp"></span>
<div id="clouds-etc">
<img
id="main-img"
src="assets/clouds.svg"
alt="api"
height="50px"
/><span id="clouds">---</span>
<img
id="main-img"
src="assets/humid.svg"
alt="api"
height="40px"
/><span id="humidity">---</span>
<img
id="main-img"
src="assets/gusts.svg"
alt="api"
height="35px"
/><span id="windspeed">---</span>
</div>
</div>
<p id="paragraph" style="text-align: justify">
  According to the Meteorological Department, the weather
pattern is not going to change in the coming days. The city is
expected to get <span id="main">-------</span> till tommorow. The
sky conditions will mostly be of
<span id="description2">------</span> in the afternoons. Maximum and
minimum tempratures will be around
<span id="maxtemp">------</span>°C and
<span id="mintemp">------</span>°C. It could feel like
<span id="feelslike">------</span> in many areas of
<span id="cityname2">------</span> overnight. Due to atmospheric
pressure on the sea level (<span id="pressure">------</span> hPa)
and ground level (<span id="ground">------</span> hPa), the wind
speed forecast to move <span id="windspeed2">------</span> off the
coast to <span id="winddegree">------</span> degrees.<br />Sunrise
and Sunset will be on <span id="sunrise">------</span> IST and
<span id="sunset">------</span> IST respectively.
</p>
</section>
</article>
<aside id="aside">
<img src="assets/city.webp" alt="Indian Cityscape" /><br />
<span style="font-size: 50px">L</span>
orem ipsum dolor sit amet consectetur adipisicing elit. Et quam est quia
molestiae, accusantium minus aliquam impedit null ratione neque libero
amet maiores incidunt autem. Voluptas repellat iste dignissimos iure.
Minus dolorem doloremque, exercitationem dolore consequatur perspiciatis
fuga iste, maiores dolorum ipsa soluta similique mollitia sequi possimus
quaerat quo quia voluptas explicabo nam? Nostrum suscipit, quas quis
molestiae quod tempore?Lorem ipsum dolor sit amet consectetur
adipisicing elit. Et quam est quia molestiae, accusantium minus aliquam
impedit nulla ratione neque libero amet maiores incidunt autem. Voluptas
repellat iste dignissimos iure. Minus dolorem doloremque, exercitationem
dolore consequatur perspiciatis fuga iste, maiores dolorum ipsa soluta
similique mollitia sequi possimus quaerat quo quia voluptas explicabo
nam? Nostrum suscipit, quas quis molestiae quod tempore?Lorem ipsum
dolor sit amet consectetur adipisicing elit. Et quam est quia molestiae,
accusantium minus aliquam impedit nulla ratione neque libero amet
maiores incidunt autem. Voluptas repellat iste dignissimos iure. Minus
dolorem doloremque, exercitationem dolore consequatur perspiciatis fuga
iste.
</aside>
</div>
<footer id="footer">
Lorem ipsum dFooterolor sit amet consectetur adipisicing elit. At
architecto quasi aliquam magnam doloribus laboriosam adipisci officiis
amet qui, dolorum odit culpa ullam voluptatem mollitia, quidem temporibus
commodi voluptates veniam. Lorem ipsum dolor, sit amet consectetur
adipisicing elit. Earum pariatur eveniet aspernatur sed atque porro ipsum
iusto veritatis temporibus. Qui, eveniet modi? Neque aliquid nemo aperiam
delectus, est tenetur possimus.
</footer>
<script type="module" src="script.js"></script>
</body>
</html>