New Doodle chat!

[AlexRubio1]

Creating a Doodle Chat Room with HTML, CSS, and JavaScript

Welcome to the Doodle Chat Room! This guide explains the key components that make your chat room for sharing and discussing doodles work. Here’s how we bring together HTML, CSS, and JavaScript to create a fun and interactive chat experience.

---

1. HTML Structure

The HTML provides the framework for our Doodle Chat Room, with sections for the contact list, chat messages, a doodle image, and controls for message input.

Key Sections:

• Sidebar (#sidebar): This is where users see a list of chat participants (e.g., Alex, Prajna, Arshia, Mirabelle). Each contact has a preview of their latest message, and clicking on a contact loads their conversation.

• Chat Container (#chatContainer): The main area where conversations happen. It includes:

  • #doodleImageContainer: Displays a doodle image to discuss and admire.
  • #messages: Shows the conversation with the selected contact.
  • #inputContainer: Contains the input field and send button for typing and sending new messages.

• Fullscreen Button: Positioned in the corner, this button toggles the chat room to fullscreen for a better viewing experience.

---

2. CSS Styling

CSS is used to enhance the chat room visually and create a comfortable layout.

Main Styling Elements:

• Flexbox Layout: Organizes the sidebar and chat container side-by-side for a structured, responsive layout.
• Colors: Soft pastel colors give a friendly and welcoming feel.
• Button Styles: Hover effects and subtle animations on buttons make them interactive and inviting.

Important Classes and IDs:

• .chatBox: Styles individual chat boxes in the sidebar, giving each a distinctive look and feel.
• .message: Controls the appearance of each chat message, including background color and alignment.
• #fullscreenButton: Styles the fullscreen toggle button and adjusts it for responsive layouts.

---

3. JavaScript Interactivity

JavaScript powers the functionality of the Doodle Chat Room, handling everything from message display to image uploads.

Key JavaScript Functions:

• loadConversation(chatName): Loads the conversation for the selected contact by retrieving messages from a predefined list.
• addMessage(message): Adds new messages to the chat, updating the display to show each message in sequence.
• Image Upload: Allows users to upload and display a new doodle image.
• Fullscreen Toggle: Switches the chat room to fullscreen mode for better viewing.

Example Code Snippet:

function loadConversation(chatName) {
  messages.innerHTML = '';
  const chatMessages = conversations[chatName] || [];
  chatMessages.forEach((msg) => {
    addMessage(msg);
  });
}

function toggleFullscreen() {
  document.body.classList.toggle('fullscreen');
  fullscreenButton.innerHTML = document.body.classList.contains('fullscreen') ? 'X' : '⛶';
}