Advertisement
pacho_the_python

Untitled

Mar 20th, 2023
497
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. window.addEventListener("load", solve);
  2.  
  3. function solve() {
  4.     const firstnameElement = document.getElementById('first-name')
  5.     const lastnameElement = document.getElementById('last-name')
  6.     const ageElement = document.getElementById('age')
  7.     const genderElement = document.getElementById('genderSelect')
  8.     const taskElement = document.getElementById('task')
  9.     const submitBtn = document.getElementById('form-btn')
  10.     const progressStatusElement = document.getElementById('in-progress')
  11.     const progressCountElement = document.getElementById('progress-count')
  12.     const finishedUlElement = document.getElementById('finished')
  13.     const clearBtn = document.getElementById('clear-btn')
  14.  
  15.     let first = ''
  16.     let last = ''
  17.     let age = ''
  18.     let gender = ''
  19.     let task = ''
  20.     let counter = 0
  21.  
  22.     function createArticle(firstname, lastname, chefAge, chefGender, taskArea) {
  23.         let articleElement = document.createElement('article')
  24.         let fullName = document.createElement('h4')
  25.         let ageGenderElementCreate = document.createElement('p')
  26.         let taskAreaElementCreate = document.createElement('p')
  27.  
  28.         fullName.textContent = `${firstname} ${lastname}`
  29.         articleElement.appendChild(fullName)
  30.  
  31.         ageGenderElementCreate.textContent = `${chefGender}, ${chefAge}`
  32.         articleElement.appendChild(ageGenderElementCreate)
  33.  
  34.         taskAreaElementCreate.textContent = `Dish description: ${taskArea}`
  35.         articleElement.appendChild(taskAreaElementCreate)
  36.  
  37.         return articleElement
  38.     }
  39.  
  40.     function createButton(className, context, someFunction) {
  41.         let currentBtn = document.createElement('button')
  42.         currentBtn.classList.add(className)
  43.         currentBtn.textContent = context
  44.         currentBtn.addEventListener("click", someFunction)
  45.         return currentBtn
  46.     }
  47.  
  48.     submitBtn.addEventListener("click", submitInfo)
  49.     clearBtn.addEventListener("click", clearAll)
  50.  
  51.     function submitInfo(e) {
  52.         e.preventDefault()
  53.  
  54.         first = firstnameElement.value
  55.         last = lastnameElement.value
  56.         age = ageElement.value
  57.         gender = genderElement.value
  58.         task = taskElement.value
  59.  
  60.         if (first === '' ||
  61.             last === '' ||
  62.             age === '' ||
  63.             gender === '' ||
  64.             task === '') {
  65.             return
  66.         }
  67.  
  68.         let articleElement = createArticle(first, last, age, gender, task)
  69.  
  70.         let liElement = document.createElement('li')
  71.         liElement.classList.add('each-line')
  72.  
  73.         let editBtn = createButton('edit-btn', 'Edit', editInfo)
  74.         let completeBtn = createButton('complete-btn', 'Mark as complete', completeDish)
  75.  
  76.         liElement.appendChild(articleElement)
  77.         liElement.appendChild(editBtn)
  78.         liElement.appendChild(completeBtn)
  79.         progressStatusElement.appendChild(liElement)
  80.  
  81.         counter += 1
  82.         progressCountElement.textContent = counter.toString()
  83.  
  84.         firstnameElement.value = ''
  85.         lastnameElement.value = ''
  86.         ageElement.value = ''
  87.         genderElement.value = ''
  88.         taskElement.value = ''
  89.     }
  90.  
  91.     function editInfo (eventEdit) {
  92.         const ulElement = eventEdit.target.parentElement.parentElement
  93.         const liElement = eventEdit.target.parentElement
  94.         const articleElement = Array.from(liElement.children)[0]
  95.         let elements = Array.from(articleElement.children)
  96.  
  97.         let h4 = elements[0]
  98.         firstnameElement.value = h4.textContent.split(' ')[0]
  99.         lastnameElement.value = h4.textContent.split(' ')[1]
  100.  
  101.  
  102.         let ageGenderData = elements[1]
  103.  
  104.         ageElement.value = ageGenderData.textContent.split(' ')[1]
  105.         genderElement.value = ageGenderData.textContent.split(' ')[0]
  106.  
  107.         taskElement.value = elements[2].textContent
  108.  
  109.         counter -= 1
  110.         progressCountElement.textContent = counter.toString()
  111.  
  112.         ulElement.removeChild(liElement)
  113.  
  114.     }
  115.     function completeDish (eventComplete) {
  116.         // let ulElement = eventComplete.target.parentElement.parentElement
  117.         let liElement = eventComplete.target.parentElement
  118.  
  119.         let removeEditBtn = liElement.children[1]
  120.         let removeCompleteBtn = liElement.children[2]
  121.         removeEditBtn.remove()
  122.         removeCompleteBtn.remove()
  123.         finishedUlElement.appendChild(liElement)
  124.  
  125.         counter -= 1
  126.         progressCountElement.textContent = counter.toString()
  127.     }
  128.  
  129.     function clearAll() {
  130.         let finishedDishes = Array.from(finishedUlElement.children)
  131.         for (const dish of finishedDishes) {
  132.             finishedUlElement.removeChild(dish)
  133.         }
  134.     }
  135. }
  136.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement