User-editable divs, JS validation and reset

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

I'm proud of the interactivity of this one, the JS that makes it calculate on the fly and dynamically change appearances based on the presence of valid inputs.

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

I tried to keep the javaScript clean and DRY, but I don't think I succeeded that well. It does the job but it isn't very pretty.

Otherwise my biggest challenge on this one had to do with inputs, which kept mucking up the container widths. I ended up using divs with contenteditable=true instead, which worked great for layout purpuses, but on the flip side made the JS a lot more complicated.

I used ChatGPT a few times on this one, but never to write actual code, only for debugging and troubleshooting.