Local Weather - Organizing Code Around Async Functions

Code Feedback
1

Codepen here, full source here.

I’m not really proud of the js on this one. Some questions I have:

  • How should I organize my code when using asynchronous functions? I ended up shoving almost all my logic into one bloated function (which is why the entire page reloads whenever the user wants to switch from celsius to fahrenheit. I’m sure there’s a better way to do it, but I really want to move on).
  • Is there a way I can return or store data from an asynchronous function?
  • Is it bad practice to generate some of your html/css within your js?
2

entire page reloads whenever the user wants to switch from celsius to fahrenheit.

you can make a button and design it to look like ordinary letter “C” and assign javascript to modify temperature value & letter to “F”. Only javascript related to the button runs whenever the button clicked, not entire javascript

Is there a way I can return or store data from an asynchronous function?

it’s easier to make global variable that can be accessed/modified from all function, include async function

Is it bad practice to generate some of your html/css within your js?

not a bad practice, just unconvenient and difficult to maintain. whenever you make change in CSS, you need to look at HTML and JS file. It feels like you didn’t plan your HTML carefully. You’d better to make a blank element that you can modify later

1 Like