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.
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
                        If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With