diff options
author | Ekaitz Zarraga <ekaitz@elenq.tech> | 2023-02-10 11:56:12 +0100 |
---|---|---|
committer | Ekaitz Zarraga <ekaitz@elenq.tech> | 2023-02-10 11:56:12 +0100 |
commit | 77d1847e2de8077cea8854a15406a99c14aee2d8 (patch) | |
tree | ac11c9ba080e74d5ca7413f17235bf854630154e | |
parent | 437b88849c512076d3f0c10f614335092474135a (diff) |
Make days as an object
-rw-r--r-- | js/index.js | 46 |
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}°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 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}°c</li> + <li>min: ${this.t_min}°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]]); } } |