settingsAccountsettings
Menusettings

Q: Phonebook In Firebase (task with AJAX and jQuery)

+3 votes

Use Firebase and jQuery to create a simple phonebook app. The user should be able to see all contacts, loaded from the server, create a new contact and delete any of the contacts. Use the lecture presentation for detailed instructions on this task.

HTML Skeleton:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Phonebook</title>
</head>
<body>
  <h1>Phonebook</h1>
  <ul id="phonebook"></ul>
  <button id="btnLoad">Load</button>
  <h2>Create Contact</h2>
  Person: <input type="text" id="person" />
  <br>
  Phone: <input type="text" id="phone" />
  <br>
  <button id="btnCreate">Create</button>
  <script src="phonebook.js"></script>
</body>
</html>

Example:

phonebook firebase task

asked in JavaScript category by user matthew44

1 Answer

+2 votes

Here is the whole HTML file + the function inside:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Phonebook</title>
    <script src="https://code.jquery.com/jquery-3.2.1.js"></script>
</head>
<body>
<h1>Phonebook</h1>
<ul id="phonebook"></ul>
<button id="btnLoad">Load</button>
<h2>Create Contact</h2>
Person: <input type="text" id="person"/>
<br><br>
Phone: <input type="text" id="phone"/>
<br><br>
<button id="btnCreate">Create</button>

<script>
    $(function () {
        $("#btnLoad").click(loadContacts);
        $("#btnCreate").click(createContact);

        const baseUrl = "https://phonebook-24fa50.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];
                if (contact.person) {
                    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 createContact() {
            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>

Only the JavaScript function script solution:

$(function () {
    $("#btnLoad").click(loadContacts);
    $("#btnCreate").click(createContact);

    const baseUrl = "https://phonebook-24fa50.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];
            if (contact.person) {
                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 createContact() {
        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);
    }
});

For line #15 see: MORE HERE

answered by user mitko
...