[javascript] JS Advanced Final Exam - 27 June 2021, 01. Travel Agency

Viewer

copydownloadembedprintName: JS Advanced Final Exam - 27 June 2021, 01. Travel Agency
  1. function solution() {
  2.     //Select elements
  3.     let inputData = document.querySelectorAll('#form div input');
  4.     const infoPreview = document.querySelector('#infoPreview');
  5.     const sumbimtBtn = document.querySelector('#submitBTN');
  6.     const editBtn = document.querySelector('#editBTN');
  7.     const contBtn = document.querySelector('#continueBTN');
  8.  
  9.     sumbimtBtn.addEventListener('click', submitElements)
  10.     //Submit input values
  11.     function submitElements(e) {
  12.         e.preventDefault();
  13.  
  14.         let name = inputData[0].value.trim();
  15.         let email = inputData[1].value.trim();
  16.         //let mobile = inputData[2].value;
  17.         //let address = inputData[3].value;
  18.         //let code = inputData[4].value;
  19.  
  20.         //Validate input 
  21.         if (name == '' || email == '') {
  22.             return
  23.         }
  24.         //Create li element and append to infoPreview
  25.         inputData.forEach(element => {
  26.             let liElements = document.createElement('li');
  27.             liElements.textContent = element.value;
  28.             infoPreview.appendChild(liElements);
  29.         });
  30.         //Set button as required
  31.         sumbimtBtn.disabled = true;
  32.         editBtn.disabled = false;
  33.         contBtn.disabled = false;
  34.         //Clear input
  35.         inputData.forEach(input => {
  36.             input.value = '';
  37.         });
  38.  
  39.         editBtn.addEventListener('click', editInput);
  40.         contBtn.addEventListener('click', cont);
  41.         
  42.     }
  43.  
  44.     //Edit input data function
  45.     function editInput(e) {
  46.         let editData = [];
  47.         const toEdit = document.querySelectorAll('#infoPreview li');
  48.         toEdit.forEach(el => {
  49.             editData.push(el.innerText);
  50.         });
  51.         //return the values to input fields
  52.         inputData[0].value = editData[0];
  53.         inputData[1].value = editData[1];
  54.         inputData[2].value = editData[2];
  55.         inputData[3].value = editData[3];
  56.         inputData[4].value = editData[4];
  57.         //remove new li elements from infoPreview
  58.         toEdit.forEach(el => {
  59.             el.remove();
  60.         });
  61.         //set buttons as required
  62.         sumbimtBtn.disabled = false;
  63.         editBtn.disabled = true;
  64.         contBtn.disabled = true;
  65.  
  66.     }
  67.  
  68.     //Confirm reservation funtion
  69.     function cont(e) {
  70.         const divBlock = document.querySelector('#block');
  71.         divBlock.innerHTML = '';
  72.         const reservation = document.createElement('h3');
  73.         reservation.textContent = 'Thank you for your reservation!';
  74.         divBlock.appendChild(reservation);
  75.     }
  76. }

Editor

You can edit this paste and save as new:


File Description
  • JS Advanced Final Exam - 27 June 2021, 01. Travel Agency
  • Paste Code
  • 21 Oct-2021
  • 2.53 Kb
You can Share it: