<section>
  <!-- UI -->
  <div class="row no-gutters">
    <!-- location text box -->
    <div class="col-12 col-md-10">
      <div class="ui">
        <input type="text" placeholder=""></input>
      </div>
    </div>
    <!-- location grabber button -->
    <div class="col-6 col-md-1">
      <div class="ui button" id="userLocation">
        <i class="fa fa-location-arrow"></i>
      </div>
    </div>
    <!-- units switch -->
    <div class="col-6 col-md-1">
      <div class="ui button" id="unitSwitch">
        <p id="unitSwitchText">&deg;C</p>
      </div>
    </div>
  </div>
<div id="error"></div>
</section>
<section id='allWeather'>
  <!-- todays weather -->
  <div class="row">

    <div class="col-12 col-md-6" id="stats-today">
      <p id="wind-today"/p>
      <p id="temp-today"><span></span><sup class="units"></sup></p>
      <p id="highlow-today"><i class="wi wi-thermometer"></i>&nbsp;<span class="high"></span><sup class="units"></sup>&nbsp;&nbsp;&nbsp;&nbsp;<i class="wi wi-thermometer-exterior"></i>&nbsp;<span class="low"></span><sup class="units"></sup></p>
    </div>
    <div class="col-12 col-md-6 order-md-first" id="weather-today">
      <i class="wi" id="icon-today"></i>
      <p id="weather-text-today"></p>
    </div>
  </div>

  <!-- -->
  <hr/>

  <!-- forecast -->
  <div class="row">
    <!-- tomorrow -->
    <div class="col-12 col-md-7" >
      <div class="forecast" id="day-1">
        <div class="row v-center">
          <div class="col-4 offset-1"><i class="align-middle wi" id="icon-day-1"></i>
          </div>
          
          <div class="col-7">
            <p id="tomorrow">tomorrow</p>
            <p id="highlow-day-1" class="tomorrow">
              <i class="wi wi-thermometer"></i>&nbsp; 
              <span class="high"></span><sup class="units"></sup>
              &nbsp;<span class="low-temp"><i class=" wi wi-thermometer-exterior"></i>&nbsp; <span class="low"></span><sup class="units"></sup></span></p>
            <p id="text-day-1" class="tomorrow"></p>
            </p>
          </div>
        <div class="clearfix"></div>
        </div>
      </div>
    </div>
    <!-- rest of the week -->
    <div class="col">
      <div class="row">

        <!-- day 2 -->
        <div class="col-12 top-row">
          <div class="forecast" id="day-2">
            <p id="day-day-2"></p>
            <p id="highlow-day-2"><i class="wi wi-thermometer"></i> <span class="high"></span><sup class="units"></sup>&nbsp;<span class="low-temp"><i class="wi wi-thermometer-exterior"></i> <span class="low"></span><sup class="units"></sup></span></p>
            <p id="text-day-2" class="tomorrow"></p>
          </div>
        </div>

        <!-- day 3 -->
        <div class="col-6">
          <div class="forecast" id="day-3">
            <p id="day-day-3"></p>
            <p id="highlow-day-3"><i class="wi wi-thermometer"></i> <span class="high"></span><sup class="units"></sup>&nbsp;<span class="low-temp"><i class="wi wi-thermometer-exterior"></i> <span class="low"></span><sup class="units"></sup></span></p>
            <p id="text-day-3" class="tomorrow"></p>
          </div>
        </div>
        <!-- day 4 -->
        <div class="col-6">
          <div class="forecast" id="day-4">
            <p id="day-day-4"></p>
            <p id="highlow-day-4"><i class="wi wi-thermometer"></i> <span class="high"></span><sup class="units"></sup>&nbsp;<span class="low-temp"><i class="wi wi-thermometer-exterior"></i> <span class="low"></span><sup class="units"></sup></span></p>
            <p id="text-day-4" class="tomorrow"></p>
          </div>
        </div>
      </div>
    </div>
    <div class="clearfix"></div>
  </div>
</section>

<footer>
  <p>created by <a href="http://adamsnape.com" target='_blank'>Adam Snape</a><br /> a <a href="http://freecodecamp.org" target="_blank">Free Code Camp Challenge</a><br /><br /></p>
  
  <p><small>with special thanks to<br />
    <a href="https://twitter.com/fleetingftw" target="_blank">James Fleeting</a> for <a href="http://simpleweatherjs.com" target="_blank">Simpleweather.js</a><br />
    <a href="https://twitter.com/erik_flowers" target="_blank">Erik Flowers</a> for <a href="http://erikflowers.github.io/weather-icons/" target="_blank">Weather Icons</a></small></p>
</footer>
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,700,900')

html body
  padding: 0 5%
  font-family: 'Montserrat', serif
  color: #333
#allWeather
  display: none
  
.v-center
  position: relative
  top: 50%
  transform: translateY(-50%)
//--------------------------------
// ui controls

.ui
  border: 1px solid #333
  border-radius: 6px
  padding: 10px
  margin: 20px 5px auto 5px
  text-align: center
  font-size: 1.2em
  height: 80%
  &.button
    cursor: pointer
    font-size: 1.7em
  input
    width: 100%
    height: 100%
    margin: 0
    border: none
    text-align: center
    &:focus::-webkit-input-placeholder
    &:focus::-moz-placeholder
    &:focus:-moz-placeholder
      color: transparent
  .fa-location-arrow
    transform: rotate(135deg)

#unitSwitchText
  margin: 0
  padding: 0
  
  
#error
  display: none
  width: 100%
  text-align: center
  font-size: 16pt
//----------------------------------
// todays weather

#stats-today
  margin-top: 60px
  text-align: center
  @media screen and (min-width: 767px)
    text-align: left
    padding-left: 10%
  #wind-today
    font-size: 30pt
  #temp-today
    font-size: 90pt
    font-weight: 900
    @media screen and (min-width: 576px)
      font-size: 145pt
      margin: -75px 0 -50px 0
      sup
        top: -85px
        font-size: 0.5em
  #highlow-today
    font-size: 30pt
  
  
#weather-today
  text-align: center 
  @media screen and (min-width: 767px)
    margin-top: 30px
  #icon-today
    margin-bottom: 70px
    font-size: 160pt 
  #weather-text-today
    font-size: 18pt
    @media screen and (min-width: 576px)
      font-size: 30pt
    font-weight: 900
    text-transform: uppercase
 
   
//----------------------------------
hr
  height: 2px
  background: #333
  margin: 80px 0
    
//----------------------------------
// weather forecast

.forecast
  padding: 10px
  height: 100%
  background: #333
  color: white
  text-align: center
 

// tomorrow 
#day-1
  text-align: center
  padding: 10px
  #icon-day-1
    font-size: 70pt
    height: 100%
    @media screen and (min-width: 576px)
      font-size: 115pt 
  #text-day-1
    font-size: 12pt
    @media screen and (min-width: 576px)
      font-size: 20pt
  #tomorrow
    margin-top: 20px
    font-size: 14pt
    font-weight: 900
    text-transform: uppercase
    @media screen and (min-width: 576px)
      font-size: 20pt
  #highlow-day-1
    font-size: 16pt
    font-weight: 900
    @media screen and (min-width: 576px)
      font-size: 28pt

.low-temp
  color: #aaa
    
.top-row
  margin: 15px 0
  @media screen and (min-width: 768px)
    margin-top: 0
 
// followup forecast

[id^="day-day-"]:not(.tomorrow)
  margin-top: 10px
  text-transform: uppercase 
  font-weight: 700
  
[id^="highlow-day-"]:not(.tomorrow)
  margin: -5px 0 10px 0
  font-size: 10pt
  font-weight: 900
  i
    font-weight: 400
  @media screen and (min-width: 576px)
    font-size: 14pt
  @media screen and (min-width: 978px)
    font-size: 18pt
    
[id^="text-day-"]:not(.tomorrow)
  font-size: 8pt
  @media screen and (min-width: 576px)
    fon-size: 16pt
  
//----------------------------------
// footer

footer
  height: 150px
  padding: 100px 0
  text-align: center
  font-size: 9pt
  color: #ababab
  a
    color: #ababab
    text-decoration: underline
    &:hover
      color: #888
View Compiled
var allTemps = [];

var randomPlace = ['New York', 'London', 'Paris', 'Lisbon', 'Sydney', 'Toronto', 'Barcelona', 'Kranjska Gora', 'Oslo', 'tokyo', 'Hong Kong'];


function textFade(e, t) {
    $(e).fadeOut(500, function() {
        $(this).text(t).fadeIn(500);
    });

};
//get the right icon
function getIcon(w) {
  w = w.toLowerCase();
  var words = w.split(' ');
  var word;
  //choose the last word of the forecast text
  if (words.length > 1) {
    var i = words.length - 1;
    word = words[i];
  } else {
    word = words
  }
  // add day- pre-fix when needed
  if (word == "clear" || word == "sunny") {
    word = "day-sunny";
  } else if( word == 'breezy') {
    word = "windy";
  }
    
  return word
}

// use Simpleweather API to get weather.
function getWeather(location) {
  $('input').val('');  
  $('#allWeather').css('display', 'none');
  
  $.simpleWeather({
    location: location,
    woeid: '',
    unit: currentUnits,
    
    success: function(weather) {
      allTemps = [];
      // change the background color     
      var colour = 220 - (weather.temp * 6);
      if (colour < 30) {
        colour = 30;
      };    
       $("html body, input").animate({backgroundColor: "hsla(" + colour + ", 100%, 66%, 1)"}, 800);
   
      //change the search bar placeholder text
      $('input').attr('placeholder', weather.city+', '+weather.region+', '+weather.country);
      
      //get and format today weather stats
        //wind info
      var lowerWindD = weather.wind.direction.toLowerCase();
      var windReport = '<i class="wi wi-wind wi-from-' + lowerWindD + '"></i> ' + Math.round(weather.wind.speed) + '<sup>mph</sup> ';
        // only show wind speed if there is acutally some wind!
      if(Math.round(weather.wind.speed) > 0) {
        windReport += weather.wind.direction
      };
        // display todays weather
      $('#wind-today').html(windReport);
      $('#temp-today>span').html(weather.temp);
      $('#highlow-today>.high').html(weather.high);
      $('#highlow-today>.low').html(weather.low);
      $('#weather-text-today').text(weather.currently);
      
       //change weather icons 
      
      $('#icon-today').removeClass().addClass('wi').addClass('wi-' +  getIcon(weather.currently));      
      $('#icon-day-1').removeClass().addClass('wi').addClass('wi-' + getIcon(weather.forecast[1].text));
      
      //loop through all the basic forecast data for the week.   
      for (i=0; i<5; i++) {
          
       allTemps.push({
          tempc: weather.temp,
          tempf: weather.alt.temp,
          highc: weather.forecast[i].high,
          highf: weather.forecast[i].alt.high,
          lowc: weather.forecast[i].low,
          lowf: weather.forecast[i].alt.low,
        })
         
        $('#text-day-'+i).text(weather.forecast[i].text);
        $('#highlow-day-'+i+'>.high').text(weather.forecast[i].high);
        $('#highlow-day-'+i+'>span>.low').text(weather.forecast[i].low);
         var whichDay;
         switch(weather.forecast[i].day) {
           case 'Mon':
              whichDay = 'Monday';
              break;
           case 'Tue':
              whichDay = 'Tuesday';
              break;
           case 'Wed':
              whichDay = 'Wednesday';
              break;
           case 'Thu':
              whichDay = 'Thursday';
              break;
           case 'Fri':
              whichDay = 'Friday';
              break;
           case 'Sat':
              whichDay = 'Saturday';
              break;
           case 'Sun':
              whichDay = 'Sunday';
              break;
        }
        $('#day-day-'+i).text(whichDay);
        // display information
        $('#allWeather').css('display', 'block');
      };//end loop
      
     
    },// end success script
    
    //---------------------
    
    error: function(error) {
      $('#allWeather').css('display', 'block');
      $('#error').html("Ooops! " + error + "<br /> Seems we're having some trouble back stage. If we can we will show you some weather from a random part of the World.").css('display: inline-block');

      var randomNumber = Math.floor(Math.random() * randomPlace.length());
      getWeather(randomPlace[randomNumber]);
      $('#allWeather').css('display', 'block');
    }//end error script
  });
}// end simpeweather.js call

// find weather from search box 
$('input').keypress(function(e) {
  if (e.which == 13) {
    var typedLocation = $('input').val();
    getWeather(typedLocation);
  }
});

// change of units
var currentUnits = 'c';
$('#unitSwitch').on('click', function() {
    if ($('#unitSwitchText').html() == '°C' ) {
      $('#unitSwitchText').html('&deg;F');
      $('sup.units').html('&deg;F');
      currentUnits = 'f';
      for (i=0; i<5; i++) {
        $('#highlow-day-'+i+'>.high').text(allTemps[i].highf);
        $('#highlow-day-'+i+'>span>.low').text(allTemps[i].lowf);
      };
       $('#temp-today>span').text(allTemps[0].tempf);
      $('#highlow-today>.high').text(allTemps[0].highf);
      $('#highlow-today>.low').text(allTemps[0].lowf);
      return currentUnits
    } else {
      $('#unitSwitchText').html('&deg;C');
      $('sup.units').html('&deg;C');
      currentUnits = 'c'
      for (i=0; i<5; i++) {
        $('#highlow-day-'+i+'>.high').text(allTemps[i].highc);
        $('#highlow-day-'+i+'>span>.low').text(allTemps[i].lowc);
      };
       $('#temp-today>span').text(allTemps[0].tempc);
      $('#highlow-today>.high').text(allTemps[0].highc);
      $('#highlow-today>.low').text(allTemps[0].lowc);
      return currentUnits
    } 
  });

// use current location button
$('#userLocation').on('click', function() {
    if ("geolocation" in navigator){
    navigator.geolocation.getCurrentPosition(function(position) {
      getWeather(position.coords.latitude+','+position.coords.longitude);
    });

}
});

//run on load
$(document).ready( function() {
  // use celcius as default
  $('sup.units').html('&deg;C');
    var randomNo = Math.floor(Math.random() * randomPlace.length);
    getWeather(randomPlace[randomNo]);   
});
Rerun