forked from avinash201199/weather-app
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
158 lines (129 loc) · 6.56 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
<!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 Beautiful weather app displaying a weekly weather forecast for the selected location" />
<title>Weather App</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
<!-- favicon -->
<link rel="shortcut icon" type="image/jpg" href="./assets/weather-icon.png" />
<link rel="stylesheet" href="./assets/css/bootstrap.min.css">
<link rel="stylesheet" href="./assets/css/style.css">
<link rel="icon" href="assets/favicon.ico">
<!-- jquery CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
</head>
<body id="body">
<h2 style="color: white; text-align: center; margin-top: 10px; padding: 10px; background-color: gray; width: 75%; margin-left: auto; margin-right: auto; border-radius: 25px;">Today is <span id='date-time'></h2>
<nav class="navbar ">
<a class="navbar-brand" href="#">
<div class="col-auto" style="margin: 10px 20px;">
<input type="checkbox" id="unit" class="checkbox">
<label for="checkbox" class="label">
<span class="celcius">C°</span>
<span class="farenheit">F°</span>
<div class='ball'>
</label>
</div>
</a>
</nav>
<div class="container d-flex justify-content-center align-items-center flex-column">
<div class="card text-white rounded">
<div class="search" >
<input type="text" name="search-bar" class="search-bar" list="place" placeholder="Search" autocomplete="address-level2" />
<datalist id="place">
<!-- Content will be generated By Javascript -->
</datalist>
<button aria-label="click here to search class" class="text-white rounded-circl">
<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 1024 1024" height="1.5em"
width="1.5em" xmlns="http://www.w3.org/2000/svg">
<path
d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0 0 11.6 0l43.6-43.5a8.2 8.2 0 0 0 0-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z">
</path>
</svg>
</button>
</div>
<div id="weather" class="weather loading">
<h1 id="city" class="city-name fw-bold">Weather in ___</h1>
<h2 id="temp" class="city-temperature fw-bold display-1">32°C</h2>
<div>
<div class="weather-desc">
<figure class="weather-icn">
<img class="icon" src="https://openweathermap.org/img/wn/04n.png" alt="" id="icon" />
<figcaption class="text-uppercase text-wrap" id="description">___</figcaption>
</figure>
<div class="AQI">
<div id="AirQuality"><a href="https://en.wikipedia.org/wiki/Thunderstorm">Air Quality</a>:75</div>
<div class="ml-0">(Satisfactory)</div>
</div>
</div>
<div class="d-flex">
<div class="d-flex flex-1 flex-column">
<figure class="d-flex flex-1 flex-row humidity ms-0">
<img src="./assets/icons/humidity.png" alt="" class="humidity-img">
<figcaption id="humidity"><a href="https://en.wikipedia.org/wiki/Humidity">Humidity</a>: 60%</figcaption>
</figure>
<div class="d-flex flex-1 flex-row wind ms-0"><img src="./assets/icons/wind.png" alt="" class="wind-img">
<div id="wind"><a href="https://en.wikipedia.org/wiki/Wind_speed">Wind speed</a>: 6.2 km/h</div>
</div>
</div>
<div class="d-flex flex-1 flex-column">
<figure class="d-flex flex-1 flex-row sunrise me-0 justify-content-end">
<img src="./assets/icons/sunrise (2).png" alt="" class="sunrise-img">
<figcaption id="sunrise"><a href="https://en.wikipedia.org/wiki/Sunrise">Sunrise</a>:5:00AM</figcaption>
</figure>
<figure class="d-flex flex-1 flex-row sunset me-0 justify-content-end"><img src="./assets/icons/sunset (1).png" alt="" class="sunset-img">
<figcaption id="sunset"><a href="https://en.wikipedia.org/wiki/Sunset">Sunset</a>:6:00AM</figcaption>
</figure>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="future-forecast p-2 overflow-hidden text-white w-100">
<div class="weather-forecast transition overflow-hidden " id="weather-forecast">
<div class="weather-forecast-item rounded text-center" id="weather-forecast-item">
<div>Mon</div>
<figure class="forecast-img">
<img src="http://openweathermap.org/img/wn/[email protected]" alt="weather icon">
</figure>
<div>Day - 35.6° C</div>
<div>Night - 25.6° C</div>
<div>view more</div>
</div>
</div>
</div>
</div>
</div>
<!-- toast -->
<div id="toast">
<div class="checkicon"><i class="fas fa-check-square"></i></div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script type="module" src="./assets/js/script.js"></script>
<footer>
<p>
Made with 💝 by Avinash
</p>
</footer>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"
integrity="sha512-qTXRIMyZIFb8iQcfjXWCO8+M5Tbc38Qi5WzdPOYZHIlZpzBHG3L3by84BBBOiRGiEb7KKtAOAs5qYdUiZiQNNQ=="
crossorigin="anonymous" referrerpolicy="no-referrer">
</script>
<script>
var myDate = new Date();
var myDay = myDate.getDay();
var weekday = ['Sunday', 'Monday', 'Tuesday',
'Wednesday', 'Thursday', 'Friday', 'Saturday'
];
document.write("Today is : " + weekday[myDay]);
document.write("<br/>");
document.getElementById('date-time').innerHTML = myDate;
</script>
</html>