(Mar 1, 2024 10:24 AM)webdev77 Wrote:  What have you tried so far?

(Mar 1, 2024 03:16 PM)Hexicidal Wrote:  Where do you think you would start with this?

How would you structure it, would there be two boxes, three, four?

I see a div that holds that body, a div that holds the chat container, and a box under the chat container.

There are many ways to structure a project like this for an HTML wireframe. This is not a full layout of the structure, but this will get you closer to your homework.

Code

<div id="chat-container">
  <div id="header">
    <h1>Teen Chat</h1>
  </div>

  <div id="main-section">
    <div id="chat-area">
      <div id="messages">
      </div>
      <div id="message-input">
        <input type="text" id="message" placeholder="Type your message here...">
        <button id="send">Send</button>
      </div>
    </div>

    <div id="sidebar">
      <div id="users">
        <h2>Users</h2>
        <div id="user-list">
        </div>
      </div>
      <div id="rooms">
        <h2>Rooms</h2>
        <p>Lobby</p>
      </div>
    </div>
  </div>

  <div id="footer">
    <button id="settings">Settings</button>
    <button id="logout">Logout</button>
  </div>

</div>

(Mar 1, 2024 03:43 PM)Hexicidal Wrote:  Ohhhh. How are you saving the data?

(Mar 1, 2024 03:49 PM)Snoctriz Wrote:  Right now it doesn't save data. I need to configure a database in the backend in order to have it save.

---

I'm thinking of using MongoDB.