-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
128 lines (125 loc) · 4.38 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Weather</title>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous"
/>
<script src="https://cdn.jsdelivr.net/npm/axios@1.1.2/dist/axios.min.js"></script>
<style>
.app {
margin: 10%;
}
.container {
max-width: 55%;
}
</style>
<link rel="stylesheet" href="styles.css" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Merienda:wght@300&display=swap"
rel="stylesheet"
/>
</head>
<body id="background">
<div class="container">
<div class="app border-0 rounded-lg" id="app">
<div class="row mt-2 mr-1 mb-3">
<div class="col-1"></div>
<h1 class="col-5 mb-0 pb-0" id="city"></h1>
<form class="col-6" id="search-form">
<div class="form-group">
<input
type="text"
class="form-control search-city"
id="exampleInputPassword1"
placeholder="Change city"
/>
</div>
</form>
</div>
<div class="row">
<div class="col-2"></div>
<h1 class="col-2"><span id="temp0"></span>°</h1>
<div class="col-4"></div>
<div class="col-1 min-max">
<span id="temp1"></span>°/<span id="temp2"></span>°
</div>
</div>
<div class="row mb-0">
<div class="col-6 mr-4 wind">Wind: <span id="wind"></span>Km/h</div>
<img src="" class="col-3 ml-5" id="icon0" />
</div>
<div class="row">
<div class="col-5 ml-3 time">Time: <span id="time"></span></div>
</div>
<div class="row">
<div class="col-6 mr-1 convert">
<a href="#disable" id="celsius">C°</a> |
<a href="#disable" id="fahrenheit">F°</a>
</div>
<div class="col-5 ml-3" id="con0"></div>
</div>
<!-- celsius-fahrenheit and current condition -->
<!-- -->
<!-- forecast days -->
<div class="row">
<div class="col-3">Tomorrow</div>
<div class="col-3" id="day2"></div>
<div class="col-3" id="day3"></div>
<div class="col-3" id="day4"></div>
</div>
<div class="row min-max-f">
<div class="col-3">
<span id="temp3"></span>°/<span id="temp4"></span>°
</div>
<div class="col-3">
<span id="temp5"></span>°/<span id="temp6"></span>°
</div>
<div class="col-3">
<span id="temp7"></span>°/<span id="temp8"></span>°
</div>
<div class="col-3">
<span id="temp9"></span>°/<span id="temp10"></span>°
</div>
</div>
<div class="row">
<img src="" class="col-3" id="icon1" />
<img src="" class="col-3" id="icon2" />
<img src="" class="col-3" id="icon3" />
<img src="" class="col-3" id="icon4" />
</div>
<div class="row">
<div class="col-3 condition" id="con1"></div>
<div class="col-3 condition" id="con2"></div>
<div class="col-3 condition" id="con3"></div>
<div class="col-3 condition" id="con4"></div>
</div>
</div>
<!-- footer -->
<div class="source-code">
<a
id="github"
href="https://github.com/Piyush-t24/Weather_app_project"
target="_blank"
>Source code</a
>
<div class="w-100"></div>
<a id="api-adress" href="https://sunrisesunset.io" target="_blank"
>powered by SunriseSunset.io</a
>
<footer class="text-center m-10">
Made with 🖤 by Piyush Gupta 😎
</footer>
</div>
</div>
<script src="script.js"></script>
</body>
</html>