FCC Weather App Project

fcc-weather-app-project.markdown

FCC Weather App Project

Project uses api ip lookup and openweather api to get data on users location and local weather. App doesnt seem to work with https codepen so if there is a problem try switching to http.

A Pen by Benjamin on CodePen.

License.

index.html

<input type='button' value='HELP ME!!!' onclick='newWindowObj.open()'/>
<div class='d-flex justify-content-center'>
  <div id='display'>
  </div>
  <div class='node1'>
    <span class='span1'></span>
  </div>
  <div class='node2'>
    <span id='cel' class='invisible'>C</span><span id='far'>F<span class='tiny'>push me</span></span>
  </div>
  <div class='node3'><span class='span2'></span>
  </div>
</div>

script.js

$(document).ready(function() {
  var APIIP = "http://ip-api.com/json";
  var hour = new Date().getHours();

   var newWindowObj = window.open("", "newWindow","width=500,height=150,top=100,left=100,toolbar=1,location=true,scrollbars=false,menubar=true,resizable=false,personalbar=true");
  newWindowObj.document.write("<p style='background-color:red; border: 1px solid black;'>hello, if the weather isn't showing up....try deleting the -s- in https in the address bar.  If that doesn't work open me up in debugged and that should do the trick. sorry for the inconvience.</p>");
  
  
  
  $.getJSON(
    APIIP,
    //requesting location data
    function(data) {
      var lat = data.lat;
      var lon = data.lon;
      var KEY = "6b214ab071f67d626e6b9e926901e3f9";
      var URL =
        "http://api.openweathermap.org/data/2.5/weather?lat=" +
        lat +
        "&lon=" +
        lon +
        "&appid=" +
        KEY;
      //requesting weather data

      $.getJSON(URL, function(data) {
        var type = data.weather[0].main;
        var id = data.weather[0].id;
        var city = data.name;
        var tempCel = Math.round(data.main.temp - 273.15);
        var tempC = tempCel + "°";
        var weather = data.weather[0].description;
        var tempF = Math.round(tempCel * (9 / 5) + 32) + "°";

        console.log(tempF);
        console.log(id);

        //setting data on page
        $(".span1").text(tempF);
        $(".span2").text(city);

        //want to have one bg for night time
        /*
      if(hour > 5 || hour < 18){
        $('#display').css("background-image", "url ('https://i.kinja-img.com/gawker-media/image/upload/s--EUYvNPnM--/c_scale,f_auto,fl_progressive,q_80,w_800/ke9svxml3ctkvgix59xl.jpg')");
      }
      */
      
        //if black for different types of weather id
        
        //clear sky bg
        if (id === 800 || id ===801) {
          $("#display").css({
            "background-image": "url('http://ak5.picdn.net/shutterstock/videos/1747219/thumb/1.jpg')",
            "background-position": "-80px 10"
          });
        } 
        
        //thunderstorm
        else if (id <= 232 && id >= 200) {
          $("#display").css({
            "background-color": "black",
            "background-image": "url('http://www.clker.com/cliparts/o/9/6/H/6/x/storm-cloud.svg')"
          });
        } 
        
        //rain bg
        else if (id < 532 && id >= 500) {
          $("#display").css({
            "background-image": "url('http://www.hartstoneinn.com/wp-content/uploads/2013/06/rainy_day.jpg')",
            "background-position": "-200px 0"
          });
        } 
        
        //snow bg
        else if (id <= 622 && id >= 600) {
          $("#display").css(
            "background-image",
            "url('http://uiconstock.com/wp-content/uploads/2014/03/Winter_Background.jpg')"
          );
        } 
        
        //cloudy no rain bg
        else if (id <= 804 && id >= 802) {
          $("#display").css({
            "background-color": "lightblue",
            "background-image": "url('http://www.clipartbest.com/cliparts/ncE/BBb/ncEBBbMRi.png')",
            "background-position": "-120px -190px"
          });
        } 
        
        //foggy or hazy bg
        else if (id < 782 && id > 700) {
          $("#display").css({"background-image":"url('http://clipground.com/images/fog-day-clipart-9.jpg')", "background-size": "cover"});
        } 

        //default chicken cartoon bg        
        
        else {
          $("#display").css({
            "background-image": "url('https://www.wpclipart.com/cartoon/animals/bird/bird_cartoons_2/confused_chickens.png')",
            "background-position": "140px 50px"
          });
        }

        //celcius farenheit toggle
        $(".node2").on("click", function() {
          $("#cel, #far").toggleClass("invisible");
          if ($(".span1").text() === tempF) {
            $(".span1").text(tempC);
          } else {
            $(".span1").html(tempF);
          }
        });
      });
    }
  );
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>

style.css

body {
  background-color: rgba(219, 214, 219, 0.39);
}

#display {
  width: 800px;
  height: 500px;
  border: 3px solid black;
  margin: 100px 0;
  border-radius: 50%;
  position: fixed;
  box-shadow: 10px 10px black;
 
}

.node1 {
  width: 300px;
  height: 300px;
  border: 4px solid black;
  border-radius: 50%;
  position: relative;
  left: 470px;
  top: 10px;
  z-index: 10;
  background-color: rgb(254, 252, 148);
  color: black;
  box-shadow: 5px 5px black;
  cursor: default;
}

.node2 {
  width: 200px;
  height: 200px;
  border: 1px solid black;
  border-radius: 50%;
  position: relative;
  left: -300px;
  top: 400px;
  z-index: 10;
  background-color: rgb(254, 252, 148);
  color: black;
  box-shadow: 5px 5px black;
  cursor: pointer;
}

.node3 {
  border: 1px solid black;
  position: relative;
  top: 430px;
  left: 100px;
  height: 100px;
  border-radius: 50px;
  padding: 10px 15px 20px 15px;
  background-color: rgb(254, 252, 148);
  color: black;
  box-shadow: 5px 5px black;
  cursor: default;
}

.span1 {
  font-size: 120px;
  position: relative;
  top: 55px;
  left: 65px;
}

.span2 {
  font-size: 50px;
  position: relative;
}

#cel,
#far {
  font-size: 100px;
  position: relative;
}

#cel {
  top: 30px;
  left: 62px;
}

#far {
  top: 30px;
}

.invisible {
  visibility: hidden;
}

.tiny {
  font-size: 10px;
  border: 1px solid black;
  border-radius: 30px;
  padding: 2px 4px;
  background-color: white;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />