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="mo-box">
  <div class="mo-title">
  <p>Whether or Not, Is It Hot?</p></div>
    <button id="mo-fcButt" class="btn btn-primary mo-button  mo-icon" style="text-align:left;min-width:400px"> Fahrenheit / Celsius
   </button>
<div class="mo-weather">
  <div class="mo-weather-text"></div>

  </div>
 <div class="mo-credit">
  <br>
  <br>
  <p>
   by <a href="https://codepen.io/pcblues">Mark Daniel Osborne</a></p>
</div>
<div class="mo-gotgeo">
</div>

</div>  
</div>


              
            
!

CSS

              
                

td:nth-child(1) {
  width: 150px;
  background: #ddd;
 padding: 5px 0px 5px 18px;
  }

/* the second */
td:nth-child(2) {
  width: 250px;
  background: #ccc;
 padding: 5px 0px 5px 1px;
}
.mo-box
{
font-family: 'Rubik', sans-serif; 
    border-radius:10px;
   background:#AAAAAA;
    margin: 20px 20px 20px 20px;
    box-shadow: 0 0 10px black;
    padding:0 15px 0 15px;

}
  
.mo-title 
  {
    font-size: 35px;

  }

  .mo-icon
  {

    background-size: 100px;
    background-repeat: no-repeat;
     background-position: right;
     min-height:80px;

  }
  .mo-weather 
  {
    font-size: 20px;
  }

  .mo-gotgeo
  {
    font-size: 10px;

  }

.mo-credit
  {
    font-size: 15px;

  }


              
            
!

JS

              
                
$( document ).ready(function() {
  document.getElementById("mo-fcButt").addEventListener("click",swapFC
  );// addeventlistener
 getTheWeather();
});
var useF = false

var addLog = function(msg) {
  //$(".mo-gotgeo").append(msg+"<BR>")
 console.log(msg)
}
var swapFC= function () {
  useF = !useF
  getTheWeather()
}
var getUnits = function() 
{
  var units
  if (useF) {
    units= "&units=imperial"
  } else 
  {
    units = "&units=metric"
  }
  return units
}

var getTheWeather=function() 
{
 if ("geolocation" in navigator) {
  /* geolocation is available */
  addLog("Getting location...<br>");  
  navigator.geolocation.getCurrentPosition(
    // success callback
    function(position) {
   var longStr = position.coords.longitude.toString();
   var latStr = +position.coords.latitude.toString();
  addLog("Location acquired...");  
  posText =  "Latitude:"+latStr + " Longitude:" + longStr;
  addLog(posText);  
  var OWMAPI = "&APPID=a13590991752f796619e30cac6e26550";
   //var finalWeatherURL = "https://api.darksky.net/forecast/c98673d4fc9c1c2c94d970b2b22bcadf/"+latStr+","+longStr;
   var CORS = "https://cors-anywhere.herokuapp.com/"
   var finalWeatherURL=CORS +"http://api.openweathermap.org/data/2.5/weather?lat="+latStr+"&lon="+longStr+OWMAPI+getUnits();
   
   // .getJSON(url,data,success)
   // jHXR .done, .fail, .always
  addLog("Running getJSON...<br>");
  addLog(finalWeatherURL+"<br>");
  $.getJSON(finalWeatherURL,{},function(forecast) 
     {
       addLog("Done 1...<br>");
       var weatherReport = "<table>"
      /* Get these:
      weather.main
      weather.description
      weather.icon
      main.temp
      main.humidity
      main.temp_min
      main.temp_max
      wind.speed
      name (location)
      */
      
      var unitsDesc = ""
      var weatherLocation = "<tr><td>Location</td><td> "+forecast.name+"</td></tr>";
      // if (useF) { unitsDesc+="Imperial"} else {unitsDesc+="Metric"}
      //unitsDesc +=" units:<BR>"
      //weatherReport += ""+unitsDesc+""
      weatherReport += weatherLocation
      var weather = forecast.weather[0]
      var weatherPic = weather.icon
      var weatherURL = "http://openweathermap.org/img/w/"+weatherPic+".png";     
     addLog(weatherURL)

      var main = forecast.main
      var temperature = "<tr><td>Temperature</td><td> "+main.temp+" degrees " 
      if (useF) { temperature+="Fahrenheit" } else { temperature+="Celcius" }
      temperature += "</td></tr>"
      weatherReport += temperature
      humidity = "<tr><td>Humidity</td><td>"+ main.humidity+"%</td></tr>"
      weatherReport += humidity
      wind = forecast.wind
      windSpeed = "<tr><td>Wind speed</td><td>"+wind.speed
      if (useF) {windSpeed+=" Mph"} else {windSpeed+=" Kph"}
      windSpeed += "</td></tr>"
      weatherReport+= windSpeed
   weatherReport += "</table>"
   
      $(".mo-weather-text").html(weatherReport)
      $(".mo-icon").css('background-image', 'url("' + weatherURL + '")')      
     })
      
   .done(
     //function() {addLog("Done 2...<br>");}
   )
  .fail(
         function( jqXHR, textStatus, errorThrown ){
          var errText = "Fail...<BR>"+textStatus+"<BR>"+errorThrown+"<BR>";           

           addLog(errText);
        } 
  )
  .always(     
    //function() {addLog("Always...<br>");}
  );},
  // error callback
  function(posError){addLog("getCurrentPosition Fail...<br>"+posError.message );}
  )
} else {
  /* geolocation IS NOT available */
  addLog("Browser does not have geolocation services.")

}

}
              
            
!
999px

Console