Show the Local Weather

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

http://www.freecodecamp.com/challenges/show-the-local-weather http://openweathermap.org/current#geoUser Story: I can see the weather in my current location.

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

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>Show the Local Weather</title>
  
  
  <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>

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

  
</head>

<body>

  <div class="wrapper">
  <div class="widget-container">
    <div class="top-left">
      <h1 class="city" id="city">Weather App</h1>
      <h2 id="day">Day</h2>
      <h3 id="date">Month, Day Year</h3>
      <h3 id="time">Time</h3>
      <p class="geo"></p>
    </div>
    <div class="top-right">
      <h1 id="weather-status">Weather / Weather Status</h1>
      <img class="weather-icon" src="http://oi64.tinypic.com/s3orav.png">
    </div>
    <div class="horizontal-line"></div>
    <div class="bottom-left">
      <h1 id="temperature">0</h1>
      <h2 id="celsius">&degC</h2>
      <h2 id="temp-divider">/</h2>
      <h2 id="fahrenheit">&degF</h2>
    </div>
    <div class="vertical-line"></div>
    <div class="bottom-right">
      <div class="other-details-key">
        <p>Wind Speed</p>
        <p>Humidity</p>
        <p>Pressure</p>
        <p>Sunrise Time</p>
        <p>Sunset Time</p>
      </div>
      <div class="other-details-values">
        <p class="windspeed">0 Km/h</p>
        <p class="humidity">0 %</p>
        <p class="pressure">0 hPa</p>
        <p class="sunrise-time">0:00 am</p>
        <p class="sunset-time">0:00 pm</p>
      </div>
    </div>
  </div>
</div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment.js'></script>

  

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/ChrisWiles/show-the-local-weather-RrObdL */
.wrapper {
  margin-top: 15%;
}

body {
  background-color: #8B9DC3;
  margin: 0 0 100px 0;
  font-family: Roboto, Helvetica, Arial, sans-serif;
  color: #fff;
}

.widget-container {
  width: 600px;
  height: 420px;
  display: block;
  background-color: #3B5998;
  border-radius: 25px;
  border: 5px solid #eceff1;
  margin: 0 auto;
}


/* division into 4 sections */

.top-left {
  height: 60%;
  width: 50%;
  padding: 55px 0 0 70px;
  display: inline-block;
}

.top-right {
  height: 60%;
  width: 50%;
  float: right;
  padding: 55px 0 0 0;
}

.bottom-left {
  height: 40%;
  width: 45%;
  float: left;
  margin: 0;
  padding: 40px 0 0 50px;
}

.bottom-right {
  height: 40%;
  width: 55%;
  float: right;
  padding: 25px 0 0 60px;
}

h1,
h2,
h3,
p {
  margin: 0;
  padding: 0;
}


/* top-left */

#city {
  font-weight: 900;
  font-size: 25px;
}

#day {
  font-weight: 700;
  font-size: 25px;
  margin-top: 18px;
}

#date {
  font-weight: 500;
  font-size: 20px;
  margin-top: 4px;
}

#time {
  font-weight: 400;
  font-size: 18px;
  margin-top: 8px;
}

.top-left > a {
  text-decoration: none;
  color: white;
}

.top-left > a:hover {
  color: #b0bec5;
}


/* top-right */

#weather-status {
  font-size: 18px;
  font-weight: 300;
  text-align: center;
  margin: 0 auto;
}

.top-right > img {
  width: 120px;
  height: 120px;
  display: block;
  margin: 15px auto 0 auto;
}

.horizontal-line {
  width: 100%;
  height: 3px;
  margin-top: -5px;
  background-color: #fff;
}

.vertical-line {
  width: 3px;
  position: absolute;
  height: 170px;
  background-color: #fff;
  float: right;
  display: inline-block;
  padding: 0;
}


/* bottom-left */

#temperature,
#celsius,
#temp-divider,
#fahrenheit {
  display: inline;
  vertical-align: middle;
}

#temperature {
  font-size: 60px;
  font-weight: 800;
  margin-right: 5px;
}

#celsius {
  margin-right: 10px;
}

#fahrenheit {
  margin-right: 5px;
  color: #b0bec5;
}

#celsius,
#temp-divider,
#fahrenheit {
  font-size: 30px;
  font-weight: 800;
}

#celsius:hover,
#fahrenheit:hover {
  cursor: pointer;
}


/* bottom-right */

.other-details-key {
  float: left;
  font-size: 16px;
  font-weight: 300;
}

.other-details-values {
  float: left;
  font-size: 16px;
  font-weight: 400;
  margin-left: 40px;
}

/*Downloaded from https://www.codeseek.co/ChrisWiles/show-the-local-weather-RrObdL */
$(function() {

    // clock
    let clock = setInterval(setTime, 1000);
    let $time = $('#time');

    function setTime() {
        $time.html(moment().format('h:mm:ss a'));
    }

    function getLocation() {
        return new Promise(function(resolve, reject) {
            let url = 'http://ipinfo.io';
            $.getJSON(url, function(data) {
                if (!data) {
                    return reject('Error: ipinfo.io');
                } else {
                    resolve(data);
                }
            });
        });
    }

    function getWeather(zipCode, country) {
        const API_KEY = '9dc16e2ed288138758b1e8eae271567c';
        return new Promise(function(resolve, reject) {
            let url = `http://api.openweathermap.org/data/2.5/weather?zip=${zipCode},${country}&appid=${API_KEY}`;
            $.getJSON(url, function(data) {
                if (!data) {
                    return reject('Error: .openweathermap');
                } else {
                    resolve(data);
                }
            });
        });
    }

    // Promises
    getLocation().then(function(ip) {
        return getWeather(ip.postal, ip.country);
    }).then(function(json) {

        let temp = (json.main.temp - 273);
        $('#temperature').html(Math.round(temp));

        $('#fahrenheit').click(function() {
            $(this).css("color", "white");
            $('#celsius').css("color", "#b0bec5");
            $('#temperature').html(Math.round(temp * 1.8 + 32));
        });

        $('#celsius').click(function() {
            $(this).css("color", "white");
            $('#fahrenheit').css("color", "#b0bec5");
            $('#temperature').html(Math.round(temp));
        });

        $('#city').html(json.name);
        $('#weather-status').html(json.weather[0].main + " / " + json.weather[0].description);
        $('#day').html(moment().format('dddd'));
        $('#date').html(moment().format("MMM Do YYYY"));
        $('.windspeed').html(json.wind.speed + " Km/h");
        $('.humidity').html(json.main.humidity + " %");
        $('.pressure').html(json.main.pressure + " hPa");

        $('.sunrise-time').html(moment(json.sys.sunrise * 1000).format('h:mm:ss a'));
        $('.sunset-time').html(moment(json.sys.sunset * 1000).format('h:mm:ss a'));

        // http://openweathermap.org/weather-conditions
        let condtion = json.weather[0].main;
        if (condtion == "Clouds")
            $('.weather-icon').attr("src", "http://oi68.tinypic.com/296nolt.png");
        if (condtion == "Clear")
            $('.weather-icon').attr("src", "http://oi64.tinypic.com/s3orav.png");
        if (condtion == "Thunderstorm")
            $('.weather-icon').attr("src", "http://oi64.tinypic.com/2dlrp02.png");
        if (condtion == "Drizzle")
            $('.weather-icon').attr("src", "http://oi67.tinypic.com/izbyuu.png");
        if (condtion == "Rain")
            $('.weather-icon').attr("src", "http://oi64.tinypic.com/24cv581.png");
        if (condtion == "Snow")
            $('.weather-icon').attr("src", "http://oi65.tinypic.com/2nqtif4.png");
        if (condtion == "Extreme")
            $('.weather-icon').attr("src", "http://oi64.tinypic.com/2ngfnk5.jpg");
    });
});

Comments