-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathweather.php
104 lines (96 loc) · 4.14 KB
/
weather.php
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
<!-- WEATHER PAGE
CS 3500 FINAL
WRITTEN BY ADAM POHL -->
<!-- Weather page uses javascript ajax queries to get data from two apis
One api is OpenWeatherMaps, and the other is Wikipedias api
upon a user entering a city name into the box, the javascript will
make a call to OWM to get forecast data while also making a call to wikipedia
to get an image of the city. Unfortunately, for smaller cities, the image is not returned from
the api call. All logic can be found in javascript/weather.js -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Atlas Corporation</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/navbar.css">
<link rel="stylesheet" type="text/css" href="css/weather.css">
<!-- Include jquery and weather.js -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="javascript/weather.js"></script>
</head>
<body>
<div class="container">
<nav class="navbar navbar-expand-sm navbar-dark fixed-top" id="navigation">
<!-- Brand/Logo -->
<a class="navbar-brand" href="index.php">
<img src="images/Company-Logo.png" alt="Atlas Corporation" title="Atlas Corporation">
</a>
<!-- Pages -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="index.php">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="catalog.php">Products</a>
</li>
<li class="nav-item">
<a class="nav-link" href="cart.php">Cart</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="weather.php">Weather</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact_us.html">Contact Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="log_in.html">Log In</a>
</li>
</ul>
</nav>
<!-- End Navbar -->
<!-- Top Page header -->
<h2 class="jumbotron"><b>Atlas Corp API Integrations</b></h2>
<div class="row">
<div class="col-md-12">
<p class="intro">Here at Atlas Corp, we work to provide the best service to our customers and employees.
We do this not only with products, but with live services. We are very proud to say we
have collaborated with OpenWeatherMap to bring this live weather service straight to you.
Simply input your city and click submit to get the current weather in that city. Well known cities
will also
have their image displayed next to the forecast
</p>
</div>
</div> <!-- End row -->
<div class="input-wrapper">
<h2 class="input">CITY NAME</h2>
<input type="text" class="input form-control" id="data">
</div>
<div class="submit">
<input type="submit" class="btn btn-primary">
</div>
<div class="row info">
<div class="col-md-6">
<div class="forecast">
<div class="temp">
<h1>TEMPERATURE</h1>
<h2></h2>
</div>
<div class="weather">
<h1>WEATHER</h1>
<h2></h2>
<img src="" id="icon" alt="">
</div>
</div>
</div>
<div class="col-md-6">
<div class="search-image">
<img id="city" src="">
</div>
</div>
</div>
</div> <!-- End container -->
</body>