The Palos Publishing Company

Categories We Write About

Build a question_answer tagging tool

Written by

Bernardo Palos

in

Here is a simple, functional Question/Answer Tagging Tool built using HTML, JavaScript, and Tailwind CSS. This allows a user to enter a question and an answer, then tag them with relevant categories or keywords.

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Q&A Tagging Tool</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 min-h-screen p-6">
  <div class="max-w-3xl mx-auto bg-white shadow-lg rounded-2xl p-6">
    <h1 class="text-2xl font-bold mb-4">Q&A Tagging Tool</h1>

    <!-- Input Form -->
    <div class="space-y-4">
      <div>
        <label class="block font-medium">Question:</label>
        <textarea id="question" class="w-full p-2 border rounded" rows="2" placeholder="Enter the question..."></textarea>
      </div>
      <div>
        <label class="block font-medium">Answer:</label>
        <textarea id="answer" class="w-full p-2 border rounded" rows="3" placeholder="Enter the answer..."></textarea>
      </div>
      <div>
        <label class="block font-medium">Tags (comma-separated):</label>
        <input id="tags" type="text" class="w-full p-2 border rounded" placeholder="e.g. JavaScript, CSS, Web Development">
      </div>
      <button onclick="addEntry()" class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">Add Entry</button>
    </div>

    <!-- Display Entries -->
    <div id="entries" class="mt-8 space-y-6">
      <h2 class="text-xl font-semibold">Tagged Q&A Entries</h2>
    </div>
  </div>

  <script>
    function addEntry() {
      const question = document.getElementById("question").value.trim();
      const answer = document.getElementById("answer").value.trim();
      const tags = document.getElementById("tags").value.trim().split(',').map(t => t.trim()).filter(Boolean);

      if (!question || !answer || tags.length === 0) {
        alert("Please fill in all fields including at least one tag.");
        return;
      }

      const entryDiv = document.createElement("div");
      entryDiv.className = "border p-4 rounded bg-gray-50";

      entryDiv.innerHTML = `
        <p><strong>Q:</strong> ${question}</p>
        <p><strong>A:</strong> ${answer}</p>
        <div class="mt-2">
          ${tags.map(tag => `<span class="inline-block bg-blue-100 text-blue-800 text-sm px-2 py-1 rounded-full mr-1">${tag}</span>`).join('')}
        </div>
      `;

      document.getElementById("entries").appendChild(entryDiv);

      // Clear form
      document.getElementById("question").value = '';
      document.getElementById("answer").value = '';
      document.getElementById("tags").value = '';
    }
  </script>
</body>
</html>

Features:

  • Add Q&A entries with tags.

  • Tag input accepts comma-separated values.

  • Display tagged entries in a clean layout using Tailwind CSS.

You can extend this tool to include:

  • Persistent storage (localStorage, backend/database).

  • Tag filtering.

  • Edit/delete functionality for entries.

  • Export to JSON/CSV.

Let me know if you want enhancements like tag-based filtering or integration with a database.

Share This Page:

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

We respect your email privacy

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

Check Out Our Newest Posts we wrote about

Categories We Write About