How to Unlock Achievements on GitHub: Your Quick Guide

Select Language:

If you’re working on a project or website and want to add a simple way for visitors to give feedback or reactions, here’s a straightforward solution. This method lets users easily respond with emojis like thumbs up, thumbs down, laugh, hooray, confused, love, rocket, or eyes, making your page more interactive and engaging.

To set this up, you’ll need some basic HTML buttons for each reaction. Each button includes an emoji icon and shows how many people have reacted with that emoji. When a user clicks a button, it registers their reaction, and the count updates accordingly.

Here’s how you can do it:

First, create one button for each reaction type. You can style them as links or buttons to keep it simple. Each button should have a label and an emoji. For example, your thumbs up button might look like this:

Repeat similar buttons for other reactions, changing the emoji and IDs as needed. For example:

Next, you’ll need a simple script to handle the clicks. When someone clicks a button, the script will check if they’ve already reacted. If yes, it will remove their reaction; if not, it will add theirs. The script updates the count displayed near the emoji accordingly. Here’s a basic example:

javascript
const reactions = {
thumbsUp: 0,
thumbsDown: 0,
laugh: 0,
hooray: 0,
confused: 0,
love: 0,
rocket: 0,
eyes: 0
};

function toggleReaction(type) {
// For this simple example, toggle the reaction
const button = document.querySelector(button[onclick="toggleReaction('${type}')"]);
const countSpan = document.getElementById(count-${type});

// You can add logic here to check user reactions and prevent multiple reactions from same user
// This simple version just increases or decreases count

// For demonstration, we’ll just increment and reset counts
reactions[type] = reactions[type] + 1;
countSpan.innerText = reactions[type];

// Optionally, toggle button style or aria-pressed
// e.g., button.setAttribute(‘aria-pressed’, ‘true’);
}

This is a basic starting point. For real projects, you’ll want to store user reactions more securely—probably on a server or database—and prevent multiple clicks from the same user. But this setup provides a quick way to make your page more lively, encouraging visitors to share their thoughts with simple emoji reactions.

Just add the HTML buttons and the script to your webpage, and you’ll be good to go!