Skip to main content

Command Palette

Search for a command to run...

How can I improve this basic site code?

Published
β€’1 min read
How can I improve this basic site code?
N

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

H
Henzzo4y ago

you can use a simple @keyframe animation to do the work. Check your repo I created a simple pull request to show you some of the changes.

N

Amazing. Thanks Henzzo, I'll check that out asap.

H
Henzzo4y ago

Niall Harrington glad you found it helpful, I haven't put much comment tho, ask me for any confusion.

More from this blog

Niall Harrington's sad attempt at a coding blog.

33 posts