code-differently · nsatinover · Feb 1, 2021 · Feb 1, 2021 · Feb 2, 2021 · Feb 2, 2021
diff --git a/.DS_Store b/.DS_Store
diff --git a/css/custom.css b/css/custom.css
@@ -0,0 +1,56 @@
+ header,
+ main
+ {
+    border: solid black 1px;
+    padding: .5em;
+ }
+
+ header {
+    grid-area: header;
+    background-color: rgb(220, 227, 233);
+ }
+
+ main {
+    grid-area: main;
+    background-color: aliceblue;
+    padding-top: 20px;
+ }
+
+ #zipCode {
+     width: 6em;
+ }
+
+ #forecast {
+    width: 100%;
+    display: flexbox;
+    flex-direction: row;
+    color: grey;
+ }
+
+ #temperature{
+    font-size: 2em;
+ }
+
+ img {
+    width: 50px;
+    height: 50px;
+    display: block;
+    margin: auto;
+    padding-bottom: 5px;
+ }
+
+ #imgForTemp {
+   width: 150px;
+   height: 150px;
+   display: inline-block;
+   margin: auto;
+   padding: 15px;
+ }
+
+ .container {
+    grid-template-columns: 1fr;
+    grid-template-rows: minmax(200px, auto) minmax(200px, auto);
+    grid-template-areas: 
+    "header" 
+    "main";
+ }
diff --git a/imgs/.DS_Store b/imgs/.DS_Store
diff --git a/imgs/clear.jpeg b/imgs/clear.jpeg
diff --git a/imgs/cloudy.jpeg b/imgs/cloudy.jpeg
diff --git a/imgs/lightsnow.jpeg b/imgs/lightsnow.jpeg
diff --git a/imgs/mcloudy.jpeg b/imgs/mcloudy.jpeg
diff --git a/imgs/partlycloudy.jpeg b/imgs/partlycloudy.jpeg
diff --git a/imgs/rain.jpeg b/imgs/rain.jpeg
diff --git a/imgs/snow.jpeg b/imgs/snow.jpeg
diff --git a/imgs/thunderstorm.jpeg b/imgs/thunderstorm.jpeg
diff --git a/imgs/thunderstormwithrain.jpeg b/imgs/thunderstormwithrain.jpeg
diff --git a/index.html b/index.html
@@ -1,11 +1,43 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Document</title>
+    <title>Weather App</title>
+    <!-- Bootstrap CSS -->
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css"
+        integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
+    <link rel="stylesheet" href="css/custom.css">
 </head>
+
 <body>
-    <h1>Hola Mundo</h1>
+    <div class="container">
+        <header>
+            <h1 id="title" class="text-center">Weather App</h1>
+
+        </header>
+
+        <main>
+
+            <label id="location"></label>            
+            <hr>
+
+            <label for="">Temperature: </label>
+            <label id="temperature"></label>
+            <img id="imgForTemp">
+
+            <hr>
+            <p>Forecast:</p>
+            <div id="forecast"></div>
+        </main>
+
+    </div>
+
+    <!-- jQuery first, then Popper.js, then Bootstrap JS, then local js file -->
+    <script src="http://code.jquery.com/jquery-3.5.1.min.js"
+        integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>     
+    <script src="js/plugins.js"></script>
 </body>
+
 </html>
diff --git a/js/plugins.js b/js/plugins.js
@@ -0,0 +1,114 @@
+/// <reference path="../typings/globals/jquery/index.d.ts" />
+
+let weatherTemp;
+let weekdays = { 0 : "Sunday", 1 : "Monday", 2 : "Tuesday", 3 : "Wednesday", 4 : "Thursday", 5 : "Friday", 6 : "Saturday" };
+
+
+$(document).ready(function() {
+    $forecast = $('#forecast');
+    $($forecast).removeClass();
+
+    const watchId = navigator.geolocation.watchPosition(successCallback, errorCallback);
+});
+
+const successCallback = (position) => {
+    let longitude = position.coords.longitude;
+    let latitude = position.coords.latitude;
+
+    GetWeather(longitude, latitude);
+    DisplayLocation(longitude, latitude);
+    NextSevenDays();
+};
+
+const errorCallback = (error) => {
+    console.log(error);
+};
+
+
+function GetWeather(longitude, latitude) {
+    let product = "civillight";
+    let output = "json";
+
+    let client = new XMLHttpRequest();
+
+    client.open("GET", `http://www.7timer.info/bin/api.pl?lon=${longitude}&lat=${latitude}&product=${product}&output=${output}`, false);
+
+    client.overrideMimeType("application/document");
+
+    if (client.onreadystatechange = function () {
+
+        if (client.readyState == 4) {
+            let response = JSON.parse(client.responseText);
+            weatherTemp = response.dataseries;
+            console.log(weatherTemp);
+            $('#temperature').text(ConvertToFaranHeight(response.dataseries[0].temp2m.max));
+            $('#imgForTemp').attr("src", `imgs/${weatherTemp[0].weather}.jpeg`);
+        }
+
+    });
+
+    client.send();
+}
+
+function ConvertToFaranHeight(celcius) {
+    return (celcius * 9 / 5) + 32;
+}
+
+function DisplayLocation(longitude, latitude){
+
+    const request = new XMLHttpRequest();
+
+    const method = 'GET';
+    const url = `https://api.bigdatacloud.net/data/reverse-geocode-client?latitude=${latitude}&longitude=${longitude}&localityLanguage=en`;
+    const async = false;
+
+    request.open(method, url, async);
+    request.onreadystatechange = function(){
+      if(request.readyState == 4 && request.status == 200){
+        const data = JSON.parse(request.responseText);
+        const localLocation = data.city.length > 0 ? data.city : data.locality;
+        const country = data.countryCode;
+        $('#location').text(`${localLocation}, ${country}`);
+      }
+    };
+    request.send();
+
+  };
+
+function NextSevenDays() {
+    const $forecast = $('#forecast');
+    $forecast.html("");
+    const todaysDate = new Date().getDay();
+
+
+    let i = todaysDate;
+    let k = 0;
+    for(; i < 7; i++){
+        SetCard(i, weatherTemp[k].temp2m.min, weatherTemp[k].temp2m.max, weatherTemp[i].weather);
+        k++;
+    }
+    for(let j = 0; j < todaysDate; j++){
+        SetCard(j, weatherTemp[k].temp2m.min, weatherTemp[k].temp2m.max, weatherTemp[j].weather);
+        k++;
+    }
+
+
+}
+
+function SetCard(day, min, max, weatherPic) {
+    $forecast.append(
+        `
+        <div class="card" style="width: calc(95% / 7);">
+            <h6 class="card-title" style="padding-top: 5px">${weekdays[day].substring(0, 3)}</h6>
+
+            <div class="card-body">
+                <img src="imgs/${weatherPic}.jpeg" alt="${weatherPic}">
+                <span class="card-text" style="font-weight: bold;">${ConvertToFaranHeight(max)}\u00B0</span>
+                <span class="card-text">${ConvertToFaranHeight(min)}\u00B0</span>
+            </div>
+        </div>
+        `
+    );
+
+    $forecast.addClass("d-inline-flex justify-content-around text-center");
+}