styling for the forecast and icon import

coltmay · Mar 19, 2021 · 432c0e7 · 432c0e7
1 parent 3686d4e
commit 432c0e7
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 14 deletions.
diff --git a/scripts/weather/WeatherList.js b/scripts/weather/WeatherList.js
@@ -6,7 +6,7 @@ export const parkWeather = (parkObj) => {
     getWeather(parkCord[0], parkCord[1])
         .then(response => {
             const filteredWeather = weatherFilter(response);
-            // console.log(filteredWeather)
+            console.log(filteredWeather)
             displayWeather(filteredWeather)
         })
 }
@@ -20,7 +20,7 @@ const getLocation = (parkObj) => {
 const weatherFilter = (weatherArray) => {
     let filteredWeatherArray = [];
     weatherArray.forEach(weatherObj => {
-        if (weatherObj.dt_txt.includes('12:00:00')){
+        if (weatherObj.dt_txt.includes('06:00:00')){
             filteredWeatherArray.push(weatherObj);
         }
     });

diff --git a/scripts/weather/WeatherPreview.js b/scripts/weather/WeatherPreview.js
@@ -52,34 +52,39 @@ export const displayWeather = (weatherObj) => {
 
     let weatherDisplay =     `
                             <div class="weatherCard">
-                            <h3>${firstDayDate} at 12PM</h3>
+                            <h3 class="forecastTitle">${firstDayDate}'s<br/>"Golden Hour"</h3>
+                            <img class="forecastIcon" src="http://openweathermap.org/img/w/${weatherObj[0].weather[0].icon}.png"/>
                             <h4>${weatherObj[0].weather[0].main}</h4>
                             <p>${weatherObj[0].main.temp}&#176 F</p>
-                            <p>${weatherObj[0].weather[0].description}</p>
+                            <p class ="weatherCardBottom">${weatherObj[0].weather[0].description}</p>
                             </div>
                             <div class="weatherCard">
-                            <h3>${secondDayDate} at 12PM</h3>
+                            <h3 class="forecastTitle">${secondDayDate}'s<br/>"Golden Hour"</h3>
+                            <img class="forecastIcon" src="http://openweathermap.org/img/w/${weatherObj[1].weather[0].icon}.png"/>
                             <h4>${weatherObj[1].weather[0].main}</h4>
                             <p>${weatherObj[1].main.temp}&#176 F</p>
-                            <p>${weatherObj[1].weather[0].description}</p>
+                            <p class ="weatherCardBottom">${weatherObj[1].weather[0].description}</p>
                             </div>
                             <div class="weatherCard">
-                            <h3>${thirdDayDate} at 12PM</h3>
+                            <h3 class="forecastTitle">${thirdDayDate}'s<br/>"Golden Hour"</h3>
+                            <img class="forecastIcon" src="http://openweathermap.org/img/w/${weatherObj[2].weather[0].icon}.png"/>
                             <h4>${weatherObj[2].weather[0].main}</h4>
                             <p>${weatherObj[2].main.temp}&#176 F</p>
-                            <p>${weatherObj[2].weather[0].description}</p>
-                            </div>
+                            <p class ="weatherCardBottom">${weatherObj[2].weather[0].description}</p>
+                            </div >
                             <div class="weatherCard">
-                            <h3>${fourthDayDate} at 12PM</h3>
+                            <h3 class="forecastTitle">${fourthDayDate}'s<br/>"Golden Hour"</h3>
+                            <img class="forecastIcon" src="http://openweathermap.org/img/w/${weatherObj[3].weather[0].icon}.png"/>
                             <h4>${weatherObj[3].weather[0].main}</h4>
                             <p>${weatherObj[3].main.temp}&#176 F</p>
-                            <p>${weatherObj[3].weather[0].description}</p>
+                            <p class ="weatherCardBottom">${weatherObj[3].weather[0].description}</p>
                             </div>
                             <div class="weatherCard">
-                            <h3>${fifthDayDate} at 12PM</h3>
+                            <h3 class="forecastTitle">${fifthDayDate}'s<br/>"Golden Hour"</h3>
+                            <img class="forecastIcon" src="http://openweathermap.org/img/w/${weatherObj[4].weather[0].icon}.png"/>
                             <h4>${weatherObj[4].weather[0].main}</h4>
                             <p>${weatherObj[4].main.temp}&#176 F</p>
-                            <p>${weatherObj[4].weather[0].description}</p>
+                            <p class ="weatherCardBottom">${weatherObj[4].weather[0].description}</p>
                             </div>
                             `;
 

diff --git a/styles/main.css b/styles/main.css
@@ -130,8 +130,52 @@ footer {
 
 #parkForecast {
   display: flex;
+  justify-content: space-around;
+}
+.weatherCard {
+  padding: 10px;
+  margin-right: 15px;
+  text-align: center;
+  /* border:2px solid  #ae4c1b; */
+  /* border-radius: 15px; */
+} 
+.weatherCard h3{
+  color: #ffffff;
+  padding: 10px;
+  margin-bottom: 0%;
+  background:#ae4c1b;
+  border-top:2px solid  #ae4c1b;
+  border-right:2px solid  #ae4c1b;
+  border-left:2px solid  #ae4c1b;
+  border-top-left-radius: 15px;
+  border-top-right-radius: 15px;
+}
+.weatherCard h4 , p{
+  margin: 0%;
+  margin-top: -5px;
+  padding-top: 0%;
+  padding-bottom: 0%;
+  padding-left: 10px;
+  padding-right: 10px;
+  background:#ffffff;
+  border-right:2px solid  #ae4c1b;
+  border-left:2px solid  #ae4c1b;
+}
+.weatherCard img {
+  margin: 0%;
+  padding-bottom: 0%;
+  width: 96.7%;
+  background:#ffffff;
+  border-right:2px solid  #ae4c1b;
+  border-left:2px solid  #ae4c1b;
+}
+.weatherCardBottom {
+  background: #ffffff;
+  border-bottom:2px solid  #ae4c1b;
+  border-bottom-left-radius: 15px;
+  border-bottom-right-radius: 15px;
 }
-  
+
 a:link {
     color:#ae4c1b;
   }