CCCPaste

01. Christmas Gifts Delivery

function solution() {
 let cards=Array.from(document.getElementsByClassName("card"));
 console.log(cards)
 let addCard=cards[0];
 let listCard=cards[1];
 let sentCard=cards[2];
 let disCard=cards[3];
 let giftsListUl=listCard.querySelector('ul');
 let sentListUl=sentCard.querySelector('ul');
 let discListUl=disCard.querySelector('ul');

 let addInput=addCard.querySelector('input');
 console.log(addInput);
 let addBtn=addCard.querySelector('button');
 console.log(addBtn);
 addBtn.addEventListener("click", addGift);

 function addGift(e){
     let parentDiv=e.target.parentNode;
     console.log(parentDiv);
     let inputField=parentDiv.querySelector('input')
     console.log(inputField);
     let giftName=inputField.value;
     if (giftName.length>0){
         let giftLi=document.createElement("li");
         giftLi.className="gift";
        giftLi.textContent=giftName;

        let sendBtn=document.createElement("button");
        sendBtn.id="sendButton";
        sendBtn.textContent="Send";
        sendBtn.addEventListener("click",sendGift);
        giftLi.appendChild(sendBtn);

        let discBtn=document.createElement("button");
        discBtn.id="discardButton";
        discBtn.textContent="Discard";
        discBtn.addEventListener("click",discardGift)
        giftLi.appendChild(discBtn);

        giftsListUl.appendChild(giftLi);
        sortUl(giftsListUl);
        inputField.value="";
     }
 }

 function sendGift(e){
    console.log(e.target.parentNode);
    let gn=e.target.parentNode.childNodes[0].textContent;
    let sentLi=document.createElement('li');
    sentLi.className="gift";
    sentLi.textContent=gn;
    sentListUl.appendChild(sentLi);
    giftsListUl.removeChild(e.target.parentNode);
 }
 function discardGift(e){
    console.log(e.target.parentNode);
    let gn=e.target.parentNode.childNodes[0].textContent;
    let discLi=document.createElement("li");
    discLi.className="gift";
    discLi.textContent=gn;
    discListUl.appendChild(discLi);
    giftsListUl.removeChild(e.target.parentNode);
    
 }


 function sortUl(ul){
     let lis=Array.from(ul.querySelectorAll('li'));
     let sortedLis=lis.sort((a,b)=>a.textContent.localeCompare(b.textContent));
     ul.innerHtml="";
     sortedLis.forEach(l=>ul.appendChild(l));
 }
}