Code Alone 11: Chat App Part 2

Overview

This project uses an API endpoint. This endpoint is running on a free tier, which means it may occasionally go to sleep until it receives a request.
The first request can take up to a minute to complete, but all subsequent requests will be much faster.

In this assignment, you will write the JavaScript for a chat interface. You are not allowed to modify the HTML or CSS files. Everything must be done with JavaScript:

• Creating channels dynamically using the response from an API.
• Populating messages dynamically using the response from an API.

Ten points of extra credit will be awarded for implementing message sending (updating both the screen and the backend). You will need to make a POST request to the chat endpoint, which you must learn how to do on your own. Hence the Extra Credit.

---

Requirements

Replace "INSERT CODE HERE" in the script.js file with your code.

1. Get the Channels

   • This code should replace "INSERT CODE HERE" inside the init function.
   • Use this API endpoint:
     https://slackclonebackendapi.onrender.com/channels
   • Loop through the returned array and:
     • Create a new button element.
     • Add the channel class.
     • Set the data-channel attribute to the id of each object.
     • Set the innerText to the name of the object.
     • Append the button to the HTML element with the class channel-list.

2. Message Display

   • This code should replace "INSERT CODE HERE" inside the populateMessages function.
   • The chat parameter will receive the chat ID for the current channel.
   • Use this API endpoint to get the messages using the channel ID:
     https://slackclonebackendapi.onrender.com/messages?channelId=${chat}
   • Loop through each message returned and display:
     • The sender’s name.
     • The message text.
   • To get the sender’s name, use the senderId attribute in the message object.
     Use this API endpoint:
     https://slackclonebackendapi.onrender.com/users?id=${message.senderId}
   • Make sure you pay attention to the type of JSON object returned (it is an array of matching results).
   • Append each message to the channel.

3. Sending Messages (Extra Credit)

   • You will have to write this function yourself and add an event listener.
   • Users can type a message and click a send button.
   • The new message should:
     • Be added to the correct channel.
     • Display immediately in the chat window.
     • Be styled as a user message (pick a random userId and use that).
     • Clear the input box.
   • Make sure you are sending a POST request to this API endpoint:
     https://slackclonebackendapi.onrender.com/messages
   • To see an example message, look at the data returned from:
     https://slackclonebackendapi.onrender.com/messages
     You will need to supply all the required data except for the id, which is automatically generated by the backend when you make your POST request.
   • Bonus: If this works, your classmates will see your message since this is an active API shared across all projects including projects in IS 5750 (React).
   • Please keep all messages professional.