Advertisement
Guest User

Untitled

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