I’ve been stuck on this problem for a couple of days now and I think it’s time to ask.
I have this weather app I’m building as practice, and so far I can retrieve the API data I’m using and storing it in functions and variables just fine, but I have a big problem: whenever the user gets asked to give permission to the browser to use their location, it just renders the last function on the screen, but whenever the user gives permanent permission for the browser to retrieve their location, and then reload the page, the app renders the info just fine. Why is this happening? , here’s the code:
main document:
import { weatherCodeObject } from './weathercodeobject.js'
import { getWeather } from './defaultweather.js'
// Prints the header's climate information:
const temperatureDisplay = document.querySelector(".temperature");
const weatherStatus = document.querySelector(".weather-status");
const tempParameters = document.querySelector(".temp-parameters");
//Header current temp display
const displayCurrentWeather = async () => {
const { currentWeather } = await getWeather();
const displayedTemp = temperatureDisplay.append(`${Math.round(currentWeather.temperature)}°F`);
return displayedTemp;
}
displayCurrentWeather();
//Header weather status
console.log(weatherCodeObject)
const weathercodeDisplay = async () => {
const { weatherCode } = await getWeather();
const weatherStatusCode = weatherCodeObject.find(x => x.code === weatherCode)
const display = weatherStatus.append(weatherStatusCode.label);
return display;
};
weathercodeDisplay();
//header min-max temp of the day display
const displayTempParameters = async () => {
const { dailyMaxTemp, dailyMinTemp } = await getWeather()
tempParameters.append(`L: ${Math.round(dailyMinTemp)}°F H: ${Math.round(dailyMaxTemp)}°F`)
}
displayTempParameters();
getWeather function:
export async function getWeather() {
try {
const success = await new Promise((resolve, reject) => {
navigator.geolocation.getCurrentPosition(resolve, reject);
});
const coordinates = success.coords;
const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
localStorage.setItem('latitude',`${coordinates.latitude}` );
localStorage.setItem('longitude', `${coordinates.longitude}`);
const res = await fetch(`https://api.open-meteo.com/v1/forecast?latitude=${coordinates.latitude}&longitude=${coordinates.longitude}&hourly=temperature_2m,apparent_temperature,precipitation_probability,weathercode,windspeed_10m&daily=weathercode,temperature_2m_max,temperature_2m_min¤t_weather=true&temperature_unit=fahrenheit&windspeed_unit=mph&timeformat=unixtime&timezone=${timezone}`);
const data = await res.json();
console.log("variable", data.current_weather.weathercode)
const weatherData = {
currentWeather: data.current_weather,
dailyMaxTemp: Math.max(parseFloat(data.daily.temperature_2m_max)),
dailyMinTemp: Math.max(parseFloat(data.daily.temperature_2m_min)),
tempUnit: data.daily_unit,
hourlyUnits: data.hourly_units,
weatherCode: data.current_weather.weathercode
}
return weatherData;
} catch (error) {
return {
currentWeather: {
temperature: null,
weatherDescription: null,
},
dailyMaxTemp: null,
dailyMinTemp: null,
weatherCode: null,
};
}
}
weatherCodeObject:
export const weatherCodeObject = [
{
code: 0,
label: 'Clear Sky'
},
{
code: 1,
label: 'Mainly clear'
},
{
code: 2,
label: 'Partly cloudy'
},
{
code: 3,
label: 'Overcast'
},
{
code: 45,
label: 'Fog'
},
{
code: 48,
label: 'Depositing rime fog'
},
{
code: 51,
label: 'Light drizzle'
},
{
code: 53,
label: 'Moderate drizzle'
},
{
code: 55,
label: 'Dense drizzle'
},
{
code: 61,
label: 'Slight rain'
},
{
code: 63,
label: 'Moderate rain'
},
{
code: 65,
label: 'Heavy rain'
},
{
code: 66,
label: 'Light freezing Rain'
},
{
code: 67,
label: 'Heavy Freezing Rain'
},
{
code: 71,
label: 'Slight snow fall'
},
{
code: 73,
label: 'Moderate snow fall'
},
{
code: 75,
label: 'Heavy snow fall'
},
{
code: 77,
label: 'Snow grains'
},
{
code: 80,
label: 'Slight rain shower'
},
{
code: 81,
label: 'Moderate rain shower'
},
{
code: 82,
label: 'Violent rain shower'
},
{
code: 85,
label: 'Slight snow showers'
},
{
code: 86,
label: 'Heavy snow showers'
},
{
code: 95,
label: 'Thunderstorm'
}
];
I’m working with modules for the first time, so sorry if my code is not separated correctly for the post.
I’ve tried to reload the page with javascript, but it still doesn’t work for me.
