const apiUrl = 'https://camp.sidis.click/webflow/meloncamp';
const xhr = new XMLHttpRequest();
xhr.open('GET', `${apiUrl}/v1/trip/all?place=болгарія`);
xhr.onload = function() {
if (xhr.status === 200) {
const tripContainer = document.getElementById('trips');
const tripData = JSON.parse(xhr.responseText);
tripData.forEach(trip => {
const tripElement = createTripElement(trip);
tripContainer.appendChild(tripElement);
});
} else {
console.error(xhr.statusText);
}
};
xhr.onerror = function() {
console.error(xhr.statusText);
};
xhr.send();
function createTripElement(trip) {
// create the trip element
const tripElement = document.createElement('div');
tripElement.classList.add('box');
if (trip.price == 0) {
tripElement.innerHTML = `
${trip.name}
${trip.shift} ${trip.dates}
`;
}
else{
tripElement.innerHTML = `
${trip.name}
${trip.shift} ${trip.dates}
${trip.price} грн.
${trip.old_price}
`;
}
// add an event listener to the book button
const bookButton = tripElement.querySelector('.book-btn');
if (bookButton !== null) {
bookButton.addEventListener('click', () => {
bookTrip(trip.id);
});
}
return tripElement;
}
function bookTrip(tripId) {
// function to handle booking the trip
fetch(`${apiUrl}/v1/trip/${tripId}`)
.then(response => response.json())
.then(response => {
displayForm(response)
})
}
// I changed the name of the function to be more descriptive of what it does
function displayForm(trip) {
// I changed the name of the variable to be more descriptive of what it is
var form = document.getElementsByClassName("form-1")[1];
// I changed the name of the variable to be more descriptive of what it is
var element = form.querySelector('.box-title-1');
element.style.transition = 'transform 0.5s ease, opacity 0.5s ease';
element.style.transform = 'translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg)';
element.style.transformStyle = 'preserve-3d';
element.style.opacity = '1';
element.style.display = 'block';
// I changed the name of the variable to be more descriptive of what it is
var element2 = form.querySelector('.shift1');
element2.style.transition = 'opacity 0.5s ease';
element2.style.opacity = '1';
element2.style.display = 'block';
// I changed the name of the variable to be more descriptive of what it is
var element = form.querySelector('.h2-box')
// I changed the name of the variable to be more descriptive of what it is
var element2 = form.querySelector('.image-box')
// I changed the name of the variable to be more descriptive of what it is
var form = document.getElementsByClassName("form-2")[0];
element.innerHTML = trip.name
element2.src = trip.image_url
element2.removeAttribute("srcset")
form.setAttribute("data-name", `${trip.shift} ${trip.name} | ${trip.dates} | (${trip.sku})`);
}