Creating a WhatsApp Web UI clone using HTML, CSS, and JavaScript involves replicating the user interface and some basic functionalities. Below is a guide to help you get started:
HTML Structure:
Create an index.html file with the following content:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WhatsApp</title>
<link rel="stylesheet" href="styles/core.css">
<link rel="stylesheet" href="styles/style.css">
<link rel="stylesheet" href="styles/sidebar.css">
<link rel="stylesheet" href="styles/chat-window.css">
<link rel="stylesheet" href="styles/chat-tile.css">
<link rel="stylesheet" href="styles/chat-message.css">
</head>
<body>
<main>
<!-- Sidebar -->
<aside id="sidebar">
<header id="sidebar-header">
<img src="https://picsum.photos/id/10/50" alt="" class="avatar" id="profile-image">
<div class="toolbar">
<img src="icons/communities.svg" alt="" class="icon">
<img src="icons/status.svg" alt="" class="icon">
<img src="icons/new-chat.svg" alt="" class="icon">
<div class="dropdown">
<img src="icons/menu.svg" alt="" class="icon dropdown-button">
<div class="dropdown-content">
<a href="#">New group</a>
<a href="#">New community</a>
<a href="#">Archived</a>
<a href="#">Starred messages</a>
<a href="#">Select chats</a>
<a href="#">Settings</a>
<a href="#">Log out</a>
</div>
</div>
</div>
</header>
<form id="search-toolbar">
<input type="search" name="" id="search-input" placeholder="Search or start a new chat">
<img src="icons/filter.svg" alt="" class="icon">
</form>
<div class="connectivity-notification">
<img src="icons/warning.svg" alt="Offline warning">
<div>
<div class="connectivity-notification-title">
Computer not connected
</div>
<span>
Make sure your computer has an active Internet connection
</span>
</div>
</div>
<section id="sidebar-contents">
<div id="chats-list">
<div class="chat-tile">
<img src="https://picsum.photos/id/103/50" alt="" class="chat-tile-avatar">
<div class="chat-tile-details">
<div class="chat-tile-title">
<span>Friends 🤗</span>
<span>Tuesday</span>
</div>
<div class="chat-tile-subtitle">
<span>You: hey there! how are you?</span>
<span class="chat-tile-menu">
<img src="icons/pin.svg" alt="" class="pin">
</span>
</div>
</div>
</div>
<div class="chat-tile">
<img src="https://picsum.photos/id/104/50" alt="" class="chat-tile-avatar">
<div class="chat-tile-details">
<div class="chat-tile-title">
<span>Family</span>
<span>10:34 Pm</span>
</div>
<div class="chat-tile-subtitle">
<span>Papa: You gotta be kidding me</span>
<span class="chat-tile-menu">
<img src="icons/pin.svg" alt="" class="pin">
</span>
</div>
</div>
</div>
<div class="chat-tile">
<img src="https://picsum.photos/id/106/50" alt="" class="chat-tile-avatar">
<div class="chat-tile-details">
<div class="chat-tile-title">
<span>Amor 💖</span>
<span>Saturday</span>
</div>
<div class="chat-tile-subtitle">
<span>You do not understand what I'm </span>
<span class="chat-tile-menu">
<img src="icons/pin.svg" alt="" class="pin">
</span>
</div>
</div>
</div>
<div class="chat-tile">
<img src="https://picsum.photos/id/110/50" alt="" class="chat-tile-avatar">
<div class="chat-tile-details">
<div class="chat-tile-title">
<span>John</span>
<span>Saturday</span>
</div>
<div class="chat-tile-subtitle">
<span>Reply in group fast</span>
<span class="chat-tile-menu">
<img src="icons/pin.svg" alt="" class="pin">
</span>
</div>
</div>
</div>
</div>
</section>
</aside>
<!-- Sidebar ends -->
<!-- Chat window -->
<section id="chat-window">
<header id="chat-window-header">
<img src="https://picsum.photos/id/103/50" alt="" class="avatar" id="profile-image">
<div id="active-chat-details">
<h3>Friends 🤗</h3>
<div class="info">You and 69 others</div>
</div>
<img src="icons/search.svg" alt="" class="icon">
<div class="dropdown">
<img src="icons/menu.svg" alt="" class="icon dropdown-button">
<div class="dropdown-content contact-menu">
<a href="#">Contact info</a>
<a href="#">Select messages</a>
<a href="#">Close chat</a>
<a href="#">Mute notifications</a>
<a href="#">Disappearing messages</a>
<a href="#">Clear messages</a>
<a href="#">Delete chat</a>
<a href="#">Report</a>
<a href="#">Block</a>
</div>
</div>
</header>
<div id="chat-window-contents">
<div class="datestamp-container">
<span class="datestamp">
03/05/2023
</span>
</div>
<!-- Message group 1 -->
<div class="chat-message-group">
<img src="https://picsum.photos/50" alt="" class="chat-message-avatar">
<div class="chat-messages">
<div class="chat-message-container">
<div class="chat-message chat-message-first">
<div class="chat-message-sender">Kshitiz</div>
Hey there, how are you doing?
<span class="chat-message-time">7:22 am</span>
</div>
<div class="emoji-toolbar">
<img src="icons/emoji.svg" alt="" class="icon reaction-button">
<div class="reaction-emoji-selector">
<a href="#" class="icon">👍🏻</a>
<a href="" class="icon">💖</a>
<a href="" class="icon">😂</a>
<a href="" class="icon"></a>
<a href="" class="icon"></a>
<a href="" class="icon"></a>
</div>
</div>
</div>
<div class="chat-message">
Are you up to some fun this weekend?
<span class="chat-message-time">7:22 am</span>
</div>
<div class="chat-message">
I'm thinking of going to the beach
<span class="chat-message-time">7:23 am</span>
</div>
</div>
</div>
<!-- Message group 2 -->
<div class="chat-message-group">
<img src="https://picsum.photos/id/102/50" alt="" class="chat-message-avatar">
<div class="chat-messages">
<div class="chat-message-container">
<div class="chat-message chat-message-first">
<div class="chat-message-sender">John</div>
Sure man
<span class="chat-message-time">7:30 am</span>
</div>
<div class="emoji-toolbar">
<img src="icons/emoji.svg" alt="" class="icon reaction-button">
<div class="reaction-emoji-selector">
<a href="#" class="icon">👍🏻</a>
<a href="" class="icon">💖</a>
<a href="" class="icon">😂</a>
<a href="" class="icon"></a>
<a href="" class="icon"></a>
<a href="" class="icon"></a>
</div>
</div>
</div>
<div class="chat-message">
When are you free? Let's meet at the cafe first.
<span class="chat-message-time">7:30 am</span>
</div>
</div>
</div>
</div>
<footer id="chat-window-footer">
<img src="icons/emoji.svg" alt="" class="icon">
<img src="icons/attachment.svg" alt="" class="icon">
<input type="search" name="message" id="compose-chat-box" placeholder="Type a message"
autocomplete="off">
<img src="icons/mic.svg" alt="" class="icon">
</footer>
<a class="scroll-to-top-button" href="#"><img src="icons/arrow-down.svg" alt=""
class="icon scroll-to-top-button-icon" height=""></a>
</section>
<!-- Chat window ends -->
</main>
<!-- Import Scripts -->
<script src="scripts/scroll-to-top.js"></script>
<script src="scripts/check-connectivity.js"></script>
</body>
</html>
check-connectivity.js
const connectivityNotification = document.getElementsByClassName(
"connectivity-notification"
)[0];
connectivityNotification.classList.add("hidden");
window.addEventListener("online", () => {
connectivityNotification.classList.add("hidden");
console.log(connectivityNotification.classList);
console.log("online");
});
window.addEventListener("offline", () => {
connectivityNotification.classList.remove("hidden");
console.log("offline");
});
scroll-to-top.js
const chatWindowContents = document.getElementById("chat-window-contents");
const scrollToTopButton = document.getElementsByClassName(
"scroll-to-top-button"
)[0];
const scrollToTopButtonIcon = document.getElementsByClassName(
"scroll-to-top-button-icon"
)[0];
chatWindowContents.addEventListener("scroll", (event) => {
const scrollPositionFromTop = chatWindowContents.scrollTop;
const scrollFromBottom =
chatWindowContents.scrollHeight -
scrollPositionFromTop -
chatWindowContents.clientHeight;
if (scrollFromBottom === 0) {
scrollToTopButton.classList.add("shrink");
scrollToTopButtonIcon.classList.add("shrink");
} else {
scrollToTopButton.classList.remove("shrink");
scrollToTopButtonIcon.classList.remove("shrink");
}
});
scrollToTopButton.addEventListener("click", (event) => {
event.preventDefault();
chatWindowContents.scrollTop =
chatWindowContents.scrollHeight - chatWindowContents.clientHeight;
});
Running the Project:
- Open the
index.htmlfile in a web browser. - You should see a basic WhatsApp-like layout with a sidebar, chat area, and message input.
- Type a message and press the send button or enter key to see it appear in the chat.
Additional Enhancements:
- Add More Contacts: Duplicate the
.contactdiv in the HTML to add more contacts. - Receive Messages: Add a function to simulate receiving messages.
- Responsive Design: Use media queries to make the design responsive.
- User Authentication: Add login and signup functionality for user authentication.
- Chat History: Store and retrieve chat history from a database or local storage.
This guide provides a foundational setup for a WhatsApp Web UI clone using basic web technologies. You can expand upon it with more advanced features and integrations to create a more robust application.
+91 7905834592
Enquiry Now
piyushmnm@gmail.com
piyush.gupta384
Reviews
There are no reviews yet. Be the first one to write one.