Add JavaScript backend and adjust style accordignly

1 files changed, 123 insertions, 0 deletions

diff --git a/js/index.js b/js/index.js
new file mode 100644
index 0000000..5d34903
--- /dev/null
+++ b/js/index.js
@@ -0,0 +1,123 @@
+"use strict";
+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)).toLocaleString()}</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));