How to add/embed a simple javascript application inside a page in WordPress

In this post we are going to create a simple calculator using JavaScript and it will be displayed on a normal WordPress page. So we will learn how to add or embed a JavaScript code and run on a WordPress page. Please follow the below steps to implement it:

Create a New Page in WordPress

• Log in to your WordPress dashboard.
• Navigate to Pages > Add New.
• Enter a title for your page (e.g., “Simple Online Calculator App”).

Embed Your HTML and JavaScript Code (For Gutenberg)

• In the page editor, click the + button to add a new block.
• Select the Custom HTML block.

• Add the below HTML and JavaScript code for Simple Online Calculator App into the block.

<div>
    <h2>Simple Online Calculator App</h2>
    <input type="number" id="num1" placeholder="Enter first number">
    <input type="number" id="num2" placeholder="Enter second number">
    <button onclick="calculate()">Add</button>
    <p id="result"></p>
</div>
<script>
    function calculate() {
        const num1 = parseFloat(document.getElementById('num1').value);
        const num2 = parseFloat(document.getElementById('num2').value);
        const result = num1 + num2;
        document.getElementById('result').innerText = 'Result: ' + result;
    }
</script>

Publish the page.

View the page and you should see as below. Moreover, you can access the page here