Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- function solve() {
- const firstName = document.getElementById('first-name')
- const lastName = document.getElementById("last-name");
- const countInput = document.getElementById('people-count');
- const dateInput = document.getElementById("from-date");
- const daysInput = document.getElementById("days-count")
- const ticketPreview = document.querySelector('.ticket-info-list')
- const confirmTicket = document.querySelector('.confirm-ticket')
- let nextBtn = document.getElementById('next-btn')
- nextBtn.addEventListener('click', onNext)
- function onNext(e) {
- e.preventDefault();
- let firstnameValue = firstName.value
- let lastNameValue = lastName.value;;
- let countInputValue = countInput.value;
- let dateInputValue = dateInput.value;
- let daysInputValue = daysInput.value;
- if (!firstName.value || !lastName.value || !countInput.value || !dateInput.value || !daysInput.value) {
- return
- }
- let reviewTickets = elementCreate(firstnameValue, lastNameValue, countInputValue, dateInputValue, daysInputValue)
- ticketPreview.appendChild(reviewTickets);
- firstName.value = "";
- lastName.value = "";
- countInput.value = "";
- dateInput.value = "";
- daysInput.value = "";
- nextBtn.disabled = true
- }
- function elementCreate(firstnameValue, lastNameValue, countInputValue, dateInputValue, daysInputValue) {
- let ticketLi = document.createElement("li");
- ticketLi.classList.add('ticket');
- let articleEl = document.createElement('article')
- let h3Element = document.createElement('h3')
- h3Element.textContent = `Name: ${firstnameValue} ${lastNameValue}`;
- articleEl.appendChild(h3Element)
- let pDate = document.createElement('p')
- pDate.textContent = `From date: ${dateInputValue}`
- articleEl.appendChild(pDate);
- let pDays = document.createElement('p')
- pDays.textContent = `For ${daysInputValue} days`;
- articleEl.appendChild(pDays);
- let pPeople = document.createElement('p');
- pPeople.textContent = `For ${countInputValue} people`;
- articleEl.appendChild(pPeople)
- let editBtn = document.createElement('button')
- editBtn.classList.add('edit-btn')
- editBtn.textContent = "Edit"
- let contBtn = document.createElement('button');
- contBtn.classList.add('continue-btn')
- contBtn.textContent = "Continue";
- contBtn.addEventListener('click', onContinue);
- ticketLi.appendChild(articleEl)
- ticketLi.appendChild(editBtn);
- ticketLi.appendChild(contBtn);
- editBtn.addEventListener('click', (e) => {
- let liThis = e.target.parentElement;
- liThis.remove();
- firstName.value = firstnameValue;
- lastName.value = lastNameValue;
- countInput.value = countInputValue;
- dateInput.value = dateInputValue;
- daysInput.value = daysInputValue;
- nextBtn.disabled = false;
- });
- return ticketLi;
- }
- function onContinue(e) {
- let liElement = e.target.parentElement;
- let buttons = Array.from(liElement.querySelectorAll('button'));
- buttons.forEach(x => x.remove());
- confirmTicket.appendChild(liElement)
- let confirmBtn = document.createElement('button')
- confirmBtn.classList.add('confirm-btn')
- confirmBtn.textContent = "Confirm"
- confirmBtn.addEventListener('click', onConfirm)
- confirmTicket.appendChild(confirmBtn);
- let cancelBtn = document.createElement('button')
- cancelBtn.classList.add('cancel-btn')
- cancelBtn.textContent = "Cancel"
- cancelBtn.addEventListener('click', onCancel)
- confirmTicket.appendChild(cancelBtn)
- }
- function onCancel(e) {
- let li = e.target.parentElement
- li.remove();
- nextBtn.disabled = false
- };
- function onConfirm(e) {
- const body = document.getElementById('body')
- const h1Text = document.createElement('h1')
- h1Text.classList.add("thank-you")
- h1Text.textContent = "Thank you, have a nice day!"
- const backBth = document.createElement('button')
- backBth.classList.add('back-btn')
- backBth.textContent = "Back "
- document.getElementById('main').remove();
- body.appendChild(h1Text)
- body.appendChild(backBth)
- backBth.addEventListener('click', (e) => {
- location.reload();
- })
- }
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement