Simple Weather App

index.html

<div class="container-fluid" id="appBar">
   <!--<div class="col-md-2">
      <i class="material-icons md-light" id="menu">menu</i>
   </div>-->
</div>
<div class="container-fluid wCard" id="weather-card">
   <h2 id="temp" class="col-sm-12"></h2>
   <h4 id="weather" class="col-sm-12"></h3>
   <div id="image-container" class="col-sm-4">
     <img src=# alt="weather icon" class="img img-responsive" id="icon">
   </div>
   <div id="switch">
      <button id="unit" class="btn btn-warning"></button>
   </div>
  <!--<button id="addMore" class="btn btn-warning btn-circle text-center"><strong>&deg;C</strong></button>-->
</div>
<footer>
   <div class="text-center" id="footer">
      created by &copy Brandon Young &amp;
      powered by <a href="http://www.wunderground.com" alt="Weather Underground"><img id="wuIcon" src=# alt="weather underground logo">
   </div>
</footer>

script.js

/**
 * This function calls ip-api.com and return the zip code of the user then
 * calls weather underground with the users zip code to get the weather.
 */
function getFWeather() {
    $.ajax({
        type: "GET",
        url: "http://ip-api.com/json"
    }).done(function (data) {
        var zip = data.zip;
       $.ajax({
        type: "GET",
        url: "http://api.wunderground.com/api/faee2d4895610990/conditions/q/" + zip + ".json"
    }).done(function (data) {
        var tempF = data.current_observation.temp_f;
        var fullLocation = data.current_observation.display_location.full;
        var weather = data.current_observation.weather;
        var wIcon = data.current_observation.icon_url;
        getIcon(wIcon);
        $("#temp").html(tempF + "°F in " + fullLocation);
        $("#weather").html(weather);
        $("#wuIcon").attr("src", data.current_observation.image.url)
        $("#unit").html("°C");
    });
    });
}

function getCWeather() {
    $.ajax({
        type: "GET",
        url: "http://ip-api.com/json"
    }).done(function (data) {
        var zip = data.zip;
       $.ajax({
        type: "GET",
        url: "http://api.wunderground.com/api/faee2d4895610990/conditions/q/" + zip + ".json"
    }).done(function (data) {
        var tempC = data.current_observation.temp_c;
        var fullLocation = data.current_observation.display_location.full;
        var weather = data.current_observation.weather;
        var wIcon = data.current_observation.icon_url;
        getIcon(wIcon);
        $("#temp").html(tempC + "°C in " + fullLocation);
        $("#weather").html(weather);
        $("#wuIcon").attr("src", data.current_observation.image.url);
        $("#unit").html("°F");
    });
    });
}
    
/**
 * This function replaces the default weather underground weather icons
 * @param {String} weatherIcon the url of the weather underground icon.
 */
function getIcon(weatherIcon) {
    switch (weatherIcon) {
        case "http://icons.wxug.com/i/c/k/nt_partlycloudy.gif":
        case "http://icons.wxug.com/i/c/k/partlycloudy.gif":
            $("#icon").attr("src", "https://ssl.gstatic.com/onebox/weather/64/partly_cloudy.png");
            break;
        case "http://icons.wxug.com/i/c/k/nt_cloudy.gif":
        case "http://icons.wxug.com/i/c/k/cloudy.gif":
            $("#icon").attr("src", "https://ssl.gstatic.com/onebox/weather/64/cloudy.png");
            break;
        case "http://icons.wxug.com/i/c/k/nt_chancerain.gif":
        case "http://icons.wxug.com/i/c/k/chancerain.gif":
            $("#icon").attr("src", "https://ssl.gstatic.com/onebox/weather/64/rain_s_sunny.png");
            break;
        case "http://icons.wxug.com/i/c/k/nt_chanceflurries.gif":
        case "http://icons.wxug.com/i/c/k/chanceflurries.gif":
            $("#icon").attr("src", "https://ssl.gstatic.com/onebox/weather/64/sunny_s_snow.png");
            break;
        case "http://icons.wxug.com/i/c/k/nt_chancesleet.gif":
        case "http://icons.wxug.com/i/c/k/chancesleet.gif":
            $("#icon").attr("src", "https://ssl.gstatic.com/onebox/weather/64/snow_s_sunny.png");
            break;
        case "http://icons.wxug.com/i/c/k/chancesnow.gif":
        case "http://icons.wxug.com/i/c/k/nt_chancesnow.gif":
            $("#icon").attr("src", "https://ssl.gstatic.com/onebox/weather/64/sunny_s_snow.png");
            break;
        case "http://icons.wxug.com/i/c/k/nt_chancetstorms.gif":
        case "http://icons.wxug.com/i/c/k/chancetstorms.gif":
            $("#icon").attr("src", "https://ssl.gstatic.com/onebox/weather/64/sunny_s_rain.png");
            break;
        case "http://icons.wxug.com/i/c/k/nt_clear.gif":
        case "http://icons.wxug.com/i/c/k/nt_sunny.gif":
        case "http://icons.wxug.com/i/c/k/clear.gif":
        case "http://icons.wxug.com/i/c/k/sunny.gif":
            $("#icon").attr("src", "https://ssl.gstatic.com/onebox/weather/64/sunny.png");
            break;
        case "http://icons.wxug.com/i/c/k/nt_flurries.gif":
        case "http://icons.wxug.com/i/c/k/flurries.gif":
            $("#icon").attr("src", "https://ssl.gstatic.com/onebox/weather/64/snow_light.png");
            break;
        case "http://icons.wxug.com/i/c/k/nt_fog.gif":
        case "http://icons.wxug.com/i/c/k/nt_hazy.gif":
        case "http://icons.wxug.com/i/c/k/fog.gif":
        case "http://icons.wxug.com/i/c/k/hazy.gif":
            $("#icon").attr("src", "https://ssl.gstatic.com/onebox/weather/64/fog.png");
            break;
        case "http://icons.wxug.com/i/c/k/nt_mostlycloudy.gif":
        case "http://icons.wxug.com/i/c/k/mostlycloudy.gif":
            $("#icon").attr('src', "https://ssl.gstatic.com/onebox/weather/64/cloudy_s_sunny.png");
            break;
        case "http://icons.wxug.com/i/c/k/mostlysunny.gif":
            $("#icon").attr("src", "https://ssl.gstatic.com/onebox/weather/64/sunny_s_cloudy.png");
            break;
        case "http://icons.wxug.com/i/c/k/nt_partlysunny.gif":
        case "http://icons.wxug.com/i/c/k/partlysunny.gif":
            $("#icon").attr("src", "https://ssl.gstatic.com/onebox/weather/64/partly_cloudy.png");
            break;
        case "http://icons.wxug.com/i/c/k/nt_sleet.gif":
        case "http://icons.wxug.com/i/c/k/sleet.gif":
            $("#icon").attr("src", "https://ssl.gstatic.com/onebox/weather/64/sleet.png");
            break;
        case "http://icons.wxug.com/i/c/k/nt_rain.gif":
        case "http://icons.wxug.com/i/c/k/rain.gif":
            $("#icon").attr('src', "https://ssl.gstatic.com/onebox/weather/64/rain.png");
            break;
        case "http://icons.wxug.com/i/c/k/nt_snow.gif":
        case "http://icons.wxug.com/i/c/k/snow.gif":
            $("#icon").attr("src", "https://ssl.gstatic.com/onebox/weather/64/snow.png");
            break;
        case "http://icons.wxug.com/i/c/k/nt_tstorms.gif":
        case "http://icons.wxug.com/i/c/k/tstorms.gif":
            $("#icon").attr("src", "https://ssl.gstatic.com/onebox/weather/64/thunderstorms.png");
            break;
    }
}


$(document).ready(function() {
   getFWeather();
});

$("#unit").click(function(){
      if($("#unit").html() === "°F" || $("#unit").html() === "°F") {
         getFWeather();
      } else {
         getCWeather();
      }
});

scripts

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

Simple Weather App.markdown

Simple Weather App

This is a simple Weather App.

A Pen by Brandon on CodePen.

License.

style.css

body {
   font-family: 'Roboto', sans-serif;
}

#stuff {
   display: absolute;
   margin-left: -15px;
   background-color: white;
   width: 30%;
}

#unit {
   border-radius: 25px;
   font-weight: bold;
   width: 50px;
   height: 50px;
   font-size: 1.2em;
   box-shadow: 6px 28px 86px -17px 40px rgba(0, 0, 0, 0.75);
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
   position: absolute;
   right: 35px;
   bottom: -25px;
}

menu li {
   padding-left: 0px;
}

.material-icons {
   color: rgba(255, 255, 255, 1);
   font-size: 36px;
   margin-top: 4px;
}

#appBar {
   background-color: #FF9800;
   height: 48px;
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

#weather-card {
   margin: 24px 22px 40% 22px;
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
   position: relative;
   min-width: 280px;
   
}

/**
#addMore {
   width: 50px;
   height: 50px;
   padding: 8px 16px 22px;
   font-size: 25px;
   line-height: 1.33;
   border-radius: 25px;
   margin-top: 0px;
   box-shadow: 6px 28px 86px -17px 40px rgba(0, 0, 0, 0.75);
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
   position: absolute;
   right: 35px;
   bottom: -25px;
}
**/

#icon {
   width: 100px;
   height: auto;
}

@media screen and (max-width: 420px) {
   #weather-card {
      margin: 10px;
      margin-bottom: 30%;
   }
   
   h2 {
      font-size: 1.8em;
   }
   h4 {
      font-size: 1.3em;
   }
   #icon {
      width: 75px;
   }
   
   #unit {
      width: 40px;
      height: 40px;
      font-size: .95em;
      border-radius: 25px;
      font-weight: bold;
      bottom: -17px;
      right: 10px;
      
   }
}

#switch {
   position: absolute;
   right: 35px;
   bottom: 2px;
   font-weight: bold;
   font-size: 1.2em;
}

footer {
   background-color: black;
   width: 100%;
   color: white;
   font-weight: bold;
   padding: 3%;
   padding-top: 25px;
   margin-bottom: 0px;
}

styles

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css" rel="stylesheet" />