Advertisement
divanov94

Untitled

Oct 16th, 2020
95
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. function solve() {
  2.     let form=document.getElementById('container');
  3.     let petList=document.querySelector('#adoption>ul');
  4.     let adoptedList=document.querySelector('#adopted>ul');
  5.  
  6.     let [name,age,kind,owner,addBtn]=Array.from(form.children);
  7.     addBtn.addEventListener('click',addPet);
  8.  
  9.     function addPet(e){
  10.         e.preventDefault();
  11.         if(!(name.value && Number(age.value) && kind.value && owner.value)){
  12.             return;
  13.         }
  14.         let li=document.createElement('li');
  15.         let p=document.createElement('p');
  16.         p.innerHTML=`<strong>${name.value}</strong> is a <strong>${age.value}</strong> year old <strong>${kind.value}</strong>`
  17.         let sOwner=document.createElement('span');
  18.         sOwner.textContent=`Owner: ${owner.value}`;
  19.         let contactBtn=document.createElement('button');
  20.         contactBtn.textContent='Contact with owner';
  21.         li.appendChild(p);
  22.         li.appendChild(sOwner);
  23.         li.appendChild(contactBtn);
  24.         petList.appendChild(li);
  25.  
  26.         contactBtn.addEventListener('click',makeContact);
  27.     }
  28.     function makeContact(e){
  29.         let parent=e.target.parentElement;
  30.         e.target.remove();
  31.  
  32.         let takeBtn=el('button');
  33.         takeBtn.textContent='Yes! I take it!';
  34.  
  35.         let div=el('div');
  36.         let inputEl=el('input','',{ placeholder: 'Enter your names'});
  37.         div.appendChild(inputEl);
  38.         div.appendChild(takeBtn);
  39.         parent.appendChild(div);
  40.  
  41.         takeBtn.addEventListener('click',(e)=>{
  42.             if(!inputEl.value){
  43.                 return;
  44.             }
  45.             e.target.textContent='Checked';
  46.             adoptedList.appendChild(e.target.parentElement.parentElement);
  47.  
  48.             let span=e.target.parentElement.parentElement.querySelector('span');
  49.             span.textContent=`New Owner: ${inputEl.value}`;
  50.  
  51.             let checkBtn=el('button','Checked');
  52.             e.target.parentElement.parentElement.appendChild(checkBtn);
  53.             e.target.parentElement.remove();
  54.  
  55.             checkBtn.addEventListener('click',(ev)=>{
  56.                 ev.target.parentElement.remove();
  57.             });
  58.         });
  59.  
  60.     }
  61.     function el(type,content,attributes){
  62.         let result=document.createElement(type);
  63.         if(content){
  64.             result.textContent=content;
  65.         }
  66.         if(attributes){
  67.             Object.assign(result,attributes);
  68.         }
  69.         return result;
  70.  
  71.     }
  72.  
  73. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement