Remove Lines Containing Tool Code

Here’s a complete responsive code for a "Remove Lines Containing" Tool. The tool will allow users to input text, specify a keyword (or multiple keywords), and remove lines containing those keywords. We'll use HTML, CSS, and JavaScript. For a polished design, we'll use Tailwind CSS and optionally include Alpine.js for interactivity.

This code includes:

Input text area for pasting text.
A keyword input field.
A "Remove Lines" button.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Remove Lines Containing Tool</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="bg-gradient-to-br from-blue-100 to-indigo-200 min-h-screen flex items-center justify-center">

  <div class="container mx-auto p-4">
    <!-- Card Container -->
    <div class="bg-white shadow-lg rounded-2xl p-6 max-w-3xl mx-auto">
      <h1 class="text-2xl font-bold text-indigo-600 text-center mb-6">Remove Lines Containing Tool</h1>
      <!-- Input Section -->
      <div>
        <label for="inputText" class="block text-gray-700 font-medium mb-2">Paste your text below:</label>
        <textarea id="inputText" rows="6" class="w-full p-4 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 outline-none mb-4" placeholder="Enter your text here..."></textarea>
      </div>
      <!-- Keyword Input -->
      <div>
        <label for="keyword" class="block text-gray-700 font-medium mb-2">Enter keywords (comma-separated):</label>
        <input id="keyword" type="text" class="w-full p-4 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 outline-none mb-4" placeholder="e.g., error, warning, skip">
      </div>
      <!-- Button -->
      <button id="removeLinesButton" class="w-full bg-indigo-500 text-white font-medium py-3 rounded-lg shadow-md hover:bg-indigo-600 focus:ring-4 focus:ring-indigo-300 mb-4 transition-all">
        Remove Lines
      </button>
      <!-- Result Section -->
      <div>
        <label for="outputText" class="block text-gray-700 font-medium mb-2">Filtered text:</label>
        <textarea id="outputText" rows="6" class="w-full p-4 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 outline-none bg-gray-50" placeholder="Filtered text will appear here..." readonly></textarea>
      </div>
    </div>
  </div>

  <script>
    // JavaScript Logic for Removing Lines
    document.getElementById("removeLinesButton").addEventListener("click", () => {
      const inputText = document.getElementById("inputText").value;
      const keywords = document.getElementById("keyword").value.split(",").map(k => k.trim()).filter(k => k);
      const outputTextArea = document.getElementById("outputText");

      if (!inputText) {
        alert("Please enter some text.");
        return;
      }

      if (keywords.length === 0) {
        alert("Please enter at least one keyword.");
        return;
      }

      // Split input into lines and filter based on keywords
      const filteredLines = inputText
        .split("\n")
        .filter(line => !keywords.some(keyword => line.includes(keyword)));

      // Update the output textarea
      outputTextArea.value = filteredLines.join("\n");
    });
  </script>

</body>

</html>

Remove Lines Containing Tool Code

Post a Comment

Contact Form