How can I improve this basic site code?

Hello everyone, I'm a recent graduate of Blockchain & Backend Development at York University, Toronto. I started this blog to document my career change journey from bartender to a developer.
Since starting this blog in 2022, I have been hired as a research assistant and front-end developer at York's Digital Currencies Project. We are currently working on developing a way to estimate CO2 emissions associated with bitcoin mining.
Thanks for joining me.
I created a basic JS, HTML, CSS site yesterday that rotates an emoji 90 degrees every time the user clicks it.
To create the spinning emoji, I created four divs with the original, upright emoji (π).
I gave them each class names that would allow for the CSS to identify each of them separately. In styles.css, I gave each of the corresponding class names an element that rotates the block that it is in by 90, 180 or 270 degrees.
I also added JS so that whenever the current π was clicked, it would disappear, and be replaced by the next, rotated π.
The reason why I posted this is because it seems very inefficient. Is there any other way of making this π emoji spin every time it's clicked, without having to make itself disappear and have the next one appear?
I hope this makes some sort of sense.
Here is the GitHub repository of the project: https://github.com/GetOutOfThatGarden/Spinner-me-timbers
And apologies for the incorrect use of any terms above. Please let me know where I went wrong in explaining this post.
Also thanks to Brian Design on youtube for this tutorial: https://www.youtube.com/watch?v=mCQ1-iDSnto
Thanks, Niall




