weather

2018-07-10 20:11:24 +01:00
parent 1c2adf84c7
commit 57e091c134
22 changed files with 2309 additions and 0 deletions
--- a/JavaScript/weather-api-resolver/client/css/style.css
+++ b/JavaScript/weather-api-resolver/client/css/style.css
@@ -0,0 +1,55 @@
+@import url('https://fonts.googleapis.com/css?family=Roboto:400,100');
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+body {
+  -webkit-background-size: cover;
+  -moz-background-size: cover;
+  -o-background-size: cover;
+  background-size: cover;
+  background: rgb(245, 245, 245);
+  font-family: 'Roboto', sans-serif;
+  color: #2f2f2f;
+  font-size: 16px;
+}
+
+.container {
+  position: absolute;
+  top: 20px;
+  width: 20%;
+  left: 20%;
+  text-align: center;
+}
+
+.inputs {
+  text-align: left;
+  position: absolute;
+  top: 30px;
+}
+
+.box {
+  position: absolute;
+  left: 100px;
+}
+
+.currently {
+  font-weight: lighter;
+}
+
+.update {
+  background-color: rgb(94, 145, 228); /* Green */
+  border: none;
+  color: white;
+  padding: 15px 32px;
+  text-align: center;
+  text-decoration: none;
+  display: inline-block;
+  font-size: 16px;
+}
+
+.update:hover {
+  background-color: rgb(67, 118, 194);
+}
--- a/JavaScript/weather-api-resolver/client/index.html
+++ b/JavaScript/weather-api-resolver/client/index.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8" />
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <title>Weather</title>
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <link rel="stylesheet" type="text/css" media="screen" href="css/style.css" />
+    </head>
+    <body>
+        <div class="container">
+            <div id="Currently" class="currently"></div>
+            <div class="inputs">
+                <div class="celsius">
+                    Celsius:
+                    <input class="box" type="checkbox" id="celsius" checked>  
+                </div>
+                <div class="long">
+                    longitude:
+                    <input class="box" type="text" id="lat" required>
+                </div>
+                <div class="lat">
+                    latitude: 
+                    <input class="box" type="text" id="long" required>
+                </div> <br>
+                <input class="update" id="update" type="submit" value="Submit" onclick="update();">
+            </div>
+            
+            <script src="./main.js"></script>
+        </div>
+    </body>
+</html>
--- a/JavaScript/weather-api-resolver/client/main.js
+++ b/JavaScript/weather-api-resolver/client/main.js
@@ -0,0 +1,27 @@
+async function update() {
+    let celsius = document.getElementById('celsius').checked;
+    let lat = document.getElementById('lat').value;
+    let long = document.getElementById('long').value;
+
+    if (lat == '' || long == '') {
+        document.getElementById('Currently').innerHTML ='You have not enterd any coordinates';
+        return;
+    }
+
+    let http = new XMLHttpRequest();
+    
+    http.onreadystatechange = function() {
+        document.getElementById('Currently').innerHTML = 'loading...';
+        let response = this.responseText;
+        document.getElementById('Currently').innerHTML = response;
+    }
+
+    let string = '/weather?lat=' + lat + '&long=' + long;
+
+    if (!celsius) {
+        string += '&celsius=false'
+    }
+
+    await http.open('GET', string, true);
+    await http.send();
+}