Local Weather

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

This is a weather app that gets your location using HTML5 geolocation API and displays the weather condition using open weather API

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

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>Local Weather </title>
  <head>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Weather API</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

  <link rel="stylesheet" href="weatherPro.css">  
  <link href='https://fonts.googleapis.com/css?family=Roboto:400,700,300' rel='stylesheet' type='text/css'>
</head>
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <body>
  <div class="container-fluid">
    <div class="wrapper">
      <!-- A wrapper for CSS-design -->
      <h1>Local Weather</h1>
      <h2 id="displayDate"></h2>
      <p id="p">Weather condition in your <span class='italic'>exact</span> location?
      </p>

      <!-- Here we will show the results from Weather API -->
      <div id="wrappCloud">
        <canvas id="showCloud" width="64" height="64"></canvas>
        <p id="result"></p>
        <p id="describe"></p>
      </div>

      <!-- Simple button to toggle C and F -->
      <button id="showTemp" value="off">°F</button>

      <div id="wrapperFooter">
        <p id="pressure" class="display"></p>
        <p id="humidity" class="display"></p>
        <p id="wind" class="display"></p>
        <p id='location' class="display"></p>
      </div>


    </div>
    <footer>
      <p id="footer" class="display">Lumex Creations &copy. All rights reserved</p><br>
      <P class="display"><a href="https://codepen.io/Lumexralph/full/zveeqa" target='.blank\'>About Lumex Design Studio</a></P>
      <p class="display">Contact us: olumideralph@gmail.com</p>
    </footer>
  </div>
</body>
  <script src='https://code.jquery.com/jquery-1.11.3.js'></script>
<script src='https://rawgithub.com/darkskyapp/skycons/master/skycons.js'></script>

  

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/Lumexralph/local-weather-YWYYQb */
/*google fonts API */

@import 'https://fonts.googleapis.com/css?family=Aclonica|Carter+One|Eczar';
body {
  font-size: 100%;
}

.container-fluid {
  background-image: url('https://i.imgur.com/JuSWBEG.jpg');
  height: 550px;
}

h1 {
  font-size: 5.5em;
  font-weight: bold;
  font-family: 'Aclonica', sans-serif;
  text-shadow: 2px 2px 4px white;
}

#displayDate {
  font-family: 'Eczar', sans-serif;
  text-shadow: 1px 1px 2px gray;
}

p {
  font-size: 2em;
}

#p {
  color: rgb(205, 85, 85);
  text-shadow: 1px 1px 1.5px #FFEC8B;
}

.italic {
  font-style: italic;
  font-weight: 700;
  color: black;
}

.wrapper {
  width: 500px;
  height: 600px;
  margin: -40px auto 0 auto;
  padding-top: 40px;
  text-align: center;
  background-color: rgba(238, 223, 204, 0.1);
  border-radius: 10%;
}

.display {
  display: inline;
}

#describe {
  color: rgb(255, 211, 155);
  text-shadow: 1px 1px 1.5px black;
  margin: 0 auto 0 auto;
}

#result {
  font-size: 40px;
  text-align: center;
  font-family: 'Aclonica', cursive;
  text-shadow: 2px 2px 3px black;
  color: rgb(240, 255, 240);
}

#showTemp {
  width: 70px;
  height: 40px;
  font-weight: 700;
  font-size: 17px;
  border-radius: 50%;
  margin-top: 1.5em;
}

#wrappCloud {
  height: 200px;
  width: 300px;
  margin: -5px auto 0 auto;
}

#showCloud {
  width: 110px;
  margin: 10px auto 0 auto;
  border-radius: 35%;
}

#showTemp:hover {
  cursor: pointer;
}

#wrapperFooter {
  background-color: rgba(99, 99, 99, 0.7);
  margin-top: 52px;
  border-radius: 1px 1px 30px 30px;
  color: #D1EEEE;
}


/*class to change to when button is pressed for F or C*/

.fah {
  background-color: rgba(141, 182, 205, 0.8);
  box-shadow: 1px 1px 2px black;
}


/*footer*/

footer {
  margin-top: 20px;
  text-align: center;
}

footer p a {
  margin-right: 200px;
}

/*Downloaded from https://www.codeseek.co/Lumexralph/local-weather-YWYYQb */
$(document).ready(function() {

  //display date and time
  var utcWeekday = ['Sun', 'Mon', 'Tue', 'Wed', 'Thur', 'Fri', 'Sat']; //caching the day of the week in array for utc integer
  var utcMonth = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];

  var today = new Date();
  var utcDay = today.getUTCDate(); //get today's date
  var weekDay = today.getUTCDay(); //get today's day of the week
  var month = today.getUTCMonth(); //get the month
  var year = today.getUTCFullYear(); //get the year

  $('#displayDate').text(utcWeekday[weekDay] + " " + utcDay + ", " + utcMonth[month] + " " + year); //display the utc date

  //location and weather API
  var lat, lon, api_url,
    icons = new Skycons({
      "color": "white"
    });

  if ("geolocation" in navigator) { //checking if geolocation is supported

    $(window).load(function() {
      navigator.geolocation.getCurrentPosition(gotLocation);

      function gotLocation(position) {
        lat = position.coords.latitude;
        lon = position.coords.longitude;

        api_url = "https://api.forecast.io/forecast/325e8ba97ba243f26ba2a8b6252e66ed/" + lat + "," + lon + "?units=ca";

        //WANT TO MAKE A HTTP REQUEST
        $.ajax({
          url: api_url,
          dataType: "jsonp",
          success: function(data) {
            console.log(data);
            //This is animation for cloud icon
            icons.set("showCloud", data.currently.icon);
            icons.play();

            var tempr = data.currently.temperature.toFixed(), //temperature from the forecast API
              apparentTemp = data.currently.apparentTemperature.toFixed();

            $('#describe').text(data.currently.summary + ", it feels like " + apparentTemp + '°C');
            $('#result').text(tempr + '°C');
            $('#location').html('<b>' + data.timezone + '</b>');
            $('#pressure').text('Pressure: ' + data.currently.pressure.toFixed() + 'mb |');
            $('#humidity').text('Humidity: ' + (data.currently.humidity * 100).toFixed() + '% |');
            $('#wind').text('Wind: ' + data["currently"]["windSpeed"].toFixed() + 'km/h');

            // Toggle Temperature in C or Fah
            $('#showTemp').on('click', function() {
              // displays the temp in Celsius

              var status = $('button').val();
              if (status == 'off') {
                fahrenheit();
                $('#showTemp').text('°C').toggleClass('fah');
                $('button').val('on');
              } else if (status == 'on') {
                celsius();
                $('#showTemp').text('°F').toggleClass('fah');
                $('button').val('off');
              }

            });

            //converts celsius to fahrenheit

            function fahrenheit() {
              var fah = tempr,
                temp = apparentTemp;

              fah *= 9;
              temp *= 9;
              fah /= 5;
              temp /= 5;
              fah += 32;
              temp += 32;

              fah = fah.toFixed();
              temp = temp.toFixed();

              $('#result').text(fah + '°F');
              $('#describe').text(data.currently.summary + ", it feels like " + temp + '°F');
            }

            function celsius() {
              $('#result').text(tempr + '°C');
              $('#describe').text(data.currently.summary + ", it feels like " + apparentTemp + '°C');
            }

          }
        });
      }
    });
  } else {
    alert('Your browser doesnt support geolocation. Sorry.');
  }
  //FOOTER
  $('#footer').html('Lumex Creations &copy' + year + '. All Rights Reserved');

});

Comments