Finding a way to successfully run HTML and CSS on WordPress

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>

Fireplace Size Calculator

Room Length (feet):

Room Width (feet):

Room Height (feet):

Calculate Fireplace Size

<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>

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.

Blog

Finding a way to successfully run HTML and CSS on WordPress

Jamal Khan

Fireplace Size Calculator

Join Our Newsletter. No Spam, Only the good stuff.

Related