function attachEvents() {

    let authorInput = document.getElementById("author");
    let contentInput = document.getElementById("content");
    let submitBtn = document.getElementById("submit");
    let refreshBtn = document.getElementById("refresh");
    let messagesArea = document.getElementById("messages");
    getAllMessages();

    refreshBtn.addEventListener("click", getAllMessages);
    submitBtn.addEventListener("click", submitMessage);

    function getAllMessages() {
        let requestOptions = {
            method: 'GET',
            redirect: 'follow'
        };

        fetch("http://localhost:3030/jsonstore/messenger", requestOptions)
            .then(response => response.json())
            .then(result => displayMessages(result))
            .catch(error => console.log('error', error));
    }

    function displayMessages(r) {
        messagesArea.innerHTML = "";
        let messagesArr = Object.values(r);
        messagesArr.forEach(m => {
            messagesArea.textContent += `${m.author}: ${m.content}\n`
        });
        contentInput.value = "";
        authorInput.value = "";

    }

    function submitMessage() {
        let authorV = authorInput.value;
        let contentV = contentInput.value;

        let myHeaders = new Headers();
        myHeaders.append("Content-Type", "application/json");

        var raw = JSON.stringify({
            "author": authorV,
            "content": contentV
        });

        var requestOptions = {
            method: 'POST',
            headers: myHeaders,
            body: raw,
            redirect: 'follow'
        };

        fetch("http://localhost:3030/jsonstore/messenger", requestOptions)
            .then(response => response.json())
            .then(result => getAllMessages())         
            .catch(error => console.log('error', error));
    }


}

attachEvents();