-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
130 lines (121 loc) · 5.84 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">
<title>Weather Dashboard</title>
<link rel="shortcut icon" href="./images/icon.png" type="image/x-icon">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<!-- Linking Font awesome -->
<script src="https://kit.fontawesome.com/c939d0e917.js"></script>
<!-- JQuery CDN -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<!-- Moment.js CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.27.0/moment.min.js"
integrity="sha512-rmZcZsyhe0/MAjquhTgiUcb4d9knaFc7b5xAfju483gbEXTkeJRUMIPk6s3ySZMYUHEcjKbjLjyddGWMrNEvZg=="
crossorigin="anonymous"></script>
</head>
<body>
<header>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand text-center" href="#">Weather Dashboard</a>
</nav>
</header>
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-6 col-12 jumbotron">
<h3>Search for a city:</h3>
<form class="form-inline">
<input class="form-control" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-primary my-2 my-sm-0" type="submit"><i class="fas fa-search"></i></button>
</form>
<div class="search-results">
<ul class="results-list">
</ul>
</div>
<br>
<table class="table">
<tbody>
</tbody>
</table>
</div>
<div class="col-lg-9 col-md-6 col-12 main">
<div class="row">
<div class="col">
<div class="card">
<div class="card-body">
<h2 class="card-title" id='city'>City, Country</h2>
<h4 class="card-subtitle mb-2 text-muted " id='temp'>Temperature:</h4>
<h4 class="card-subtitle mb-2 text-muted" id='humidity'>Humidity:</h4>
<h4 class="card-subtitle mb-2 text-muted" id='wind'>Wind Speed:</h4>
<h4 class="card-subtitle mb-2 text-muted" id='uv'>UV Index:</h4>
</div>
</div>
</div>
</div>
<div class="row">
<h2> 5-Day Forecast:</h2>
</div>
<div class="row">
<div class="col-lg col-md-6 col-6 ">
<div class="card bg-primary">
<h3 class='day1 text-center'>Date</h3>
<img src="" alt="weather image" class="card-img-top day1">
<div class="card-body">
<p class="card-text day1"></p>
</div>
</div>
</div>
<div class="col-lg col-md-6 col-6 ">
<div class="card bg-primary">
<h3 class='day2 text-center'>Date</h3>
<img src="" alt="weather image" class="card-img-top day2">
<div class="card-body">
<p class="card-text day2"></p>
</div>
</div>
</div>
<div class="col-lg col-md-6 col-6">
<div class="card bg-primary">
<h3 class='day3 text-center'>Date</h3>
<img src="" alt="weather image" class="card-img-top day3">
<div class="card-body">
<p class="card-text day3"></p>
</div>
</div>
</div>
<div class="col-lg col-md-6 col-6">
<div class="card bg-primary">
<h3 class='day4 text-center'>Date</h3>
<img src="" alt="weather image" class="text-center day4">
<div class="card-body">
<p class="card-text day4"></p>
</div>
</div>
</div>
<div class="col-lg col-md-6 col-6">
<div class="card bg-primary">
<h3 class='day5 text-center'>Date</h3>
<img src="" alt="weather image" class="text-center day5">
<div class="card-body">
<p class="card-text day5"></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Bootstrap Scripts -->
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
crossorigin="anonymous"></script>
<script src="./app.js"></script>
</body>
</html>