Emoji Replacer

You are tasked with building an Emoji Replacer Application. This React-based tool replaces specific predefined words in user input with relevant emojis. The application includes features like text clearing, and is styled for both desktop and mobile usage.

Your goal is to:

• Replace words like "happy", "sad", "pizza", "cat" etc., with corresponding emojis.
• Ensure input is matched case-insensitively and only whole words are replaced.
• Implement a user-friendly interface to input, view, and clear results.
• Ensure accessibility and responsiveness.

📋 Emoji Mapping Table

Below is the full list of supported keywords and their corresponding emojis:

🔍 Emoji Dictionary

😊 Emotions

• happy → 😊
• sad → 😢
• love → ❤️
• angry → 😠
• surprised → 😲
• laugh → 😂
• cool → 😎
• tired → 😴
• excited → 🤩
• bored → 🥱
• scared → 😱
• confused → 😕
• wow → 😮
• cry → 😭
• nervous → 😬
• calm → 😌

🙋 Greetings

• hello → 👋
• bye → 👋
• goodnight → 🌙
• night → 🌙

🎉 Activities

• party → 🥳
• dance → 💃
• music → 🎵
• sleep → 😴
• work → 💼
• study → 📚

🌤 Weather & Nature

• sun → ☀️
• rain → 🌧️
• snow → ❄️
• cloud → ☁️
• fire → 🔥
• tree → 🌳
• flower → 🌸

🍔 Food & Drink

• pizza → 🍕
• burger → 🍔
• coffee → ☕
• cake → 🍰
• apple → 🍎
• beer → 🍺

🐶 Animals

• dog → 🐶
• cat → 🐱
• bird → 🐦
• fish → 🐟
• horse → 🐴

🖥 Objects & Symbols

• phone → 📱
• laptop → 💻
• heart → ❤️
• star → ⭐
• thumbs_up → 👍
• thumbs_down → 👎
• ok_hand → 👌

💼 Miscellaneous

• money → 💰
• gift → 🎁
• car → 🚗
• bike → 🚲
• airplane → ✈️
• clock → ⏰

Requirements

• A multiline textarea input for the user to enter text.
• The textarea should have a placeholder: "Type words like 'happy', 'love', 'pizza'..."
• As the user types, the text is scanned for specific keywords that map to emojis.
• The output text is displayed with emojis replacing the keywords.
• A button to clear the input text.
• The replacement is case-insensitive and replaces whole words only.
• The output preserves spaces and line breaks.

Edge Cases & Constraints

• If the input contains no keywords, the output matches the input exactly.
• Keywords should not partially match inside other words.
• Emoji replacement works for multiple categories such as emotions, greetings, activities, weather, food, animals, etc.
• The app should remain responsive and accessible.

Example Inputs & Outputs

Example 1: Simple replacement

Input: "I am happy and love pizza."
Output: "I am 😊 and ❤️ 🍕."

Example 2: No Keyword

Input: "Hi there!"
Output: "Hi there!"

Example 3: Multiple categories

Input: "Good morning! I have a cat and a dog."
Output: "Good morning! I have a 🐱 and a 🐶."

Testing Requirements

• Test for the placeholder in the textarea.
• Test that output updates with replaced emojis.
• Test the clear button resets the input.

Data Test IDs (required for testing):

• data-testid="input-textarea": The textarea for text input.
• data-testid="output-box": The div or element displaying the replaced text output.
• data-testid="clear-button": The button that clears the input text.