1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
|
"use strict";
const DATE_FORMAT = {
weekday: 'long', year: 'numeric', month: 'long', day: 'numeric'
};
const LATITUDE = 43.26271;
const LONGITUDE = -2.92528;
const TIMEZONE = "Europe/Madrid";
const WEATHERS = [
"CLEAR_SKY",
"MAINLY_CLEAR",
"FOG",
"DRIZZLE",
"FREEZING_DRIZZLE",
"RAIN",
"FREEZING_RAIN",
"SNOW_FALL",
"SNOW_GRAINS",
"RAIN_SHOWERS",
"SNOW_SHOWERS",
"THUNDERSTORM",
"THUNDERSTORM_HAIL"
];
// We can use some symbols from here:
// https://www.alt-codes.net/weather-symbols.php
const WEATHER2ICON = {
CLEAR_SKY: "$#x2600;",
MAINLY_CLEAR: "🌤",
FOG: "🌫",
DRIZZLE: "🌦",
FREEZING_DRIZZLE: "🌦",
RAIN: "🌧",
FREEZING_RAIN: "🌧",
SNOW_FALL: "🌨",
SNOW_GRAINS: "🌨",
RAIN_SHOWERS: "🌧",
SNOW_SHOWERS: "⛇",
THUNDERSTORM: "⛈",
THUNDERSTORM_HAIL: "⛈",
};
const WMO_CONVERTER = {
0: "CLEAR_SKY",
1: "MAINLY_CLEAR",
2: "MAINLY_CLEAR",
3: "MAINLY_CLEAR",
45: "FOG",
48: "FOG",
51: "DRIZZLE",
53: "DRIZZLE",
55: "DRIZZLE",
56: "FREEZING_DRIZZLE",
57: "FREEZING_DRIZZLE",
61: "RAIN",
63: "RAIN",
65: "RAIN",
66: "FREEZING_RAIN",
67: "FREEZING_RAIN",
71: "SNOW_FALL",
73: "SNOW_FALL",
75: "SNOW_FALL",
77: "SNOW_GRAINS",
80: "RAIN_SHOWERS",
81: "RAIN_SHOWERS",
82: "RAIN_SHOWERS",
85: "SNOW_SHOWERS",
86: "SNOW_SHOWERS",
95: "THUNDERSTORM",
96: "THUNDERSTORM_HAIL",
99: "THUNDERSTORM_HAIL"
};
function makeDay(date, t_max, t_min, weather){
console.log(Array.from(arguments));
let weather_desc = weather2description(weather);
let week_container = document.querySelector(".forecast");
let day_element = document.createElement("article");
day_element.setAttribute("class", "day-forecast");
day_element.innerHTML = `
<div class="day-forecast-text">
<h2><time datetime="${date}">${(new Date(date)).toLocaleDateString(undefined, DATE_FORMAT)}</h2>
<p>${weather_desc}</p>
<ul>
<li>Max: ${t_max}°C</li>
<li>Min: ${t_min}°C</li>
</ul>
</div>
<span class="day-forecast-image" title="${weather_desc}">${WEATHER2ICON[weather]}</span>`
week_container.appendChild(day_element);
}
function weather2description(weather){
let str = weather.replaceAll("_"," ").toLowerCase();
return str.charAt(0).toUpperCase() + str.slice(1);
}
function processResponse( response_obj ) {
console.log(response_obj);
let data = response_obj.daily;
// Our variables are here:
let time = data.time;
let temp_max = data.temperature_2m_max;
let temp_min = data.temperature_2m_min;
let code = data.weathercode;
for(let i = 0; i < time.length; i++){
makeDay(time[i], temp_max[i], temp_min[i], WMO_CONVERTER[code[i]]);
}
}
function dailyURL(){
return `https://api.open-meteo.com/v1/forecast`+
`?latitude=${LATITUDE}` +
`&longitude=${LONGITUDE}` +
`&timezone=${TIMEZONE}` +
`&daily=temperature_2m_max,temperature_2m_min,weathercode`
}
fetch( dailyURL() )
.then((r)=>r.json())
.then(processResponse)
.catch((err)=>console.error(err));
|
