Pen Settings

HTML

CSS

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

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

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

Behavior

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.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div class="container-fluid" style="background-color:#fff">
  <div class="row">
    <div class="col-md-6 col-md-offset-3">
      <h1 class="text-center">Bill's Weather<br>Emporium</h1>
      <h2 id="currentCity" class="text-center">The Moon</h2>
      <h2 id="temp" class="text-center"><b id="currentTemp">-298</b><b>&deg</b><b id="tempSign">F</h2>
      <h2 id="weatherInfo" class="text-center">Moon-Like</h3>
      <img id="weatherIcon" src="https://maxcdn.icons8.com/iOS7/PNG/100/Cinema/moon-100.png" width="100">
    </div>
  </div>
  <div class="row">
    <div class="col-md-6 col-md-offset-3">
      <h3 class="text-center">Inspired by <a href= "https://codepen.io/FreeCodeCamp/full/bELRjV">Free Code Camp Weather</a></h3>
      <h3 class="text-center">Icon pack by <a href= "https://icons8.com">IIcons8</a></h3>
    </div>
  </div>
</div>



              
            
!

CSS

              
                h1 {
  font-size: 60pt
}

h2 {
  font-size: 20pt
}

h3 {
  font-size: 10pt
}

img {
    display: block;
    margin: auto;
}
weatherContainer {
  background-color: green;
}
#tempSign {
  cursor: pointer;
}


              
            
!

JS

              
                $(document).ready(function() {
  
  console.log("ready")
  
  var farenheight = true;
  var tempF = -298;
  var tempC = -183;
  var temp = 290;
  var tempSign = 'F'
  var timeNow = new Date().getTime() / 1000
  

  $("#tempSign").click(function(){
    
    console.log('changeingSign')
    if (farenheight) {
      farenheight = false;
      temp = tempC;
      tempSign = 'C'
    } else {
      farenheight = true;
      temp = tempF;
      tempSign = 'F'
    }
    
    document.getElementById("currentTemp").innerHTML = temp.toString();
    document.getElementById("tempSign").innerHTML = tempSign;
    
  })
  
  function weatherCondition(conditionCode,isDay) {
    
    var cloudy = "https://maxcdn.icons8.com/iOS7/PNG/100/Network/shared-100.png";
    var partCloudDay = "https://maxcdn.icons8.com/iOS7/PNG/100/Weather/partly_cloudy_day-100.png";
    var partCloudNight = "https://maxcdn.icons8.com/iOS7/PNG/100/Weather/partly_cloudy_night-100.png";
    var downpour = "https://maxcdn.icons8.com/iOS7/PNG/100/Weather/downpour-100.png";
    var lightRain = "https://maxcdn.icons8.com/iOS7/PNG/100/Weather/light_rain_2-100.png";
    var lightSnow = "https://maxcdn.icons8.com/iOS7/PNG/100/Weather/light_snow-100.png";
    var sleet = "https://maxcdn.icons8.com/iOS7/PNG/100/Weather/sleet-100.png";
    var storm = "https://maxcdn.icons8.com/iOS7/PNG/100/Weather/storm-100.png";
    var sunny = "https://maxcdn.icons8.com/iOS7/PNG/100/Astrology/summer-100.png";
    var clearNight = "https://maxcdn.icons8.com/iOS7/PNG/100/Weather/bright_moon-100.png";
    var moon = "https://maxcdn.icons8.com/iOS7/PNG/100/Cinema/moon-100.png";
    var fogNight = "https://maxcdn.icons8.com/iOS7/PNG/100/Weather/fog_night-100.png";
    var fogDay = "https://maxcdn.icons8.com/iOS7/PNG/100/Weather/fog_day-100.png";
    var volcano = "https://maxcdn.icons8.com/iOS7/PNG/100/Weather/volcano-100.png";
    var wind = "https://maxcdn.icons8.com/iOS7/PNG/100/Beauty/hair_dryer-100.png";
    var tornado = "https://maxcdn.icons8.com/iOS7/PNG/100/Weather/tornado-100.png";
    var hurricane = wind;
    var hail = "https://maxcdn.icons8.com/iOS7/PNG/100/Weather/hail-100.png";
    
    var clear = "";
    var fog = "";
    

    if (isDay) {
      clear = sunny;
      fog = fogDay;
    } else {
      clear = clearNight;
      fog = fogNight;
    }
    
    switch (conditionCode) {
      case 200:
        return storm
      case 201:
        return storm
      case 202:
        return storm
      case 210:
        return storm
      case 211:
        return storm
      case 212:
        return storm
      case 221:
        return storm
      case 230:
        return storm
      case 231:
        return storm
      case 232:
        return storm
      case 300:
        return lightRain
      case 301:
        return lightRain
      case 302:
        return lightRain
      case 310:
        return lightRain
      case 311:
        return lightRain
      case 312:
        return lightRain
      case 313:
        return lightRain
      case 314:
        return lightRain
      case 321:
        return lightRain
      case 500:
        return downpour
      case 501:
        return downpour
      case 502:
        return downpour
      case 503:
        return downpour
      case 504:
        return downpour
      case 511:
        return sleet
      case 520:
        return downpour
      case 521:
        return downpour
      case 522:
        return downpour
      case 531:
        return downpour
      case 600:
        return lightSnow
      case 601:
        return lightSnow
      case 602:
        return lightSnow
      case 612:
        return sleet
      case 615:
        return lightSnow
      case 616:
        return lightSnow
      case 620:
        return lightSnow
      case 621:
        return lightSnow
      case 622:
        return lightSnow
      case 701:
        return fog
      case 711:
        return fog
      case 721: 
        return fog
      case 731:
        return fog
      case 741:
        return fog
      case 751:
        return fog
      case 761:
        return fog
      case 761:
        return volcano
      case 771:
        return wind
      case 718:
        return tornado
      case 800:
        return clear
      case 801:
        return cloudy
      case 802:
        return cloudy
      case 803:
        return cloudy
      case 804:
        return cloudy
      case 900:
        return tornado
      case 901:
        return hurricane
      case 902:
        return hurricane
      case 903:
        return clear
      case 904:
        return clear
      case 905:
        return wind
      case 906:
        return sleet
      case 951:
        return clear
      case 952:
        return clear
      case 953:
        return clear
      case 954:
        return clear
      case 955:
        return clear
      case 956:
        return wind
      case 957:
        return wind
      case 958:
        return wind
      case 959:
        return wind
      case 960:
        return storm
      case 961:
        return wind
      case 962:
        return hurricane
      default:
        return volcano
    }
  }
  
  function error(err){
    console.log("error");
    console.log(err);
  }

  function weatherUpdate (data) {
    var isDay = (((timeNow > data.sys.sunrise) && (timeNow < data.sys.sunset)))
    tempF = Math.floor((data.main.temp - 273.15)*9/5 + 32);
    tempC = Math.floor((data.main.temp - 273.15));
    temp = tempF;
    var city = data.name + ", " + data.sys.country;
    console.log(data.weather[0].id)
    var icon = weatherCondition(data.weather[0].id,isDay);
    document.getElementById("currentCity").innerHTML = city;
    document.getElementById("currentTemp").innerHTML = temp.toString();
    document.getElementById("weatherInfo").innerHTML = data.weather[0].main;
    document.getElementById("weatherIcon").src = icon
  }
  
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(pos){
      
      console.log(pos);
      
      var lat = pos.coords.latitude;
      var lon = pos.coords.longitude;
      
      var openWeatherUrl = "http://api.openweathermap.org/data/2.5/weather?";
      var latUrl = "lat=" + lat.toString();
      var lonUrl = "&lon=" + lon.toString();
      var key = "&appid=b49195fadb6160b5cf3c4ba3642cdd23";

      var url = openWeatherUrl + latUrl + lonUrl + key;
      console.log(url);
      
      $.getJSON(url,weatherUpdate).error(error)
    })
  }
})
              
            
!
999px

Console