chat app college project
chat app college project
Posted inCoding Software

HTML, CSS, JavaScript: A Simple Chat Application Project

Introduction

In this blog post, we’ll delve into the creation of a basic chat application using fundamental web technologies: HTML, CSS, and JavaScript. This project will serve as a foundation for understanding core concepts such as:

  • HTML: Structuring the user interface with elements like <input>, <textarea>, and <ul>.
  • CSS: Styling the chat window for a visually appealing and user-friendly experience.
  • JavaScript: Handling user input, sending messages, displaying received messages, and managing the application’s logic.

Project Setup:

  1. Create necessary files:
    • index.html: The main HTML file for the application.
    • style.css: The CSS file for styling the application’s appearance.
    • script.js: The JavaScript file containing the application’s logic.

HTML (index.html):

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Simple Chat Application</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Simple Chat</h1>
    <div id="chat-container">
        <ul id="message-list"></ul>
        <div>
            <input type="text" id="message-input" placeholder="Type your message here..." />
            <button id="send-button">Send</button>
        </div>
    </div>

    <script src="script.js"></script>
</body>
</html>

CSS (style.css):

CSS

body {
    font-family: sans-serif;
    text-align: center;
}

#chat-container {
    width: 400px;
    margin: 0 auto;
    border: 1px solid #ccc;
    padding: 20px;
    border-radius: 5px;
}

#message-list {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 300px;
    overflow-y: auto;
}

.message {
    margin-bottom: 10px;
}

.message .sender {
    font-weight: bold;
}

#message-input {
    width: 100%;
    padding: 10px;
    margin-top: 10px;
    border: 1px solid #ccc;
    border-radius: 3px;
}

#send-button {
    padding: 10px 20px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 3px;
    cursor: pointer;
}

JavaScript (script.js):

JavaScript

const messageList = document.getElementById('message-list');
const messageInput = document.getElementById('message-input');
const sendButton = document.getElementById('send-button');

// Function to display messages
function displayMessages(messages) {
  messageList.innerHTML = ''; 

  messages.forEach(message => {
    const li = document.createElement('li');
    li.classList.add('message');
    li.innerHTML = `
      <strong>${message.sender}:</strong> 
      <span>${message.message}</span>
    `;
    messageList.appendChild(li);
  });

  // Automatically scroll to the bottom of the message list
  messageList.scrollTop = messageList.scrollHeight; 
}

// Sample messages (replace with your own logic)
let messages = [
  { sender: 'User 1', message: 'Hello!' },
  { sender: 'User 2', message: 'Hi there!' }
];

// Initial message display
displayMessages(messages);

sendButton.addEventListener('click', () => {
  const messageText = messageInput.value.trim(); 

  if (messageText !== '') { 
    const newMessage = { sender: 'You', message: messageText };
    messages.push(newMessage); 
    displayMessages(messages); 
    messageInput.value = ''; 
  } else {
    alert('Please enter a message.'); 
  }
});

Explanation:

  1. HTML Structure:
    • The index.html file defines the basic structure of the chat application, including the message list, input field, and send button.
  2. CSS Styling:
    • The style.css file provides visual enhancements to the chat window, making it more appealing and user-friendly.
  3. JavaScript Logic:
    • displayMessages() function:
      • Clears the existing message list.
      • Iterates through the messages array.
      • Creates list items (<li>) for each message.
      • Adds the sender and message content to each list item.
      • Appends the list items to the messageList.
      • Crucially, it scrolls the message list to the bottom to ensure users always see the latest messages.
    • User Input Handling:
      • The sendButton click event listener checks if the input field is not empty.
      • If a message is entered, it creates a new message object and adds it to the messages array.
      • Calls displayMessages() to update the displayed messages.
      • Clears the input field.
      • If the input field is empty, an alert message is displayed to guide the user.

To Run the App:

  1. Save the index.html, style.css, and script.js files in the same directory.
  2. Open index.html in a web browser.

Next Steps:

  • Implement real-time communication: Utilize WebSockets or a similar technology to enable real-time message exchange between multiple users.
  • Add user authentication: Allow users to log in and associate messages with specific user accounts.
  • Enhance the user interface: Add features like message timestamps, user avatars, and more advanced styling.
  • Integrate with a backend: Connect the frontend to a backend server for data storage and more robust functionality.

This enhanced example provides a solid foundation for building a simple chat application. By exploring these next steps, you can further expand your knowledge and create more sophisticated and interactive chat experiences.

Input:

  • User Input: The text entered by the user in the message input field. This is the core input for the chat application.

Output:

  • Displayed Messages:
    • Each message is displayed as a list item (<li>) within the message-list element.
    • The message display includes:
      • Sender: Displayed in bold using the <strong> tag (e.g., “You: “).
      • Message Content: Displayed within a <span> element.

Example Display:

  • User 1: Hello!
  • User 2: Hi there!
  • You: How are you?

Tags: