Advice Generator using Vanilla JavaScript (async/await)

What are you most proud of, and what would you do differently next time?

I am proud of how DRY my JS functions are. I initially had it broken down into three functions: fetchAdvice, generateAdvice, and renderAdvice. After some thought, even though it worked with three functions, it just didn't seem necessary to have the "intermediary" function of generateAdvice, so I refactored slightly and was able to accomplish the same outcome with just two functions.

I also like how I was able to use a second event listener (in addition to click) to call the API fetch on browser load (DOMContentLoaded). This just allows for a better UI, so that on each load of the browser you see a slip of advice instead of nothing.

What challenges did you encounter, and how did you overcome them?

I was stumped a bit on how to place the dice icon halfway between the advice container and the background. After first taking what turned out to be an overcomplicated approach with an additional ``, I was able to accomplish it with a negative margin-bottom.

The API has a brief two-second caching delay, so I wanted to temporarily disable the button that calls the API, and then enable it again after the delay is finished. I was able to accomplish this by modifying attributes and styles in the DOM, and then using a setTimeout to essentially "reset" my changes after two seconds.

What specific areas of your project would you like help with?

I can't think of anything in particular, I would say if anything -- I'd be curious to know if using a DOMContentLoaded event listener was indeed the correct way to ensure the API is called on each page load.