code-differently · koggenfuss · Jan 31, 2021 · Jan 31, 2021 · Jan 31, 2021 · Jan 31, 2021
diff --git a/index.html b/index.html
@@ -3,9 +3,14 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Document</title>
+    <link rel="stylesheet" href="style.css">
+    <title>Weather App</title>
 </head>
-<body>
-    <h1>Hola Mundo</h1>
+<body> 
+    <div class="container">
+        <h1 class="cityState">Hola Mundo!</h1>
+        <h1 class="temperature">Temperature</h1>
+    </div>    
 </body>
-</html>
+<script src="weather.js"></script>
+</html>
diff --git a/indexTemp.html b/indexTemp.html
@@ -0,0 +1 @@
+
diff --git a/package-lock.json b/package-lock.json
diff --git a/style.css b/style.css
@@ -0,0 +1,24 @@
+body {
+    display: block;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    font-size: 1 rem;
+}
+
+h1 {
+    display: inline;
+}
+
+.container {
+    display: grid;
+}
+.cityState {
+    justify-self: start;
+    padding-left: 100px;
+    font-size: 2rem;
+}
+
+.temperature {
+    justify-self: end;
+    padding-right: 100px;
+    font-size: 3rem;
+}
diff --git a/weather.js b/weather.js
@@ -0,0 +1,48 @@
+/* DOM Elements */
+
+const cityState = document.querySelector(".cityState");
+const temperature = document.querySelector(".temperature");
+
+
+/* Helper Functions */
+function convertTemp(temp) {
+  const celsius = temp -273;
+  let fahrenheit = Math.floor(celsius * (9/5) + 32);
+  return fahrenheit;
+}
+
+
+/*  Fetch Functions */
+
+// Fetch location using Geolocator as shown in https://www.youtube.com/watch?v=Xd43hZKaUS0&feature=youtu.be
+    const successfulLookup = async (position) => {
+        try {
+          const {latitude, longitude} = position.coords;
+          const response = await fetch(`https://api.opencagedata.com/geocode/v1/json?q=${latitude}+${longitude}&key=68824d84dff94b6a8921c156b462a3d1`)
+          const data = await response.json();
+          const city1 = data.results[0].components.city;
+          const stateData = data.results[0].components.state_code;
+          cityState.textContent = `${city1}, ${stateData}`;
+          console.log(latitude, longitude)
+          currentTemp(latitude, longitude);
+        }
+        catch(error) {
+          console.log(error);
+        }
+}
+
+
+// Fetch weather at openweathermap api
+    const currentTemp = async (latitude, longitude) => {
+      try {
+        const temp = await fetch(`https://api.openweathermap.org/data/2.5/onecall?lat=${latitude}&lon=${longitude}&exclude=minutely,hourly&exclude={part}&appid=0312d87f192d54ce3485295a535d403f`);
+        const data = await temp.json();
+        console.log(data);
+        let currTemp = convertTemp(data.current.temp);
+        temperature.innerHTML = `${currTemp}&#x2109`;
+      }
+      catch(error) {
+        console.log(error);
+      }
+    }
+    navigator.geolocation.getCurrentPosition(successfulLookup, console.log);