Approach to create Port Scanner Card.
- Create a new HTML file and add the necessary HTML structure. Include the Tailwind CSS CDN link in the <head> section of the HTML file.
- The application provides a simple and intuitive user interface with input fields for entering the host or IP address and ports to scan along with the submit button.
- Upon submitting the form, the application asynchronously scans each port using JavaScript. It checks whether the port is open or closed and displays the results accordingly.
- Add JavaScript code to handle form submission, port scanning, and result display. The scan results are dynamically displayed below the form showing the status of each scanned port.
Example: Implementation of creating PortScanner in TailwindCSS
HTML
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Port Scanner</title> <script src="https://cdn.tailwindcss.com"></script> <style> .border-green { border-color: #48bb78; } </style></head><body class="bg-gray-100 h-screen flex items-center justify-center"> <div class="max-w-lg bg-white p-8 rounded shadow-md w-full border border-green"> <h1 class="text-2xl font-semibold mb-4"> Port Scanner </h1> <form id="portScannerForm" class="flex flex-col gap-4"> <label for="host" class="text-gray-700"> Host: </label> <input type="text" id="host" name="host" placeholder="Enter host or IP address" class="px-4 py-2 border rounded focus:outline-none focus:border-blue-500"> <label for="ports" class="text-gray-700"> Ports (comma-separated): </label> <input type="text" id="ports" name="ports" placeholder="Enter ports (e.g., 80,443)" class="px-4 py-2 border rounded focus:outline-none focus:border-blue-500"> <button type="submit" class="bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded focus:outline-none focus:ring-2 focus:ring-blue-500"> Scan Ports </button> </form> <div id="scanResults" class="mt-6 hidden"> <h2 class="text-lg font-semibold mb-4"> Scan Results: </h2> <div id="resultList" class="grid grid-cols-2 gap-4"></div> </div> </div> <script> const portScannerForm = document.getElementById('portScannerForm'); const scanResults = document.getElementById('scanResults'); const resultList = document.getElementById('resultList'); portScannerForm.addEventListener('submit', async (e) => { e.preventDefault(); const host = e.target.host.value; const ports = e.target.ports.value.split(',') .map(port => port.trim()); resultList.innerHTML = ''; for (const port of ports) { const isOpen = await scanPort(host, port); const status = isOpen ? 'Open' : 'Closed'; const resultItem = document.createElement('div'); resultItem.innerHTML = `<span class="font-semibold">${port}:</span> ${status}`; resultList.appendChild(resultItem); } scanResults.classList.remove('hidden'); }); async function scanPort(host, port) { return Math.random() < 0.5; } </script></body></html> |
Output:
Output
How to Create a PortScanner Card in JavaScript and Tailwind CSS ?
The Port Scanner is a web application that allows users to scan ports on a specified host or IP address. Users can enter the host or IP address along with the list of ports (comma-separated) they want to scan. The application then checks the status of each port (open or closed) and displays the results to a user.
Output Preview: Let us have a look at how the final output will look like.
Preview