Animated Emoji Feedback Card HTML CSS JavaScript

on

 

In today’s digital landscape, collecting user feedback is essential for any product or service. A well-designed feedback system not only encourages users to share their thoughts but also makes the process enjoyable. Today, I’ll walk you through an elegant emoji-based feedback card that combines modern design with interactive animations.

What Makes This Feedback Card Special

This feedback card stands out with several impressive features:

  1. Animated Emoji Ratings: Users can select their experience level with expressive emojis that animate on interaction
  2. Visual Feedback: Selected emojis bounce to acknowledge the user’s choice
  3. Text Comments: Users can provide detailed feedback in a comment box
  4. Celebratory Animation: A confetti animation plays when feedback is submitted
  5. Responsive Design: The card looks great on any device
  6. Modern UI: Smooth gradients, shadows, and transitions create a polished look

The Visual Design

The feedback card uses a clean white card on a vibrant gradient background. The gradient flows from purple (#6a11cb) to blue (#2575fc), creating a modern, energetic feel. The card itself features rounded corners, subtle shadows, and plenty of breathing room for content.

When users hover over the card, it slightly rises with an enhanced shadow, creating a sense of physical interaction. This micro-interaction enhances the feeling that the interface is responsive and alive.

The Emoji Rating System

Five emoji options range from “Terrible” (😡) to “Excellent” (😍), allowing users to quickly express their sentiment. Each emoji initially appears grayscale and becomes colorful when hovered over or selected. This visual cue helps users understand the interactive nature of these elements.

Let’s look at some of the CSS that makes this possible:

.emoji {
  cursor: pointer;
  text-align: center;
  transition: transform 0.3s ease, filter 0.3s ease;
  filter: grayscale(100%);
  opacity: 0.6;
  position: relative;
}
.emoji:hover {
  transform: translateY(-10px) scale(1.1);
  filter: grayscale(0%);
  opacity: 1;
}
.emoji.selected {
  transform: translateY(-10px) scale(1.1);
  filter: grayscale(0%);
  opacity: 1;
}

When a user clicks on an emoji, JavaScript handles the selection logic:

emojis.forEach(emoji => {
    emoji.addEventListener('click', () => {
        // Remove selected class from all emojis
        emojis.forEach(e => e.classList.remove('selected'));
        
        // Add selected class to clicked emoji
        emoji.classList.add('selected');
        
        // Store the rating value
        selectedRating = emoji.getAttribute('data-rating');
        
        // Trigger bounce animation
        emoji.style.animation = 'none';
        setTimeout(() => {
            emoji.style.animation = 'bounce 1s';
        }, 10);
    });
});

The Comment Section

Below the emoji ratings is a simple textarea where users can provide additional feedback. The textarea has a subtle focus state that reinforces the brand colors when active:

.comment-section textarea:focus {
  outline: none;
  border-color: #6a11cb;
}

Submission and Celebration

When a user submits their feedback by clicking the “Submit Feedback” button, the interface checks if an emoji rating was selected. If not, it gently reminds the user with a shake animation on the emojis.

If a rating was selected, a celebratory screen slides up from the bottom with a “Thank You” message and a burst of colorful confetti!

submitBtn.addEventListener('click', () => {
    if (selectedRating) {
        // Show thank you message
        thankYou.classList.add('show');
        
        // Create confetti animation
        createConfetti();
    } else {
        // Shake animation if no rating selected
        emojis.forEach(emoji => {
            emoji.style.animation = 'none';
            setTimeout(() => {
                emoji.style.animation = 'shake 0.5s';
            }, 10);
        });
    }
});

The confetti animation is created dynamically with JavaScript:

function createConfetti() {
    const colors = ['#ff6b6b', '#48dbfb', '#feca57', '#1dd1a1', '#5f27cd'];
    
    for (let i = 0; i < 50; i++) {
        const confetti = document.createElement('div');
        confetti.className = 'confetti';
        confetti.style.left = Math.random() * 100 + '%';
        confetti.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
        confetti.style.animationDelay = Math.random() * 2 + 's';
        
        thankYou.appendChild(confetti);
        
        // Remove confetti after animation
        setTimeout(() => {
            confetti.remove();
        }, 3000);
    }
}

Reusable Components

The feedback card is built using HTML, CSS, and JavaScript without any external libraries, making it lightweight and easy to integrate into any project. The structure of this feedback system makes it adaptable for various use cases:

  • Customer satisfaction surveys
  • Product reviews
  • Service feedback forms
  • Website feedback
  • App rating systems

Implementation Details

The HTML structure is semantic and straightforward, with clear container divisions for different sections of the feedback card. The CSS uses modern techniques like CSS variables, flexbox for layout, and keyframe animations for dynamic effects.

The JavaScript handles user interactions, form validation, and dynamic content creation for the confetti animation. Event listeners are used to respond to user actions like clicking emojis or submitting feedback.

Conclusion

This emoji feedback card demonstrates how thoughtful UI/UX design can transform a mundane task like providing feedback into a delightful experience. The combination of visual cues, animations, and celebration effects creates a positive emotional connection with users, potentially increasing the likelihood of them providing honest feedback.

Comments

Post a Comment