function attachEvents() {
    let div = document.querySelector('#catches').children[0];
    let url = `https://fisher-game.firebaseio.com/catches.json`;

    const buttons = {
        add: document.querySelector('button.add'),
        load: document.querySelector('button.load')
    };

    buttons.add.addEventListener('click', async function () {
        let angler = document.getElementsByClassName('angler')[1].value;
        let bait = document.getElementsByClassName('bait')[1].value;
        let captureTime = document.getElementsByClassName('captureTime')[1].value;
        let location = document.getElementsByClassName('location')[1].value;
        let species = document.getElementsByClassName('species')[1].value;
        let weight = document.getElementsByClassName('weight')[1].value;

        let object = {angler, bait, captureTime, location, species, weight};

        await fetch(url, {
            method: 'POST',
            body: JSON.stringify(object)
        })
            .then(response => response.json());

        document.getElementsByClassName('angler')[1].value = '';
        document.getElementsByClassName('bait')[1].value = '';
        document.getElementsByClassName('captureTime')[1].value = '';
        document.getElementsByClassName('location')[1].value = '';
        document.getElementsByClassName('species')[1].value = '';
        document.getElementsByClassName('weight')[1].value = '';
    });

    buttons.load.addEventListener('click', async function () {

        document.querySelector('#catches').innerHTML = '';
        let catches = await fetch(url)
            .then(response => response.json());

        for (let [key, value] of Object.entries(catches)) {

            let clone = div.cloneNode(true);

            clone.setAttribute('data-id', key);

            clone.querySelector('input.angler').value = value.angler;
            //clone.querySelector('input.angler').setAttribute('value',value.angler);

            clone.querySelector('input.weight').value = value.weight;
            //clone.querySelector('input.weight').setAttribute('value',value.weight);

            clone.querySelector('input.species').value = value.species;
            // clone.querySelector('input.species').setAttribute('value',value.species);


            clone.querySelector('input.location').value = value.location;
            //clone.querySelector('input.location').setAttribute('value',value.location);

            clone.querySelector('input.bait').value = value.bait;
            //clone.querySelector('input.bait').setAttribute('value',value.bait);

            clone.querySelector('input.captureTime').value = value.captureTime;
            //clone.querySelector('input.captureTime').setAttribute('value',value.captureTime);

            document.querySelector('#catches').appendChild(clone);
        }
    })
}

attachEvents();