From 77d1847e2de8077cea8854a15406a99c14aee2d8 Mon Sep 17 00:00:00 2001
From: Ekaitz Zarraga <ekaitz@elenq.tech>
Date: Fri, 10 Feb 2023 11:56:12 +0100
Subject: Make days as an object

---
 js/index.js | 46 ++++++++++++++++++++++++++--------------------
 1 file changed, 26 insertions(+), 20 deletions(-)

diff --git a/js/index.js b/js/index.js
index 69fbe78..c13882f 100644
--- a/js/index.js
+++ b/js/index.js
@@ -68,28 +68,34 @@ const WMO_CONVERTER = {
   99: "THUNDERSTORM_HAIL"
 };
 
-function makeDay(date, t_max, t_min, weather){
-  console.log(Array.from(arguments));
-
-  let weather_desc = weather2description(weather);
-
+function appendDay(date, t_max, t_min, weather){
   let week_container = document.querySelector(".forecast");
+  let day_element = new Day(date, t_max, t_min, weather);
+  week_container.appendChild(day_element.createHTML());
 
-  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}&deg;C</li>
-        <li>Min: ${t_min}&deg;C</li>
-    </ul>
-  </div>
-  <span class="day-forecast-image" title="${weather_desc}">${WEATHER2ICON[weather]}</span>`
-
-  week_container.appendChild(day_element);
+}
 
+function Day(date, t_max, t_min, weather){
+  this.date = date;
+  this.t_max = t_max;
+  this.t_min = t_min;
+  this.weather = weather;
+  this.weather_desc = weather2description(weather);
+  this.createHTML = function (){
+    let day_element = document.createElement("article");
+    day_element.setAttribute("class", "day-forecast");
+    day_element.innerHTML = `
+    <div class="day-forecast-text">
+      <h2><time datetime="${this.date}">${(new Date(this.date)).toLocaleDateString(undefined, DATE_FORMAT)}</h2>
+      <p>${this.weather_desc}</p>
+      <ul>
+          <li>max: ${this.t_max}&deg;c</li>
+          <li>min: ${this.t_min}&deg;c</li>
+      </ul>
+    </div>
+    <span class="day-forecast-image" title="${this.weather_desc}">${WEATHER2ICON[this.weather]}</span>`;
+    return day_element;
+  }
 }
 
 function weather2description(weather){
@@ -108,7 +114,7 @@ function processResponse( response_obj ) {
   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]]);
+    appendDay(time[i], temp_max[i], temp_min[i], WMO_CONVERTER[code[i]]);
   }
 }
 
-- 
cgit v1.2.3