exam- 02.Adopt Me

window.addEventListener("load", solve);

function solve() {


    const adoptButton = document.getElementById("adopt-btn")

    adoptButton.addEventListener("click", (event) => {

        event.preventDefault();

        const animal = document.getElementById("type").value
        const age = document.getElementById("age").value
        const gender = document.getElementById("gender").value

        const adoptionInfo = document.getElementById("adoption-info")
        const list = document.createElement("li")
        const article = document.createElement('article')
        const div = document.createElement("div")

        const editButton = document.createElement('button')
        const doneButton = document.createElement('button')
        const animalElement = document.createElement("p")
        const ageElement = document.createElement("p")
        const genderElement = document.createElement("p")

        editButton.className = "edit-btn"
        editButton.textContent = "Edit"
        doneButton.className = "done-btn"
        doneButton.textContent = "Done"

        animalElement.textContent = `Pet:${animal}`
        ageElement.textContent = `Age:${age}`
        genderElement.textContent = `Gender:${gender}`
        div.classList.add("buttons");   // TODO САМО ДОБАВИХ КЛАСА ЗА БУТОНИТЕ

        adoptionInfo.appendChild(list)
        div.appendChild(editButton)
        div.appendChild(doneButton)
        list.appendChild(article)
        article.appendChild(animalElement)
        article.appendChild(genderElement)
        article.appendChild(ageElement)
        list.appendChild(div)

        document.getElementById('type').value = ""
        document.getElementById('age').value = ""
        document.getElementById('gender').value = ""

        adoptButton.disabled = true

        editButton.addEventListener("click", () => {

            adoptButton.disabled = false

            document.getElementById('type').value = animal
            document.getElementById('age').value = age
            document.getElementById('gender').value = gender

            animalElement.textContent = ''
            ageElement.textContent = ''
            genderElement.textContent = ''

            list.remove()
        })

        doneButton.addEventListener('click', () => {

            adoptButton.disabled = false

            list.remove()
            const adoptedList = document.getElementById('adopted-list')
            adoptedList.appendChild(list)
            div.remove()
            const clearButton = document.createElement('button')
            clearButton.className = 'clear-btn'
            clearButton.textContent = 'Clear'
            list.appendChild(clearButton)

            clearButton.addEventListener('click', () => {
                list.remove()
            })
        })

    })

}