From 9cd41b9d510030b3618c42183a0250acccc32a12 Mon Sep 17 00:00:00 2001
From: Ekaitz Zarraga <ekaitz@elenq.tech>
Date: Sun, 29 Jan 2023 22:27:23 +0100
Subject: Add JavaScript backend and adjust style accordignly

---
 js/index.js | 123 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 123 insertions(+)
 create mode 100644 js/index.js

(limited to 'js/index.js')

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: "&#x1F324;",
+  FOG: "&#x1F32B;",
+  DRIZZLE: "&#x1F326;",
+  FREEZING_DRIZZLE: "&#x1F326;",
+  RAIN: "&#x1F327;",
+  FREEZING_RAIN: "&#x1F327;",
+  SNOW_FALL: "&#x1F328;",
+  SNOW_GRAINS: "&#x1F328;",
+  RAIN_SHOWERS: "&#x1F327;",
+  SNOW_SHOWERS: "&#x26C7;",
+  THUNDERSTORM: "&#x26C8;",
+  THUNDERSTORM_HAIL: "&#x26C8;",
+};
+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));
-- 
cgit v1.2.3