function attachEvents() {

    // HTML Elements and URL's

    let baseUrl = `http://localhost:3030/jsonstore/phonebook`;

    let loadBtnElement = document.getElementById('btnLoad');

    let createBtnElement = document.getElementById('btnCreate');

    let personInpElement = document.getElementById('person');

    let phoneInpElement = document.getElementById('phone');

    let ulElement = document.getElementById('phonebook');

    // Load button event

    loadBtnElement.addEventListener('click', (e) => {

        loadEntries(baseUrl);

    })

    // Create button event

    createBtnElement.addEventListener('click', (e) => {

        createEntries(baseUrl);

    })

    // Delete button event

    deleteButton.addEventListener('click', (e) => {

        // deleteEntry();

    })

    // Creating entries functionality

    async function createEntries(url) {

        if (personInpElement.value === '' || phoneInpElement.value === '') {

            alert('Invalid person or phone entry');

        } else {

            let entry = {

                person: personInpElement.value,

                phone: phoneInpElement.value

            }

            await request(url, 'POST', entry);

            personInpElement.value = '';

            phoneInpElement.value = '';

        }


    }

    // Load entries functionality

    async function loadEntries(url) {

        console.log(await request(url));

        let entriesArr = Object.values(await request(url));

        entriesArr.forEach(entry => {

            let liElement = document.createElement('li');

            let deleteButton = document.createElement('button');

            deleteButton.textContent = 'Delete';

            deleteButton.classList.add('button');

            liElement.append(entry, deleteButton);

            ulElement.appendChild(liElement);

        })

    }



    // Universal Request Function

    async function request(url, method, option) {

        if (method) {

            method = {

                method: method,

                headers: {

                    'Content-Type': 'application/json'

                },

                body: JSON.stringify(option)

            };

        };

        const response = await fetch(url, method);

        return response.json();

    }


}

attachEvents();