Local Weather App - code structure

Code Feedback
1

Hello,

I’ve been wondering lately how to structure and organise asynchronous code.
I’ve finished the basic structure for the local weather app project so far and would like to know how would you do it or recommend some good source tackling this issue.

I feel like when the whole app relies on an asynchronous call, like the Geolocation permission in this case, it all starts to branch out one direction and I ended up nesting functions endlessly.

Thanks for any suggestions :smiley_cat:

The idea is to structure the code like this:

image
image2016×1042 132 KB

This project is using Vite.js and no JS frameworks
GitHub Repo

# main.js
import "./style.css";
import updateWeather from "./updateWeather";

// ask the user for a permission to access his geolocation information
navigator.geolocation.getCurrentPosition(
  handleSuccessPermission,
  handleRejectPermission
);

function handleSuccessPermission(position) {
  updateWeather(position.coords.latitude, position.coords.longitude);
}

function handleRejectPermission() {
  // Dundee, Scotland
  updateWeather(56.46913, -2.97489);
}

# updateWeather.js
import getWeatherDetails from "./apis/weatherDetails.js";

/**
 * Updates the weather information with the most recent data
 * based on the given parameters
 *
 * @param {Number} lat A latitude
 * @param {Number} lon A longitude
 *
 */
export default async (lat, lon) => {
  const cityEl = document.getElementById("city");
  const tempEl = document.getElementById("temp");
  const iconEl = document.getElementById("icon");

  const weatherDetails = await getWeatherDetails(lat, lon);
  const weather = weatherDetails.weather[0];

  const country = weatherDetails.sys.country;
  const cityName = weatherDetails.name;
  const temp = weatherDetails.main.temp;
  const iconUrl = weather.icon;

  cityEl.innerHTML = `${cityName}, ${country}`;
  tempEl.innerHTML = `${temp} °C`;
  iconEl.innerHTML = `
        <img src=${iconUrl} alt="${weather.description}" width=120 height=120 />
      `;
};

# apis/weatherDetails.js
import axios from "axios";

/**
 * Makes a call to the freeCodeCamp Weather API
 *
 * @param {Number} lat A latitude
 * @param {Number} lon A longitude
 *
 * @returns {Object} The weather details object
 */
export default async (lat, lon) => {
  try {
    const response = await axios.get(
      `https://weather-proxy.freecodecamp.rocks/api/current?lat=${lat}&lon=${lon}`
    );
    return response.data;
  } catch (error) {
    console.log(error);
    return null;
  }
};