document.addEventListener("DOMContentLoaded", function() { const pagesSlider = document.getElementById('pages'); const pagesDisplay = document.getElementById('pagesDisplay'); const designSelect = document.getElementById('design'); const ecommerceSelect = document.getElementById('ecommerce'); const seoSelect = document.getElementById('seo'); const emailMarketingSelect = document.getElementById('emailMarketing'); const languagesSelect = document.getElementById('languages'); // New parameter for languages const resultDisplay = document.querySelector('.result'); function calculateCost() { const pages = parseInt(pagesSlider.value); const design = designSelect.value; const ecommerce = ecommerceSelect.value === "Sí"; const seo = seoSelect.value; const emailMarketing = emailMarketingSelect.value === "Sí"; const languages = languagesSelect.value === "5+" ? 5 : parseInt(languagesSelect.value); // Handling "5+" let basePrice = 999; let additionalPageCost = pages > 1 ? (Math.min(pages, 50) - 1) * 300 + (pages > 50 ? (pages - 50) * 250 : 0) : 0; let designCost = design === "Minimalista" ? 750 : design === "Obra de arte" ? 1500 : 0; let ecommerceCost = ecommerce ? 999 : 0; let seoCost = seo === "Básico" ? 0 : seo === "Rango" ? 300 : seo === "Refuerzo" ? 600 : 0; let emailMarketingCost = emailMarketing ? 1000 : 0; let languagesCost = languages * 500 * pages; // Additional cost based on languages const totalCost = basePrice + additionalPageCost + designCost + ecommerceCost + seoCost + emailMarketingCost + languagesCost; resultDisplay.textContent = `Coste total estimado: €${totalCost}`; } function updatePagesDisplay() { pagesDisplay.textContent = pagesSlider.value; const sliderValue = (pagesSlider.value - pagesSlider.min) / (pagesSlider.max - pagesSlider.min); const offset = sliderValue * (pagesSlider.offsetWidth - 28); // Adjusted to better align with the slider thumb pagesDisplay.style.left = `${offset}px`; } pagesSlider.addEventListener('input', function() { updatePagesDisplay(); calculateCost(); }); designSelect.addEventListener('change', calculateCost); ecommerceSelect.addEventListener('change', calculateCost); seoSelect.addEventListener('change', calculateCost); emailMarketingSelect.addEventListener('change', calculateCost); languagesSelect.addEventListener('change', calculateCost); // Listener for new parameter updatePagesDisplay(); // Initial update calculateCost(); // Initial cost calculation to display at load });