I am running a fireplace website, fireplaceadviser.com, that focuses on informational content about electric, gas, and wood fireplaces. I have a plan to develop a tool page on my website that finds the ideal size for a fireplace. I have the code below, but when I implement it on my WordPress website, it gives me an error. Can anyone help me with this?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fireplace Size Calculator</title>
<link rel="stylesheet" href="styles.css">
<meta name="author" content="fireplaceadviser.com">
</head>
<body>
<div class="container">
<h1>Fireplace Size Calculator</h1>
<form id="calculator-form">
<div class="input-group">
<label for="roomLength">Room Length (feet):</label>
<input type="number" id="roomLength" name="roomLength" required>
</div>
<div class="input-group">
<label for="roomWidth">Room Width (feet):</label>
<input type="number" id="roomWidth" name="roomWidth" required>
</div>
<div class="input-group">
<label for="roomHeight">Room Height (feet):</label>
<input type="number" id="roomHeight" name="roomHeight" required>
</div>
<button type="button" onclick="calculateFireplaceSize()">Calculate Fireplace Size</button>
</form>
<div id="result" class="result"></div>
</div>
<footer>
<p>Created by <a href="https://fireplaceadviser.com" target="_blank">fireplaceadviser.com</a></p>
</footer>
<script>
function calculateFireplaceSize() {
const length = document.getElementById('roomLength').value;
const width = document.getElementById('roomWidth').value;
const height = document.getElementById('roomHeight').value;
if (length && width && height) {
const roomVolume = length * width * height;
const recommendedFireplaceSize = roomVolume * 0.034; // Example calculation
document.getElementById('result').innerText =
`Recommended Fireplace Size: ${recommendedFireplaceSize.toFixed(2)} cubic feet per hour`;
} else {
document.getElementById('result').innerText = 'Please fill in all fields.';
}
}
</script>
</body>
</html>
I tried the code below on my site using the HTML embed feature in WordPress, but it didn’t work. I want to know a method to implement this code on my site successfully.
New contributor
Jamal Khan is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.