A Pen by Jonathan Davis

Thumbnail
This awesome code was written by jdd770, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright jdd770 ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<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/jdd770/a-pen-by-jonathan-davis-aBaPyR */
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/jdd770/a-pen-by-jonathan-davis-aBaPyR */
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

Comments