Welcome to Chatty! This is a real-time web-based chat application that you can use to talk to all of your friends.
- Clone the hola-chatty project from
https://github.com/johnheroy/hola-chatty.gitinto a new Cloud9 workspace - Open your new workspace
- Double-click on
index.html - Click Preview -> Live Preview File at the top of the window
- Click the button in right pane next to "Browser" that says "pop out in new window"
- Once you have your
index.htmlrunning in a new window, right click on the page and click "inspect element"
Your first task is to take Firebase messages from the message store and display them in chatty's UI.
You can already send new messages to Firebase and see new messages from everyone
else in the console, but it will be more convenient for most users to see
messages in the provided <textarea>.
You are going to be editing index.html, dont' worry about changes anywhere else
- Get the
<textarea>in JavaScript usingdocument.getElementById - Add some "static" text to the text area using
.value - Update the
<textarea>with every new message that comes in with the username and message added together (concatenated) as a single string - Add all the messages to the
<textarea>by separating with a newline character'\n'
- Change the color of your messages so you know which ones you sent versus your friends (see styles.css)
- Add message timestamps so you can see when messages have been sent (bonus points for something more descriptive than purely a date and time but "10 minutes ago" or "1 day ago")
- HTML
textarea - Firebase reference
- JavaScript language concepts
- Web development (HTML, JS, CSS)