01.Tech Troubleshoot Hub

function solution() {
  const emplyeeRef=document.getElementById("employee")
  const categoryRef=document.getElementById("category")
  const urgencyRef=document.getElementById("urgency")
  const teamRef=document.getElementById("team");
  const descriptionRef=document.getElementById("description")
  const addBtnRef=document.getElementById("add-btn")
  const previewListRef=document.querySelector(".preview-list")
  const pendingListRef=document.querySelector(".pending-list")
  const resolvedListRef=document.querySelector(".resolved-list")
  addBtnRef.setAttribute("type","button")

  addBtnRef.addEventListener("click",add)

  function add(){

    function create(element,attribute,attributeName,functionName,name){
      const result=document.createElement(element)
      result.textContent=name
      result.setAttribute(`${attribute}`,`${attributeName}`)
      if(element==="button"){
      result.textContent=name
      result.addEventListener("click",functionName)
      }
      return result
    }

    const inputArr=[
      emplyeeRef,
      categoryRef,
      urgencyRef,
      teamRef,
      descriptionRef
    ]
    if(!inputArr.some(el=>el.value==="")){
      const previewList=createPreview(emplyeeRef.value,
        categoryRef.value,
        urgencyRef.value,
        teamRef.value,
        descriptionRef.value)
        previewListRef.appendChild(previewList)
    }
    function createPreview(employee,category,urgency,team,description){
      const pEmployee=document.createElement("p")
      pEmployee.textContent=`From: ${employee}`

      const pCategory=document.createElement("p")
      pCategory.textContent=`Category: ${category}`

      const pUrgency=document.createElement("p")
      pUrgency.textContent=`Urgency: ${urgency}`

      const pTeam=document.createElement("p")
      pTeam.textContent=`Assigned to: ${team}`

      const pDescription=document.createElement("p")
      pDescription.textContent=`Description: ${description}`

      const article=document.createElement("article")
      article.appendChild(pEmployee)
      article.appendChild(pCategory)
      article.appendChild(pUrgency)
      article.appendChild(pTeam)
      article.appendChild(pDescription)

      const editBtn=create("button","class","edit-btn",edit,"Edit")
      const continueBtn=create("button","class","continue-btn",onContinue,"Continue")


      const li= create("li","class","problem-content")
      li.appendChild(article)
      li.appendChild(editBtn)
      li.appendChild(continueBtn)

        emplyeeRef.value=""
        categoryRef.value=""
        urgencyRef.value=""
        teamRef.value=""
        descriptionRef.value=""

        addBtnRef.disabled=true

        function edit(){
          //remove li
          li.remove()
          //copy Info
          emplyeeRef.value=employee
        categoryRef.value=category
        urgencyRef.value=urgency
        teamRef.value=team
        descriptionRef.value=description
          //enable btn
          addBtnRef.disabled=false

        }

        function onContinue(){
          //remove li
          li.remove()
          //copyInfo
          const pendingArticle=article
          //add resolve
          const resolveBtn=create("button","class","resolve-btn",resolve,"Resolved")
          //append info
          const pendingLi=create("li","class","problem-content")
          pendingLi.appendChild(pendingArticle)
          pendingLi.appendChild(resolveBtn)
          pendingListRef.appendChild(pendingLi)
          //enableBtn
          addBtnRef.disabled=false


          function resolve(){
            //remove list
            pendingLi.remove()
            //copy info
            const resolveArticle=pendingArticle
            //add clear
            const clearBtn=create("button","class","clear-btn",clear,"Clear")
            //append Info
            const resolvedLi=create("li","class","problem-content")
            resolvedLi.appendChild(resolveArticle)
            resolvedLi.appendChild(clearBtn)
            resolvedListRef.appendChild(resolvedLi)
            //enableBtn
            addBtnRef.disabled=false

            function clear(){
              resolvedLi.remove()
              addBtnRef.disabled=false

            }
          }
        }

      return li
    }
  }
}