Skip to content

Commit

Permalink
improving logic
Browse files Browse the repository at this point in the history
  • Loading branch information
@Egesiapres
Egesiapres committed Oct 23, 2023
1 parent cb80f06 commit aa0efda
Show file tree
Hide file tree
Showing 3 changed files with 295 additions and 42 deletions.
77 changes: 77 additions & 0 deletions js/elements.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,79 @@ export const minTempPar = document.querySelector('#min-temp-par');

export const maxTempPar = document.querySelector('#max-temp-par');

// forecast days
export const fiveDayForecastDiv = document.querySelector('#five-day-forecast-div')

// today
export const todayWeatherImg = document.querySelector('#today-weather-img');

export const todayMinTempPar = document.querySelector('#today-min-temp-par');

export const todayMaxTempPar = document.querySelector('#today-max-temp-par');

export const dayOneNamePar = document.querySelector('#day-one-name-par');

export const dayOneWeatherImg = document.querySelector('#day-one-weather-img');

export const dayOneMinTempPar = document.querySelector('#day-one-min-temp-par');

export const dayOneMaxTempPar = document.querySelector('#day-one-max-temp-par');

// two
export const dayTwoNamePar = document.querySelector('#day-two-name-par');

export const dayTwoWeatherImg = document.querySelector('#day-two-weather-img');

export const dayTwoMinTempPar = document.querySelector('#day-two-min-temp-par');

export const dayTwoMaxTempPar = document.querySelector('#day-two-max-temp-par');

// three
export const dayThreeNamePar = document.querySelector('#day-three-name-par');

export const dayThreeWeatherImg = document.querySelector(
'#day-three-weather-img'
);

export const dayThreeMinTempPar = document.querySelector(
'#day-three-min-temp-par'
);

export const dayThreeMaxTempPar = document.querySelector(
'#day-three-max-temp-par'
);

// four
export const dayFourNamePar = document.querySelector('#day-four-name-par');

export const dayFourWeatherImg = document.querySelector(
'#day-four-weather-img'
);

export const dayFourMinTempPar = document.querySelector(
'#day-four-min-temp-par'
);

export const dayFourMaxTempPar = document.querySelector(
'#day-four-max-temp-par'
);

// five
export const dayFiveNamePar = document.querySelector('#day-five-name-par');

export const dayFiveWeatherImg = document.querySelector(
'#day-five-weather-img'
);

export const dayFiveMinTempPar = document.querySelector(
'#day-five-min-temp-par'
);

export const dayFiveMaxTempPar = document.querySelector(
'#day-five-max-temp-par'
);
//

export const scaleSelect = document.querySelector('select');

export const windContentDiv = document.querySelector('#wind-content-div');
Expand All @@ -53,3 +126,7 @@ export const humidityPar = document.querySelector('#humidity-par');
export const pressurePar = document.querySelector('#pressure-par');

export const visibilityPar = document.querySelector('#visibility-par');

export const airDiv = document.querySelector('#air-div');

export const airAqiPar = document.querySelector('#air-aqi-par');
220 changes: 180 additions & 40 deletions js/script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,32 @@ import {
visibilityPar,
secondaryDiv,
currentLocationBtn,
airDiv,
airAqiPar,
todayMinTempPar,
todayMaxTempPar,
todayWeatherImg,
dayOneWeatherImg,
dayOneNamePar,
dayOneMinTempPar,
dayOneMaxTempPar,
dayTwoNamePar,
dayTwoWeatherImg,
dayTwoMinTempPar,
dayTwoMaxTempPar,
dayThreeNamePar,
dayThreeWeatherImg,
dayThreeMinTempPar,
dayThreeMaxTempPar,
dayFourNamePar,
dayFourWeatherImg,
dayFourMinTempPar,
dayFourMaxTempPar,
dayFiveNamePar,
dayFiveWeatherImg,
dayFiveMinTempPar,
dayFiveMaxTempPar,
fiveDayForecastDiv,
} from './elements.js';
import {
kelvinToScale,
Expand All @@ -37,8 +63,10 @@ import {
showElement,
formatInputValue,
getCurrentLocation,
dtToDate,
fillFcDayElements,
} from './utils.js';
import { getCurrentWeather } from './api/weather.js';
import { getCurrentWeather, getFiveDayForecast } from './api/weather.js';
import { getGeocoding } from './api/location.js';
import { getAirPollution } from './api/pollution.js';
import { fetchData } from './api/api.js';
Expand All @@ -57,9 +85,13 @@ export const displayWeatherData = async (location, event) => {
let cityData;
let coordParams;

let fiveDayForecast;
let weatherData;
let pollutionData;

if (!location) {
// no location inputted
cityData = await fetchData(getGeocoding);
cityData = await fetchData(getGeocoding, ['barcelona']);

coordParams = [cityData.lat, cityData.lon];
}
Expand Down Expand Up @@ -106,66 +138,174 @@ export const displayWeatherData = async (location, event) => {
clearInput();
}

const { name, state, country } = cityData;
// div unhided after its population
if (cityData) {
// api calls
fiveDayForecast = await fetchData(getFiveDayForecast, coordParams);

weatherData = await fetchData(getCurrentWeather, coordParams);
pollutionData = await fetchData(getAirPollution, coordParams);

const { name, state, country } = cityData;

const weatherData = await fetchData(getCurrentWeather, coordParams);
namePar.innerHTML = name;

const pollutionData = await fetchData(getAirPollution, coordParams);
positionDetailsPar.innerHTML = `${state ? state : ''}${
state && country ? ', ' : ''
}${country ? `(${country})` : ''}`;

// show data unhidind elements
if (cityData || weatherData) {
// show data unhiding elements
primaryDiv.removeAttribute('class');
secondaryDiv.removeAttribute('class');
}

const { main, sys, visibility, weather, wind } = weatherData;
if (weatherData) {
const { main, sys, visibility, weather, wind } = weatherData;

weatherMainPar.innerHTML = weather[0].main;

tempPar.innerHTML = kelvinToScale(main.temp, 'celsius');

namePar.innerHTML = name;
perceivedTempPar.innerHTML = `Feels like: ${kelvinToScale(
main.feels_like,
'celsius'
)}`;

positionDetailsPar.innerHTML = `${state ? state : ''}${
state && country ? ', ' : ''
}${country ? `(${country})` : ''}`;
minTempPar.innerHTML = `Min: ${kelvinToScale(main.temp_min, 'celsius')}`;

weatherMainPar.innerHTML = weather[0].main;
maxTempPar.innerHTML = `Max: ${kelvinToScale(main.temp_max, 'celsius')}`;

tempPar.innerHTML = kelvinToScale(main.temp, 'celsius');
scaleSelect.addEventListener('change', e =>
changeScale(main, e.target.value)
);

perceivedTempPar.innerHTML = `Feels like: ${kelvinToScale(
main.feels_like,
'celsius'
)}`;
weatherMainImg.setAttribute('src', getCustomIcon(weather[0].main));

minTempPar.innerHTML = `Min: ${kelvinToScale(main.temp_min, 'celsius')}`;
windBftIcon.setAttribute('src', getBftIcon(msToKmh(wind.speed)));
windSpeedPar.innerHTML = `Wind: ${msToKmh(wind.speed)} km/h`;

maxTempPar.innerHTML = `Max: ${kelvinToScale(main.temp_max, 'celsius')}`;
if (wind.gust) {
showElement(gustSpeedDiv, 'container y-center');

scaleSelect.addEventListener('change', e =>
changeScale(main, e.target.value)
);
gustBftIcon.setAttribute('src', getBftIcon(msToKmh(wind.gust)));
gustSpeedPar.innerHTML = `Gust: ${msToKmh(wind.gust)} km/h`;
} else {
hideElement(gustSpeedDiv);
}

windDegPar.innerHTML = `Direction: ${meteoDegToDirection(wind.deg)}`;

// weatherMainImg.setAttribute('src', getOriginalIcon(weather[0].icon));
weatherMainImg.setAttribute('src', getCustomIcon(weather[0].main));
sunrisePar.innerHTML = `Sunrise: ${unixTStoHour(sys.sunrise)}`;
sunsetPar.innerHTML = `Sunset: ${unixTStoHour(sys.sunset)}`;

windBftIcon.setAttribute('src', getBftIcon(msToKmh(wind.speed)));
windSpeedPar.innerHTML = `Wind: ${msToKmh(wind.speed)} km/h`;
humidityPar.innerHTML = `${main.humidity}%`;
pressurePar.innerHTML = `${main.pressure} hPa`;
visibilityPar.innerHTML = `${(visibility / 1000).toFixed(1)} km`;

if (wind.gust) {
showElement(gustSpeedDiv, 'container y-center');
// show data unhiding elements
secondaryDiv.removeAttribute('class');
}

gustBftIcon.setAttribute('src', getBftIcon(msToKmh(wind.gust)));
gustSpeedPar.innerHTML = `Gust: ${msToKmh(wind.gust)} km/h`;
} else {
hideElement(gustSpeedDiv);
if (fiveDayForecast) {
const { list } = fiveDayForecast;

const todayDate = new Date().getDate();

const todayFc = list.filter(el => dtToDate(el.dt).getDate() === todayDate);
console.log('Today fc', todayFc);

const dayOneFc = list.filter(
el => dtToDate(el.dt).getDate() === todayDate + 1
);
console.log('Day 1 fc:', dayOneFc);
console.log('Img 1:', dayOneFc.map(el => el.weather[0].description));

const dayTwoFc = list.filter(
el => dtToDate(el.dt).getDate() === todayDate + 2
);
console.log('Day 2 fc:', dayTwoFc);
console.log('Img 2:', dayTwoFc.map(el => el.weather[0].description));

const dayThreeFc = list.filter(
el => dtToDate(el.dt).getDate() === todayDate + 3
);
console.log('Day 3 fc:', dayThreeFc);
console.log('Img 3:', dayThreeFc.map(el => el.weather[0].description));

const dayFourFc = list.filter(
el => dtToDate(el.dt).getDate() === todayDate + 4
);
console.log('Day 4 fc:', dayFourFc);
console.log('Img 4:', dayOneFc.map(el => el.weather[0].description));

const dayFiveFc = list.filter(
el => dtToDate(el.dt).getDate() === todayDate + 5
);
console.log('Day 5 fc:', dayFiveFc);
console.log('Img 5:', dayFiveFc.map(el => el.weather[0].main));

// today
fillFcDayElements(
todayFc,
null,
todayWeatherImg,
todayMinTempPar,
todayMaxTempPar
);

fillFcDayElements(
dayOneFc,
dayOneNamePar,
dayOneWeatherImg,
dayOneMinTempPar,
dayOneMaxTempPar
);

fillFcDayElements(
dayTwoFc,
dayTwoNamePar,
dayTwoWeatherImg,
dayTwoMinTempPar,
dayTwoMaxTempPar
);

fillFcDayElements(
dayThreeFc,
dayThreeNamePar,
dayThreeWeatherImg,
dayThreeMinTempPar,
dayThreeMaxTempPar
);

fillFcDayElements(
dayFourFc,
dayFourNamePar,
dayFourWeatherImg,
dayFourMinTempPar,
dayFourMaxTempPar
);

fillFcDayElements(
dayFiveFc,
dayFiveNamePar,
dayFiveWeatherImg,
dayFiveMinTempPar,
dayFiveMaxTempPar
);

showElement(fiveDayForecastDiv, 'b-1 br-15 bc-transparent bg-transparent');
}

windDegPar.innerHTML = `Direction: ${meteoDegToDirection(wind.deg)}`;
if (pollutionData) {
const { list } = pollutionData;

sunrisePar.innerHTML = `Sunrise: ${unixTStoHour(sys.sunrise)}`;
sunsetPar.innerHTML = `Sunset: ${unixTStoHour(sys.sunset)}`;
airAqiPar.innerHTML = `AQI: ${list[0].main.aqi}`;

humidityPar.innerHTML = `${main.humidity}%`;
pressurePar.innerHTML = `${main.pressure} hPa`;
visibilityPar.innerHTML = `${(visibility / 1000).toFixed(1)} km`;
// show data unhiding elements
showElement(
airDiv,
'container col-direction b-1 br-15 bc-transparent box-small bg-transparent'
);
}
};

displayWeatherData();
Expand Down
Loading

0 comments on commit aa0efda

Please sign in to comment.