Weather App w/ DarkSky

In this example below you will see how to do a Weather App w/ DarkSky with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by shayna, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright shayna ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Weather App w/ DarkSky</title>
  
  
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <html>
  <head>
    <title>Weather App</title>
    <link href="https://fonts.googleapis.com/css?family=Raleway:400,700" rel="stylesheet">
  </head>
  <body>
    <div class="container-fluid text-center">

      <p class="main"><span id ="toggle"></span></p>
      <p id="temp"></p>
      <p class="main" id="loc"></p>
      <canvas id="icon" width="125" height="125"></canvas>
      <p class="main" id="desc"></p>
      <div class="footer">Made by <a href="https://www.shayna.tv/">Shayna</a> with <a href="https://darksky.net/app">Dark Sky</a> and <a href="https://openweathermap.org/">OpenWeatherMap</a></div>
    </div>
  </body>
</html>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src='https://gitcdn.link/cdn/darkskyapp/skycons/master/skycons.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/shayna/weather-app-with-darksky-qoXbjo */
body {
  font-family: 'Raleway', sans-serif;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

#toggle, a {
  color: red;
  cursor: pointer;
}

#switch {
  font-weight: bold;
}

#desc {
  padding-top: 20px;
}

.main {
  font-size: 1.25em;
}

.container-fluid {
  margin-top: 25px;
}

#temp {
  font-weight: bold;
  font-size: 5em;
}

.footer {
  position: fixed;
  width:100%;
  left: 0;
  bottom: 0;
  z-index: -1;
}

/*Downloaded from https://www.codeseek.co/shayna/weather-app-with-darksky-qoXbjo */
$(document).ready(function() {
  function getWeather() {
    navigator.geolocation.getCurrentPosition(function(position) {
      
      var lat = position.coords.latitude;
      var lon = position.coords.longitude;
      
      var key = "d3227b45011907b16073106f9d788cdd";   
      var api = "https://api.darksky.net/forecast/";
      var cors = "https://cors-anywhere.herokuapp.com/"
      
      var DarkSkyUrl = cors + api + key + "/" + lat + "," + lon +  "?exclude=alerts,hourly,alerts,flags";

      var OWAurl = "https://api.openweathermap.org/data/2.5/weather?lat=" + lat + "&lon=" +lon +"&appid=8d8727091c785101e7f97e1efb4b4d67";   
      
      $.ajax({
        type: 'GET',
        url: DarkSkyUrl,
        success: function (DarkSkyResponse) {
                    
          var tempF = DarkSkyResponse.currently.temperature;
          var tempC = ((tempF)-32)*.5556;
          var tempSwitch = true;
          
          var desc = DarkSkyResponse.currently.summary;
          
          var iconRequest = DarkSkyResponse.currently.icon;
          var icons = new Skycons({"color" : "black"});
          var iconList = ["clear-day","clear-night","partly-cloudy-day","partly-cloudy-night","cloudy","rain","sleet","snow","wind", "fog"];
          for (i = 0; i < iconList.length; i++) {
            if (iconRequest == iconList[i]) {
						icons.set('icon', iconList[i]);
            }
          }
          icons.play();
          
          $("#toggle").html("<span id='switch'>f</span> | c");  
          $("#temp").text(tempF.toFixed(0) + "°");
          $("#toggle").click(function() {
            if(tempSwitch == true){
              $("#temp").text(tempC.toFixed(0) + "°");
              $("#toggle").html("f | <span id='switch'>c</span>")
              tempSwitch = false;
            } else {
              $("#temp").text(tempF.toFixed(0) + "°");
              $("#toggle").html("<span id='switch'>f</span> | c"); 
              tempSwitch = true;
            }
          });
          $("#desc").text(desc);      
      }
      });
      
      $.getJSON(OWAurl, function(OWAresponse){
        var loc = OWAresponse.name + ", " + OWAresponse.sys.country;
        $("#loc").text(loc);     
      });
    });
  }
  getWeather(); 
});

Comments