If you are looking to add a simple cost calculator to your website here is a simple code that you can use. No plugins, just plain HTML, JavaScript, and CSS. Check the video below and grab the code snippet to apply to your project.
Code snippet
<div class="calculator"> <h2>Price Calculator</h2> <div class="form-group"> <label for="product-option">Product Option:</label> <select id="product-option"> <option value="basic">Basic</option> <option value="premium">Premium</option> <option value="deluxe">Deluxe</option> <option value="vip">VIP</option> </select> </div> <div class="form-group"> <label for="quantity">Quantity: <span id="quantity-value">1</span></label> <input type="range" id="quantity" min="1" max="100" value="1" /> </div> <div class="form-group"> <label> <input type="checkbox" id="feature1" /> Feature 1 (+$100) </label> </div> <div class="form-group"> <label> <input type="checkbox" id="feature2" /> Feature 2 (+$75) </label> </div> <h3 id="total-price">Total Price: $100</h3> </div> <script> const productOption = document.getElementById("product-option") const quantity = document.getElementById("quantity") const quantityValue = document.getElementById("quantity-value") const feature1 = document.getElementById("feature1") const feature2 = document.getElementById("feature2") const totalPriceElement = document.getElementById("total-price") const basePrices = { basic: 100, premium: 200, deluxe: 300, vip: 400 } // Create a formatter for USD currency const formatter = new Intl.NumberFormat("en-US", { style: "currency", currency: "USD", minimumFractionDigits: 2, maximumFractionDigits: 2 }) function calculatePrice() { let price = basePrices[productOption.value] price *= quantity.value if (feature1.checked) price += 100 if (feature2.checked) price += 75 totalPriceElement.textContent = `Total Price: ${formatter.format(price)}` } productOption.addEventListener("change", calculatePrice) quantity.addEventListener("input", () => { quantityValue.textContent = quantity.value calculatePrice() }) feature1.addEventListener("change", calculatePrice) feature2.addEventListener("change", calculatePrice) // Initial calculation calculatePrice() </script> <style> .calculator { border: 1px solid #e7e8ee; padding: 24px; border-radius: 8px; } .form-group { margin-bottom: 15px; } label { display: block; margin-bottom: 5px; } select, input[type="range"] { width: 100%; } /* Custom styles for range input */ input[type="range"] { -webkit-appearance: none; appearance: none; outline: none; padding: 0; border: none; } input[type="range"]::-webkit-slider-runnable-track { width: 100%; height: 4px; border-radius: 5px; background: #e7e8ee; transition: opacity 0.2s; } input[type="range"]:hover { opacity: 1; } input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 25px; height: 25px; border-radius: 50%; background: #8358ff; margin-top: -10px; cursor: pointer; } input[type="range"]::-moz-range-thumb { width: 25px; height: 25px; border-radius: 50%; background: #8358ff; cursor: pointer; } #total-price { display: inline-block; font-size: 1.2em; font-weight: bold; margin-top: 20px; } </style>