Show Local Weather

index.html

<section class="container-fluid">
  <!-- Display Header -->
  <header class="text-center">
    <h1>Your Local Weather</h1>
  </header>
  <!-- Get City, Country and Status -->
    <article>
      <h3><span id="city"></span><span id="country"></span></h3>
      <h4><span id="temperature"></span><span id="tempunit"></span></h4>
      <i class="weather-icon"></i>
      <!-- Get Sunrise and Sunset -->
      <article class="sunrise-sunset">
        <article class="sunrise">
          <span>Sunrise: </span><span id="sunrise"></span>
        </article>
        <article class="sunset">
          <span>Sunset: </span><span id="sunset"></span>
        </article>
      </article>
  </article>
  <!-- Toggle between C and F -->
  <a href="#" class="temp-toggle"><i class="fas fa-thermometer-half"></i>&deg; C / &deg; F Toggle</a>
  
  
  
  
</section>

script.js

let tempUnit = 'C';
let currentTempInCelsius;

$(document).ready(function()
{
  navigator.geolocation.getCurrentPosition(getWeatherInfo);

// Function to Get Weather Information
function getWeatherInfo(position) {
  let latitude = position.coords.latitude;
  let longitude = position.coords.longitude;
  
  $.ajax(
  {
    url: `https://weather-proxy.freecodecamp.rocks/api/current?lat=${latitude}&lon=${longitude}`,
    success: function(weather) {
      $('#city').text(weather.name + ', ');
      $('#country').text(weather.sys.country);
      currentTempInCelsius = Math.round(weather.main.temp * 10) / 10;
      $('#temperature').html(currentTempInCelsius + ' °');
      $('#tempunit').text(tempUnit);
      $('.weather-icon').html('<img src=' + weather.weather[0].icon + 'alt="Your local weather icon">');
      let sunrise = new Date(weather.sys.sunrise * 1000);
      $('#sunrise').text(sunrise.toTimeString().substring(0,5) + ' am');
      let sunset = new Date(weather.sys.sunset * 1000);
                  $('#sunset').text(sunset.toTimeString().substring(0,5) + ' pm');
      console.log(latitude,longitude);
      console.log(weather);    
    }
  });
  
  // Toggle between deg C and deg F
  $('.temp-toggle').click(function() {
    let currentTemperatureUnit = $('#tempunit').text();
    let myNewTemperatureUnit = currentTemperatureUnit === 'C' ? 'F' : 'C';
      $('#tempunit').text(myNewTemperatureUnit);
    if (myNewTemperatureUnit==='F') {
      $('#temperature').html(Math.round(currentTempInCelsius * 1.8 + 32) + ' &deg;');
    } else {
      $('#temperature').html(currentTempInCelsius + '&deg;');
    }
  });
}
});

scripts

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

show-local-weather.markdown

Show Local Weather

The purpose of this project is to show the local weather.

As a user, I expect to show the weather in my current location. As a user, I expect to see a different icon or background image (e.g. snowy mountain) depending on the weather. As a user, I can push a button to toggle between Fahrenheit and Celsius.

Acknowledgements - Chris Bridges on GitHub (Accessed on 30 June 2021), w3schools.com, Font Awesome.

A Pen by Derek Dhammaloka on CodePen.

License.

style.css

/* Global Styles and Classes */

body {
  font-family: "Roboto",Arial,Verdana,sans-serif;
  background: black;
  color: white;
}



.temp-toggle {
  text-decoration: none;
  position: fixed;
  bottom: -2px;
  right: 20px;
  background-color: white;
  color: black;
  padding: 25px;
  border-radius: 5%;
  border: 2px black solid;
  
}

.temp-toggle:hover {
  color: #009B77;
  text-decoration: none;
}

.sunrise, .sunset {
  margin: 25px;
}