Advertisement
Guest User

Untitled

a guest
Jul 6th, 2020
344
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 3.74 KB | None | 0 0
  1. function solve() {
  2.  
  3. let dataField = document.querySelectorAll('input[type="text"]');
  4.  
  5. let nameField = dataField[0];
  6. let ageField = dataField[1];
  7. let kindField = dataField[2];
  8. let currentOwnerField = dataField[3];
  9.  
  10. let button = document.getElementsByTagName('button')[0];
  11. button.addEventListener('click', findNewFriend);
  12.  
  13. function findNewFriend(e) {
  14.  
  15. e.preventDefault();
  16.  
  17. if (nameField.value === '' || ageField.value === '' || kindField.value === '' || currentOwnerField.value === '') {
  18. return;
  19. }
  20. if (Number.isNaN(Number(ageField.value))) {
  21. return;
  22. }
  23.  
  24. let getSection = document.getElementById('adoption');
  25. let getList = getSection.getElementsByTagName('ul')[0];
  26.  
  27.  
  28. let createListItem = document.createElement('li');
  29. let createParagraph = document.createElement('p');
  30.  
  31. let createFirstStrong = document.createElement('strong');
  32. createFirstStrong.textContent = nameField.value;
  33. createParagraph.appendChild(createFirstStrong);
  34.  
  35. createParagraph.innerHTML += ' is a ';
  36.  
  37. let createSecondStrong = document.createElement('strong');
  38. createSecondStrong.textContent = ageField.value;
  39. createParagraph.appendChild(createSecondStrong);
  40.  
  41. createParagraph.innerHTML += ' year old ';
  42.  
  43.  
  44. let createThirdStrong = document.createElement('strong');
  45. createThirdStrong.textContent = kindField.value;
  46. createParagraph.appendChild(createThirdStrong);
  47.  
  48. createListItem.appendChild(createParagraph);
  49.  
  50. getList.appendChild(createListItem);
  51. createListItem.appendChild(createParagraph);
  52.  
  53. let createSpan = document.createElement('span');
  54. createSpan.textContent = `Owner: ${currentOwnerField.value}`
  55. createListItem.appendChild(createSpan);
  56.  
  57.  
  58. let createButton = document.createElement('button');
  59. createButton.textContent = 'Contact with owner';
  60. createListItem.appendChild(createButton);
  61.  
  62. createButton.addEventListener('click', changeButton);
  63.  
  64.  
  65. nameField.value = '';
  66. ageField.value = '';
  67. kindField.value = '';
  68. currentOwnerField.value = '';
  69. }
  70.  
  71. function changeButton(e) {
  72.  
  73. let box = e.target.parentNode;
  74.  
  75. let section = e.target.parentNode.parentNode;
  76.  
  77. let oldButton = box.getElementsByTagName('button')[0].remove();
  78.  
  79. let createDiv = document.createElement('div');
  80.  
  81. let createInput = document.createElement('input');
  82. createInput.setAttribute('placeholder', 'Enter your names');
  83.  
  84. let newButton = document.createElement('button');
  85. newButton.textContent = 'Yes! I take it!';
  86.  
  87. newButton.addEventListener('click', movePet);
  88.  
  89. createDiv.appendChild(createInput);
  90. createDiv.appendChild(newButton);
  91.  
  92. box.appendChild(createDiv);
  93.  
  94. }
  95.  
  96. function movePet(e) {
  97.  
  98. let getDiv = e.target.parentNode;
  99.  
  100. let box = e.target.parentNode.parentNode;
  101.  
  102. let inputField = getDiv.getElementsByTagName('input')[0];
  103.  
  104. if (inputField.value === '') {
  105. return;
  106. }
  107.  
  108. let getList = document.querySelector('#adopted ul');
  109.  
  110. let owner = box.getElementsByTagName('span')[0];
  111. owner.textContent = `New Owner: ${inputField.value}`;
  112.  
  113. let newBtn = document.createElement('button');
  114. newBtn.textContent = 'Checked';
  115. box.appendChild(newBtn);
  116.  
  117. newBtn.addEventListener('click', removePet);
  118.  
  119. e.target.parentNode.remove();
  120.  
  121. getList.appendChild(box);
  122.  
  123. }
  124.  
  125. function removePet(e) {
  126.  
  127. e.target.parentNode.remove();
  128.  
  129. }
  130.  
  131. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement