View difference between Paste ID: fnknYCsx and CnDvQB06
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