html 显示当地天气（FreeCodeCamp Zipline）

Posted 2021-05-10

body{
  margin: 0 auto;
  text-align: center;
  font-family: Montserrat;
  background: url(http://74211.com/wallpaper/picture_big/free_scenery_wallpaper_of_city_life_.jpg);
  background-size: cover;
}
.deets{
  display: inline-block;
  vertical-align: text-middle;
  background: rgba(255,255,255, 0.7);
  min-width: 160px;
  height: 130px;
  line-height: 100px;
  margin: 5px;
  border-radius: 10%;
  position: relative;
  clear: both;
}
.icon{
  float: left;
  position: relative;
  top: -10px;
  right: -210px;
}
.row{
  position: relative;
  margin: 0 auto;
  width:700px;
  top: 10px;
  clear: both;
}
h1{
  color: #FF9933;
  font-size: 60px;
}
h2{
  color: #CC7A29;
  font-size: 30px;
}
.temp{
  font-size: 40px;
  float: left;
  position: relative;
  right: -220px
}
button{
  color: white;
  background: red;
  font-family: Montserrat;
  position: relative;
  top: 14px;
  right: -30px;
}

Show the Local Weather (FreeCodeCamp Zipline)
---------------------------------------------


A [Pen](https://codepen.io/harunpehlivan/pen/geprNe) by [HARUN PEHLİVAN](https://codepen.io/harunpehlivan) on [CodePen](https://codepen.io).

[License](https://codepen.io/harunpehlivan/pen/geprNe/license).

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

$(document).ready(function(){

var location, windDir, loc, locArray, background, fah;
  //fahBool for which to change too when button is pressed
var fahBool = true;

//get our location  
 $.ajax({
                    url: 'http://ipinfo.io',
                    type: 'GET',
                    contentType: 'application/json',
                    dataType: 'jsonp',
                    success: function(data) {

loc = data.loc;
locArray = loc.split(',');   

//response. name AND response.sys.country are name/ country
//response.weather[0].description IS description THERE ARE 9 MAIN DES
//response.wind.speed AND response.wind.deg are speed/deg
//response.main.temp is temp
//response.weather[0].icon is icon key
                      
 //first call for fah temp variable 
  $.getJSON("http://api.openweathermap.org/data/2.5/weather?lat=" + locArray[0] + "&lon=" + locArray[1] + "&units=imperial", function(response) {fah = response.main.temp});  

  $.getJSON("http://api.openweathermap.org/data/2.5/weather?lat=" + locArray[0] + "&lon=" + locArray[1] + "&units=metric", function(response) {

   //set correct background image
    switch (response.weather[0].description)
{
  case 'sky is clear':
    $('body').css('background','url(http://74211.com/wallpaper/picture_big/free_scenery_wallpaper_of_city_life_.jpg)');
    break;
  case 'few clouds':
    $('body').css('background','url(http://wrongsideofthecamera.files.wordpress.com/2013/08/boston-charles-river-clouds-zakim-bridge.jpg)');
    break;
  case 'scattered clouds':
    $('body').css('background','url(https://johnrussellblog.files.wordpress.com/2013/01/clouds_em.jpg)');
    break;
  case 'broken clouds':
    $('body').css('background','url(http://cloud-maven.com/wp-content/uploads/2013/11/DSC07613.jpg)');
    break;
    
  case 'shower rain':
    $('body').css('background','url(http://img12.deviantart.net/dc79/i/2004/132/4/b/rainy_puddle.jpg)');
    break;
    
    case 'Rain':
    $('body').css('background','url(http://valleyheritageradio.ca/newsite/wp-content/uploads/2014/06/heavy-rain-artistic-wallpaper-2560x1600-1426.jpg)');
    break;
    
    case 'Thunderstorm':
    $('body').css('background','url(http://upload.wikimedia.org/wikipedia/commons/a/a4/Cloud_to_ground_lightning_strikes_south-west_of_Wagga_Wagga.jpg)');
    break;
    
    case 'snow':
    $('body').css('background','url(http://dreamatico.com/data_images/snow/snow-5.jpg)');
    break;
    
    case 'mist':
    $('body').css('background','url(https://jameswoodward.files.wordpress.com/2010/05/themist.jpg)');
    break;
}
    
    var image = "http://openweathermap.org/img/w/" + response.weather[0].icon + ".png";
    
  $('.icon').html("<img width='80' src='" + image + "'><p>");
  $('.temp').html(Math.round(response.main.temp * 10 ) / 10 + " C</p>");         
    
  $('.city').html("<p>" + response.name + ", " + response.sys.country + "</p>");
  $('.des').html("<p>" + response.weather[0].description + "</p>");
    
  //probly should put this in a switch
  //find out direction of wind before adding correct html
   if(response.wind.deg > 11.25 && response.wind.deg < 56.25){
     windDir = 'NE';
   }
   else if(response.wind.deg > 56.25 && response.wind.deg < 101.25){
     windDir = 'E';
   }
   else if(response.wind.deg > 101.25 && response.wind.deg < 146.25){
     windDir = 'SE';
   }
   else if(response.wind.deg > 146.25 && response.wind.deg < 191.25){
     windDir = 'S';
   }
   else if(response.wind.deg > 191.25 && response.wind.deg < 236.25){
     windDir = 'SW';
   }
   else if(response.wind.deg > 236.25 && response.wind.deg < 281.25){
     windDir = 'W';
   }
   else if(response.wind.deg > 281.25 && response.wind.deg < 326.25){
     windDir = 'NW';
   }
    else{windDir = 'N';}
    
  $('.wind').html("<p>" + windDir + " " + response.wind.speed + " knots</p>");
    
  //temp change button
  $('button').click(function(){
    if(fahBool === true){
    $('.temp').html(Math.round(fah * 10 ) / 10 + " F</p>");
      fahBool = false;
    }
    else{$('.temp').html(Math.round(response.main.temp * 10 ) / 10 + " C</p>");
      fahBool = true;  
        }
  });

  });
  
  }});  
});

<html>
  <head>
    <link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
  </head>
  <body>
    <h1>Free Code Camp Zipline</h1>
    <h2>Local Weather App</h2>
    <div class="row">
      <div class="icon"></div>
      <div class="temp"></div>
      <div><button>Change Temp</button></div>
    </div>
    <div class="row">
      <div class="city deets"><p>City, Country</p></div>
      <div class="des deets"><p>Description</p></div>
      <div class="wind deets"><p>Wind</p></div>
    </div>
  </body>
</html>