Real-Time Chat Application Using HTML , CSS & JavaScript With Source Code

Real-Time Chat Application Using HTML , CSS & JavaScript

Introduction:

The Real-Time Chat Application is a web-based platform that enables users to communicate with each other in real-time using text messages. It provides a seamless and interactive chatting experience, fostering instant communication and collaboration between users. The application utilizes HTML, CSS, and JavaScript to create an attractive and user-friendly interface.

Key Features:
  1. User Registration and Authentication: Users can create an account and securely log in to the chat application to access the chat features.

  2. Real-Time Messaging: The application allows users to send and receive messages instantly, providing a smooth and responsive chat experience.

  3. User-to-User Communication: Users can search for other registered users and initiate private conversations with them.

  4. Group Chat: Users have the ability to create or join chat rooms where multiple participants can communicate simultaneously.

  5. Emojis and File Sharing: The application supports the use of emojis in messages and allows users to share files such as images or documents.

  6. Message Notifications: Users receive notifications for new messages, ensuring that they stay updated with the ongoing conversations.

  7. User Presence Status: The application displays the online/offline status of users, indicating their availability for chat.

  8. Message History: The chat application maintains a message history, allowing users to scroll back and view previous conversations.

Source Code:

HTML:

				
					






  
  
  
  <title>Real-Time Chat Application</title>



  <header>
    <h1>Real-Time Chat Application</h1>
  </header>
  <div class="container">
    <div class="chat-window">
      <div class="chat-area">
        <div class="chat-messages">
          
        </div>
      </div>
      <div class="user-input">
        
        <button id="send-button">Send</button>
      </div>
    </div>
  </div>

  



				
			

CSS (style.css):

				
					/* @codewithcurious.com */

/* Global Styles */
body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
}

header {
  background-color: #007bff;
  color: #fff;
  padding: 20px;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

/* Chat Window Styles */
.chat-window {
  width: 500px;
  background-color: #f0f0f0;
  border-radius: 8px;
  overflow: hidden;
}

.chat-area {
  height: 400px;
  overflow-y: scroll;
  padding: 20px;
}

.chat-messages {
  display: flex;
  flex-direction: column;
}

.message {
  margin-bottom: 10px;
  background-color: #fff;
  padding: 10px;
  border-radius: 4px;
}

.user-input {
  display: flex;
  align-items: center;
  padding: 20px;
  background-color: #fff;
}

#message-input {
  flex-grow: 1;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

#send-button {
  padding: 8px 16px;
  margin-left: 10px;
  background-color: #007bff;
  border: none;
  border-radius: 4px;
  color: #fff;
  cursor: pointer;
}

#send-button:hover {
  background-color: #0056b3;
}
				
			

JavaScript (script.js):

				
					//@codewithcurious.com


// Function to handle sending a message
function sendMessage() {
  const messageInput = document.getElementById('message-input');
  const message = messageInput.value.trim();
  if (message !== '') {
    const chatMessages = document.querySelector('.chat-messages');
    const messageElement = document.createElement('div');
    messageElement.classList.add('message');
    messageElement.textContent = message;
    chatMessages.appendChild(messageElement);
    messageInput.value = '';
    chatMessages.scrollTop = chatMessages.scrollHeight;
  }
}

// Event listener
document.getElementById('send-button').addEventListener('click', sendMessage);
document.getElementById('message-input').addEventListener('keydown', (event) =&gt; {
  if (event.key === 'Enter') {
    event.preventDefault();
    sendMessage();
  }
});
				
			

Find Another Real-Time Chat App on Code Pen :

See the Pen Simple Chat UI by Sajad Hashemian (@sajadhsm) on CodePen.

See the Pen Chat App UI by Luke (@CodeLlama) on CodePen.

Output:

Find More Projects

Complain Management using Python with a Graphical User Interface (GUI) Introduction: The Complain Management using Python program designed to manage complaints effectively …

COVID 19 Hospital Management Using Python [Django Framework] Introduction: The COVID-19 Hospital Management is a Python-based application that tracks web applications for Hospitals. …

Drawing Ganesha Using Python Turtle Graphics[Drawing Ganapati Using Python] Introduction In this blog post, we will learn how to draw Lord Ganesha …

Contact Management System in Python with a Graphical User Interface (GUI) Introduction: The Contact Management System is a Python-based application designed to …

KBC Game using Python with Source Code Introduction : Welcome to this blog post on building a “Kaun Banega Crorepati” (KBC) game …

Basic Logging System in C++ With Source Code Introduction : It is one of the most important practices in software development. Logging …

Get Huge Discounts
More Python Projects