Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="text">
    <h1>Phonebook</h1>
    <button id="btnLoad">Load</button>
    <ul id="phonebook"></ul>
    <h1>Create</h1>
    Person: <input type="text" id="person"><br>
    Phone: <input type="text" id="phone"><br>
    <button id="btnCreate">Create</button>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script>

    $(function attachEvents() {
        $('#btnLoad').click(loadContacts);
        $('#btnCreate').click(createContacts);

        const baseURL = "https://phonebook-nakov.firebaseio.com/phonebook";

        function loadContacts() {
            $('#phonebook').empty();
            $.get(baseURL + ".json")
                    .then(displayContacts)
                    .catch(displayError)
        }

        function displayContacts(contacts) {
            let keys = Object.keys(contacts);
            for (let key of keys) {
                let contact = contacts[key];
                let li = $("<li>");
                li.text(contact.person + ' ' + contact.phone + " ");
                li.appendTo($('#phonebook'));
                li.append(
                        $("<a href='#'>[Delete]</a>")
                                .click(function () {
                                    deleteContact(key);
                                }))
            }

        }

        function displayError() {
            $('#phonebook').html("<li>Error</li>")
        }

        function deleteContact(key) {
            let delRequest = {
                method: "DELETE",
                url: baseURL + "/" + key + ".json"

            };
            $.ajax(delRequest)
                    .then(loadContacts)
                    .catch(displayError);
        }

        function createContacts() {
            let person = $('#person').val();
            let phone = $('#phone').val();
            let newContact = {person, phone};

            let createrequest = {
                method: "POST",
                url: baseURL + ".json",
                data: JSON.stringify(newContact)

            };
            $.ajax(createrequest)
                    .then(loadContacts)
                    .catch(displayError);
        }

    });


</script>

</body>
</html>