How to get live local date & time of the searched city using Open weather API

user_17427411 0
Viewed 522

I have created a weather project using open weather API: https://openweathermap.org/current?fbclid=IwAR1SVc9zn9uXaZWLmJA9lYEeZvUc1s_kR68RFadWuIwd8yBjIyJ7zsVMKkE

I have added all the API parameters to my code.

However, I also want to fetch the live local date and time for the city that is being searched.

For example, when the user searches "Athens" it displays something like this:

Saturday 15/1/2022 16:24:03 (I want the seconds to change live every second that passes)

MY CODE:

javascript and HTML scripts insert

let weather = {
  apiKey: "XXXXXXXXXXXXXXXXXXXXX",
  fetchWeather: function (city) {
    fetch(
      "https://api.openweathermap.org/data/2.5/weather?q=" +
        city +
        "&units=metric&lang=en&appid=" +
        this.apiKey
    )
  
      .then((response) => {
        if (!response.ok) {
          alert("No weather found.");
          throw new Error("No weather found.");
        }
        return response.json();
      })
      .then((data) => this.displayWeather(data));
  },
  
  //fetching the API parameters:
  displayWeather: function (data) {
    const { name } = data;
    const { lon } = data.coord;
    const { lat } = data.coord;
    const { icon, description } = data.weather[0];
    const { feels_like } = data.main;
    const { temp, humidity } = data.main;
    const {temp_min} = data.main;
    const {temp_max} = data.main;
    const { pressure } = data.main;
    const { speed } = data.wind;
    const { deg } = data.wind;
    const { visibility } = data;
    const { all } = data.clouds;
    const { gust } = data.wind;
    const {timezone} = data;
    const { sunrise } = data.sys;
    const { sunset } = data.sys;

  
//Displaying the results:
    document.querySelector(".city").innerText = "Weather: " + name;
    document.querySelector(".lon").innerText = "Longitude: " + lon;
    document.querySelector(".lat").innerText = "Latitude: " + lat;
    document.querySelector(".icon").src =
      "https://openweathermap.org/img/wn/" + icon + ".png";
    document.querySelector(".description").innerText = description;
    document.querySelector(".temp").innerText = temp + "°C";
    document.querySelector(".feels-like").innerText = "Temperature feels like: " + feels_like + "°C";
    document.querySelector(".temp_min").innerText = "Minimum Temperature: " + temp_min + "°C";
    document.querySelector(".temp_max").innerText = "Maximum Temperature: " + temp_max + "°C";
    document.querySelector(".humidity").innerText =
      "Humidity: " + humidity + "%";
    document.querySelector(".visibility").innerText = "Visibility: " + visibility + " meters";
    document.querySelector(".cloudiness").innerText = "Cloudiness: " + all + "%";
    document.querySelector(".pressure").innerText = "Atmospheric Pressure: " + pressure + " hPa";
    document.querySelector(".wind").innerText =
      "Wind speed: " + speed + " km/h";
    document.querySelector(".wind-deg").innerText = "Wind degrees: " + deg + "°";
    document.querySelector(".wind-gust").innerText = "Wind gust: " + gust + " m/s";
    document.querySelector(".sunrise").innerText = "Sunrise: " + window.moment(sunrise * 1000).format('HH:mm a');
    document.querySelector(".sunset").innerText = "Sunset: " + window.moment(sunset * 1000).format('HH:mm a');
    document.querySelector(".weather").classList.remove("loading");
    document.body.style.backgroundImage =
      "url('https://source.unsplash.com/1600x900/?')"; 
  },

  
  search: function () {
    this.fetchWeather(document.querySelector(".search-bar").value);
  },
};

document.querySelector(".search button").addEventListener("click", function () {
  weather.search();
});

document
  .querySelector(".search-bar")
  .addEventListener("keyup", function (event) {
    if (event.key == "Enter") {
      weather.search();
    }
  });
//Displaying Athens weather on page load
weather.fetchWeather("Athens");
<script src="https://momentjs.com/downloads/moment.js"></script>
 <!-- script to convert sunrise and sunset times to time format and on the local time of the searched city -->
 <script src="./script.js" defer></script>
 <!-- local script -->

What modifications should I do to my code?

NOTE: I want the LIVE date and time if possible.

weather-api openweathermap javascript
2 Answers

You can try out Time API
With this API, you can get current time and time zone information for any location on Earth, convert time zones and list all Daylight Saving Time (DST) changes in a specific location.

According to the documentation (implementation with cURL):

$ ACCESSKEY="<Your Access Key>"
$ SECRETKEY="<Your Secret Key>"
$ curl -G \
    --data-urlencode "version=3" \
    --data-urlencode "prettyprint=1" \
    --data-urlencode "accesskey=$ACCESSKEY" \
    --data-urlencode "secretkey=$SECRETKEY" \
    --data-urlencode "placeid=norway/oslo" \
    https://api.xmltime.com/timeservice
user_171234240

fetching the API parameters (displayWeather)

 const {timezone} = data;
 const {dt} = data;
 const dateTime = new Date(dt * 1000);
 const toUtc = dateTime.getTime() + dateTime.getTimezoneOffset() * 60000;
 const currentLocalTime = toUtc + 1000 * timezone;
 const selectedDate = new Date(currentLocalTime);

 const date = selectedDate.toLocaleString("en-GB", {
      day: "numeric",
      weekday: "long",
      month: "long",
 });
 const year = selectedDate.toLocaleString("en-GB", {
      year: "numeric",
 });
 const hour = selectedDate.toLocaleString("en-GB", {
      hour: "2-digit",
      minute: "2-digit",
      hour12: false,
 });
 return `${date} ${year} ${hour}`; //Thursday, 21 July 2022 18:14
user_133786800
Related