how to make a app like Whatsapp massanger

How to make a app like Whatsapp massanger

First download trebedit app from Google play store

Here is all the code.

VChat.html:

<!DOCTYPE html>
<html>

<head>
<meta name="viewport" content="width=device-width, initial-scale=1">

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<style>
  .clr_cls {
   background-color:#B0F4B5;
   color: black;
   height:40px;
   width:100%;
   padding-top:15px;
   text-align: center;
  }
input[type=text] {
  width: 80%;
  padding: 10px 10px;
  margin: 8px 0;
  box-sizing: border-box;
  border:2px solid;
  border-radius:50px;
  float:left;
  background:#B2BEB5;
  color: white;
  text-align: center;
  opacity:5;
}
.ffr{
   height:450px;
   border:2px ;
   padding-bottom:20px;
   overflow-y: auto;
   background:#FFF0ED;
}

::placeholder {

    color: white;
}
.msgn{

overflow: hidden;

}
.inc{
padding:7px;
width:100%;
float: left;
margin-bottom:1000px;
float: right;
background:red;
}
.in{
margin-bottom:10px;
background: yellow;
}
.nclass{
background:#C5FF8D;
text-align: center;
overflow: hidden;
padding:15px;
margin-top:10px;
border-radius:15px;
width:60%;
margin-right:10px;
float: right;
opacity:1;
border:1px solid green;
}
.btr{
padding:4px;
width:45px;
margin-top:5px;
margin-left:5px;
border-radius:70px;
background: green;
opacity:10;
text-align: center;
}
.con{
margin-right:150px;
margin-top:-10px;
}
.vdo{
margin-top:-40px;
margin-right:-150px;
}
.call{
margin-top:-28px;
margin-right:-230px;
}
.dot{
margin-top:-30px;
margin-right:-290px;
}
.emo{
margin-left:-100000px;

}
.b1{
margin-top:-25px;
margin-left:-280px;
}
.g1{
margin-top:-30px;

</style>

</head>

<body>
<div class="clr_cls">
<div class="con">
   <i class="material-icons" style="font-size:50px;">account_circle</i>

</div>
<div class="vdo" onclick= vid();><i class="material-icons">videocam</i></div>
<div class="call" onclick=cll();><i class="material-icons">call</i>

</div>
<div class="dot" onclick= mre();><i class="material-icons">more_vert</i></div>

<div class="b1" onclick=Back();>
<i class="material-icons">keyboard_backspace</i>
</div>
<div class="g1">person name</div>
</div>
<div class="ffr"  id="msg" >
</div>
</div>

<input  id="txt" type="text" placeholder="input your massage">
</input>
<button  id="btn" class="btr"><i class="material-icons">send</i> </button>
<script src="msg.js"></script>

</body>

</html


JavaScript: msg.js:-

var massages= document.getElementById("msg");
var button= document.getElementById("btn");
var textbox=document.getElementById("txt");
var chat=document.getElementById("mrg");

button.addEventListener("click", function () {
var newMsg=document.createElement("div");
var gap=document.createElement("div")
newMsg.innerText=textbox.value;
newMsg.classList.add("nclass");
massages.appendChild(newMsg);
textbox.value="";



});
function Back(){

window.history.back();
}
function vid(){
alert("currently video call is not available");

}
function cll(){
alert("currently call is not available");


}
function mre(){

alert("sorry this app is not fully developed so some features is unavailable");
}

Logo.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<style>

.logo{
display:block;
margin-top:150px;
margin-left:30px;
}
.v{
font-size:250px;
margin-top:-300px;
margin-left:119px;
color:green;
}
.bjn{
margin-left:80px;
background:#DEFFB7;
text-align: center;
width:50%;
padding:5px;
border-radius:50px;
}

</style>
<body>
<div class="logo"><i class="material-icons" style="color: green; font-size:300px;">donut_large</i></div>
<div class="v">v</div>
<div class="bjn"><a href="interfce1.html"> click to continue</a></div>
   
</body>
</html>


Interfce1.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<style>
.contain{
padding:30px;
background:#98FF66;
}
.con{
margin-top:-40px;
margin-left:20px;
}
.cont{
margin-top:-40px;
margin-left:170px;

}
.conta{
margin-top:-40px;
margin-left:280px;

}
.contai{
margin-top:-80px;
margin-left:20px;
}
.fly{
padding: 10px;
border-radius:50%;
align-items: center;
border:1px;
background: green;
position:fixed;
right:30px;
bottom:80px;
}
.container{
height:574px;
width:341px;
border:2px ;
margin-top:16px;
overflow-y: auto;
}
.lbl{
text-align: right;
padding:40px;
border-top:2px solid ;
background:#FFF0ED;
width:80%;
margin-bottom:10px;
}
.tct{
font-size:27px;
margin-top:-100px;
margin-left:90px;
}
.lg{
margin-top:-80px;
margin-left:10px;
}

</style>
<body>
<div class="contain"></div>
<div class="con"><h3>chat</h3></div>
<div class="cont"><h3>calls</h3></div>
<div class="conta"><h3>status</h3></div>
<div class="contai"><i class="material-icons" style="font-size:40px;">donut_large</i></div>
<div class="container">
<div class="lbl"><a href="vchat.html">open chat</a></div>
<div class="tct"><h5>person 1</h5></div>
<div class="lg"><i class="material-icons" style="font-size:60px;">account_circle</i></div>
<div class="lbl"><a href="vchat.html">open chat</a></div>
<div class="tct"><h5>person 2</h5></div>
<div class="lg"><i class="material-icons" style="font-size:60px;">account_circle</i></div>
<div class="lbl"><a href="vchat.html">open chat</a></div>
<div class="tct"><h5>person 3</h5></div>
<div class="lg"><i class="material-icons" style="font-size:60px;">account_circle</i></div>
<div class="lbl"><a href="vchat.html">open chat</a></div>
<div class="tct"><h5>person 4</h5></div>
<div class="lg"><i class="material-icons" style="font-size:60px;">account_circle</i>"</div>
<div class="lbl"><a href="vchat.html">open chat</a></div>
<div class="tct"><h5>person 5</h5></div>
<div class="lg"><i class="material-icons" style="font-size:60px;">account_circle</i></div>

<div class="lbl"><a href="vchat.html">open chat</a></div>
<div class="tct"><h5>person 6</h5></div>
<div class="lg"><i class="material-icons" style="font-size:60px;">account_circle</i></div>

<div class="lbl"><a href="vchat.html">open chat</a></div>
<div class="tct"><h5>person 7</h5></div>
<div class="lg"><i class="material-icons" style="font-size:60px;">account_circle</i></div>
<div class="lbl"><a href="vchat.html">open chat</a></div>
<div class="tct"><h5>person 8</h5></div>
<div class="lg"><i class="material-icons" style="font-size:60px;">account_circle</i>"</div>

<div class="lbl"><a href="vchat.html">open chat</a></div>
<div class="tct"><h5>person 9</h5></div>
<div class="lg"><i class="material-icons" style="font-size:60px;">account_circle</i>"</div>

<div class="lbl"><a href="vchat.html">open chat</a></div>
<div class="tct"><h5>person 10</h5></div>
<div class="lg"><i class="material-icons" style="font-size:60px;">account_circle</i></div>
<div class="lbl"><a href="vchat.html">open chat</a></div>
<div class="tct"><h5>person 11</h5></div>
<div class="lg"><i class="material-icons" style="font-size:60px;">account_circle</i></div>
<div class="lbl"><a href="vchat.html">open chat</a></div>
<div class="tct"><h5>person 12</h5></div>
<div class="lg"><i class="material-icons" style="font-size:60px;">account_circle</i></div>
<div class="lbl"><a href="vchat.html">open chat</a></div>
<div class="tct"><h5>person 13</h5></div>
<div class="lg"><i class="material-icons" style="font-size:60px;">account_circle</i></div>

<div class="lbl"><a href="vchat.html">open chat</a></div>
<div class="tct"><h5>person 14</h5></div>
<div class="lg"><i class="material-icons" style="font-size:60px;">account_circle</i></div>
<div class="lbl"><a href="vchat.html">open chat</a></div>
<div class="tct"><h5>person 15</h5></div>
<div class="lg"><i class="material-icons" style="font-size:60px;">account_circle</i></div>
<button class="fly"><i class="material-icons" style="font-size:40px;">donut_large</i></button>
   
</body>
</html>



Comments

Post a Comment

Popular posts from this blog

Scopes and opportunities in programming

Image
Scopes and opportunities in programming:   Our world is changing ,our generation is shifting toward technology.world is moving to achieve speed of light and internet is shifting toward a highest speed of 5G .Everything is changing and new technology also ask for change in older technology. And programming give you that opportunities to make improvements in older technology. So you can think how much programming is important. Scope in programming: There are many scope and some of the posts are here: Robotics-you can go with robotics because robotic brain need programming and robotic engineer are popular and reputable job in our society Software engineer-  demand of software are increasing in modern world and every business need apps and software. Website devloper- website become a part of our business in modern era so this bring a good opportunity . Game devloper- games are becoming popular in our era so this is also a opportunities for the programmers.
Read more

Wich language should I learn for becoming a game devloper

Image
Wich language should we learn to be a game devloper: Game development industry is becoming a sunrise industry in our modern era and some students wants to make their career in game development field. In this post we will discuss the most important thing for game development that is programming . Programming is the sceleton and backbone of the game . Language used for game programming: C sharp JavaScript Python These are some of the language that can be used for game development. But most commonly used language is c sharp and I suggest you to learn c sharp Because it is easy to learn . So most of the game programmers use c sharp. 
Read more

What are game engine? Wich is best?

Image
What are game engine and Wich is best: Game engine are the platform where we get tools that are necessary for the game development. It provides many tool that makes our work easy and we can make a game easily. Types of game engine: 2D 3D  2D game engines: Monogame  Buildbox Game maker Construct Unity Etc. 3D game engines: Unity Unreal EEtc. From the above game engines most commonly used engine is unity and unreal. I recommend unity to my audience.
Read more