-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
156 lines (133 loc) · 5.22 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
<!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 Dashboard</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<link rel="stylesheet" href="./assets/style.css">
</head>
<body>
<div id="page">
<header>
<div class="hero-body">
<p class="title" id="weatherdash">
Weather Dashboard
</p>
<h2 id="date"></h2>
</div>
</div>
</header>
<div class="container-fluid">
<div class="row">
<div id="searchdiv" class="col-sm-4">
<div id="entercity">
Enter the name of a <strong>city</strong>:
<div class="input-group mb-3">
<input class="input is-normal" id="city-input" type="text" placeholder="">
<div class="input-group-append">
<button type='submit' class="button is-info" id="search">Search</button>
</div>
</div id="pending">
<p>Recent Searches</p>
<table id="history" class="table">
<tr></tr>
</table>
<button class=button id="clear">Clear</button>
</div>
</div>
<div class="col-sm-8">
<div class="row ml-2">
<div class="col-sm-12">
<section id="maindetails">
<h1 id="city-name">Today's Weather</h1>
<h2 id="icon"></h2>
<p id="todaydetails">
<div id="conditions">Current Conditions</div>
<div id="temperature">Temperature</div>
<div id="tempMax">Max Temp</div>
<div id="tempMin">Min Temp</div>
<div id="humidity">Humidity</div>
<div id="wind">Wind Speed</div>
</p>
</div>
</div>
<div class="col-sm-12">
<div id="5dayfor">
<div id="alookahead">
<h1 id="alh">A Look Ahead</h1>
<div class="row">
<div class="tile is-ancestor" id="fiveresults">
<div class="tile is-parent">
<article id="day1tile" class="tile is-child box">
<h2 id="day1">Day One</h2>
<div id="d1i">Icon</div>
<div id="d1c">Expected Conditions:</div>
<div id="d1ht">High Temp:</div>
<div id="d1lt">Low Temp:</div>
<div id="d1h">Humidity:</div>
<div id="d1ws">Wind Speed:</div>
</article>
</div>
<div class="tile is-parent">
<article id="day2tile" class="tile is-child box">
<h2 id="day2">Day Two</h2>
<div id="d2i">Icon</div>
<div id="d2c">Expected Conditions:</div>
<div id="d2ht">High Temp:</div>
<div id="d2lt">Low Temp:</div>
<div id="d2h">Humidity:</div>
<div id="d2ws">Wind Speed:</div>
</article>
</div>
<div class="tile is-parent">
<article id="day3tile" class="tile is-child box">
<h2 id="day3">Day Three</h2>
<div id="d3i">Icon</div>
<div id="d3c">Expected Conditions:</div>
<div id="d3ht">High Temp:</div>
<div id="d3lt">Low Temp:</div>
<div id="d3h">Humidity:</div>
<div id="d3ws">Wind Speed:</div>
</article>
</div>
<div class="tile is-parent">
<article id="day4tile" class="tile is-child box">
<h2 id="day4">Day Four</h2>
<div id="d4i">Icon</div>
<div id="d4c">Expected Conditions:</div>
<div id="d4ht">High Temp:</div>
<div id="d4lt">Low Temp:</div>
<div id="d4h">Humidity:</div>
<div id="d4ws">Wind Speed:</div>
</article>
</div>
<div class="tile is-parent">
<article id="day5tile" class="tile is-child box">
<h2 id="day5">Day Five</h2>
<div id="d5i">Icon</div>
<div id="d5c">Expected Conditions:</div>
<div id="d5ht">High Temp:</div>
<div id="d5lt">Low Temp:</div>
<div id="d5h">Humidity:</div>
<div id="d5ws">Wind Speed:</div>
</article>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
<script src="./assets/script.js"></script>
</body>
</html>