summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorEkaitz Zarraga <ekaitz@elenq.tech>2023-02-10 11:56:12 +0100
committerEkaitz Zarraga <ekaitz@elenq.tech>2023-02-10 11:56:12 +0100
commit77d1847e2de8077cea8854a15406a99c14aee2d8 (patch)
treeac11c9ba080e74d5ca7413f17235bf854630154e
parent437b88849c512076d3f0c10f614335092474135a (diff)
Make days as an object
-rw-r--r--js/index.js46
1 files 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]]);
}
}