diff options
| author | Ekaitz Zarraga <ekaitz@elenq.tech> | 2023-02-14 10:36:00 +0100 |
|---|---|---|
| committer | Ekaitz Zarraga <ekaitz@elenq.tech> | 2023-02-14 10:36:00 +0100 |
| commit | 53eb8a7b148a49b1b6e56429b860321445c78281 (patch) | |
| tree | 4ccc698bab85416ee8e0a5f81719377fd2706149 /js/index.js | |
| parent | 0ed3e6a25a6944ad0c16d15ecd4e028a242c2d23 (diff) | |
Add a container to fix graph rendering
Diffstat (limited to 'js/index.js')
| -rw-r--r-- | js/index.js | 24 |
1 files changed, 14 insertions, 10 deletions
diff --git a/js/index.js b/js/index.js index 011d4ff..415518f 100644 --- a/js/index.js +++ b/js/index.js @@ -83,7 +83,7 @@ function Day(date, t_max, t_min, weather){ this.weather_desc = weather2description(weather); this.createHTML = function (){ let day_element = document.createElement("article"); - day_element.setAttribute("class", "day-forecast"); + day_element.setAttribute("class", "day-forecast-container"); day_element.addEventListener("click", dayFetcher(this.date, (html)=>{ @@ -91,15 +91,19 @@ function Day(date, t_max, t_min, weather){ day_element.appendChild(html); })); 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>🌡<sub>max</sub> ${this.t_max}°C</li> - <li>🌡<sub>min</sub> ${this.t_min}°C</li> - </ul> + <div class="day-forecast"> + <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>🌡<sub>max</sub> ${this.t_max}°C</li> + <li>🌡<sub>min</sub> ${this.t_min}°C</li> + </ul> + </div> + + <span class="day-forecast-image" title="${this.weather_desc}">${WEATHER2ICON[this.weather]}</span> </div> - <span class="day-forecast-image" title="${this.weather_desc}">${WEATHER2ICON[this.weather]}</span>`; + `; return day_element; } } @@ -200,7 +204,7 @@ function processHourly(data){ hourly_element.setAttribute("class", "hourly-forecast"); hourly_element.innerHTML = ` - <svg viewBox="0 0 ${xsize} ${ysize}" xmlns="http://www.w3.org/2000/svg width="" height="200px"> + <svg viewBox="0 0 ${xsize} ${ysize}" xmlns="http://www.w3.org/2000/svg"> ${polyline} ${dots} ${labels} |