Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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.

like image 667
BegCoder Avatar asked Oct 19 '25 02:10

BegCoder


1 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
like image 191
Curious Learner Avatar answered Oct 22 '25 08:10

Curious Learner



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!