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
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>
<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
Recommended Articles