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: github.com/GetOutOfThatGarden/Spinner-me-ti..
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: youtube.com/watch?v=mCQ1-iDSnto
Thanks, Niall