| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Word to Emoji Converter</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://unpkg.com/feather-icons"></script> |
| <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet"> |
| <style> |
| body { |
| font-family: 'Poppins', sans-serif; |
| background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); |
| min-height: 100vh; |
| } |
| .glow { |
| box-shadow: 0 0 20px rgba(255, 215, 0, 0.6); |
| } |
| .emoji-display { |
| transition: all 0.3s ease; |
| } |
| </style> |
| </head> |
| <body class="flex items-center justify-center p-4"> |
| <div class="max-w-md w-full bg-white rounded-xl shadow-2xl overflow-hidden"> |
| <div class="bg-gradient-to-r from-blue-500 to-purple-600 p-6 text-white"> |
| <h1 class="text-2xl font-bold flex items-center"> |
| <i data-feather="smile" class="mr-2"></i> Word to Emoji |
| </h1> |
| <p class="text-blue-100 mt-1">Enter a word and get a matching emoji!</p> |
| </div> |
| |
| <div class="p-6"> |
| <div class="relative"> |
| <input |
| type="text" |
| id="wordInput" |
| placeholder="Type a word (e.g. happy, cat, pizza)" |
| class="w-full p-4 pr-12 rounded-lg border-2 border-gray-200 focus:border-blue-500 focus:outline-none transition" |
| > |
| <button |
| id="searchBtn" |
| class="absolute right-2 top-1/2 transform -translate-y-1/2 bg-blue-500 hover:bg-blue-600 text-white p-2 rounded-lg transition" |
| > |
| <i data-feather="search"></i> |
| </button> |
| </div> |
| |
| <div class="mt-8 text-center"> |
| <div id="emojiResult" class="emoji-display text-8xl my-6 min-h-[100px] flex items-center justify-center"> |
| <span class="text-gray-300">?</span> |
| </div> |
| |
| <div id="wordMeaning" class="text-gray-600 italic"> |
| Type a word above to see its emoji match |
| </div> |
| </div> |
| </div> |
| |
| <div class="bg-gray-50 px-6 py-4 text-center text-sm text-gray-500"> |
| <p>Powered by emoji associations</p> |
| </div> |
| </div> |
|
|
| <script> |
| feather.replace(); |
| |
| |
| const emojiMap = { |
| 'happy': '😊', |
| 'sad': '😢', |
| 'angry': '😠', |
| 'love': '❤️', |
| 'cat': '🐱', |
| 'dog': '🐶', |
| 'pizza': '🍕', |
| 'coffee': '☕', |
| 'music': '🎵', |
| 'book': '📖', |
| 'sun': '☀️', |
| 'rain': '🌧️', |
| 'fire': '🔥', |
| 'water': '💧', |
| 'tree': '🌳', |
| 'flower': '🌸', |
| 'car': '🚗', |
| 'plane': '✈️', |
| 'money': '💰', |
| 'time': '⏰', |
| 'phone': '📱', |
| 'computer': '💻', |
| 'game': '🎮', |
| 'movie': '🎬', |
| 'sleep': '😴', |
| 'food': '🍴', |
| 'drink': '🥤', |
| 'work': '💼', |
| 'school': '🏫', |
| 'home': '🏠', |
| 'beach': '🏖️', |
| 'mountain': '⛰️', |
| 'star': '⭐', |
| 'moon': '🌙', |
| 'heart': '💖', |
| 'laugh': '😂', |
| 'cool': '😎', |
| 'surprise': '😲', |
| 'idea': '💡', |
| 'gift': '🎁', |
| 'party': '🎉', |
| 'sport': '⚽', |
| 'run': '🏃', |
| 'swim': '🏊', |
| 'dance': '💃', |
| 'sing': '🎤', |
| 'art': '🎨', |
| 'photo': '📷', |
| 'travel': '🧳', |
| 'weather': '🌤️', |
| 'cloud': '☁️', |
| 'snow': '❄️', |
| 'lightning': '⚡', |
| 'wind': '🌬️', |
| 'leaf': '🍃', |
| 'animal': '🐾', |
| 'bird': '🐦', |
| 'fish': '🐠', |
| 'bug': '🐛', |
| 'robot': '🤖', |
| 'alien': '👽', |
| 'ghost': '👻', |
| 'unicorn': '🦄', |
| 'dragon': '🐉', |
| 'king': '👑', |
| 'queen': '👸', |
| 'hero': '🦸', |
| 'villain': '🦹', |
| 'wizard': '🧙', |
| 'fairy': '🧚', |
| 'vampire': '🧛', |
| 'zombie': '🧟', |
| 'pirate': '🏴☠️', |
| 'ninja': '🥷', |
| 'spy': '🕵️', |
| 'detective': '🔍', |
| 'police': '👮', |
| 'doctor': '👨⚕️', |
| 'nurse': '👩⚕️', |
| 'teacher': '👩🏫', |
| 'student': '🧑🎓', |
| 'baby': '👶', |
| 'child': '🧒', |
| 'adult': '🧑', |
| 'old': '🧓', |
| 'family': '👪', |
| 'friend': '👫', |
| 'couple': '💑', |
| 'wedding': '💒', |
| 'christmas': '🎄', |
| 'halloween': '🎃', |
| 'easter': '🐇', |
| 'birthday': '🎂', |
| 'new year': '🎆', |
| 'valentine': '💘', |
| 'flag': '🏳️', |
| 'rainbow': '🌈', |
| 'clover': '🍀', |
| 'horseshoe': '🧲', |
| 'dice': '🎲', |
| 'card': '🃏', |
| 'chess': '♟️', |
| 'domino': '🀄', |
| 'ball': '⚾', |
| 'goal': '🥅', |
| 'medal': '🏅', |
| 'trophy': '🏆', |
| 'winner': '🎖️', |
| 'loser': '😞', |
| 'first': '🥇', |
| 'second': '🥈', |
| 'third': '🥉', |
| 'gold': '💰', |
| 'silver': '🥈', |
| 'bronze': '🥉', |
| 'diamond': '💎', |
| 'gem': '💠', |
| 'ring': '💍', |
| 'necklace': '📿', |
| 'crown': '👑', |
| 'tiara': '👑', |
| 'shoe': '👟', |
| 'hat': '🧢', |
| 'glasses': '👓', |
| 'bag': '👜', |
| 'wallet': '👛', |
| 'key': '🔑', |
| 'lock': '🔒', |
| 'clock': '⏰', |
| 'watch': '⌚', |
| 'calendar': '📅', |
| 'note': '📝', |
| 'pen': '🖊️', |
| 'pencil': '✏️', |
| 'paper': '📄', |
| 'bookmark': '🔖', |
| 'label': '🏷️', |
| 'mail': '✉️', |
| 'email': '📧', |
| 'letter': '💌', |
| 'package': '📦', |
| 'box': '📦', |
| 'garbage': '🗑️', |
| 'recycle': '♻️', |
| 'trash': '🗑️', |
| 'clean': '🧼', |
| 'soap': '🧼', |
| 'sponge': '🧽', |
| 'broom': '🧹', |
| 'vacuum': '🧹', |
| 'shower': '🚿', |
| 'bath': '🛁', |
| 'toilet': '🚽', |
| 'sink': '🚰', |
| 'mirror': '🪞', |
| 'window': '🪟', |
| 'door': '🚪', |
| 'bed': '🛏️', |
| 'couch': '🛋️', |
| 'chair': '🪑', |
| 'table': '🪑', |
| 'desk': '🪑', |
| 'lamp': '💡', |
| 'light': '💡', |
| 'candle': '🕯️', |
| 'fireplace': '🔥', |
| 'plant': '🪴', |
| 'vase': '🏺', |
| 'picture': '🖼️', |
| 'painting': '🎨', |
| 'sculpture': '🗿', |
| 'statue': '🗿', |
| 'building': '🏢', |
| 'house': '🏠', |
| 'apartment': '🏢', |
| 'hotel': '🏨', |
| 'hospital': '🏥', |
| 'bank': '🏦', |
| 'store': '🏪', |
| 'shop': '🛍️', |
| 'market': '🛒', |
| 'mall': '🏬', |
| 'restaurant': '🍽️', |
| 'cafe': '☕', |
| 'bar': '🍸', |
| 'pub': '🍻', |
| 'club': '🎪', |
| 'theater': '🎭', |
| 'cinema': '🎬', |
| 'museum': '🏛️', |
| 'library': '📚', |
| 'school': '🏫', |
| 'university': '🎓', |
| 'office': '🏢', |
| 'factory': '🏭', |
| 'construction': '🏗️', |
| 'farm': '🚜', |
| 'barn': '🏚️', |
| 'church': '⛪', |
| 'temple': '🛕', |
| 'mosque': '🕌', |
| 'synagogue': '🕍', |
| 'castle': '🏰', |
| 'palace': '🏯', |
| 'tent': '⛺', |
| 'igloo': '❄️', |
| 'caravan': '🚐', |
| 'ship': '🚢', |
| 'boat': '⛵', |
| 'sailboat': '⛵', |
| 'yacht': '🛥️', |
| 'submarine': '🛳️', |
| 'anchor': '⚓', |
| 'lighthouse': '🗼', |
| 'airport': '✈️', |
| 'helicopter': '🚁', |
| 'rocket': '🚀', |
| 'satellite': '🛰️', |
| 'ufo': '🛸', |
| 'parachute': '🪂', |
| 'train': '🚂', |
| 'metro': '🚇', |
| 'tram': '🚊', |
| 'bus': '🚌', |
| 'taxi': '🚕', |
| 'truck': '🚚', |
| 'bike': '🚲', |
| 'scooter': '🛴', |
| 'motorcycle': '🏍️', |
| 'skateboard': '🛹', |
| 'roller': '🛼', |
| 'skate': '⛸️', |
| 'ski': '🎿', |
| 'snowboard': '🏂', |
| 'sled': '🛷', |
| 'golf': '🏌️', |
| 'tennis': '🎾', |
| 'basketball': '🏀', |
| 'soccer': '⚽', |
| 'football': '🏈', |
| 'baseball': '⚾', |
| 'softball': '🥎', |
| 'volleyball': '🏐', |
| 'rugby': '🏉', |
| 'hockey': '🏒', |
| 'cricket': '🏏', |
| 'badminton': '🏸', |
| 'pingpong': '🏓', |
| 'bowling': '🎳', |
| 'pool': '🎱', |
| 'darts': '🎯', |
| 'fishing': '🎣', |
| 'hunting': '🏹', |
| 'archery': '🏹', |
| 'boxing': '🥊', |
| 'karate': '🥋', |
| 'judo': '🥋', |
| 'taekwondo': '🥋', |
| 'wrestling': '🤼', |
| 'fencing': '🤺', |
| 'gymnastics': '🤸', |
| 'weightlifting': '🏋️', |
| 'yoga': '🧘', |
| 'meditation': '🧘', |
| 'running': '🏃', |
| 'walking': '🚶', |
| 'hiking': '🧗', |
| 'climbing': '🧗', |
| 'swimming': '🏊', |
| 'diving': '🤿', |
| 'surfing': '🏄', |
| 'rowing': '🚣', |
| 'canoeing': '🛶', |
| 'kayaking': '🛶', |
| 'sailing': '⛵', |
| 'windsurfing': '🏄', |
| 'kitesurfing': '🏄', |
| 'parasailing': '🪂', |
| 'skydiving': '🪂', |
| 'bungee': '🪂', |
| 'zip': '🪂', |
| 'park': '🏞️', |
| 'garden': '🌷', |
| 'forest': '🌲', |
| 'jungle': '🌴', |
| 'desert': '🏜️', |
| 'island': '🏝️', |
| 'volcano': '🌋', |
| 'canyon': '🏞️', |
| 'waterfall': '🌊', |
| 'river': '🌊', |
| 'lake': '🏞️', |
| 'ocean': '🌊', |
| 'sea': '🌊', |
| 'wave': '🌊', |
| 'tide': '🌊', |
| 'whale': '🐋', |
| 'dolphin': '🐬', |
| 'shark': '🦈', |
| 'octopus': '🐙', |
| 'jellyfish': '🎐', |
| 'crab': '🦀', |
| 'lobster': '🦞', |
| 'shrimp': '🦐', |
| 'squid': '🦑', |
| 'snail': '🐌', |
| 'butterfly': '🦋', |
| 'bee': '🐝', |
| 'ladybug': '🐞', |
| 'ant': '🐜', |
| 'spider': '🕷️', |
| 'scorpion': '🦂', |
| 'mosquito': '🦟', |
| 'fly': '🪰', |
| </body> |
| </html> |
