Calculator project feedback, and a React question

I’ve been working through the FCC curriculum, and am currently in the Front End Libraries Project. I’ve just finished the calculator project. Here’s the CodePen. I don’t think I had to use React, but so far I’ve been doing all the Front End Libraries Projects with it—I think I should be trying to do some of these without it, is that a good idea? I feel like I may have over-engineered the logic of the calculator, so that’s what I’m mostly looking to get ideas on.

I also have a question that’s unrelated to that aspect of things. If you look at line 97 of the CSS, I’ve commented out a bunch of :after classes that put a transparent overlay on the buttons that I intended to use to create the effect of pressing them, but I’m pretty stuck on how to achieve that using React. I wanted to somehow change the display attribute from none to block when they’re clicked. Also, on the CSS side, is there a better way to set all those classes than individually name each of them and append the :after? Thanks in advance!

I’ll address the first question for now, and hopefully other people will touch on the other questions.

I think it’s an excellent idea. I did almost everything using pure JavaScript in the beginning, but eventually got to the point where React dominates my portfolio. I go back sometimes to tackle pure JavaScript and I realize how much I’ve forgot, and more importantly, how much I never knew due to having moved on to using React solely.

Thanks for the thoughts! I think that because React is the final part of the Front End Libraries curriculum it was the freshest on my mind when I started these projects. It wasn’t until I went and looked at others’ solutions and realized I didn’t really understand their pure JavaScript that I thought I might be going about this in a weird order. I’m also working through Eloquent JavaScript, hoping that that will smooth out inconsistencies in my understanding.