weatherAPI (freeCodeCamp)

index.html

  <h1 class="title">weatherAPI</h1>
  <div class="container" id="demo">
  </div>
  <div id="weather"></div>
  <label class="switch">
    <input type="checkbox" checked  id="triggr">
    <span class="slider round"></span>
  </label>
  <script src="js/jquery-3.2.1.min.js"></script>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
  <script src="main.js"></script>

script.js

$(document).ready(function() {
  var link;
  var container = document.getElementById("demo");
  var locObj;
  $(".switch").hide();

  function errorHandler(err) {
    if (err.code == 1) {
      alert("Error: Access is denied!");
    } else if (err.code == 2) {
      alert("Error: Position is unavailable!");
    }
  }
  locObj = {
    getPosition: function(callback) {
      // console.log(this);
      // store getPosition function in var self
      var self = this,
        coordinates = function(position) {
          self.latitude = position.coords.latitude;
          self.longitude = position.coords.longitude;
          callback(self);
        };

      if (navigator.geolocation) {
        // timeout at 60000 milliseconds (60 seconds)
        var options = {
          timeout: 60000
        };
        navigator.geolocation.getCurrentPosition(coordinates, errorHandler, options);
      } else {
        alert("Sorry, browser does not support geolocation!");
      }
    }
  };

  locObj.getPosition(function(locObj) {
    link = "/api/current?lon=" + locObj.longitude + "&lat=" + locObj.latitude;
    // console.log(link);
    loadWeatherData(locObj);
  });


  function loadWeatherData(results) {
    $.ajax({
      url: "https://fcc-weather-api.glitch.me/api/current?lon=" + locObj.longitude + "&lat=" + locObj.latitude,
      type: 'GET',
      dataType: 'json',
      cache: false,

      complete: function(results) {
        // console.log(results);
        // console.log(results.responseJSON);
        $("#demo").html(results.responseJSON.sys.country + ", " + results.responseJSON.name + "<br>" + "<img src='" + results.responseJSON.weather[0].icon + "'>" + "<br>")

        var tempVal = results.responseJSON.main.temp;

        if(tempVal !== undefined) {
          $(".switch").show();
          var indicator = "°C";
          $("#weather").html(tempVal + indicator);
          $("#triggr").click(function() {
            if (indicator == "°C") {
              indicator = "°F";
              $("#weather").html(tempVal * 9 / 5 + 32 + indicator);
            } else {
              indicator = "°C";
              $("#weather").html(tempVal + indicator);
            }
          });
        }
      }, //complete
    }); //$.ajax
  } //loadWeatherData
}); //doc ready

// GOOD BUT IRRELEVANT
// $.getJSON("https://fcc-weather-api.glitch.me/api/current?lat=35&lon=139", function (data) {
//   console.log(data);
//   var lat = data.coord.lat;
//   var lon = data.coord.lon;
//
//   console.log("Your lat = " + lat + " and lon = " + lon);
// });

style.css

@import url('https://fonts.googleapis.com/css?family=VT323');
@import url('https://fonts.googleapis.com/css?family=Montserrat');


.title{
  color: #fff;
  text-align: center;
  font-family: 'VT323', monospace;
}

#demo{
  text-align:center;
}
#weather{
  text-align:center;
}
body {
/*   background: #444; */
background: linear-gradient(90deg, #0fb8ad 0%, #1fc8db 51%, #2cb5e8 75%);
  color: #fff;
  font-size: 30px;
  font-family: 'Montserrat', sans-serif;
}


/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
  margin: 20px 48.2%;
}

/* Hide default HTML checkbox */
.switch input {display:none;}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

weatherapi-freecodecamp.markdown

weatherAPI (freeCodeCamp)

A Pen by Sami on CodePen.

License.