-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
118 lines (113 loc) · 4.19 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
<!DOCTYPE html>
<html lang="en">
<head>
<title>Weather App</title>
<link rel = "icon" type = "image/png" href = "icons/icon.png">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"><!--Social Symbols-->
<link href='https://fonts.googleapis.com/css?family=Sarala' rel='stylesheet'>
</head>
<body onload="setTimeout(loadingFunction,3000)">
<!--PRELOADER-->
<div id="loading"></div>
<!--HEADER-->
<header class="heading">
<object data="icons/chancerain.png"></object>
<object data="icons/cloudy.png"></object>
<object data="icons/chancetstorms.png"></object>
<object data="icons/clear.png"></object>
WEATHER APP
<object data="icons/nt_clear.png"></object>
<object data="icons/mostlycloudy.png"></object>
<object data="icons/fog.png"></object>
<object data="icons/chancesnow.png"></object>
</header>
<!--MAIN-->
<main>
<!--IN YOUR LOCATION FROM SENSORS-->
<div class="container">
<div class="app-title"><p>In Your Location From Sensors</p></div>
<div class="notification"></div>
<div class="weather-container1">
<div class="weather-icon"><img src="icons/unknown.png" alt=""></div>
<div class="temperature-value"><p>- °<span>C</span></p></div><br>
<div class="temperature-description"><p> - </p></div>
<div class="location"><p>-</p></div>
</div>
</div>
<br><br>
<!--FOR THE CITY YOU ENTER-->
<div class="container">
<div class="app-title"><p>For The City You Enter</p></div>
<div class="weather-container2"><br>
<div class="input">
<input type="text" placeholder="Enter the city" class="input_text">
<input type="submit" value="Submit" class="submit">
</div>
<div class="display">
<div class="weatherIcon"><img src="icons/unknown.png" alt=""></div>
<h1 class="name" id="name">-</h1>
<p class="temp"></p>
<p class="desc"></p>
</div>
</div>
</div>
<br><br>
<!--TEMPERATURE FORMULAS-->
<div class="container2">
<div class="app-title2"><p>Temperature formulas</p></div>
<div class="weather-container3"><br>
<div class="conversion">
<table>
<tr>
<th>Conversion</th>
<th>Formula</th>
</tr>
<tr>
<td>Celcius To Fahrenheit</td>
<td>(0°C × 9/5) + 32 = 32°F</td>
</tr>
<tr>
<td>Celcius To Kelvin</td>
<td>0°C + 273.15 = 273.15K</td>
</tr>
<tr>
<td>Fahrenheit To Celcius</td>
<td>(0°F - 32) × 5/9 = -17.78°C</td>
</tr>
<tr>
<td>Fahrenheit To Kelvin</td>
<td>(0°F - 32) × 5/9 + 273.15 = 255.372K</td>
</tr>
<tr>
<td>Kelvin To Celcius</td>
<td>0K - 273.15 = -273.1°C</td>
</tr>
<tr>
<td>Kelvin To Fahrenheit</td>
<td>(0K - 273.15) × 9/5 + 32 = -459.7°F</td>
</tr>
</table>
</div>
</div>
</div>
</main>
<br>
<!--FOOTER-->
<footer>
<div class="footer">
<a href="https://www.facebook.com/profile.php?id=100009430533610" target="_blank" title="Facebook"><i class="fa fa-facebook-official" style="font-size:36px"></i></a>
<a href="https://www.instagram.com/kashyapshah09/" target="_blank" title="Instagram"><i class="fa fa-instagram" style="font-size:36px"></i></a>
<a href="https://github.com/kashyap-shah" target="_blank" title="GitHub"><i class="fa fa-github" style="font-size:36px"></i></a>
<a href="https://www.linkedin.com/in/kashyap-shah-635648177" target="_blank" title="LinkedIn"><i class="fa fa-linkedin-square" style="font-size:36px"></i></a>
<a href="https://twitter.com/kashyapshah09" target="_blank" title="Twitter"><i class="fa fa-twitter" style="font-size:36px"></i></a><br>
<p><a href="https://github.com/kashyap-shah/Weather-App">Source Code</a></p>
</div>
</footer>
<script src="app.js"></script>
</body>
</html>