Finding a way to successfully run HTML and CSS on WordPress

[ITMaster58]

Select Topic Area

Bug

Body

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?

`

<title>Fireplace Size Calculator</title>

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.

[LiteBrite82]

Thanks for posting in the GitHub Community, @ITMaster58 !

We’ve moved your post to our Programming Help 🧑‍💻 category, which is more appropriate for this type of discussion.

Please review our guidelines about the Programming Help category for more information.

[kathlene-cory]

Hi @ITMaster58 - Thanks for posting!

What error do you get when you try to add this to an HTML widget?
Where are you trying to add this code?

My initial thoughts are that the footer tag is already used somewhere on the page. If that's not the error, are these ids for room length, width, and height found in the html anywhere?