{"id":648,"date":"2025-03-16T13:49:28","date_gmt":"2025-03-16T13:49:28","guid":{"rendered":"https:\/\/trstyle.com\/en\/?p=648"},"modified":"2025-03-16T13:53:20","modified_gmt":"2025-03-16T13:53:20","slug":"weather","status":"publish","type":"post","link":"https:\/\/trstyle.com\/en\/weather\/","title":{"rendered":"Weather"},"content":{"rendered":"\n\/\/ script.js\nconst apiKey = &#8220;0e0d82113da1d73bf96fbbca4cea0956&#8221;; \/\/ Replace with your API key\nconst cityInput = document.getElementById(&#8220;cityInput&#8221;);\nconst getWeatherButton = document.getElementById(&#8220;getWeather&#8221;);\nconst cityNameElement = document.getElementById(&#8220;cityName&#8221;);\nconst temperatureElement = document.getElementById(&#8220;temperature&#8221;);\nconst descriptionElement = document.getElementById(&#8220;description&#8221;);\nconst weatherIconElement = document.getElementById(&#8220;weatherIcon&#8221;);\nconst errorElement = document.getElementById(&#8220;error&#8221;);\nconst weatherDataElement = document.getElementById(&#8220;weatherData&#8221;);\n\n\ngetWeatherButton.addEventListener(&#8220;click&#8221;, () => {\n    const city = cityInput.value;\n    if (city) {\n        getWeatherData(city);\n    } else {\n        errorElement.textContent = &#8220;Please enter a city name.&#8221;;\n        weatherDataElement.style.display = &#8216;none&#8217;;\n    }\n});\n\nasync function getWeatherData(city) {\n    try {\n        const apiUrl = `https:\/\/api.openweathermap.org\/data\/2.5\/weather?q=${city}&#038;appid=${apiKey}&#038;units=metric`; \/\/ Use metric units\n        const response = await fetch(apiUrl);\n\n        if (!response.ok) {\n            throw new Error(&#8220;City not found&#8221;);\n        }\n\n        const data = await response.json();\n\n        \/\/ Extract data\n        const cityName = data.name;\n        const temperature = data.main.temp;\n        const description = data.weather[0].description;\n        const iconCode = data.weather[0].icon;\n        const iconUrl = `https:\/\/openweathermap.org\/img\/wn\/${iconCode}@2x.png`;\n\n        \/\/ Update the UI\n        cityNameElement.textContent = cityName;\n        temperatureElement.textContent = `Temperature: ${temperature}\u00b0C`;\n        descriptionElement.textContent = `Description: ${description}`;\n        weatherIconElement.src = iconUrl;\n        weatherIconElement.alt = description;\n\n        \/\/ Show the weather data and clear any previous errors\n        weatherDataElement.style.display = &#8216;block&#8217;;\n        errorElement.textContent = &#8220;&#8221;;\n\n    } catch (error) {\n        console.error(&#8220;Error fetching weather data:&#8221;, error);\n        errorElement.textContent = error.message; \/\/ Display the error message\n        weatherDataElement.style.display = &#8216;none&#8217;;\n    }\n}\n","protected":false},"excerpt":{"rendered":"<p>\/\/ script.js const apiKey = &#8220;0e0d82113da1d73bf96fbbca4cea0956&#8221;; \/\/ Replace with your API key const cityInput = document.getElementById(&#8220;cityInput&#8221;); const getWeatherButton = document.getElementById(&#8220;getWeather&#8221;); const cityNameElement = document.getElementById(&#8220;cityName&#8221;); const temperatureElement = document.getElementById(&#8220;temperature&#8221;); const descriptionElement = document.getElementById(&#8220;description&#8221;); const weatherIconElement = document.getElementById(&#8220;weatherIcon&#8221;); const errorElement = document.getElementById(&#8220;error&#8221;); const weatherDataElement = document.getElementById(&#8220;weatherData&#8221;); getWeatherButton.addEventListener(&#8220;click&#8221;, () => { const city = cityInput.value; if (city) { [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/trstyle.com\/en\/wp-json\/wp\/v2\/posts\/648"}],"collection":[{"href":"https:\/\/trstyle.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/trstyle.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/trstyle.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/trstyle.com\/en\/wp-json\/wp\/v2\/comments?post=648"}],"version-history":[{"count":3,"href":"https:\/\/trstyle.com\/en\/wp-json\/wp\/v2\/posts\/648\/revisions"}],"predecessor-version":[{"id":651,"href":"https:\/\/trstyle.com\/en\/wp-json\/wp\/v2\/posts\/648\/revisions\/651"}],"wp:attachment":[{"href":"https:\/\/trstyle.com\/en\/wp-json\/wp\/v2\/media?parent=648"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/trstyle.com\/en\/wp-json\/wp\/v2\/categories?post=648"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/trstyle.com\/en\/wp-json\/wp\/v2\/tags?post=648"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}