Get Local Weather

get-local-weather.markdown

Get Local Weather

A Pen by VenomSnake on CodePen.

License.

index.html

<p><button onclick="geoFindMe()">Submit Local Position</button></p>

<br>
<br>

<div class="wrapper">
  <button onclick="displayIcon()">Get Weather</button>
  <button onclick="Change_temp()">Convert</button>
</div>

<div id="picture">
  
  
</div>

<div id="temp">
  
</div>

<div id="city">
  
</div>

script.js

var temperature=0;
var img_location;
var celcius = 0;
var fahrenheit = 0;
//var location="blah";
var address="";

function geoFindMe () {
if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(function(position) {
   var latitude = position.coords.latitude;
   var longitude = position.coords.longitude;
    $.getJSON("https://fcc-weather-api.glitch.me/api/current?lat="+latitude+"&lon="+longitude+"" ,
              function(result){
      //console.log(result);
      console.log(result);
      temperature = result.main["temp"];
      
      address = result.name;
      img_location = result.weather[0].icon;
     // location = result.name;
      console.log(temperature); //temperature
      console.log(address);         //location
      
      //console.log(img_location);
     
      
      
    
  });//end of Json function
   
    
  }); 
  } //end of geolocation function
 
                                           
}     //end of geoFindMe    



                                           

 function displayIcon () {
  //console.log(img_location);
  //console.log(location);
  /*document.getElementsByClassName("picture").innerHTML = "<h2>The Current location: </h2>";
  document.getElementsByClassName("picture").innerHTML = "<h2>The Current Temperature is: "+temperature+ " "+celcius+"</h2>"; */
  document.getElementById("picture").innerHTML = "<img src="+img_location+">";
   
  $("#temp").html("<h2>The Current temperature: "+temperature+"</h2>");
   
  $("#city").html("<h2>Location: "+address+"</h2>");
   
   celcius = 1;
  
  
}

function Change_temp() {
  
  if ( celcius == 1) {
    temperature = temperature * 1.8 + 32; //switch to F
    console.log(temperature);
    $("#temp").html("<h2>The Current temperature: "+temperature+"</h2>");
    celcius = 0;
    fahrenheit = 1;
    }
  
  else if ( fahrenheit == 1) {
    temperature = (temperature - 32) / 1.8;
    console.log(temperature);
    $("#temp").html("<h2>The Current temperature: "+temperature+"</h2>");
    fahrenheith = 0;
    celcius = 1;
  }
  
  
  
  
  else {
    console.log("No weather data yet!")
  }
  
  
}
  
   
                                           

scripts

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

style.css

.wrapper {
 
  display: inline-block;
  position: relative;
  top: 50%;
  left: 50%;
}