Interaction With A Weather API
<m-label id="latitude" content="latitude" y="4.5" font-size="50" width="5.5" alignment="center" height="1" color="#dddddd"></m-label>
<m-label id="longitude" content="longitude" y="3.5" font-size="50" width="5.5" alignment="center" height="1" color="#dddddd"></m-label>
<m-label id="windspeed" content="wind speed" x="0" y="2.5" font-size="60" width="11" alignment="center" height="1" color="#dddddd"></m-label>
<m-label id="temperature" content="temperature" x="0" y="1.5" font-size="60" width="11" alignment="center" height="1" color="#dddddd"></m-label>
<m-label id="weather" content="weather" x="0" y="0.5" font-size="60" width="11" alignment="center" height="1" color="#ddddff"></m-label>
<script>
const latLabel = document.getElementById("latitude");
const longLabel = document.getElementById("longitude");
const windSpeedLabel = document.getElementById("windspeed");
const temperatureLabel = document.getElementById("temperature");
const weatherLabel = document.getElementById("weather");
const weatherCode = {
0: "Clear sky",
1: "Mainly clear",
2: "Partly cloudy",
3: "Overcast",
45: "Fog",
48: "Depositing rime fog",
51: "Light drizzle",
53: "Moderate drizzle",
55: "Dense drizzle",
56: "Light freezing drizzle",
57: "Dense freezing drizzle",
61: "Light rain",
63: "Moderate rain",
65: "Heavy rain",
66: "Light freezing rain",
67: "Heavy freezing rain",
71: "Light snow fall",
73: "Moderate snow fall",
75: "Heavy snow fall",
77: "Snow grains",
80: "Light rain showers",
81: "Moderate rain showers",
82: "Violent rain showers",
85: "Light snow showers",
86: "Heavy snow showers",
95: "Thunderstorm",
96: "Thunderstorm",
97: "Thunderstorm",
98: "Thunderstorm",
99: "Thunderstorm",
};
async function fetchAPIData() {
const latitude = 51.5;
const longitude = 0.11;
const res = await fetch(
`https://api.open-meteo.com/v1/forecast?latitude=${latitude}&longitude=${longitude}¤t_weather=true&hourly=temperature_2m,relativehumidity_2m,windspeed_10m`,
);
const json = await res.json();
latLabel.setAttribute("content", `Latitude: ${latitude}°N`);
longLabel.setAttribute("content", `Longitude: ${longitude}°W`);
const floatTemp = parseFloat(json["current_weather"].temperature);
const color = floatTemp > 15 ? (floatTemp > 25 ? "#ffcccc" : "#ccffcc") : "#ccccff";
const temperature = `${floatTemp}°C`;
temperatureLabel.setAttribute("content", `Temp: ${temperature}`);
temperatureLabel.setAttribute("color", color);
const windSpeed = `${json["current_weather"].windspeed} km/h`;
windSpeedLabel.setAttribute("content", `Wind: ${windSpeed}`);
const weather = parseInt(json["current_weather"].weathercode);
weatherLabel.setAttribute("content", weatherCode[weather]);
}
fetchAPIData();
setInterval(() => {
fetchAPIData();
}, 5 * 60 * 1000);
</script>
Last updated