Local Weather App

index.html

<div class="w3-container" id="background">
  <div class="container-fluid">
    <center><div class="container-fluid">
      <div class="row w3-container w3-padding-hor-8 w3-xlarge"><h1>Weather Forecast</h1></div>
      <div class="row w3-container w3-padding-hor-8"><h2 class="btn" id="description">Today's weather:</h2></div>
      <div class="row w3-container w3-padding-hor-8"><button class="w3-btn w3-round-large" id="temp">Temp:</button></div>
      <div class="row w3-container w3-padding-hor-8"><h4 id="icon">Icon:</h4></div>
      <div class="row w3-container w3-padding-hor-8"><h5 id="city">City:</h5></div>
      <div class="row w3-container w3-padding-hor-8"><h6 id="name">Created By: <a href="https://codepen.io/devopsec/" target="_blank"><span>DevOpSec</span></h6></div>
      </center></div>
  </div>
</div>

Local Weather App.markdown

Local Weather App

A cool web app to find your local weather conditions.

A Pen by Tyler Moore on CodePen.

License.

script.js

$(document).ready(function() {
  var weather;
  var coord;
  var weatherHTTP = "";
  var options = {
    enableHighAccuracy: false,
    timeout: 8000,
    maximumAge: 0
  };
  
  $("body").addClass("w3-dark-grey");
  
  function error(err) {
    console.warn('ERROR(' + err.code + '): ' + err.message);
    window.alert("could not find location");
};
  
  function success(pos) {
    coord = pos.coords;
 
    weatherHTTP = "http://api.openweathermap.org/data/2.5/weather?lat=" + coord.latitude + "&lon=" + coord.longitude + "&APPID=d2d5c7a36913502ee0887bb99c5edf1f";
    
      $.getJSON(weatherHTTP, function(data) {
        $("#description").text(data.weather[0].description);
        var tempNum = Math.round(data.main.temp - 273.15);
        var tempText = tempNum + "&#x2103";
        $("#temp").html(tempText);
        var iconHTTP = "<img src=\"" + "http://openweathermap.org/img/w/" + data.weather[0].icon + ".png\"></img>";
        $("#icon").html(iconHTTP);
        $("#city").text(data.name);
    });
};

$("#temp").on("click", function() {
  var degree = document.getElementById("temp").innerHTML;
  console.log(degree);
  var degreeC, degreeF, tempNum, tempText;
  var regexF = /\u2109/i, regexC = /\u2103/i;
  var regexTestC = regexC.exec(degree);
  var regexTestF = regexF.exec(degree);
  if (regexTestC !== null) {
    degreeC = degree.replace("\u2103", "");
    console.log(degreeC);
    degreeF = parseInt(degreeC) * 9 / 5 + 32;
    tempNum = Math.round(degreeF);
    console.log(tempNum);
    tempText = tempNum + "&#x2109";
    console.log(tempText);
    $("#temp").html(tempText);
  }
  else if	(regexTestF !== null) {
    degreeF = degree.replace("\u2109", "");
    console.log(degreeF);
    degreeC = (parseInt(degreeF) - 32) * 5 / 9;
    tempNum = Math.round(degreeC);
    tempText = tempNum + "&#x2103";
    $("#temp").html(tempText);
    }
  else {
    console.warn("no matching conditional statements");
  }
});
navigator.geolocation.getCurrentPosition(success, error, options);
}); 

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>

style.scss

* {
    box-sizing: border-box;
}
body {
   margin: auto; height: 100%; overflow: hidden;
  padding: auto; width: auto; height: auto;
   background-position: center center;
   background-size: cover;  background-attachment: fixed;
}

.container-fluid {
  margin-top: auto;
}
h1 {
  text-shadow: 1px 1px 2px #222222;
  font-family: 'Oswald', sans-serif;
  margin-top: auto; padding-top: 40px;
}
#temp {
  margin-top: 20px; margin-bottom: 10px;
}