The Palos Publishing Company

Follow Us On The X Platform @PalosPublishing
Categories We Write About

Create an emoji suggestion tool

Written by

Bernardo Palos

in

Here’s a simple Emoji Suggestion Tool built with JavaScript, HTML, and a bit of CSS. It suggests emojis based on keywords entered by the user.

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Emoji Suggestion Tool</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 2rem;
      background-color: #f9f9f9;
    }
    .container {
      max-width: 500px;
      margin: 0 auto;
      text-align: center;
    }
    input[type="text"] {
      width: 100%;
      padding: 0.75rem;
      margin-bottom: 1rem;
      font-size: 1rem;
    }
    .results {
      font-size: 2rem;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 1rem;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>Emoji Suggestion Tool</h1>
    <input type="text" id="emojiInput" placeholder="Type a keyword (e.g., smile, fire, love)..." />
    <div class="results" id="emojiResults"></div>
  </div>

  <script>
    const emojiMap = {
      smile: ['😊', '😄', '😁'],
      love: ['❤️', '😍', '😘'],
      fire: ['🔥', '💥', '⚡'],
      sad: ['😢', '😭', '😞'],
      angry: ['😠', '😡', '🤬'],
      laugh: ['😂', '🤣', '😹'],
      party: ['🥳', '🎉', '🎊'],
      food: ['🍕', '🍔', '🍣'],
      music: ['🎵', '🎶', '🎧'],
      sun: ['☀️', '🌞', '😎'],
      moon: ['🌙', '🌝', '🌚'],
      star: ['⭐', '🌟', '✨']
    };

    const input = document.getElementById('emojiInput');
    const results = document.getElementById('emojiResults');

    input.addEventListener('input', () => {
      const query = input.value.toLowerCase().trim();
      results.innerHTML = '';

      if (query && emojiMap[query]) {
        emojiMap[query].forEach(emoji => {
          const span = document.createElement('span');
          span.textContent = emoji;
          results.appendChild(span);
        });
      } else if (query) {
        results.textContent = 'No emoji suggestions found.';
      }
    });
  </script>
</body>
</html>

Features:

  • Simple keyword-based emoji suggestions.

  • Responsive and minimal design.

  • Easy to expand the emojiMap object with more keywords and emoji combinations.

You can embed this in any webpage or extend it into a more advanced tool with autocomplete, category filters, or emoji copy-to-clipboard functionality. Let me know if you’d like to enhance it further!

Share this Page your favorite way: Click any app below to share.
See all the ways to share this page

Enter your email below to join The Palos Publishing Company Email List

We respect your email privacy

Check Out Our Newest Posts we wrote about

Categories We Write About