Skip to content

Commit

Permalink
script display forecast weather function
Browse files Browse the repository at this point in the history
  • Loading branch information
@naturuplift
naturuplift committed Dec 22, 2023
1 parent 0c98580 commit a1d6251
Show file tree
Hide file tree
Showing 3 changed files with 26 additions and 20 deletions.
8 changes: 4 additions & 4 deletions assets/css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ body {

/* set the title banner dashboard and forecast card color */
.text-center {
background-color: darkblue;
background-color: rgb(87, 80, 117);
color: white;
}

Expand All @@ -21,11 +21,11 @@ body {
}

/* set the 5-day forecast card color */
.card-0,
.card-1,
.card-2,
.card-3,
.card-4,
.card-5 {
background-color: darkblue;
.card-4 {
background-color: rgb(87, 80, 117);
color: white;
}
28 changes: 17 additions & 11 deletions assets/scripts/script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -100,7 +100,7 @@ function updateSearchHistory(updateCity) {
// Handle the click action for the city button
weatherDashboard(cityName);

console.log("City selected from search history:", cityName) // TODO comment when tested
// console.log("City selected from search history:", cityName) // TODO comment when tested
});
}

Expand All @@ -114,7 +114,7 @@ function weatherDashboard(city) {
.then(([lat, lon]) => {

// check API lat, lon output for the city
console.log(city, lat, lon) // TODO comment when tested
// console.log(city, lat, lon) // TODO comment when tested

// Call function to display city current forecast
currentAndForecastWeather(city, lat, lon);
Expand All @@ -135,22 +135,25 @@ function weatherDashboard(city) {
// call API for current and forecast weather
function currentAndForecastWeather(city, lat, lon) {

// Call currentAndForecastWeatherAPI to current and forecast weather
// Call currentAndForecastWeatherAPI for current and forecast weather
currentAndForecastWeatherAPI(lat,lon)
.then(([legibleDate, weatherIcon, temp, windSpeed, humidity]) => {

// check API lat, lon output for the city
console.log(legibleDate,weatherIcon,temp,windSpeed,humidity) // TODO comment when tested
// check API data output for current weather location
// console.log(legibleDate,weatherIcon,temp,windSpeed,humidity) // TODO comment when tested

// Call function to display city current forecast
viewCurrentWeather(city, legibleDate[0], weatherIcon[0], temp[0], windSpeed[0], humidity[0]);

// Remove the first element for current weather
const DateForecast = legibleDate.shift();
const weatherIconForecast = weatherIcon.shift();
const tempForecast = temp.shift();
const windSpeedForecast = windSpeed.shift();
const humidityDateForecast = humidity.shift();
const DateForecast = legibleDate.slice(1);
const weatherIconForecast = weatherIcon.slice(1);
const tempForecast = temp.slice(1);
const windSpeedForecast = windSpeed.slice(1);
const humidityDateForecast = humidity.slice(1);

// check API data output for forecast weather location
// console.log(DateForecast, weatherIconForecast, tempForecast, windSpeedForecast, humidityDateForecast) // TODO comment when tested

// Call function to display city 5-day forecast
viewForescastWeather(DateForecast, weatherIconForecast, tempForecast, windSpeedForecast, humidityDateForecast);
Expand Down Expand Up @@ -206,6 +209,9 @@ function viewCurrentWeather(city,legibleDate,weatherIcon,temp,windSpeed,humidity
// show Date Weather-Icon, Temperature, Wind-Speed and Humidity in 5-day forecast weather
function viewForescastWeather(legibleDate,weatherIcon,temp,windSpeed,humidity) {

// check API data input to function for forecast weather location
// console.log(legibleDate,weatherIcon,temp,windSpeed,humidity) // TODO comment when tested

// loop to fill weather elements to 5-day cards
for (let index = 0; index < temp.length; index++) {
// set card html class index
Expand Down Expand Up @@ -268,7 +274,7 @@ function currentAndForecastWeatherAPI(lat, lon) {
fetchData(apiUrl)
.then(data => {

// define an array to jump values on data
// define an array to jump values on JSON data
const array = [0, 8, 16, 24, 32, 39];

// define arrays to store weather forecast variables
Expand Down
10 changes: 5 additions & 5 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ <h2 class="text-center" id="fiveDayForecast" style="display: none;">5-Day Foreca
<div class="row" id="fiveDayForecastCard" style="display: none;">
<!-- Day 1 -->
<div class="col">
<div class="card-1">
<div class="card-0">
<div class="card-body">
<h5 class="card-title">Day 1</h5>
<p class="card-text" id="weather-icon">Weather-icon</p>
Expand All @@ -65,7 +65,7 @@ <h5 class="card-title">Day 1</h5>
</div>
<!-- Day 2 -->
<div class="col">
<div class="card-2">
<div class="card-1">
<div class="card-body">
<h5 class="card-title">Day 2</h5>
<p class="card-text" id="weather-icon">Weather-icon</p>
Expand All @@ -77,7 +77,7 @@ <h5 class="card-title">Day 2</h5>
</div>
<!-- Day 3 -->
<div class="col">
<div class="card-3">
<div class="card-2">
<div class="card-body">
<h5 class="card-title">Day 3</h5>
<p class="card-text" id="weather-icon">Weather-icon</p>
Expand All @@ -89,7 +89,7 @@ <h5 class="card-title">Day 3</h5>
</div>
<!-- Day 4 -->
<div class="col">
<div class="card-4">
<div class="card-3">
<div class="card-body">
<h5 class="card-title">Day 4</h5>
<p class="card-text" id="weather-icon">Weather-icon</p>
Expand All @@ -101,7 +101,7 @@ <h5 class="card-title">Day 4</h5>
</div>
<!-- Day 5 -->
<div class="col">
<div class="card-5">
<div class="card-4">
<div class="card-body">
<h5 class="card-title">Day 5</h5>
<p class="card-text" id="weather-icon">Weather-icon</p>
Expand Down

0 comments on commit a1d6251

Please sign in to comment.