let currentStep = 1; let formData = { departure: '', destination: '', departureDate: '', returnDate: '', adults: 0, children: 0, selectedOutboundFlight: null, selectedBaggageOption: null, }; let flightOptions = [ { id: 1, departure: 'NYC', destination: 'London', price: 500 }, { id: 2, departure: 'NYC', destination: 'London', price: 600 }, { id: 3, departure: 'NYC', destination: 'London', price: 700 }, ]; let baggageOptions = [ { id: 1, name: 'Standard Baggage', price: 50 }, { id: 2, name: 'Extra Baggage', price: 75 }, { id: 3, name: 'Premium Baggage', price: 100 }, ]; function showStep(step) { const steps = document.querySelectorAll('.step'); steps.forEach(s => s.classList.remove('active')); document.getElementById(`step-${step}`).classList.add('active'); } function nextStep(step) { if (step === 1) { formData.departure = document.getElementById('departure').value; formData.destination = document.getElementById('destination').value; formData.departureDate = document.getElementById('departure-date').value; formData.returnDate = document.getElementById('return-date').value; formData.adults = parseInt(document.getElementById('adults').value); formData.children = parseInt(document.getElementById('children').value); } if (step === 2) { const flightOptionId = document.querySelector('input[name="flight"]:checked').value; formData.selectedOutboundFlight = flightOptions.find(flight => flight.id == flightOptionId); } if (step === 3) { const baggageOptionId = document.querySelector('input[name="baggage"]:checked').value; formData.selectedBaggageOption = baggageOptions.find(baggage => baggage.id == baggageOptionId); } currentStep++; updateSummary(); showStep(currentStep); } function prevStep(step) { currentStep--; showStep(currentStep); } function updateSummary() { if (currentStep === 4) { let summary = `

Departure: ${formData.departure}

Destination: ${formData.destination}

Departure Date: ${formData.departureDate}

Return Date: ${formData.returnDate}

Adults: ${formData.adults}

Children: ${formData.children}

Outbound Flight: ${formData.selectedOutboundFlight.departure} to ${formData.selectedOutboundFlight.destination} - $${formData.selectedOutboundFlight.price}

Baggage: ${formData.selectedBaggageOption.name} - $${formData.selectedBaggageOption.price}

`; document.getElementById('booking-summary').innerHTML = summary; // Calculate total price const totalPrice = (formData.selectedOutboundFlight.price + formData.selectedBaggageOption.price) * (formData.adults + formData.children); document.getElementById('total-price').innerText = `$${totalPrice}`; } } function displayFlightOptions() { const flightOptionsDiv = document.getElementById('flight-options'); flightOptionsDiv.innerHTML = ''; flightOptions.forEach(flight => { flightOptionsDiv.innerHTML += `
`; }); } function displayBaggageOptions() { const baggageOptionsDiv = document.getElementById('baggage-options'); baggageOptionsDiv.innerHTML = ''; baggageOptions.forEach(baggage => { baggageOptionsDiv.innerHTML += `
`; }); } // Initialize flight options and baggage options for the first time displayFlightOptions(); displayBaggageOptions();

Learner Support

Blog