Advertisement
Guest User

Untitled

a guest
Feb 17th, 2022
167
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 4.16 KB | None | 0 0
  1. function solve() {
  2.  
  3. const inputElements = document.querySelectorAll('#container input');
  4. const addButton = document.querySelector('#container button');
  5. const petList = document.querySelector('#adoption ul');
  6. const adoptedList = document.querySelector('#adopted ul');
  7.  
  8. const input = {
  9. name: inputElements[0],
  10. age: inputElements[1],
  11. kind: inputElements[2],
  12. owner: inputElements[3],
  13. }
  14.  
  15. addButton.addEventListener('click', addPet)
  16.  
  17.  
  18. function addPet(e) {
  19. e.preventDefault();
  20. const name = input.name.value;
  21. const age = Number(input.age.value);
  22.  
  23. const kind = input.kind.value;
  24. const owner = input.owner.value;
  25.  
  26. if (!name || !age || age == '' || !kind || !owner) {
  27. return;
  28. }
  29.  
  30. const liElement = document.createElement('li');
  31. const pElement = document.createElement('p');
  32.  
  33. const strongNameElement = document.createElement('strong');
  34. strongNameElement.textContent = name;
  35. let innerNameText = document.createTextNode(' is a ');
  36. pElement.appendChild(strongNameElement);
  37. pElement.appendChild(innerNameText);
  38.  
  39. const strongAgeElement = document.createElement('strong');
  40. let innerAgeText = document.createTextNode(' year old ');
  41. strongAgeElement.textContent = age;
  42. pElement.appendChild(strongAgeElement);
  43. pElement.appendChild(innerAgeText);
  44.  
  45. const strongKindElement = document.createElement('strong');
  46. strongKindElement.textContent = kind;
  47. pElement.appendChild(strongKindElement);
  48.  
  49. liElement.appendChild(pElement);
  50.  
  51. const spanElement = document.createElement('span');
  52. spanElement.textContent = `Owner: ${owner}`;
  53.  
  54.  
  55. liElement.appendChild(spanElement);
  56.  
  57. buttonContact = document.createElement('button');
  58. buttonContact.textContent = 'Contact with owner';
  59. liElement.appendChild(buttonContact);
  60.  
  61. petList.appendChild(liElement);
  62.  
  63. input.name.value = '';
  64. input.age.value = '';
  65. input.kind.value = '';
  66. input.owner.value = '';
  67.  
  68. buttonContact.addEventListener('click', addContact);
  69.  
  70. function addContact(e) {
  71.  
  72. let currentLi = e.currentTarget.parentNode;
  73. currentLi.querySelector('button').remove();
  74.  
  75.  
  76. let divElement = document.createElement('div');
  77. let takeButton = document.createElement('button');
  78. takeButton.textContent = 'Yes! I take it!';
  79. let placeholderInputElement = document.createElement('input');
  80. placeholderInputElement.setAttribute = 'placeholder';
  81. placeholderInputElement.placeholder = 'Enter your names';
  82. divElement.appendChild(takeButton);
  83. divElement.appendChild(placeholderInputElement);
  84. currentLi.appendChild(divElement);
  85.  
  86. takeButton.addEventListener('click', takePet);
  87.  
  88. function takePet(e) {
  89.  
  90. let currentPetLiElement = e.currentTarget.parentNode.parentNode;
  91. let ownerName = currentPetLiElement.querySelector('input');
  92.  
  93. let checkOwner = ownerName.value;
  94.  
  95. if (!checkOwner) {
  96. return;
  97. }
  98.  
  99. let print = currentPetLiElement.querySelector('div');
  100.  
  101. currentPetLiElement.querySelector('div').remove();
  102. let newOwner = currentPetLiElement.querySelector('span');
  103. newOwner.textContent = `New Owner: ${checkOwner}`;
  104. let checkButton = document.createElement('button');
  105. checkButton.textContent = 'Checked';
  106.  
  107. currentPetLiElement.appendChild(checkButton);
  108.  
  109. adoptedList.appendChild(currentPetLiElement);
  110.  
  111. checkButton.addEventListener('click', (e) => {
  112.  
  113. let print2 = e.currentTarget.parentNode.parentNode;
  114. console.log(print2);
  115.  
  116. e.currentTarget.parentNode.parentNode.remove();
  117.  
  118. });
  119. }
  120. }
  121.  
  122. }
  123. }
  124.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement