Creé un proyecto meteorológico utilizando la API meteorológica abierta: https://openweathermap.org/current?fbclid=IwAR1SVc9zn9uXaZWLmJA9lYEeZvUc1s_kR68RFadWuIwd8yBjIyJ7zsVMKkE
He agregado todos los parámetros de la API a mi código.
Sin embargo, también quiero obtener la fecha y hora local en vivo de la ciudad que se está buscando.
Por ejemplo, cuando el usuario busca "Atenas", muestra algo como esto:
sabado 15/1/2022 16:24:03 (quiero que los segundos cambien en vivo cada segundo que pasa)
MI CÓDIGO:
inserción de secuencias de comandos javascript y HTML
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 -->¿Qué modificaciones debo hacer a mi código?
NOTA: Quiero la fecha y hora EN VIVO si es posible.
Puedes probar Time API
Con esta API, puede obtener información sobre la hora actual y la zona horaria para cualquier ubicación en la Tierra , convertir zonas horarias y enumerar todos los cambios de horario de verano (DST) en una ubicación específica.
Según la documentación (implementación con 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