nicholasengleman
7/14/2016 - 11:33 AM

Weather App

Weather App

style.css
content_copyfile_download

body {
    background-image: url("../assets/sunrise.jpg");
    background-size: cover;
}

p {
    margin: auto;
}

.mainBox {
    height: 400px;
    width: 600px;
    margin: 50px auto 0;
    border-radius: 20px;
}

.titleOne {
    display: flex;
    height: 75px;
    width: 600px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    font-size:20px
}

.titleTwo {
    display: flex;
    height: 125px;
    width: 600px;
    font-size: 1.7em;
}

.titleOne, .titleTwo {
    color: #55c605;
    font-family: 'Noto Sans', sans-serif;
    text-shadow: 1px 1px 10px black;
    font-weight: 900;
}


.temperature {
    display: flex;
    height: 200px;
    width: 200px;
    color: white;
    margin-right: auto;
    margin-left: auto;
    font-family: 'Noto Sans', sans-serif;
    font-weight: 700;
    font-size: 3em;
    text-shadow: 1px 1px 10px black;
}

.tempPic {
    float: left;
    width: 100px;
    height: 100px;
}

.tempNumber {
    float: right;
    width: 100px;
    height: 100px;
}

.moreInfo {
    display: flex;
    height: 100px;
    width: 600px;
    color: #173705;
    font-family: 'Noto Sans', sans-serif;
    font-weight: 700;
    font-size: 1.2em;
}

.location, .sky, .wind {
    background-color: silver;
    opacity: 0.6;
    border-radius: 20px;
    margin-right: 10px;
    box-shadow: 5px 5px 10px black;
}

.location {
    display: flex;
    height: 100px;
    width:  225px;
    float: left;
}

.sky {
    display: flex;
    height: 100px;
    width:  150px;
    float: left;
}

.wind {
    display: flex;
    height: 100px;
    width:  225px;
    float: right;
}
script.js
content_copyfile_download
$(document).ready(function() {
  var msg = "Sorry, your browser does not support geolocation.";

  if (Modernizr.geolocation) {
    navigator.geolocation.getCurrentPosition(getWeatherData);
  } else {
    alert(msg);
  }

  function getWeatherData(position) {
    var lat = Math.round(position.coords.latitude);
    var log = Math.round(position.coords.longitude);

    var url = "api.openweathermap.org/data/2.5/weather?lat=" + lat + "&lon=" + log + "&appid=4bd0296ac3468ba55671920cabb0f745";
    var request = new XMLHttpRequest();
    request.open("GET", url, true);
    request.send(null);
    request.onload = function() {
      "use strict";
      var responseObject = JSON.parse(request.responseText);
      console.log(responseObject);
    }
  }

});
index.html
content_copyfile_download
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Weather App</title>
</head>

<body>
  <div class="mainBox">
    <div class="titleOne">
      <p>Free Code Camp Zipline #1</p>
    </div>
    <div class="titleTwo">
      <p>Local Weather App</p>
    </div>
    <div class="temperature">
      <div class="tempPic"></div>
      <div class="tempNumber">
        <p>78 F</p>
      </div>
    </div>
    <div class="moreInfo">
      <div class="location">
        <p>Atlanta, Georgia</p>
      </div>
      <div class="sky">
        <p>sky is clear</p>
      </div>
      <div class="wind">
        <p>SW 7.67 knots</p>
      </div>
    </div>
  </div>
</body>

</html>
Weather App.markdown
content_copyfile_download
  • Rendered
  • Source

Weather App

A Pen by J. Nicholas Engleman on CodePen.

License.