diff options
| -rw-r--r-- | css/style.css | 24 | ||||
| -rw-r--r-- | js/index.js | 24 |
2 files changed, 28 insertions, 20 deletions
diff --git a/css/style.css b/css/style.css index 459fdec..f7b9eaa 100644 --- a/css/style.css +++ b/css/style.css @@ -8,29 +8,30 @@ body{ } .forecast > h1, -.day-forecast { +.day-forecast-container { margin: 0.5rem; padding: 0.3rem; font-size: 1.2rem; } -.day-forecast { +.day-forecast-container{ border-radius: 5px; border: 1px solid lightgrey; cursor: pointer; + background-color: whitesmoke; } - -.day-forecast h2 { - font-size: 1.1rem; -} - -.day-forecast{ +.day-forecast { + display: flex; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; - background-color: whitesmoke; } + +.day-forecast h2 { + font-size: 1.1rem; +} + .day-forecast-text{ min-width: 200px; margin: 0 2rem; @@ -65,5 +66,8 @@ footer{ text-transform: lowercase; } .day-forecast-text p:first-letter { -text-transform: uppercase; + text-transform: uppercase; +} +.hourly-forecast { + width: 100%; } 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} |