-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
130 lines (117 loc) · 6.08 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://bootswatch.com/4/lux/bootstrap.min.css">
<link rel="stylesheet" href="Assets/style.css" />
<title>Weather Dashboard</title>
</head>
<body>
<!-- NavBar -->
<nav class="navbar">
<h1 class="navbar-brand mb-0 h1">Weather Dashboard</h1>
</nav>
<!-- End NavBar -->
<section class="container">
<!-- Search For City -->
<section class="row">
<section class="col-lg-3 mt-4">
<section class="container searchSection">
<h5 class="searchHeader ">Search City Name</h5>
<form class="form-inline">
<div class="form-group">
<label for="userInput" class="sr-only">City Name</label>
<input type="search" class="form-control border border-dark" id="userInput"
placeholder="City Name">
</div>
</form>
<button type="submit" class="btn btn-primary mt-2" id="searchBtn">Search Weather</button>
<!-- End of Search Box -->
<!-- History of Cities -->
<p id="city-list-prepend"></p>
<button class="btn btn-primary mt-2 pt-2" type="button" id="clear-history">Clear History</button>
</section>
</section>
<!-- Last City Searched/Current Weather -->
<section class="col-lg-9">
<section class="row">
<div class="col border border-dark m-3 mt-3 p-4 rounded" id="mainW">
<div class="row">
<div class="col-12 mt-3">
<h3 id="currentCityName">Please Enter a City!</h3>
<h4 class="cityName"></h4>
<img id="wIcon" src="./Assets/images/cloud+day+forecast+lightning+shine+storm+sun+weather+icon-1320183295537909806_64.png" alt="Weather icon">
</div>
</div>
<section class="row">
<section class="col-12">
<h4 id="temp">Temperature</h4>
</section>
</section>
<section class="row">
<section class="col-12">
<h4 id="hum">Humidity</h4>
</section>
</section>
<section class="row">
<section class="col-12">
<h4 id="wind">Wind Speed</h4>
</section>
</section>
<section class="row">
<section class="col-12 mb-3">
<h4 id="uv">UV Index</h4>
</section>
</section>
</div>
</section>
<!-- The Start of 5 Day Forecast -->
<section class="row">
<section class="col-sm-11 mt-0 pt-0">
<h4> 5 Day Forecast </h4>
</section>
</section>
<!-- 5 Day Forecast -->
<section class="row">
<section class="col-sm border m-1 p-1 border-dark rounded" id="d1">
<h5 id="nextDay">(00/00/2020)</h5>
<p><img id="wIcon1" src="./Assets/images/cloud+day+forecast+lightning+shine+storm+sun+weather+icon-1320183295537909806_64.png" alt="Weather icon"></p>
<p id="temp1">Temperature</p>
<p id="hum1">Humidity</p>
</section>
<section class="col-sm border m-1 p-1 border-dark rounded" id="d2">
<h5 id="day2">(00/00/2020)</h5>
<p><img id="wIcon2" src="./Assets/images/cloud+day+forecast+lightning+shine+storm+sun+weather+icon-1320183295537909806_64.png" alt="Weather icon"></p>
<p id="temp2">Temperature</p>
<p id="hum2">Humidity</p>
</section>
<section class="col-sm border m-1 p-1 border-dark rounded" id="d3">
<h5 id="day3">(00/00/2020)</h5>
<p><img id="wIcon3" src="./Assets/images/cloud+day+forecast+lightning+shine+storm+sun+weather+icon-1320183295537909806_64.png" alt="Weather icon"></p>
<p id="temp3">Temperature</p>
<p id="hum3">Humidity</p>
</section>
<section class="col-sm border m-1 p-1 border-dark rounded" id="d4">
<h5 id="day4">(00/00/2020)</h5>
<p><img id="wIcon4" src="./Assets/images/cloud+day+forecast+lightning+shine+storm+sun+weather+icon-1320183295537909806_64.png" alt="Weather icon"></p>
<p id="temp4">Temperature</p>
<p id="hum4">Humidity</p>
</section>
<section class="col-sm border m-1 p-1 border-dark rounded" id="d5">
<h5 id="day5">(00/00/2020)</h5>
<p><img id="wIcon5" src="./Assets/images/cloud+day+forecast+lightning+shine+storm+sun+weather+icon-1320183295537909806_64.png" alt="Weather icon"></p>
<p id="temp5">Temperature</p>
<p id="hum5">Humidity</p>
</section>
</section>
</section>
</section>
</section>
<!-- End of 5 Day -->
<!-- Scripts -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script type="text/javascript" src="Assets/script.js"></script>
</body>
</html>