Weather App - how to avoid ad-hoc code layout?

Weather App - how to avoid ad-hoc code layout?



I am looking specifically for some feedback on my code layout (or lack of) for this project.

I can see myself that it is messy and I understand this is mostly due to lack of experience, the many many times I have iterated and just adding code ad-hoc with my focus on getting the functional result rather than good practices.

I know “hacking” is all cool and stuff - but I reckon something built solidly from the beginning rather than just strapped, taped and glued up so it works last longer and produces more consistent results in the end. Double handling in most industries is an anathema, which is what poor practice usually results in.

So with that said - can anyone recommend a strategy/guidelines/principles or just general “do’s and dont’s”,so that I can improve my coding?

BTW here is the codepen of the mangled code in question: - Also, because of the way I had to get the location data the codepen will only work via HTTP.

I am sure there are a bazillion answers and no absolute perfect manual - but I am also starting from scratch so any advice is much appreciated.