Project - 12

Project 12: Chat UI Mock

Build a fake chat interface where the user can send messages and receive simple automated replies.

Your challenge: Add messages to the chat window, style user and bot messages differently, and generate a random reply after a short delay.

✦ HTML + CSS + JS Editor

▶ Live Output

Add a message

Create a new <div>, give it the classes message and either user or bot, then add the text with textContent.

Send the user's message

When the form is submitted, read messageInput.value.trim(). If it is empty, stop with return.

Add the message to the chat and clear the input.

Create the automated reply

Use Math.random() to choose a random item from the replies array.

Use setTimeout() to make the reply appear after a short delay.

Try it: Send several messages and watch the conversation automatically scroll to the newest message.

Good JavaScript habit: Use one addMessage() function for both user and bot messages instead of repeating the same DOM code twice.

👀 Show Full Working Solution

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Chat UI Mock</title>

  <style>
    body {
      background: #000;
      color: #8A8A8A;
      font-family: 'Courier New', monospace;
      padding: 20px;
      margin: 0;
    }

    .chat-app {
      max-width: 600px;
      margin: 0 auto;
    }

    .chat-window {
      background: #111;
      height: 280px;
      overflow-y: auto;
      padding: 15px;
      border-radius: 8px;
      margin-bottom: 12px;
    }

    .message {
      margin: 8px 0;
      padding: 10px;
      border-radius: 6px;
      max-width: 70%;
      overflow-wrap: anywhere;
    }

    .user {
      background: #8A8A8A;
      color: #000;
      margin-left: auto;
    }

    .bot {
      background: #222;
      color: #fff;
      margin-right: auto;
    }

    form {
      display: flex;
      gap: 8px;
    }

    label {
      position: absolute;
      left: -9999px;
    }

    input {
      flex: 1;
      padding: 10px;
      background: #111;
      color: #fff;
      border: 1px solid #8A8A8A;
    }

    button {
      padding: 10px 16px;
      cursor: pointer;
    }

    input:focus-visible,
    button:focus-visible {
      outline: 3px solid #fff;
      outline-offset: 3px;
    }
  </style>
</head>

<body>

  <div class="chat-app">

    <h2>Chat UI Mock</h2>

    <div
      class="chat-window"
      id="chat"
      aria-live="polite"
    ></div>

    <form id="chatForm">
      <label for="messageInput">Message</label>

      <input
        type="text"
        id="messageInput"
        placeholder="Type a message..."
        autocomplete="off"
      >

      <button type="submit">Send</button>
    </form>

  </div>

  <script>
    const chat =
      document.getElementById("chat");

    const chatForm =
      document.getElementById("chatForm");

    const messageInput =
      document.getElementById("messageInput");

    const replies = [
      "Interesting!",
      "Tell me more.",
      "That makes sense.",
      "Thanks for sharing.",
      "What do you think about that?"
    ];

    function addMessage(text, type) {
      const message =
        document.createElement("div");

      message.classList.add(
        "message",
        type
      );

      message.textContent = text;

      chat.appendChild(message);

      chat.scrollTop =
        chat.scrollHeight;
    }

    chatForm.addEventListener(
      "submit",
      function(event) {
        event.preventDefault();

        const text =
          messageInput.value.trim();

        if (text === "") {
          return;
        }

        addMessage(text, "user");

        messageInput.value = "";
        messageInput.focus();

        setTimeout(function() {
          const randomIndex =
            Math.floor(
              Math.random() * replies.length
            );

          addMessage(
            replies[randomIndex],
            "bot"
          );
        }, 600);
      }
    );
  </script>

</body>
</html>