Website tester tool
Sure, here's an example of how you could build a responsive website tester tool using HTML and JavaScript:
HTML:
php
Copy code
Responsive Website Tester Tool
CSS (style.css):
css
Copy code
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
header h1 {
margin: 0;
}
main {
padding: 20px;
}
.form {
display: flex;
flex-wrap: wrap;
align-items: center;
}
label {
flex: 1;
margin-right: 10px;
}
input[type="text"] {
flex: 2;
padding: 5px;
}
button {
flex: 1;
padding: 5px;
background-color: #4CAF50;
color: #fff;
border: none;
cursor: pointer;
}
#result {
margin-top: 20px;
}
footer {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
JavaScript (script.js):
javascript
Copy code
function testWebsite() {
// Get the URL from the input field
var url = document.getElementById("url").value;
// Create an iframe to load the website in
var iframe = document.createElement("iframe");
iframe.src = url;
iframe.style.border = "none";
iframe.style.width = "100%";
iframe.style.height = "500px";
// Replace the current result (if any) with the new iframe
var result = document.getElementById("result");
result.innerHTML = "";
result.appendChild(iframe);
}
This code will create a responsive website tester tool that allows users to enter a URL and see how it looks on different devices. The tool uses an iframe to display the website, and the JavaScript code dynamically creates and updates the iframe as needed. The CSS styles ensure that the tool is responsive and looks good on all devices
Comments
Post a Comment