Write a JS program that records and displays messages. The user can post a message, supplying a name and content and retrieve all currently recorded messages. Use the following HTML to test your code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Messenger</title>
<style>
label { display: inline-block; width: 5em; }
#author, #content { width: 30em; }
</style>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
<div id="main">
<textarea id="messages" cols="80" rows="12" disabled="true"></textarea>
<div id="controls">
<label for="author">Name: </label><input id="author" type="text"><br>
<label for="content">Message: </label><input id="content" type="text">
<input id="submit" type="button" value="Send">
<input id="refresh" type="button" value="Refresh">
</div>
</div>
<script src="solution.js"></script>
<script>
attachEvents();
</script>
</body>
</html>
You will need to create the database yourself – use Firebase and set the access rules to be public, so that anyone can post a message and read what’s been posted. Since Firebase objects are by default sorted alphabetically, you’ll need to keep a timestamp property so they can be ordered by most recently posted instead. Use the following message structure:
{
author: authorName,
content: msgText,
timestamp: time
}
The key associated with each message object is not important – when making a POST request with the message object as parameter, Firebase will automatically assign a random key. To get started, you can create a “messenger” entry in your Firebase and import the following JSON object:
{
"-KWi2_-QHxL1yov93j5i" : {
"author" : "Pesho",
"content" : "hi guys",
"timestamp" : 1479315195400
},
"-KWi2aENk0utP8BLnhi6" : {
"author" : "Gosho",
"content" : "whats up",
"timestamp" : 1479315200447
},
"-KWi3eFIUZbh8Z3OjZEB" : {
"author" : "Pesho",
"content" : "not much, how about you?",
"timestamp" : 1479315479039
},
"-KWiX5ixY39AqdD2hJzV" : {
"author" : "LJ",
"content" : "LEEEEROOOY JEEEEENKIIINS",
"timestamp" : 1479323197569
}
}
Examples:
>> HERE YOU CAN VIEW AND TEST THE PROJECT ONLINE << (on GitHub io)
To get a useable timestamp, you can use Date.now() – this will return the number of milliseconds since 1st of January 1970. The exact value is irrelevant, what’s important is it will be greater for messages that are posted later. We can then sort them by this value.
To create a new entry in Firebase, type its name in the address box and click Go:
You can then import content with the button in the upper right corner:
Put the sample data inside a file with extension .json and select it from the popup:
Here is the HTML file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Messenger</title>
<style>
label { display: inline-block; width: 5em; }
#author, #content { width: 30em; }
</style>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script src="messenger.js"></script>
</head>
<body>
<div id="main">
<textarea id="messages" cols="80" rows="12" disabled="true"></textarea>
<div id="controls">
<label for="author">Name: </label><input id="author" type="text"><br>
<label for="content">Message: </label><input id="content" type="text">
<input id="submit" type="button" value="Send">
<input id="refresh" type="button" value="Refresh">
</div>
</div>
<script>
attachEvents();
</script>
</body>
</html>
and the JavaScript file (messenger.js):
function attachEvents() {
$("#submit").click(attachSend);
$("#refresh").click(attachRefresh);
function attachSend() {
let messageJson = {
"author": $("#author").val(),
"content": $("#content").val(),
"timestamp": Date.now()
};
let sendMessageRequest = {
url: "https://messenger-e76f7.firebaseio.com/messenger.json",
method: "POST",
data: JSON.stringify(messageJson),
success: attachRefresh
};
$.ajax(sendMessageRequest);
}
function attachRefresh() {
$.get("https://messenger-e76f7.firebaseio.com/messenger.json")
.then(displayMessages);
}
function displayMessages(messages) {
let output = $("#messages");
output.empty();
let messagesStr = "";
for (let key in messages) {
messagesStr += `${messages[key]["author"]}: ${messages[key]["content"]}\n`
}
output.text(messagesStr);
}
}
