Weather_App/index.html at main · Alexfit4/Weather_App · GitHub

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
<!DOCTYPE html>
<html lang="en">
	<head>
		<!-- Required meta tags -->
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<link rel="preconnect" href="https://fonts.gstatic.com" />
		<link
			href="https://fonts.googleapis.com/css2?family=Oswald:wght@500&display=swap"
			rel="stylesheet"
		/>
<!-- Font Awesome Styling -->
		<link
			rel="stylesheet"
			href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css"
		/>

		<link
			rel="stylesheet"
			href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
		/>

		<!-- Bootstrap CSS -->
		<link
			href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
			rel="stylesheet"
			integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1"
			crossorigin="anonymous"
		/>
		<!-- My style sheet -->
		<link rel="stylesheet" href="./Assets/style.css" />
		<title>Weather Dashboard</title>
	</head>

	<body>
		<nav class="navbar navbar-dark bg-dark">
			<span class="navbar-brand mb-0 h1 w-100 text-center"
				>Weather Dashboard</span
			>
		</nav>
		<main class="container">
			<div class="row">
				<div class="col-4 bg-light">
					<p class="search-header my-1">Search for a city</p>
					<div class="input-group mb-3">
						<input
							id="location"
							type="text"
							class="form-control"
							placeholder="Enter city name"
							aria-label="Enter city name"
						/>
						<div class="input-group-append">
							<button class="btn btn-primary" type="button" id="submit">
								<i class="fas fa-search"></i>
							</button>
						</div>
					</div>
					<ol></ol>
					<button class="btn btn-primary mb-3" type="button" id="clear-history">
						Clear history
					</button>
					<form id="history"></form>
				</div>
				<div class="col-8">
					<div class="row mr-0">
						<div class="col-12 border border-dark m-3 rounded">
							<h1>Today's Weather</h1>
							<!-- All the info is shown here -->
							<div id="outputData"></div>
							<div id="newUV"></div>
						</div>
					</div>
					<div class="row">
						<div class="col-12">

						<!-- 5 day forecast output -->
							<h3>5-Day Forecast</h3>
						</div>
						<div class='fiveDay'></div>
					</div>
					<div class="row">

						<div class="output2"></div>
						<div id="dates"></div>
							<div class="outputnum"></div>
						</div>
					</div>
				</div>
			</div>
		</main>

		<!-- Bootstrap core JavaScript -->
		<script
			src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
			integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW"
			crossorigin="anonymous"
		></script>

		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

		<script src="https://unpkg.com/[email protected]/dayjs.min.js"></script>

		<script src="./script/script.js"></script>

		<!-- Menu Toggle Script -->
	</body>
</html>