Project Fifteen: Likes

Last Christmas I gave you my heart... And then another one on your next post and another one for a cute kitten video. You see where this is going don't you?

Yes, you guessed it right - I'm talking about social likes, hearts, thumbs up and any other form of appreciation for someone's digital effort - low effort for a user and a big ego boost for a poster.

From blog posts to e-commerce products: likes can be used in a variety of projects. Would you like a like for yourself?

Like Button: requirements and recipe

As a user I want to be able to click a like button so that I could indicate that I liked this item

You definitely know how a like button looks like (❤️) and you can get creative and use reactions similar to the ones you see on this exact post (don't forget to leave some), so let's get straight to requirements:

Requirements

1. Button should have "Liked" and "Not yet liked" state
2. User should be able to both "like" and "unlike"
3. Button should have accessible labels and sufficient context

Recipe

1. Create a static version for each state
2. Ensure accessibility
3. Add the toggle logic
4. Optionally, add transition animation
5. Try it out proudly!

Hints

Use a semantic element - e.g. a button with appropriate aria-labels. Try out a screen reader and see if your button is easy to use with it.

You can use SVG icons and a dash of CSS (e.g. fill property) for simple geometric forms like a heart.

Hard mode: Atomic Likes Counter

With a great button like this one definitely needs a way to get more likes. Here's the problem: is two users like it at the same time - then number should increase by 2, right? Well, it's not always that simple to implement - we need to make sure that such an operation is performed one at a time even if thousands of users are clicking that button.

As you've probably guessed that such operations is called atomic. Plenty of databases support it and you're free to use whatever you prefer - but if you're a minimalist like myself then you could try and implement an atomic likes counter stored in a file.

Share your creations and feedback and see you tomorrow!

Liked the idea a lot and would love to have it all year long?