Website tester tool is a smart tool to test on different devices i.e Laptop, IPhone, Desktop and Mobile Phone, this tool is written in Javascript, HTML and Css.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Website Tester Tool</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/3.3.2/tailwind.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<style>
body {
background: linear-gradient(135deg, #84fab0, #8fd3f4);
font-family: 'Arial', sans-serif;
}
iframe {
border: 4px solid #333;
border-radius: 10px;
}
</style>
</head>
<body class="flex flex-col items-center min-h-screen p-4">
<h1 class="text-3xl font-bold text-white mb-6">Responsive Website Tester</h1>
<div class="w-full max-w-4xl p-6 bg-white rounded-lg shadow-lg">
<form id="testerForm" class="flex flex-col md:flex-row md:items-center gap-4">
<input
type="url"
id="websiteUrl"
class="flex-grow border border-gray-300 rounded-lg px-4 py-2"
placeholder="Enter website URL"
required>
<select
id="deviceSelector"
class="border border-gray-300 rounded-lg px-4 py-2">
<option value="375x812">iPhone X (375x812)</option>
<option value="360x640">Galaxy S9 (360x640)</option>
<option value="768x1024">iPad (768x1024)</option>
<option value="1440x900">Laptop (1440x900)</option>
<option value="1920x1080">Desktop (1920x1080)</option>
</select>
<button
type="submit"
class="bg-blue-500 text-white px-6 py-2 rounded-lg hover:bg-blue-600 transition">
Test
</button>
</form>
<div id="testerFrameContainer" class="mt-6 hidden">
<iframe
id="testerFrame"
class="w-full h-[500px]"
title="Responsive Website Tester">
</iframe>
</div>
</div>
<footer class="mt-auto text-sm text-white">Made with ❤️ by [Your Name]</footer>
<script>
const testerForm = document.getElementById('testerForm');
const websiteUrl = document.getElementById('websiteUrl');
const deviceSelector = document.getElementById('deviceSelector');
const testerFrameContainer = document.getElementById('testerFrameContainer');
const testerFrame = document.getElementById('testerFrame');
testerForm.addEventListener('submit', (e) => {
e.preventDefault();
const url = websiteUrl.value.trim();
if (!url) {
Swal.fire({
icon: 'error',
title: 'Oops...',
text: 'Please enter a valid URL!',
});
return;
}
const [width, height] = deviceSelector.value.split('x');
testerFrame.src = url.startsWith('http') ? url : `https://${url}`;
testerFrame.style.width = `${width}px`;
testerFrame.style.height = `${height}px`;
testerFrameContainer.classList.remove('hidden');
});
</script>
</body>
</html>