SHOW:
|
|
- or go back to the newest paste.
| 1 | function solve() {
| |
| 2 | let buttonElement = document.querySelector('#container button');
| |
| 3 | let inputElements = Array.from(document.querySelectorAll('#container input'));
| |
| 4 | let [nameElement, ageElement, kindElement, ownerElement] = inputElements; | |
| 5 | let adoptionUlElement = document.querySelector('#adoption ul');
| |
| 6 | let adoptedUlElement = document.querySelector('#adopted ul');
| |
| 7 | ||
| 8 | buttonElement.addEventListener('click', e => {
| |
| 9 | e.preventDefault(); | |
| 10 | ||
| 11 | if (!inputElements.every(x => x.value)) {
| |
| 12 | return; | |
| 13 | } | |
| 14 | ||
| 15 | if (!Number(ageElement.value)) { // What if cat is 0 year old?
| |
| 16 | return; | |
| 17 | } | |
| 18 | ||
| 19 | // Create list item | |
| 20 | let liElement = document.createElement('li');
| |
| 21 | let pElement = document.createElement('p');
| |
| 22 | let spanElement = document.createElement('span');
| |
| 23 | let petButtonElement = document.createElement('button');
| |
| 24 | ||
| 25 | pElement.innerHTML = `<strong>${nameElement.value}</strong> is a <strong>${ageElement.value}</strong> year old <strong>${kindElement.value}</strong>`;
| |
| 26 | spanElement.textContent = `Owner: ${ownerElement.value}`;
| |
| 27 | petButtonElement.textContent = `Contact with owner`; | |
| 28 | ||
| 29 | liElement.appendChild(pElement); | |
| 30 | liElement.appendChild(spanElement); | |
| 31 | liElement.appendChild(petButtonElement); | |
| 32 | ||
| 33 | // Add list item to #adoption | |
| 34 | adoptionUlElement.appendChild(liElement); | |
| 35 | ||
| 36 | // clear all input fields | |
| 37 | nameElement.value = ''; | |
| 38 | ageElement.value = ''; | |
| 39 | kindElement.value = ''; | |
| 40 | ownerElement.value = ''; | |
| 41 | ||
| 42 | // Attach event handler | |
| 43 | petButtonElement.addEventListener('click', petButtonClick);
| |
| 44 | }); | |
| 45 | ||
| 46 | function petButtonClick(e) {
| |
| 47 | let parent = e.currentTarget.parentElement; | |
| 48 | ||
| 49 | e.currentTarget.remove(); | |
| 50 | ||
| 51 | let divElement = document.createElement('div');
| |
| 52 | let inputElement = document.createElement('input');
| |
| 53 | let takeItButtonElement = document.createElement('button');
| |
| 54 | ||
| 55 | inputElement.setAttribute('placeholder', 'Enter your names');
| |
| 56 | takeItButtonElement.textContent = 'Yes! I take it!'; | |
| 57 | ||
| 58 | divElement.appendChild(inputElement); | |
| 59 | divElement.appendChild(takeItButtonElement); | |
| 60 | ||
| 61 | parent.appendChild(divElement); | |
| 62 | ||
| 63 | takeItButtonElement.addEventListener('click', onTakeItButtonClick);
| |
| 64 | } | |
| 65 | ||
| 66 | function onTakeItButtonClick(e) {
| |
| 67 | let parentButtonElement = e.currentTarget.parentElement | |
| 68 | let liElement = parentButtonElement.parentElement; | |
| 69 | ||
| 70 | let newOwnerInputElement = liElement.querySelector('input');
| |
| 71 | let ownerNameSpanElement = liElement.querySelector('span');
| |
| 72 | ||
| 73 | let newOwnerName = newOwnerInputElement.value; | |
| 74 | ||
| 75 | if (!newOwnerName) {
| |
| 76 | return; | |
| 77 | } | |
| 78 | ||
| 79 | ownerNameSpanElement.textContent = `New Owner: ${newOwnerName}`;
| |
| 80 | ||
| 81 | adoptedUlElement.appendChild(liElement); | |
| 82 | ||
| 83 | parentButtonElement.remove(); | |
| 84 | ||
| 85 | let checkedButtonElement = document.createElement('button');
| |
| 86 | checkedButtonElement.textContent = 'Checked'; | |
| 87 | ||
| 88 | liElement.appendChild(checkedButtonElement); | |
| 89 | ||
| 90 | checkedButtonElement.addEventListener('click', e => {
| |
| 91 | // liElement.remove(); | |
| 92 | e.currentTarget.parentElement.remove(); | |
| 93 | }); | |
| 94 | } | |
| 95 | } | |
| 96 |