cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <div class="weatherBox">
  <h1>Local Weather</h1>
  <h2 id="location">City, Country</h2>
  <div class="buttonBox">
    <button id="degF" type="button">&deg;F</button>
    <button id="degC" type="button">&deg;C</button>
  </div>
  
  <div class="current">
    <h3>Current</h3>
    <p id="currentTemp">--</p>
    <p id="currentCond">--</p>
  </div>
  
  <div class="iconBox">
    <canvas id="icon" width="128" height="128"></canvas>
  </div>
</div>
  
  <!--
  <div class="forecast">
    <div class="today">
      <h3>Today</h3>
      <p id="todayMin">Min: 0&deg;F</p>
      <p id="todayMax">Max: 80&deg;F</p>
      <p id="todayCond">Clear</p>
    </div>
    <div class="tomorrow">
      <h3>Tomorrow</h3>
      <p id="tomMin">Min: 0&deg;F</p>
      <p id="tomMax">Max: 80&deg;F</p>
      <p id="tomCond">Clear</p>
    </div>
  </div>
-->
            
          
!
            
              body {
  background-color: #000000;
  font-family: Helvetica;
  color: white;
  -webkit-transition: background-color 1300ms ease-in-out;
  -ms-transition: background-color 1300ms ease-in-out;
  transition: background-color 1300ms ease-in-out;
}


.weatherBox {
  background-color: #000000;
  opacity: 0.7;
  
  margin: 50px auto;
  
  width: 80%;
  
}
            
          
!
            
              //relevant URLs
var locAPIURL = "https://ipinfo.io/geo?callback=?";
var weatherAPIURL = "http://api.openweathermap.org/data/2.5/weather?";

//cache for JSON weather data plus a setting for Fahrenheit or Celcius
var weatherAPICache;
var FOrC = "F";

//instantiating Skycons icons
var skycons = new Skycons({
  "color": "white"
});


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

//gets geolocation, sets relevant text in HTML, calls getWeather() and passes location data
function getLocation() {
  $.getJSON(locAPIURL, function(response) {
    var city = response.city;
    var country = response.country;
    $("#location").html(city + ", " + country);
    getWeather(city, country);
  });
}

//retrieves weather JSON, passes it to callback readWeather() function
function getWeather(city, country) {
  $.getJSON(weatherAPIURL + "q=" + encodeURIComponent(city) + "," + encodeURIComponent(country) + "&appid=df31dbf717553718e27d5235253b1752&callback=?", function(response) {
    console.log("inside getWeather() " + city + " " + country + " " + response);
    readWeather(response);
  });
}

//caches weather JSON, sets relevant text in HTML
function readWeather(response) {
  weatherAPICache = response;
  var weatherID = weatherAPICache.weather[0].id;
  
  console.log(Math.floor(weatherID/100) == 7);
  
  setTempUnit();

  //#currentCond text set via switch, according to openweathermap documentation
  var weatherText;
  switch (weatherID) {
    //thunderstorms group
    case 200:
      weatherText = "Thunderstorm with light rain";
      break;
    case 201:
      weatherText = "Thunderstorm with rain";
      break;
    case 202:
      weatherText = "Thunderstorm with heavy rain";
      break;
    case 210:
      weatherText = "Light thunderstorm";
      break;
    case 211:
      weatherText = "Thunderstorm";
      break;
    case 212:
      weatherText = "Heavy thunderstorm";
      break;
    case 221:
      weatherText = "Ragged thunderstorm";
      break;
    case 230:
      weatherText = "Thunderstorm with light drizzle";
      break;
    case 231:
      weatherText = "Thunderstorm with drizzle";
      break;
    case 232:
      weatherText = "Thunderstorm with heavy drizzle";
      break;
      //drizzle group
    case 300:
      weatherText = "Light intensity drizzle";
      break;
    case 301:
      weatherText = "Drizzle";
      break;
    case 302:
      weatherText = "Heavy intensity drizzle";
      break;
    case 310:
      weatherText = "Light intensity drizzle rain";
      break;
    case 311:
      weatherText = "Drizzle rain";
      break;
    case 312:
      weatherText = "Heavy intensity drizzle rain";
      break;
    case 313:
      weatherText = "Shower rain and drizzle";
      break;
    case 314:
      weatherText = "Heavy shower rain and drizzle";
      break;
    case 321:
      weatherText = "Shower drizzle";
      break;
      //rain group
    case 500:
      weatherText = "Light rain";
      break;
    case 501:
      weatherText = "Moderate rain";
      break;
    case 502:
      weatherText = "Heavy intensity rain";
      break;
    case 503:
      weatherText = "Very heavy rain";
      break;
    case 504:
      weatherText = "Extreme rain";
      break;
    case 511:
      weatherText = "Freezing rain";
      break;
    case 520:
      weatherText = "Light intensity shower rain";
      break;
    case 521:
      weatherText = "Shower rain";
      break;
    case 522:
      weatherText = "Heavy intensity shower rain";
      break;
    case 531:
      weatherText = "Ragged shower rain";
      break;
      //snow group
    case 600:
      weatherText = "Light snow";
      break;
    case 601:
      weatherText = "Snow";
      break;
    case 602:
      weatherText = "Heavy snow";
      break;
    case 611:
      weatherText = "Sleet";
      break;
    case 612:
      weatherText = "Shower sleet";
      break;
    case 615:
      weatherText = "Light rain and snow";
      break;
    case 616:
      weatherText = "Rain and snow";
      break;
    case 620:
      weatherText = "Light shower snow";
      break;
    case 621:
      weatherText = "Shower snow";
      break;
    case 622:
      weatherText = "Heavy shower snow";
      break;
      //atmospheric conditions group
    case 701:
      weatherText = "Mist";
      break;
    case 711:
      weatherText = "Smoke";
      break;
    case 721:
      weatherText = "Haze";
      break;
    case 731:
      weatherText = "Sand, dust whirls";
      break;
    case 741:
      weatherText = "Fog";
      break;
    case 751:
      weatherText = "Sand";
      break;
    case 761:
      weatherText = "Dust";
      break;
    case 762:
      weatherText = "Volcanic ash";
      break;
    case 771:
      weatherText = "Squalls";
      break;
    case 781:
      weatherText = "Tornado";
      break;
      //clear
    case 800:
      weatherText = "Clear sky";
      break;
      //clouds group
    case 801:
      weatherText = "Few clouds";
      break;
    case 802:
      weatherText = "Scattered clouds";
      break;
    case 803:
      weatherText = "Broken clouds";
      break;
    case 804:
      weatherText = "Overcast clouds";
      break;
      //extras
    case 900:
      weatherText = "Tornado";
      break;
    case 901:
      weatherText = "Tropical storm";
      break;
    case 902:
      weatherText = "Hurricane";
      break;
    case 903:
      weatherText = "Cold";
      break;
    case 904:
      weatherText = "Hot";
      break;
    case 905:
      weatherText = "Windy";
      break;
    case 906:
      weatherText = "Hail";
      break;

    case 951:
      weatherText = "Calm";
      break;
    case 952:
      weatherText = "Light breeze";
      break;
    case 953:
      weatherText = "Gentle breeze";
      break;
    case 954:
      weatherText = "Moderate breeze";
      break;
    case 955:
      weatherText = "Fresh breeze";
      break;
    case 956:
      weatherText = "Strong breeze";
      break;
    case 957:
      weatherText = "High wind, near gale";
      break;
    case 958:
      weatherText = "Gale";
      break;
    case 959:
      weatherText = "Severe gale";
      break;
    case 960:
      weatherText = "Storm";
      break;
    case 961:
      weatherText = "Violent storm";
      break;
    case 962:
      weatherText = "Hurricane";
      break;

    default:
      weatherText = NaN;
  }
  $("#currentCond").html(weatherText);
  
  //weather icon and background color set accordingly, similar to #currentCond. Cases are evaluated for truth, which works since all cases are mutually exclusive
  switch (true) {
    //will be looking at only the hundreds place digit for most weatherID since weather types are grouped by hundreds place
    case Math.floor(weatherID / 100) == 2: //thunderstorms
      skycons.set("icon", Skycons.RAIN);
      $("body").css("background-color", "#202d3c");
      break;

    case Math.floor(weatherID / 100) == 3: //drizzles
      skycons.set("icon", Skycons.RAIN);
      $("body").css("background-color", "#6f8cae");
      break;

    case Math.floor(weatherID / 100) == 5: //rains
      skycons.set("icon", Skycons.RAIN);
      $("body").css("background-color", "#374d67");
      break;

    case Math.floor(weatherID / 100) == 6: //snows
      skycons.set("icon", Skycons.SNOW);
      $("body").css("background-color", "#b4c3d5");
      break;

    case Math.floor(weatherID / 100) == 7: //atmospheric conditions
      skycons.set("icon", Skycons.FOG);
      $("body").css("background-color", "#9d9e9f");
      break;

    case weatherID == 800: //clear
      //day vs night icons
      if (weatherAPICache.dt > weatherAPICache.sys.sunset) {
        skycons.set("icon", Skycons.CLEAR_NIGHT);
        $("body").css("background-color", "#003366");
      } else {
        skycons.set("icon", Skycons.CLEAR_DAY);
        $("body").css("background-color", "#87cefa");
      }
      break;

    case weatherID == 801: //partly cloudy
      //day vs night icons
      if (weatherAPICache.dt > weatherAPICache.sys.sunset) {
        skycons.set("icon", Skycons.PARTLY_CLOUDY_NIGHT);
        $("body").css("background-color", "#303b45");
      } else {
        skycons.set("icon", Skycons.PARTLY_CLOUDY_DAY);
        $("body").css("background-color", "#b3cce6");
      }
      break;

    case weatherID == 802: //other clouds
    case weatherID == 803:
    case weatherID == 804:
      skycons.set("icon", Skycons.CLOUDY);
      $("body").css("background-color", "#727374");
      break;

    case (weatherID / 100) >= 9 && weatherID / 100 < 9.5:
      $("body").css("background-color", "#c42121");
  }
  
  skycons.play();
}

//calcs temperature in F or C, sets #currentTemp text
function setTempUnit() {
  if (FOrC === "F") {
    $("#currentTemp").html((9 / 5 * (weatherAPICache.main.temp - 273) + 32).toFixed() + "&deg;F");
  } else if (FOrC === "C") {
    $("#currentTemp").html((weatherAPICache.main.temp - 273.15).toFixed() + "&deg;C");
  }
}

//set temp unit preference, change page text to match
$("#degF").on("click", function() {
  FOrC = "F";
  setTempUnit();
});

$("#degC").on("click", function() {
  FOrC = "C";
  setTempUnit();
});




/* old attempts. Keeping this around just to compare progress.

function readWeather() {
  $.getJSON(weatherAPIURL + "q=" + encodeURIComponent(city) + "," + encodeURIComponent(country.toLowerCase()) + "&appid=df31dbf717553718e27d5235253b1752&units=imperial&jsonp=?", function(response) {
    
    currentTemp = response.main.temp;
    weatherCode = response["weather"][0].id;
    
    $("#currentTemp").html(currentTemp.toString());
    $("#currentCond").html(weatherCode.toString());
  });
  
  console.log(city + " " + country + " " + currentTemp); //trying to debug
}

/*
window.onload = function() {
  getLocation();
};*/
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console