-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
130 lines (128 loc) · 5.03 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>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Weather Dashboard</title>
<meta name="description" content="Weather search app" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="style.css" />
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.12.1/css/all.css"
crossorigin="anonymous"
/>
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
/>
</head>
<body>
<!-- header bar -->
<header class="row">
<section class="col-md-4"></section>
<h1 class="col-md-4">Weather Dashboard</h1>
<section class="col-md-4"></section>
</header>
<br />
<!-- main page -->
<container class="row">
<div class="col-md-1"></div>
<!-- search box and previous city list -->
<container class="col-md-3">
<div class="row">
<h4 class="col-md 12">Search for a City:</h4>
</div>
<!-- SEARCH BOX -->
<div id="searchBox" class="input-group md-form form-sm form-2 pl-0">
<input
class="form-control my-0 py-1 red-border"
type="text"
placeholder="Search"
aria-label="Search"
/>
<div id="searchBtn" class="input-group-append">
<span class="input-group-text red lighten-3" id="basic-text1"
><i class="fas fa-search text-grey" aria-hidden="true"
>Search</i
></span
>
</div>
</div>
<br />
<section class="col-md-12" id="buttonList">
<!-- placeholders for 'last cities viewed' list/buttons -->
<button class="row" id="btnOne">Last viewed city</button>
</section>
</container>
<!-- right column with city weather and 5 day forecast -->
<container class="col-md-8">
<!-- contains detailed summary of dayZero's weather in the selected city -->
<container class="row" id="weatherDayZero">
<div class="row">
<div class="col-md-12">
<br />
<h3 id="cityName">Current City - Date&Time</h3>
<i class="row" id="conditionsIcon0"></i>
<hr />
<p id="currentTemp">Temperature:</p>
<p id="currentHumidity">Humidity:</p>
<p id="currentWind">Wind Speed:</p>
<p id="currentUV">
UV Index: *highlight color tells severity of index*
</p>
</div>
</div>
</container>
<br />
<!-- Forecast Heading: stays constant -->
<h3 class="row" id="forecastHeading">5-Day Forecast:</h3>
<!-- 5-Day Forecast boxes -->
<container class="row" id="forecastSection">
<container class="col-md-2" id="dayOne">
<div class="row foreCastHeader" id="dateDay1">date dayOne</div>
<i class="row" id="conditionsIcon1"></i>
<div class="row" id="oneTemp">Temp:</div>
<div class="row" id="oneHumidity">Humidity:</div>
</container>
<container class="col-md-2" id="dayTwo">
<div class="row foreCastHeader" id="dateDay2">date dayTwo</div>
<i class="row" id="conditionsIcon2"></i>
<div class="row" id="twoTemp">Temp:</div>
<div class="row" id="twoHumidity">Humidity:</div>
</container>
<container class="col-md-2" id="dayThree">
<div class="row foreCastHeader" id="dateDay3">date dayThree</div>
<i class="row" id="conditionsIcon3"></i>
<div class="row" id="threeTemp">Temp:</div>
<div class="row" id="threeHumidity">Humidity:</div>
</container>
<container class="col-md-2" id="dayFour">
<div class="row foreCastHeader" id="dateDay4">date dayFour</div>
<i class="row" id="conditionsIcon4"></i>
<div class="row" id="fourTemp">Temp:</div>
<div class="row" id="fourHumidity">Humidity:</div>
</container>
<container class="col-md-2" id="dayFive">
<div class="row foreCastHeader" id="dateDay5">date dayFive</div>
<i class="row" id="conditionsIcon5"></i>
<div class="row" id="fiveTemp">Temp:</div>
<div class="row" id="fiveHumidity">Humidity:</div>
</container>
</container>
</container>
</container>
<!-- various used scripts -->
<script
src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.28.0/moment-with-locales.min.js"
integrity="sha512-kcvf1mExE8WCOLBL5re/9hLUHfaj8+LQrKlupTarmme+rwv8asLK4q6Ge32trTMBElPBP5sll4czZKNvps0VvA=="
crossorigin="anonymous"
></script>
<script
src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
crossorigin="anonymous"
></script>
<script src="script.js" async defer></script>
</body>
</html>