Add styling to selected day

KilianBoute · Nov 16, 2023 · f92dde0 · f92dde0
1 parent a0fd278
commit f92dde0
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 3 deletions.
diff --git a/scripts.js b/scripts.js
@@ -95,6 +95,7 @@ const displayWeatherForLocation = (locationData, name, area, country) => {
     for (let i = 0; i < locationData.daily.time.length; i++) {
         const cardElement = document.createElement('div');
             cardElement.className = "card";
+            cardElement.selected = false;
         const cardDay = document.createElement('h3');
         let timeDate = new Date(locationData.daily.time[i]);
             if(i === 0){cardDay.textContent = "Today";}
@@ -118,11 +119,21 @@ const displayWeatherForLocation = (locationData, name, area, country) => {
 
         cardElement.hourly = locationData.hourly;
         cardElement.addEventListener('click', () => {
+
+            cardContainer.childNodes.forEach(element => {
+                if(element.selected === true) {
+                    element.selected = false;
+                    element.classList.remove('selected');
+                }
+            });
+            cardElement.selected = true;
+            cardElement.classList.add('selected');
             const removeDisplay = document.getElementById('hoursOfDay');
             if(removeDisplay){
                 cardContainer.removeChild(removeDisplay);
             }
             cardContainer.appendChild(displayHourlyWeather(locationData, i));
+
         })
         cardContainer.appendChild(cardElement);
 

diff --git a/styles.css b/styles.css
@@ -135,7 +135,11 @@ main{
     align-items: center;
     justify-content: center;
     text-align: center;
-    margin-top: 2rem;
+    margin-top: 1rem;
+}
+
+h1{
+    font-size: 60px;
 }
 
 #cards-container{
@@ -220,10 +224,18 @@ footer{
         display: flex;
         gap: 1rem;
         padding: 1rem;
-        background-color: rgba(6, 26, 64, .1);
-        border-radius: 1rem;
+        background-color: rgba(6, 26, 64, .2);
+        border-radius: 0 0 1rem 1rem;
         overflow-x: scroll;
     }
+
+    .selected{
+        border-radius: 1rem 1rem 0 0;
+        background-color: rgba(6, 26, 64, .2);
+        transform-origin: top;
+        transform: scaleY(107.4%);
+        overflow: hidden;
+    }
 }