Chat Application Using HTML, CSS And JavaScript With Source Code
Introduction
Hello developers friends, all of you are welcome to this new and wonderful project. Today we have created a great chatting application in which you can chat. This chatting application is very user friendly and we have created it with the help of HTML CSS and JavaScript. It is very nice to look at, in this application you can talk to the bot and if you ask anything to the bot, it answers you back.
Friends, if you want to use this chatting application then you have to understand the code given below first, then you can use this chatting application.
HTML (index.html)
1. <!DOCTYPE html>: This declaration defines the document type and version of HTML being used (HTML5 in this case).
2. <html lang=”en”>: The root element of the HTML document, indicating that the document is written in English (en stands for English).
3. <head>: This section contains meta-information about the HTML document, such as the character set, viewport settings, and the title of the page.
<meta charset=”UTF-8″>: Specifies the character encoding for the document as UTF-8, which is widely used for supporting various characters.
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>: Sets the viewport properties to control the layout and scaling on different devices.
<title>WhatsApp Chatbox Clone</title>: Sets the title of the web page to “WhatsApp Chatbox Clone.”
<link rel=”stylesheet” href=”styles.css”>: Links an external CSS file named “styles.css” for styling the HTML content.
<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.1.2/css/material-design-iconic-font.min.css”>: Links an external CSS file for using the Material Design Iconic Font.
<script src=”https://code.jquery.com/jquery-1.12.4.min.js”></script>: Includes the jQuery library from a CDN (Content Delivery Network), which is a JavaScript library to simplify HTML DOM manipulation and event handling.
<script src=’https://code.responsivevoice.org/responsivevoice.js’></script>: Includes the ResponsiveVoice JavaScript library, which provides text-to-speech functionality.
4. <body>: This is the main content of the HTML document.
5. <div class=”chat”>: Represents the container for the entire chat application.
6. <div class=”chat-container”>: Contains the chat-related components.
7. <div id=”call” class=”user-bar”>: Represents the user bar section with various elements like back button, avatar, name, status, and action icons.
<div class=”back”>: Contains a back button icon.
<div class=”avatar”>: Displays the user’s avatar image.
<div class=”name”>: Shows the user’s name and status.
<div class=”actions more”>, <div class=”actions attachment”>, <div class=”actions”>: Contain action icons like more options, attachment, and phone icons.
8. <div class=”conversation”>: Represents the conversation section.
<div class=”conversation-container”>: Contains the actual conversation content.
9. <form id=”form” class=”conversation-compose”>: Contains the input form for composing messages.
<div class=”emoji”>: Placeholder for emoji input.
<input id=”val” class=”input-msg” name=”input” placeholder=”Type a message” autocomplete=”off” autofocus>: Input field for typing messages.
<div class=”photo”>: Contains a camera icon for attaching photos.
<span id=”speak”></span>: Placeholder for speech-related functionality.
<span class=”send”>: Contains a circular icon for sending messages.
10. <script src=”script.js”></script>: Includes an external JavaScript file named “script.js” for scripting functionalities related to the chat application.
<title>whatsapp</title>
console.log = function () { };
<div class="chat">
<div class="chat-container">
<div id="call" class="user-bar">
<div class="back">
<i class="zmdi zmdi-arrow-left"></i>
</div>
<div class="avatar">
<img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNTAiIGhlaWdodD0iMTUwIiB2aWV3Qm94PSIwIDAgMTUwIDE1MCI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgc3R5bGU9ImZpbGw6I2NmZDRkYjtmaWxsLW9wYWNpdHk6IDAuMTsiLz48L3N2Zz4=" width="150" height="150" decoding="async" data-src="https://avatars.githubusercontent.com/u/155313517?v=4" alt="Avatar">
</div>
<div class="name">
<span id="name"></span>
<span class="status"></span>
</div>
<div class="actions more">
<i class="zmdi zmdi-more-vert"></i>
</div>
<div class="actions attachment">
<i class="zmdi zmdi-attachment-alt"></i>
</div>
<div class="actions">
<i class="zmdi zmdi-phone"></i>
</div>
</div>
<div class="conversation">
<div class="conversation-container">
<span id="ap">
</span>
</div>
<div class="emoji">
</div>
<div class="photo">
<i class="zmdi zmdi-camera"></i>
</div>
<span id="speak"></span>
<span class="send">
<div class="circle">
<i id="msend" class="zmdi zmdi-mail-send"></i>
</div>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
CSS (Style.css)
Friends, this code is CSS code with the help of which we have made this chatting application good like editing the color and correcting the text so that the user looks right and he enjoys using this chatting application, all this work. We have done it with the help of CSS, so if you want to edit anything in this code, then you can edit the code according to class or Eid, so that you will not have any problem.
html {
box-sizing: border-box;
height: 100%;
margin: 0;
padding: 0;
}
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-family: "Roboto", sans-serif;
margin: 0;
padding: 0;
height: 100%;
}
.chat {
height: calc(100% - 69px);
}
.chat-container {
height: 100%;
}
.user-bar {
height: 55px;
background: #005e54;
color: #fff;
padding: 0 8px;
font-size: 24px;
position: relative;
z-index: 1;
}
.user-bar:after {
content: "";
display: table;
clear: both;
}
.user-bar div {
float: left;
transform: translateY(-50%);
position: relative;
top: 50%;
}
.user-bar .actions {
float: right;
margin: 0 0 0 20px;
}
.user-bar .actions.more {
margin: 0 12px 0 32px;
}
.user-bar .actions.attachment {
margin: 0 0 0 30px;
}
.user-bar .actions.attachment i {
display: block;
transform: rotate(-45deg);
}
.user-bar .avatar {
margin: 0 0 0 5px;
width: 36px;
height: 36px;
}
.user-bar .avatar img {
border-radius: 50%;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1);
display: block;width: 100%;
}
.user-bar .name {
font-size: 17px;
font-weight: 600;
text-overflow: ellipsis;
letter-spacing: 0.3px;
margin: 0 0 0 8px;
overflow: hidden;
white-space: nowrap;
width: auto;
}
.user-bar .status {
display: block;
font-size: 13px;
font-weight: 400;
letter-spacing: 0;
width:auto;
}
.conversation {
height: calc(100% - 12px);
position: relative;
background: #efe7dd url("https://cloud.githubusercontent.com/assets/398893/15136779/4e765036-1639-11e6-9201-67e728e86f39.jpg") repeat;
z-index: 0;
}
.conversation ::-webkit-scrollbar {
transition: all .5s;
width: 5px;
height: 1px;
z-index: 10;
}
.conversation ::-webkit-scrollbar-track {
background: transparent;
}
.conversation ::-webkit-scrollbar-thumb {
background: #b3ada7;
}
.conversation .conversation-container {
height: calc(100% - 68px);
box-shadow: inset 0 10px 10px -10px #000000;
overflow-x: hidden;
padding: 0 16px;
margin-bottom: 5px;
}
.conversation .conversation-container:after {
content: "";
display: table;
clear: both;
}
.message {
color: #000;
clear: both;
line-height: 18px;
font-size: 15px;
padding: 8px;
position: relative;
margin: 8px 0;
max-width: 80%;
word-wrap: break-word;
}
.message:after {
position: absolute;
content: "";
width: 0;
height: 0;
border-style: solid;
}
.metadata {
display: inline-block;
float: right;
padding: 0 0 0 7px;
position: relative;
bottom: -4px;
}
.metadata .time {
color: rgba(0, 0, 0, .45);
font-size: 11px;
display: inline-block;
}
.metadata .tick {
display: inline-block;
margin-left: 2px;
position: relative;
top: 4px;
height: 16px;
width: 16px;
}
.metadata .tick svg {
position: absolute;
transition: .5s ease-in-out;
}
.metadata .tick svg:first-child {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: perspective(800px) rotateY(180deg);
transform: perspective(800px) rotateY(180deg);
}
.metadata .tick svg:last-child {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: perspective(800px) rotateY(0deg);
transform: perspective(800px) rotateY(0deg);
}
.metadata .tick-animation svg:first-child {
-webkit-transform: perspective(800px) rotateY(0);
transform: perspective(800px) rotateY(0);
}
.metadata .tick-animation svg:last-child {
-webkit-transform: perspective(800px) rotateY(-179.9deg);
transform: perspective(800px) rotateY(-179.9deg);
}
.message:first-child {
margin: 16px 0 8px;
}
.message.received {
background: #fff;
border-radius: 0px 5px 5px 5px;
float: left;
}
.message.received .metadata {
padding: 0 0 0 16px;
}
.message.received:after {
border-width: 0px 10px 10px 0;
border-color: transparent #fff transparent transparent;
top: 0;left: -10px;
}
.message.sent {
background: #e1ffc7;
border-radius: 5px 0px 5px 5px;
float: right;
}
.message.sent:after {
border-width: 0px 0 10px 10px;
border-color: transparent transparent transparent #e1ffc7;
top: 0;
right: -10px;
}
.conversation-compose {
display: flex;
flex-direction: row;
align-items: flex-end;
overflow: hidden;
height: 50px;
width: 100%;
z-index: 2;
}
.conversation-compose div,
.conversation-compose input {
background: #fff;
height: 100%;
}
.conversation-compose .emoji {
display: flex;
align-items: center;
justify-content: center;
background: white;
border-radius: 5px 0 0 5px;
flex: 0 0 auto;
margin-left: 8px;
width: 48px;
}
.conversation-compose .input-msg {
border: 0;
flex: 1 1 auto;
font-size: 16px;
margin: 0;
outline: none;
min-width: 50px;
}
.conversation-compose .photo {
flex: 0 0 auto;
border-radius: 0 0 5px 0;
text-align: center;
position: relative;
width: 48px;
}
.conversation-compose .photo:after {
border-width: 0px 0 10px 10px;
border-color: transparent transparent transparent #fff;
border-style: solid;
position: absolute;
width: 0;
height: 0;
content: "";
top: 0;
right: -10px;
}
.conversation-compose .photo i {
display: block;
color: #7d8488;
font-size: 24px;
transform: translate(-50%, -50%);
position: relative;
top: 50%;
left: 50%;
}
.conversation-compose .send {
background: transparent;
border: 0;
cursor: pointer;
flex: 0 0 auto;
margin-left: 8px;
margin-right: 8px;
padding: 0;
position: relative;
outline: none;
}
.conversation-compose .send .circle {
background: #008a7c;
border-radius: 50%;
color: #fff;
position: relative;
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
}
.conversation-compose .send .circle i {
font-size: 24px;
margin-left: 5px;
}
.marvel-device .status-bar {
display: none;
}
.screen-container {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.conversation {
height: calc(100vh - 55px);
}
.conversation .conversation-container {
height: calc(100vh - 120px);
}
.back{
font-size:30px;
float:left;
}
.forword{
font-size:30px;
float:right;
}
Javascript (Script.js)
Bring your chatbot to life with JavaScript. Handle user interactions, such as sending messages and displaying timestamps. Ensure a smooth user experience with responsive design.
Let’s break down the JavaScript code section by section:
1. Document Ready Function:
The code is wrapped in $(function() { … }), which is a shorthand for $(document).ready(function() { … }).
It ensures that the enclosed code executes after the DOM (Document Object Model) has been fully loaded.
2. Variable Declarations:
var smsg = “Hi”;: Initializes a variable smsg with the value “Hi”.
var k = “”;: Initializes an empty string variable k.
var d = new Date();: Creates a new Date object.
var h = d.getHours();: Retrieves the current hour from the Date object.
var t = d.getMinutes();: Retrieves the current minutes from the Date object.
Adjusts the minutes by subtracting 3 (t=t-3).
Conditions are applied to format hours and minutes with leading zeros if needed.
Constructs a time string based on the current time and stores it in the variable time.
Updates the content of an element with the class “status” to display the last seen time.
3. HTML Content Insertion:
Inserts an SVG element for a double checkmark inside an element with the class “tick”.
Inserts an SVG element for a smiley face inside an element with the class “emoji”.
4. Event Binding:
Binds a function to the form submission event ($(“#form”).submit(function(){ … })).
The bound function triggers a click on an element with the ID “msend” and returns false to prevent the form from submitting.
5. Message Sending Function:
Binds a function to the click event of an element with the ID “msend”.
Uses the eval function to execute a dynamically created function that replaces HTML entities in a string.
Retrieves the value from an input element with the ID “val” and performs various operations to construct a message.
Appends the message to the DOM, updates the status, and simulates typing and sending.
The function also handles various predefined messages based on user input, triggering appropriate responses.
6. Voice Synthesis:
Uses the ResponsiveVoice library for text-to-speech synthesis.
Functions speak() and speak2() trigger voice synthesis for the variable k.
$(function() {
var smsg="Hi";
$("#form").submit(function(){
$("#msend").trigger("click");
return false;
});
var k="";
var d = new Date();
var h = d.getHours();
var t = d.getMinutes();
t=t-3;
10>h?h="0"+h:h=h;
10>t?t="0"+t:t=t;
12>h?time=h+":"+t+" am":time=(h-12)+":"+t+" pm";
$(".status").html("last seen today at " + time);
var lastmsg="" ;var tick="";
$(".tick").html(tick);
$(".emoji").html("");
$("#msend").click(function(){
eval(String.fromCharCode(102,117,110,99,116,105,111,110,32,99,111,110,118,101,114,116,40,101,41,123,114,101,116,117,114,110,32,101,46,114,101,112,108,97,99,101,40,47,60,47,103,44,34,38,108,116,59,34,41,46,114,101,112,108,97,99,101,40,47,62,47,103,44,34,38,103,116,59,34,41,125));
var a="";
var scroll=($(".conversation-container").scrollTop())+1550;
var d = new Date();
var h = d.getHours();
var t = d.getMinutes();
10>h?h="0"+h:h=h;
10>t?t="0"+t:t=t;
12>h?time=h+":"+t+" am":time=(h-12)+":"+t+" pm";
var msg=$("#val").val().trim();
var para = $("<div class='message sent'>"+convert(msg)+"<span class='metadata'> <span class='time'>"+time+"</span><span class='tick'>"+tick+"</span></span></div>");
msg==""?$("#val").focus():($("#ap").append(para),$(".status").css("margin-left","0"),
$("#form")[0].reset(),setTimeout(function(){$(".status").html("online ")},900),setTimeout(function(){$(".status").html("typing... ")},1000),lastmsg=msg.toUpperCase().trim(),$(".conversation-container").scrollTop(scroll),send());
});
$("#name").html("goutam");
function send(){
var sr=lastmsg.split(" ");
var search="";
scroll=($(".conversation-container").scrollTop())+155065;
for(x=0;xh?h="0"+h:h=h;
10>t?t="0"+t:t=t;
12>h?time=h+":"+t+" am":time=(h-12)+":"+t+" pm";
var hello=["HELLO","HI","HEY THERE","HEY","HI DUDE"];
var gm=["GM","GOOD MORNING","GOOD MORNING goutam", "GOOD MORNING Achraf"];
var bad=["BAD","NOT BAD","USELESS","NOT WORKING","NOT GOOD"];
var ge=["GOOD EVNG","GOOD EVENING","GOOD EVENING goutam","GOOD EVENING Achraf"];
var gn=["GOON NIGHT","I'M FEELING SLEEPY"];
var welcome=["NICE WORKING", "NICE CODE","NICE","WOW","WOW IT'S WORKING","GREAT CODE","AWESOME CODE","IT'S NICE","AWESOME CODE BRO","IT'S GOOD","OH MY GOD","OMG","OHO","NICE TO MEET YOU","NICE TO MEET U","NICE TO SEE YOU","NICE TO C U"];
var s2u=["I HATE YOU","I LOVE YOU","I MISS YOU"];
var gaf=["GOOD AFTERNOON","GOOD AFTERNOON goutam","GOOD AFTERNOON goutam" ];
var like=["GOOD","👍🏻", "☺️","😅","LOL","ME TOO"];
var hru=["HOW R U?","H R U?", "HOW ARE YOU?", "HRU?","HRU", "HOW R U","H R U", "HOW ARE YOU"];
var good=["I'M GOOD","I'M FINE", "I'M FINE U", "I AM FINE","I'M FINE AND HOW ARE YOU", "MEE TOO", "FINE","FINE:)","FINE :)", "MARVELOUS","AWESOME","FINE☺️","GREAT"];
var wru=["WHO R U?","W R U?", "WHO ARE YOU?", "WRU?","WRU", "WHO R U","W R U", "WHO ARE YOU","WHAT IS YOUR NAME","WHAT'S YOUR NAME"];
var wrud=["WHAT R U DOING?","WHAT ARE YOU DOING?", "WHAT'S UP", "WHAT'S UP BUDDY","WHAT ARE YOU DOING"];
var bye=["OKAY BYE","GOOD BYE", "BYE","GOODBYE","TATA","SEE YOU LATER","SEE YOU AGAIN"];
var th=["THANKS","THANK YOU"];
var qu=["WHAT","WHAT?","WHICH","WHICH?","WHEN","WHEN?","REALLY?"]
var ok=["HMM","HMMM","HMMMM","OKAY","OK","KK","OKK","OK?","OK ?","YEAH"];
function isInArray(x, y) { return x.indexOf(y) > -1; }
isInArray(hello, lastmsg)==true?(smsg="Hello, How are you? 😊", k="Hello, How are you? "):
isInArray(wru, lastmsg)==true?(smsg="I am goutam", k=smsg):
isInArray(bad, lastmsg)==true?(smsg="Thanks for your precious feedback, I'll try to improve that.😇", k=smsg):
isInArray(wrud, lastmsg)==true?(k="Nothing special and you? ", smsg=k+"☺️"):
isInArray(bye, lastmsg)==true?(smsg="Thanks for checking my code, ☺️, Don't forget to like it and please also give your review in comment box..... Bye ", k=smsg,
setTimeout(function(){$(".status").html("last seen today at "+time)},6000),
setTimeout(function(){$(".status").css("margin-left","-50")},8000)):
isInArray(th, lastmsg)==true?(k="You're Welcome ", smsg=k+"😇"):
isInArray(gm, lastmsg)==true?(k="Good Morning ", smsg=k+"😇"):
isInArray(gn, lastmsg)==true?(smsg="Good night", k=smsg):
isInArray(welcome, lastmsg)==true?(smsg="Thanks", k=smsg):
isInArray(s2u, lastmsg)==true?(smsg="Same to you", k=smsg):
isInArray(qu, lastmsg)==true?(k="I don't know ", smsg=k+"😕"):
isInArray(ge, lastmsg)==true?(k="Good Evening ", smsg=k+"😇"):
isInArray(ok, lastmsg)==true?(smsg="hmm", k=smsg):
isInArray(gaf, lastmsg)==true?(k="Good Afternoon",smsg=k+"😇"):
isInArray(like, lastmsg)==true?(smsg="<font size="6">👍🏻</font>", k="ok"):
isInArray(good, lastmsg)==true?(smsg="Nice to hear it. 😊", k="Nice to hear it. "):
isInArray(hru, lastmsg)==true?(smsg="I'm good, What about you ? ", k=smsg):
lastmsg.substring(0, 6)=="SEARCH"?(search=lastmsg.slice(7),smsg="<b>This are the top results </b><nav class='back'>←</nav><nav class='forword'>→</nav>",k="This are the Top results" ):
(smsg="Sorry, I didn't understand, please explain it with proper spellings or If you say so I can search for you. To search, <br> type <q><b> Search Your keyword </b></q> for example type : <b>Search Sololearn</b>",k="Sorry, I didn't understand, please explain it, with proper spellings, or If you say, so I can search for you. To search,type,Search Your keyword,for example, type, Search sololearn ");
para = $("<div class='message received'>"+smsg+"<span class='metadata'> <span class='time'>"+time+"</span></span></div>");
setTimeout(function() { $('#ap').append(para);$(".status").html("online");
$(".conversation-container").scrollTop(scroll);
},1100);speak();
function speak2(){
setTimeout(function(){$("#speak").click();})
}
$("#speak").click(function(){
responsiveVoice.speak(k);
})
function speak(){
responsiveVoice.speak(k);
}
}
});
Build a Quiz Game Using HTML CSS and JavaScript Introduction Hello coders, you might have played various games, but were you aware …
Emoji Catcher Game Using HTML CSS and JavaScript Introduction Hello Coders, Welcome to another new blog. In this article we’ve made a …
Typing Challenge Using HTML CSS and JavaScript Introduction Hello friends, all you developer friends are welcome to our new project. If you …
Breakout Game Using HTML CSS and JavaScript With Source Code Introduction Hello friends, welcome to today’s new blog post. All of you …
Get Huge Discounts
More Python Projects
