Description

In this stage, use JavaScript and add more CSS styles. After completing the stage, the app will support one user that can send messages to themselves.

Make the message container scrollable to properly handle multiple messages and implement a mechanism that automatically scrolls the message container when a new message is received.

Theory

To complete this stage, know how to create tags with JavaScript and insert them on a page. Here is the code snippet that shows you how to create a tag using JavaScript and add it to an already created container:

const container = document.getElementById("container")

// create new div tag
const tag = document.createElement("div")
// add text to the tag
tag.textContent = "some text"
// add class "test" to the div
tag.classList.add("test")
// insert created tag at the end of the existing container
container.appendChild(tag)

Here is a JavaScript tutorial if you want to learn more about this feature.

Furthermore, if the container is scrollable and was full before appending a new element to it, the new element will not be visible. To see it, you will need to scroll. We can implement auto-scrolling with JS. Here is a simple code snippet that shows how to scroll to an element with a "smooth" effect.

tag.scrollIntoView({"behavior": "smooth"}) 

You can find more details JavaScript tutorial on scrollIntoView.

Please don't hesitate to experiment with these features.

Objectives

• Remove the hardcoded messages that were added in the previous stage. Now, when a user inputs a message in the text field and presses the send button, a new tag that contains the input message with the message class should be created and appear in the tag with the messages ID. For example, initially, there are no messages and <div id="messages"></div> has no content, but after inputting a new message some text... in the text field and pressing the button the container should look something like this: <div id="messages"><div class="message">some text..</div></div> (as mentioned in the previous stage there can be some intermediate elements);
• A new message should be placed below the already received messages;
• If the text field was empty when a user pressed the button, the button should do nothing, and an element with the message class should not be created and inserted into the message container;
• After a user presses the send button, the input field should become empty;
• Make the element with the messages ID scrollable by setting the CSS property overflow-y to auto or scroll and implement a mechanism that automatically scrolls the message container when a new message is inserted into it. To better understand what to do at this step, implement all the previous steps, run the program, and input plenty of messages.

Optional:

• Add more CSS styles if you like. For example, check whether your app properly handles multi-line messages. Tests won't check this.

Examples

Example 1: the initial page could look something like this

Example 2: after inputting the first message and pressing the send button

Example 3: after inputting the second message and pressing the send button