example.js

// Prices in cents:
const PIZZA_PRICE = 1499;
const BEVERAGE_PRICE = 199;

const pizzaSlider = document.querySelector('#pizza-slider');
const beverageSlider = document.querySelector('#beverage-slider');
const output = document.querySelector('#output');
const totalSpan = document.querySelector('#total');

document.querySelector('#pizza-caption').textContent = 'How many pizzas?';
document.querySelector('#beverage-caption').textContent = 'How many beverages?';
pizzaSlider.value = '1';
beverageSlider.value = '2';

function updateTotal() {
  const total = Number(pizzaSlider.value) * PIZZA_PRICE + Number(beverageSlider.value) * BEVERAGE_PRICE;
  if (total === 0) {
    output.style.visibility = 'hidden';
  } else {
    output.style.visibility = 'visible';
  }
  totalSpan.textContent = `${(total / 100).toFixed(2)}`;
}
updateTotal();
pizzaSlider.addEventListener('input', updateTotal);
beverageSlider.addEventListener('input', updateTotal);