A Pen by Jonathan Davis

Tutorials of (A pen by jonathan davis) by Jonathan davis

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>A Pen by  Jonathan Davis</title>
  
  
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  <div id="main">
    <h1>Weather App</h1>
    <h3 id="city">  </h3>
  <div id="temp">
    <h3 id="F"></h3>
    <h3 id="C"><h3>
  </div>
     
   <p id="convert">
     <a href="#" id="toFarenheit">Convert to Farenheit</a>
     <a href="#" id="toCelsius"> Convert to Celsius</a>
  </p>
  
    <h3 id="desc">  </h3>
 
    <br>
  <p id="icon"> </p>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'></script>

    <script  src="js/index.js"></script>

</body>
</html>
/* Downloaded from https://www.codeseek.co/ */
body{
  text-align:center; 
  background-color:#0000aa; 
  color:white;
}

a{
  color:#00aa00; 
}

a:hover{
  color:#00aa00; 
  text-decoration:underline; 
} 

a:visited{
  color:#00aa00; 
  text-decoration:underline; 
}

#toFarenheit{
  display:none;
}

#toCelsius{
  display:none;
}
#F{
  display:none;
}
#C{
  display:none;
}

img{
  border-radius:10px; 
  border: solid white; 
}
/* Downloaded from https://www.codeseek.co/ */
var requestUrl = 'http://ip-api.com/json';
var apiKey = '00d0e4e511565826453f9a9bf651ea86';
var farenheit; 
var celsius; 

$.ajax({
  type: 'GET',
  contentType: 'text/plain',
  dataType: 'json',
  url: requestUrl,
  success: function(data) {

    var lat = data.lat;
    var lon = data.lon;

    // after getting latitude and longitude
    // make an API call to open weather api to get 
    // current data 

    var newUrl = "http://api.openweathermap.org/data/2.5/weather?lat=" + lat + "&lon=" + lon + "&appid=" + apiKey;
    $.ajax({
      type: 'GET',
      contentType: 'text/plain',
      dataType: 'json',
      url: newUrl,
      success: function(data) {

        var city = data.name;
        var desc = data.weather[0].description;
        var temp = data.main.temp_max; 
        
        var main = data.weather[0].main; 
        main=main.toLowerCase();
        
        temp = Math.round(temp);

        farenheit = ((temp - 273) * (9 / 5)) + 32;
        farenheit = Math.round(farenheit);
        celsius = temp - 273;
        celsius = Math.round(celsius);

        $('#city').append(city);
        
        $('#F').show();
        $('#F').append(farenheit+" F");
      
        $('#toCelsius').show();
        
        $('#C').append(celsius+" C"); 
        $('#C').hide();
        $('#desc').append(desc);
        
        
        
        if(main=='rain'){
          
          var url='http://headsup.boyslife.org/files/2012/12/rain.jpg'
        
        }
        
        else if(main=='clouds'){
          var url='https://aos.iacpublishinglabs.com/question/aq/700px-394px/clouds-that-look-like-cotton-balls_62557eb9-9d3c-43d8-9e88-8b5662829adf.jpg?domain=cx.aos.ask.com'; 
       
        }
        
        else if(main=='sunny' || main=='sun'){
          var url='http://www.punmiris.com/himg/o.43658.jpg'; 
        }
        
         else if(main=='mist'){
           var url='http://www.zocalopublicsquare.org/wp-content/uploads/2010/05/mist.jpg'; 
         }
        
         else if(main=='clear'){
          var url='https://www.blueskiescareers.co.uk/wp-content/uploads/2014/05/blue-sky-clouds.jpg'; 
         }
       
        var img="<img src='"+url+"' width='250px' height='150px'/>";
        $('#icon').append(img);

      },
      error: function() {
        alert("Something has gone wrong with the open weather API");
      }

    }); // end orders AJAX call  

  },
  error: function() {
    alert("Something has gone wrong with location api");
  }

}); // end lat api call

         $('#toCelsius').click(function(){
             $('#toCelsius').hide();
             $('#F').hide();
             $('#C').show(); 
             $('#toFarenheit').show();
         });
         
             $('#toFarenheit').click(function(){
             $('#toFarenheit').hide();
             $('#C').hide();
             $('#F').show(); 
             $('#toCelsius').show();
         });
         
// okay... after griding for a few hours straight 
// the basic functionality is now in place. 
// now it's just a matter of making everything "prettier" 
// adding icons, etc 
// but the app is getting all the right data, doing the math, and hiding and showing based 
// on what the user clicks
// resume tomorrow to finish it out

This awesome code ( A Pen by Jonathan Davis ) is write by Jonathan Davis, you can se more from this user in the personal repository

You can find the original code on Codepen.io

2018 © Jonathan Davis