4
22/10/2024 4:34 pm
Topic starter
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:
1 Answer
3
22/10/2024 4:34 pm
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
