summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--css/style.css24
-rw-r--r--js/index.js24
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>&#x1F321;<sub>max</sub> ${this.t_max}&deg;C</li>
- <li>&#x1F321;<sub>min</sub> ${this.t_min}&deg;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>&#x1F321;<sub>max</sub> ${this.t_max}&deg;C</li>
+ <li>&#x1F321;<sub>min</sub> ${this.t_min}&deg;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}