Description

In this stage, every user of the app will be prompted to input a username after they open a page. Only after a user inputs a username, they will be able to chat. You'll also improve the structure of messages. Starting from this stage, every sent message should contain the sender's username and the date of a message. This helps to distinguish the author of the message and a step to implementing a private chat.

Moreover, when a user joins the chat, they don't receive any messages that were sent before they logged. You'll implement a mechanism that sends messages to a user after they join the chat.

Theory

Here is a link to the Open Genus tutorial that shows how to use the JS fetch method to get data from an endpoint. The method fetch can also be used to send POST requests. It can help you with stage and the following stages.

Objectives

• By default, the elements implemented in the previous stage (the send message button, the input message field, the message container) should not be visible after opening the page. Instead, when a user opens the page, they should see one input field with the ID input-username and the send button with the send-username-btn ID. After a user inputs a username and presses the send button, the input field and the button should become hidden, and the user should see the page as in the previous stage. See examples for more details;
• Change the structure of messages. Tag with the messages ID should now store elements with the message-container class. Every message-container should contain an element with the sender class, an element with the date class, and an element with the message class. Date can have any format, but should have a length not less than 5;
• After a new user joins the chat, they should receive all public messages that were sent before they joined.

Optional:

• Additionally, you can add some input validation and allow only unique usernames. Tests will not check whether a username is unique or not.

Examples

Example 1: after user A opens the chat page

Example 2: after user A inputs the username "A user" and presses the send button

Example 3: after user A sends a message

Example 4: user B inputs the username "B user" and presses the send button

Example 5: after user B sends a message

User A:

User B (same):