Add calculator to WordPress without plugins (youtube tutorial)

This is the source code for a Youtube tutorial I posted on my channel.

If you are running a website for a company, providing timely estimates to your visitors is important as it increases the chance of converting them into customers. You can estimate how much your product or service is going to cost them or how much they are going to save by using your product.

There are many calculator plugins for WordPress but usually you need to purchase a subscription in order to use them. However, with a minimal amount of Javascript and CSS you can easily add a calculator and style it to your liking.

In our hypothetical scenario, we are building an instant cash offer calculator for a real estate investment company. Visitors can enter the neighborhood they live in and the size of their house in sq ft and they get an instant offer.

HTML Code

        <div id="calculator">
            <div>
                <label for="nbh">Neighborhood</label>
                <select id="nbh">
                    <option value="summerlin">Summerlin</option>
                    <option value="enterprise">Enterprise</option>
                    <option value="gv">Green Valley</option>
                </select>
            </div>
            <div>
                <label for="size">Size in sq ft</label>
                <div id="size">
                    <input id="size_slider" type="range" min="500" max="10000" value="1000">
                    <input id="size_text" type="number" min="500" max="10000" value="1000">
                </div>
            </div>
            <div>
                <label for="estimate">Cash offer</label>
                <input id="estimate" type="text" disabled>
            </div>
        </div>

Header code

<script src="assets/jquery-3.6.0.min.js"></script>
<style>
	#calculator label {
		display: block;
		font-size: 2rem;
		font-weight: normal;
	}

	#size {
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	
	#size input[type=range] {
		width: 20rem;
	}
	
	#size input[type=range]::-webkit-slider-thumb {
		width: 2rem;
		height: 2rem;
	}

</style>

Footer code

<script>
	const price_per_sqft = {
		'summerlin': 214,
		'enterprise': 201,
		'gv': 185
	};
	function updateOffer() {
		const estimate = price_per_sqft[$("#nbh").val()] * Number($("#size_text").val());
		$("#estimate").val(Number(estimate).toLocaleString());
	}

	$(document).ready(function() {
		$("#size_slider").on("input change", function(e) {
			$("#size_text").val(e.target.value);
			updateOffer();
		});
		$("#size_text").on("input change", function(e) {
			$("#size_slider").val(e.target.value);
			updateOffer();
		});
		$("#nbh").change(function() {
			updateOffer();
		});

	});
</script>