Calculator! Javascript, HTML, and CSS.

This was a really fun project! What I thought was a pretty simple project (in the bigger scheme it actually is), turned out to be much more complex. Soon, after a few hours of work, I was working with some pretty messy code and bugs that were hard to deal with.

What is the best way to structure a project like this, where there are multiple "states"? I did do a little bit of planning before I started coding, but obviously, I could not account for all of the possibilities on paper. While coding, I separated most big actions into function blocks, but I kind of threw together the relationships between the functions on the fly.

I know in digital logic gates, people would draft up things like "finite state machine diagrams", and I was wondering if there was some kind of thing like that for programming. I'd greatly appreciate any resources or tips on this kind of "structuring code" issue!