<html>
<head>
<title>Baking Tin Converter</title>
<style>
body {
font-family: Arial, sans-serif;
}
h1 {
text-align: center;
}
.container {
width: 400px;
margin: 0 auto;
padding: 20px;
border: 1px solid #ccc;
background-color: #f5f5f5;
}
label {
display: block;
margin-bottom: 10px;
}
input[type="text"] {
width: 100%;
padding: 5px;
border: 1px solid #ccc;
border-radius: 4px;
}
.btn {
display: inline-block;
padding: 8px 12px;
background-color: #4caf50;
color: #fff;
border: none;
text-align: center;
text-decoration: none;
cursor: pointer;
border-radius: 4px;
}
.result {
margin-top: 20px;
font-weight: bold;
}
</style>
</head>
<body>
<h1>Baking Tin Converter</h1>
<div class="container">
<label for="length">Length (cm):</label>
<input type="text" id="length">
<label for="width">Width (cm):</label>
<input type="text" id="width">
<label for="height">Height (cm):</label>
<input type="text" id="height">
<button class="btn" onclick="convert()">Convert</button>
<div class="result">
<p id="resultText"></p>
</div>
</div>
<script>
function convert() {
var length = parseFloat(document.getElementById("length").value);
var width = parseFloat(document.getElementById("width").value);
var height = parseFloat(document.getElementById("height").value);
if (isNaN(length) || isNaN(width) || isNaN(height)) {
document.getElementById("resultText").innerText = "Please enter valid dimensions.";
} else {
var volume = length * width * height;
document.getElementById("resultText").innerText = "The volume of the baking tin is " + volume + " cubic centimeters.";
}
}
</script>
</body>
</html>