A simple and responsive web-based chat application that allows two users (User 1 and User 2) to simulate a conversation on the same screen. Built using HTML, CSS with Bootstrap, and JavaScript.
- Send and display messages from two different users.
- Includes emoji buttons to enhance chat interaction.
- Responsive design using Bootstrap grid layout.
- Displays user profile images and usernames with each message.
- Vertical divider between both user sections.
- Auto-scroll to the latest message.
- HTML5
- CSS3
- Bootstrap 5
- JavaScript (Vanilla JS)
- emoji-button library
-
Clone the repository:
git clone https://github.com/Amritasri10/simple-chat-app.git cd simple-chat-app -
Open the app in a browser:
- Just double-click the
index.htmlfile. - Or serve with a local web server like Live Server in VS Code.
- Just double-click the
-
Enjoy chatting.
Simple-chat-app/
├── index.html # Main HTML file
├── style.css # Custom CSS styles
├── script.js # Main JavaScript file
├── user1.png # Image representing User 1
├── user2.png # Image representing User 2
└── README.md # Project description file
-
Integrate Socket.IO or WebSocket API to enable real-time, multi-user communication over the network.
-
Add login and registration features so users can have personalized chat sessions.
-
Display time and date for each message to improve clarity and conversation flow.
-
Store chat messages in local storage or a database (e.g., Firebase, MongoDB) so users can view past conversations.
-
Add alert sounds when a new message arrives from the other user.
-
Allow users to toggle between light mode and dark mode.
-
Enable sending and previewing of images, documents, or other media files in chat.
-
Add a modern emoji picker pop-up UI instead of static buttons.
This project is open-source and available under the MIT License.