WhatWeather - free code camp

In this example below you will see how to do a WhatWeather - free code camp with some HTML / CSS and Javascript

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

Technologies

  • HTML
  • CSS
  • JavaScript
    <!-- Thank you http://glyphicons.com for free icons -->
<!-- Thank you Vadim Goncharov https://photocollections.io for photos -->
<!--Because of lack of weather API that would support https request I will use ipinfo.io request http://ipinfo.io/84.13.127.136/json to omit usage of navigator to get location. So page is working only for http.-->


<head>

<title>WhatWeather</title>
<meta charset="utf-8">
<meta name="author" content="parsley">
<meta name="viewport" content"width=device-width, initial-scale=1.0">  
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="css/weather-icons.css">
<link rel="stylesheet" href="css/weather-icons-wind.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>
  
<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WhatWeather</a>
    </div>
    <ul class="nav navbar-nav">
      <li><a><div id= "city"><p></p></div></a></li>
      <li><a><div id= "location"><p>Your location: </p></div></a></li>      
    </ul>
  </div>
</nav>  
  
<div class="container">
    <div class="jumbotron ">
      <div class="row">
          <div class="col-sm-3 col-md-6">
            <p id = "weatherMain">weatherMain</p>
            <p id = "weatherDescription">weatherDescription</p>
            <p id = "temp" class="pointer" data-toggle="tooltip" title="Click to change units C/F">temp</p>
            <p id = "pressure">pressure</p>
            <p id = "humidity">humidity</p>
            <p id = "cloudsCover">cloudsCover</p>
            <p id = "sunriseHuman">sunriseHuman</p>
            <p id = "sunsetHuman">sunsetHuman</p>
            <p id = "sunrise">sunrise</p>
            <p id = "sunset">sunset</p>        
          </div>
          <div class="text-center col-sm-9 col-md-6">
            <h2 id="cityJumbo"></h2> 
            <i id="icon" class="wi wi-day-sunny"></i>
          </div>
    </div>
  </div>
</div>  
</body>

/*Downloaded from https://www.codeseek.co/pietruha8/whatweather-free-code-camp-mOgpzp */
    body {
    background-image: url("https://www.dropbox.com/s/ntvpvn58z44hy00/CLEAR2.jpg?raw=1");
    background-size: cover !important;
    background-repeat:   no-repeat !important;
    background-position: center !important;   
    font-family: 'Roboto';
}

nav {
  font-family: 'Roboto';
  font-weight: bold;
}

div.jumbotron {
  /*opacity: 0.4;*/
  background: rgba(130, 130, 130, 0.5);
  font-family: 'Roboto'; 
} 

div.jumbotron p{
  font-weight: bold;
}

i[class^="wi-"], i[class*=" wi-"] {
    font-size: 200px;
}

#cityJumbo {
  font-size: 100px;
}

#icon {
    text-align:center;
}

p.pointer {
  cursor: pointer;
}



/*Downloaded from https://www.codeseek.co/pietruha8/whatweather-free-code-camp-mOgpzp */
    /* Because of lack of weather API that would support https request I will use ipinfo.io request http://ipinfo.io/84.13.127.136/json to omit usage of navigator to get location. Page is working only for http.
*/
/* IP for test > Finland IP - 185.117.118.225 // UK IP - 79.69.5.59 // Alaska IP - 209.124.146.10 // California IP - 66.249.93.80 */
var ipRequest = "https://ipinfo.io/json";
var units = "metric";
var unitsSign = "C";
var parseData = function (data) {
  $("#weatherMain").text("Main forecast: " + data.weather[0].main);
  $("#temp").text("Temperature: " + data.main.temp + unitsSign);
  $("#pressure").text("Pressure: " + data.main.pressure + "hPa");
  $("#humidity").text("Humidity: " + data.main.humidity + "%");
  $("#cloudsCover").text("Cloud coverage: " + data.clouds.all + "%");
  $("#sunrise").text("Sunrise (geek version): " + data.sys.sunrise);
  $("#sunset").text("Sunset (geek version): " + data.sys.sunset);
  $("#weatherDescription").text("Brief description: " + data.weather[0].description);
  
  var humanSunrise = new Date(data.sys.sunrise * 1000);
  var hours = humanSunrise.getHours();
  var minutes = "0" + humanSunrise.getMinutes();
  var seconds = "0" + humanSunrise.getSeconds();
  var formattedHumanSunrise = hours + ':' + minutes.substr(-2) + ':' + seconds.substr(-2);
  $("#sunriseHuman").text("Sunrise: " + formattedHumanSunrise);
  
  var humanSunset = new Date(data.sys.sunset * 1000);
  var hours = humanSunset.getHours();
  var minutes = "0" + humanSunset.getMinutes();
  var seconds = "0" + humanSunset.getSeconds();
  var formattedHumanSunset = hours + ':' + minutes.substr(-2) + ':' + seconds.substr(-2);
  $("#sunsetHuman").text("Sunset: " + formattedHumanSunset);
  
switch (data.weather[0].main) {
    case "Clear":
        document.body.style.backgroundImage = "url('https://www.dropbox.com/s/vnf3hcc0zz2q3su/CLEAR1.jpg?raw=1')";
        document.getElementById("icon").classList.remove("wi-day-sunny");
        document.getElementById("icon").classList.add("wi-day-sunny");
        break;
    case "Mist":
        document.body.style.backgroundImage = "url('https://www.dropbox.com/s/vxvv4zmr427njvo/MIST2.jpg?raw=1')";
        document.getElementById("icon").classList.remove("wi-day-sunny");
        document.getElementById("icon").classList.add("wi-fog");
        break;
    case "Rain":
        document.body.style.backgroundImage = "url('https://www.dropbox.com/s/q9lfxsph9m15pqr/RAIN2.jpg?raw=1')";
        document.getElementById("icon").classList.remove("wi-day-sunny");
        document.getElementById("icon").classList.add("wi-rain");
        break;
    case "Storm":
        document.body.style.backgroundImage = "url('https://www.dropbox.com/s/8ytvaads7pcsvzt/STORM.jpg?raw=1')";
        document.getElementById("icon").classList.remove("wi-day-sunny");
        document.getElementById("icon").classList.add("wi-thunderstorm");
        break;
    case "Snow":
        document.body.style.backgroundImage = "url('https://www.dropbox.com/s/9skbwtxtgiy4stm/SNOW.jpg?raw=1')";
        document.getElementById("icon").classList.remove("wi-day-sunny");
        document.getElementById("icon").classList.add("wi-snow");
        break;
    case "Extreme":
        document.body.style.backgroundImage = "url('https://www.dropbox.com/s/geywpwobmmwrum7/EXTREME.jpg?raw=1')";
        document.getElementById("icon").classList.remove("wi-day-sunny");
        document.getElementById("icon").classList.add("wi-tornado");
        break;
    case "Clouds":
        document.body.style.backgroundImage = "url('https://www.dropbox.com/s/l5xopijsftuwcqx/CLOUDS.jpg?raw=1')";
        document.getElementById("icon").classList.remove("wi-day-sunny");
        document.getElementById("icon").classList.add("wi-cloud");
        break;
    case "Fog":
        document.body.style.backgroundImage = "url('https://www.dropbox.com/s/fnvrh6wi85ilwoy/MIST4.jpg?raw=1')";
        document.getElementById("icon").classList.remove("wi-day-sunny");
        document.getElementById("icon").classList.add("wi-fog");
        break;
    case "Haze":
        document.body.style.backgroundImage = "url('https://www.dropbox.com/s/6xolg6m0wx6t69a/MIST.jpg?raw=1')";
        document.getElementById("icon").classList.remove("wi-day-sunny");
        document.getElementById("icon").classList.add("wi-fog");
        break;
    case "Drizzle":
        document.body.style.backgroundImage = "url('https://www.dropbox.com/s/q9lfxsph9m15pqr/RAIN2.jpg?raw=1')";
        document.getElementById("icon").classList.remove("wi-day-sunny");
        document.getElementById("icon").classList.add("wi-rain");
        break;
}};

function change() {
    if (units == 'metric') {
        units = 'imperial';
        unitsSign = "F"
    } else if (units == 'imperial') {
        units = 'metric';
        unitsSign = "C"
    }
    $.getJSON(ipRequest, function(data){
   //console.log(data);
    $("#city").text(data.city);
    $("#location").text("Your location is " + data.loc);
    $("#cityJumbo").text(data.city);
    var weatherRequest = "http://api.openweathermap.org/data/2.5/weather?units=" + units + "&q=" + data.city + "&appid=e73077820983ff15896bddd32321f41d";
    $.getJSON(weatherRequest, parseData);});
}

$("#temp").on('click', function() {
    change();
});

$.getJSON( ipRequest, function(data){
  //console.log(data);
  $("#city").text(data.city);
  $("#location").text("Your location is " + data.loc);
  $("#cityJumbo").text(data.city);
  var weatherRequest = "http://api.openweathermap.org/data/2.5/weather?units=" + units + "&q=" + data.city + "&appid=e73077820983ff15896bddd32321f41d";
  $.getJSON(weatherRequest, parseData);
});

Comments