Skip to content
This repository has been archived by the owner on Apr 19, 2022. It is now read-only.

Commit

Permalink
css changes
Browse files Browse the repository at this point in the history
  • Loading branch information
@Coachbre
Coachbre committed Mar 19, 2021
2 parents 4769886 + 9b16e15 commit 6175414
Show file tree
Hide file tree
Showing 2 changed files with 20 additions and 43 deletions.
33 changes: 5 additions & 28 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,69 +18,46 @@ <h1>Beyond the Itinerary</h1>
<img class="logo" src="images/beyond.JPG" alt="Beyond Itinerary">

</header>

<div class="navbar">
<div class="navbar">
<nav>
<div class="hero-image">
<img class="hero-image" src="images/backpacker.jpeg">
</div>


<section class="dropdown" id="dropContain">


<div class="dropdownSelect">

<section class ="dropdown" id="dropContain">
<div class="dropdownSelect"> <!--Div placed here for possible class needed for navbar css styling-->
<label for="parkSelect">Select a National Park</label><br>

<select name="parkSelect" id="parkSelect">

<!-- ! PARKS OPTION ELEMENTS FROM DOM PRINTER -->
</select>

</div>


<div class="dropdownSelect">

<label for="attractionSelect">Select an attraction</label><br>

<select name="attractionSelect" id="attractionSelect">
<!-- ! ATTRACTION OPTION ELEMENTS FROM DOM PRINTER -->
</select>
</div>


<div class="dropdownSelect">

<label for="eaterySelect">Select an Eatery</label><br>

<select name="eaterySelect" id="eaterySelect">
<!-- ! EATERY OPTION ELEMENTS FROM DOM PRINTER -->
</select>

</div>

</section>

</nav>
</div>

<main class="previewSection">
<main class= "previewSection">
<div id="itineraryPreview">
<h2>Itinerary Preview</h2>
<!-- ! INSERT CARDS DOM PRINTER -->
<div class="parkCard"></div>

<div class="attractionCard"></div>
<div class="eateryCard"></div>

</div>
</main>
<aside class="aside">
<h3>Your Trip awaits </h3>
<h3>Your Trip awaits</h3>
</aside>

<footer>
<button class="button" id="saveItinerary">Save Itinerary</button>
</footer>
Expand Down
30 changes: 15 additions & 15 deletions scripts/weather/WeatherPreview.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
export const displayWeather = (weatherObj) => {
const contentElement = document.getElementById("parkForecast");
const firstday = weatherObj[0].dt;//!
const firstday = weatherObj[0].dt;//! FIRST DAY EPOCH CONVERSION
//? converting epoch date to better work with milliseconds (TIME ACCURACY)
const firstADate = firstday * 1000;
//? conforms date to readable format
Expand All @@ -10,7 +10,7 @@ export const displayWeather = (weatherObj) => {
//? returns the hour of the day


const secondDay = weatherObj[1].dt;//!
const secondDay = weatherObj[1].dt;//! SECOND DAY EPOCH CONVERSION
//? converting epoch date to better work with milliseconds (TIME ACCURACY)
const secondADate = secondDay * 1000;
//? conforms date to readable format
Expand All @@ -20,7 +20,7 @@ export const displayWeather = (weatherObj) => {
//? returns the hour of the day


const thirdDay = weatherObj[2].dt;//!
const thirdDay = weatherObj[2].dt;//! THIRD DAY EPOCH CONVERSION
//? converting epoch date to better work with milliseconds (TIME ACCURACY)
const thirdADate = thirdDay * 1000;
//? conforms date to readable format
Expand All @@ -30,7 +30,7 @@ export const displayWeather = (weatherObj) => {
//? returns the hour of the day


const fourthDay = weatherObj[3].dt;//!
const fourthDay = weatherObj[3].dt;//! FOURTH DAY EPOCH CONVERSION
//? converting epoch date to better work with milliseconds (TIME ACCURACY)
const fourthADate = fourthDay * 1000;
//? conforms date to readable format
Expand All @@ -40,7 +40,7 @@ export const displayWeather = (weatherObj) => {
//? returns the hour of the day


const fifthDay = weatherObj[4].dt;//!
const fifthDay = weatherObj[4].dt;//! FIFTH DAY EPOCH CONVERSION
//? converting epoch date to better work with milliseconds (TIME ACCURACY)
const fifthADate = fifthDay * 1000;
//? conforms date to readable format
Expand All @@ -54,36 +54,36 @@ export const displayWeather = (weatherObj) => {
<div class="weatherCard">
<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>
<h4 class="forecastWeather">${weatherObj[0].weather[0].main}</h4>
<p class="forecastCardTemp">${weatherObj[0].main.temp}&#176 F</p>
<p class ="weatherCardBottom">${weatherObj[0].weather[0].description}</p>
</div>
<div class="weatherCard">
<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>
<h4 class="forecastWeather">${weatherObj[1].weather[0].main}</h4>
<p class="forecastCardTemp">${weatherObj[1].main.temp}&#176 F</p>
<p class ="weatherCardBottom">${weatherObj[1].weather[0].description}</p>
</div>
<div class="weatherCard">
<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>
<h4 class="forecastWeather">${weatherObj[2].weather[0].main}</h4>
<p class="forecastCardTemp">${weatherObj[2].main.temp}&#176 F</p>
<p class ="weatherCardBottom">${weatherObj[2].weather[0].description}</p>
</div >
<div class="weatherCard">
<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>
<h4 class="forecastWeather">${weatherObj[3].weather[0].main}</h4>
<p class="forecastCardTemp">${weatherObj[3].main.temp}&#176 F</p>
<p class ="weatherCardBottom">${weatherObj[3].weather[0].description}</p>
</div>
<div class="weatherCard">
<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>
<h4 class="forecastWeather">${weatherObj[4].weather[0].main}</h4>
<p class="forecastCardTemp">${weatherObj[4].main.temp}&#176 F</p>
<p class ="weatherCardBottom">${weatherObj[4].weather[0].description}</p>
</div>
`;
Expand Down

0 comments on commit 6175414

Please sign in to comment.