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:
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.