body {
font-family: Arial, sans-serif;
margin: 20px;
}

h1 {
color: #333;
}

.author {
font-style: italic;
margin-bottom: 20px;
}

form {
margin-bottom: 20px;
}

label {
display: block;
margin: 5px 0;
}

input {
margin-bottom: 10px;
padding: 5px;
}

button {
padding: 10px 15px;
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
}

button:hover {
background-color: #45a049;
}

#results {
margin-top: 20px;
}

function calculate() {
// Get input values
const length = parseFloat(document.getElementById(‘length’).value);
const width = parseFloat(document.getElementById(‘width’).value);
const tileLength = parseFloat(document.getElementById(’tileLength’).value);
const tileWidth = parseFloat(document.getElementById(’tileWidth’).value);
const wastage = parseFloat(document.getElementById(‘wastage’).value) / 100;

// Check if values are valid
if (isNaN(length) || isNaN(width) || isNaN(tileLength) || isNaN(tileWidth) || isNaN(wastage)) {
alert(‘Please enter valid numbers’);
return;
}

// Calculate area
const area = length * width;
document.getElementById(‘areaResult’).textContent = `Total Ceiling Area: ${area.toFixed(2)} square feet`;

// Calculate number of tiles
const tileArea = tileLength * tileWidth;
const numberOfTiles = area / tileArea;
document.getElementById(’tilesResult’).textContent = `Number of Tiles Needed: ${Math.ceil(numberOfTiles)}`;

// Calculate total quantity with wastage
const totalTiles = numberOfTiles * (1 + wastage);
document.getElementById(‘totalTilesResult’).textContent = `Total Quantity with Wastage: ${Math.ceil(totalTiles)}`;
}