Weather app

In this example below you will see how to do a Weather app with some HTML / CSS and Javascript

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

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>Weather app</title>
  
  
  
  
  
</head>

<body>

  <div>
  <h4>You are here:</h4>
  <p id = "city"></p>
  <h4>The temperature is: <span id="temperature"></span></h4> 
  <p>The weather is: <span id="weather"></span></p>
  <img id="weather_icon" src="" alt="" />
  <div>
    <button id="farenheit">Show in farenheit</button> 
    <button id="celcius">Show in celcius</button>
  </div>
  <p>Uses https://www.wunderground.com API</p>
</div>
  <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>

  

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/duqian91/weather-app-OXNREj */
if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(showWeatherData); 
}

function showWeatherData(position) {
wundergroundAPIURL = "https://api.wunderground.com/api/c38d24d8ee1bb5d8/conditions/en/q/autoip.json?" + position.coords.latitude + "," + position.coords.longitude + ".json";

  $.getJSON(wundergroundAPIURL, function(data) {
    // console.log(wundergroundAPIURL);      
    $("#city").html(data.current_observation.display_location.city);
    $("#temperature").html(data.current_observation.temp_c + " degrees Celcius");
    $("#weather").html(data.current_observation.weather);
    $("#weather_icon").attr("src", data.current_observation.icon_url);
  });
}

function showCelcius(position) {
  $.getJSON(wundergroundAPIURL, function(data) {
    $("#temperature").html(data.current_observation.temp_c + " degrees Celcius");
  });
}

function showFarenheit(position) {
  $.getJSON(wundergroundAPIURL, function(data) {
      $("#temperature").html(data.current_observation.temp_f + " degrees Farenheit");
    });
}

$("#celcius").on("click", showCelcius);
$("#farenheit").on("click", showFarenheit);

Comments