Local Weather App (FCC)

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

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

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>Local Weather App (FCC)</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:400,500">

  
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>

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

  
</head>

<body>

  <div class="container">
		<div class="jumbotron">
			<div id="clock" class="currentTime"></div>
			<div class="row">
				<p>Good <span id="greeting"></span>,
					<div class="currentLocation"></div>
					<div class="currentCondition"></div>
					<div class="currentTemp"></div>
					<div id="weatherIcon">
						<canvas id="weather-icon" width="96" height="96"></canvas>
					</div>
					<button type="button" id="convertTemp" class="btn">Convert to /°F</button>
				</p>
			</div>
		</div>
	</div>

	<footer class="credits">
		<p>Powered by:</p>
		<ul class="list-inline">
			<li><a href="https://ipapi.co">ipapi</a></li>
			<li><a href="https://openweathermap.org/current">openweathermap</a></li>
			<li><a href="https://darkskyapp.github.io/skycons/">skycons</a></li>
			<li><a href="http://uigradients.com/">uigradients</a></li>
		</ul>
	</footer>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='http://rawgithub.com/darkskyapp/skycons/master/skycons.js'></script>

  

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/arapley/local-weather-app-fcc-VKbGbV */
/*BG colors:

clear day: linear-gradient(to bottom, #4CA1AF , #C4E0E5);

clear night:background: linear-gradient(to bottom, #141E30 , #243B55);

sunrise: background: linear-gradient(to bottom, #FF512F , #F09819);

sunset: background: linear-gradient(to bottom, #0B486B , #F56217);

http://uigradients.com/

*/


/*issue with height, bottom chopping off*/

* {
    padding: 0;
    margin: 0;
}

html {
    min-height: 100%;
}

body {
    width: 100%;
    height: auto;
    background: linear-gradient(to bottom, #4CA1AF, #C4E0E5);
    background-size: cover;
    background-repeat: no-repeat;
    color: #060606 !important;
}

h1, h2, h3, h4, h5 {
    margin: 0;
    padding: 0;
}

.jumbotron {
    font-family: 'Roboto', sans-serif;
    width: 60%;
    height: auto;
    text-align: center;
    margin: 60px auto;
    padding-top: 0 !important;
    background: rgba(255, 255, 255, .1) !important;
    -webkit-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.5);
    box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.5);
}

.currentTime {
    font-size: 1em;
}

.jumbotron p {
    padding-top: 50px;
}

.jumbotron .currentLocation {
    font-size: 2.8em;
}

.jumbotron .currentCondition {
    font-size: 1.6em;
}

.jumbotron canvas {
    padding: 10px;
}

.jumbotron .currentTemp {
    font-size: 5.6em;
}

.jumbotron button {
    border: 1px solid black;
    background: inherit;
}

@media screen and (max-width: 760px) {
    .jumbotron {
        width: 80%;
        margin: 30px auto;
        padding-bottom: 0 !important;
    }
    .jumbotron .currentTime {
        font-size: 1em;
    }
    .jumbotron p {
        font-size: 1em !important;
    }
    .jumbotron .currentLocation {
        font-size: 1.8em;
    }
    .jumbotron .currentCondition {
        font-size: 1em;
    }
    .jumbotron .currentTemp {
        font-size: 5em;
    }
    .jumbotron .btn {
        font-size: 0.8em;
        margin-top: 10px;
    }
    .credits {
        font-size: 0.8em !important;
    }
}

@media screen and (max-width: 400px) {
    .jumbotron {
        width: 80%;
        margin: 10px auto;
        padding-bottom: 0 !important;
    }
}

.credits {
    font-size: 1em;
    text-align: center;
    padding-top: 60px;
}

.credits p {
    font-size: 1.2em;
}

.credits ul {
    list-style-type: none;
    text-decoration: none;
    text-align: center;
    padding: 0;
}

.credits ul a {
    color: inherit;
}

.credits ul a:hover {
    color: inherit;
}


/*Downloaded from https://www.codeseek.co/arapley/local-weather-app-fcc-VKbGbV */
var app = {};

app.init = function() {
  app.celsius = 0;
  app.fahrenheit = 0;
  app.showCelsius = true;
  app.initSkycons();
  app.showTime();
  app.getLocation();
  setInterval(app.showTime, 1000);

  //Temperature conversion
  $('#convertTemp').on("click", app.convertTemp);
};

app.convertTemp = function() {
  if (app.showCelsius === true) {
    app.showCelsius = false;
  } else {
    app.showCelsius = true;
  }
  app.render();
};

app.initSkycons = function() {
  app.skycons = new Skycons({
    "color": "black"
  });

  app.skycons.add("weather-icon", Skycons.CLEAR_DAY);
  app.skycons.play();
};

//get weather at coordinates
app.getLocation = function() {
  //JSON call to get location (lat,lon)
  //on success => app.getWeather(location)
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      var lat = position.coords.latitude;
      var lon = position.coords.longitude;
      app.getWeather(lat, lon);

    });
  } else {
    $.getJSON("https://ipapi.co/json/").then(function(location) {
      var lat = location.latitude;
      var lon = location.longitude;
      app.getWeather(lat, lon);

    }, function error(err) {
      if (error.status.fail) {
        alert(error.status.message);
      }
    });
  }
};

//get weather at coordinates
app.getWeather = function(lat, lon) {
  //JSON call to get weather using lat,lon
  //on success => display weather
  var weatherApi = "c1ce9d512a69e69adeb90b4a243590a9";
  var getWeatherUrl = "https://cors-anywhere.herokuapp.com/" +
    "http://api.openweathermap.org/data/2.5/weather?lat=" + lat +
    "&lon=" + lon + "&units=metric&appid=" + weatherApi;

  //Get weather data
  $.getJSON(getWeatherUrl).then(function(weather) {
      app.weather = {
        celsius: weather.main.temp,
        sunrise: weather.sys.sunrise,
        sunset: weather.sys.sunset,
        description: weather.weather[0].description,
        city: weather.name
      };

      app.render();
    },
    function error(err) {
      console.log("Error");
    });
};

app.render = function() {
  var w = app.weather;

  //app.fahrenheit = (app.celsius * (9 / 5)) + 32;
  if (app.showCelsius) {
    $('.currentTemp').text(Math.round(w.celsius) + "°C").hide().fadeIn();

    $('#convertTemp').text("Convert to /°F");
  } else {
    var fahrenheit = w.celsius * (9 / 5) + 32;
    var rounded = Math.round(fahrenheit * 10) / 10;

    $('.currentTemp').text(rounded + "°F").hide().fadeIn();
    $('#convertTemp').text("Convert to /°C");
  }

  //Display location
  $('.currentLocation').text(w.city);


  //Weather descriptions
  $('.currentCondition').text(w.description);

  //Dynamic weather icons
  var currentTime = new Date().getTime() / 1000;
  var isDaytime = currentTime > w.sunrise && currentTime < w.sunset;
  var desc = w.description.toLowerCase();

  if (desc.indexOf("rain") >= 0) {
    app.skycons.set("weather-icon", Skycons.RAIN);
  } else if (desc.indexOf("clear") >= 0 && isDaytime) {
    app.skycons.set("weather-icon", Skycons.CLEAR_DAY);
  } else if (desc.indexOf("clear") >= 0 && !isDaytime) {
    app.skycons.set("weather-icon", Skycons.CLEAR_NIGHT);
  } else if (desc.indexOf("cloud") >= 0 && isDaytime) {
    app.skycons.set("weather-icon", Skycons.PARTLY_CLOUDY_DAY);
  } else if (desc.indexOf("cloud") >= 0 && !isDaytime) {
    app.skycons.set("weather-icon", Skycons.PARTLY_CLOUDY_NIGHT);
  } else if (desc.indexOf("thunderstorm") >= 0) {
    app.skycons.set("weather-icon", Skycons.SLEET);
  } else if (desc.indexOf("snow") >= 0) {
    app.skycons.set("weather-icon", Skycons.SNOW);
  } else {
    app.skycons.set("weather-icon", Skycons.CLEAR_DAY);
  }
};

app.showTime = function() {
  //Clock variables
  var date = new Date();
  var h = date.getHours();
  var m = date.getMinutes();
  var d = date.getDay();
  var daylist = ["Sunday", "Monday", "Tuesday", "Wednesday ", "Thursday", "Friday", "Saturday"];
  var session = "AM";
  var greeting = $('#greeting');

  if (h >= 12) {
    session = "PM";
  }

  //Add a 0 before digit to keep consistency
  h = (h < 10) ? "0" + h : h;
  m = (m < 10) ? "0" + m : m;

  var time = daylist[d] + ", " + h + ":" + m + " " + session;

  $("#clock").text(time);

  //Change background and greeting depending on time
  if (h > 16 && h < 19) {
    $('body').css("background", "linear-gradient(to bottom, #0B486B, #F56217)");
    greeting.text("afternoon");
  } else if (h >= 19 || h < 5) {
    $('body').css("background", "linear-gradient(to bottom, #141E30 , #243B55)");
    greeting.text("evening");
  } else if (h >= 5 && h < 8) {
    $('body').css("background", "linear-gradient(to bottom, #FF512F, #F09819)");
    greeting.text("morning");
  } else if (h >= 12 && h < 17){
		greeting.text("afternoon");
	} else {
    $('body').css("background", "linear-gradient(to bottom, #4CA1AF, #C4E0E5)");
    greeting.text("morning");
  }
};

$(document).ready(app.init);

Comments