Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
6K views

My Details: Client Side Scripting (CSS) Micro-Project

This document summarizes a student's micro-project on client side scripting for an online messaging service called FreeJi. The project uses HTML, CSS and JavaScript to develop a client application. JavaScript implementations include using functions, objects, classes, DOM methods, window methods, regular expressions and cookies. The source code includes code for index, login and home pages. Key features of the client include user authentication, displaying chat lists, messages and profiles.

Uploaded by

Shaikh Wasima
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
6K views

My Details: Client Side Scripting (CSS) Micro-Project

This document summarizes a student's micro-project on client side scripting for an online messaging service called FreeJi. The project uses HTML, CSS and JavaScript to develop a client application. JavaScript implementations include using functions, objects, classes, DOM methods, window methods, regular expressions and cookies. The source code includes code for index, login and home pages. Key features of the client include user authentication, displaying chat lists, messages and profiles.

Uploaded by

Shaikh Wasima
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 27

CLIENT SIDE SCRIPTING (CSS)

MICRO- PROJECT

I being a student of Third Year 5th Sem IT would like to present


my MICRO-PROJECT on Client Side Scripting and the topic is
“Client for online messaging service –FreeJi”.

MY DETAILS
Shaikh Amaan FM

17818

IF5I

I would like to thank our respected teacher, Ms. Munira Ansari


for her guidance and support for making my project successful.
Table of Content:

TOPICS PAGE NO

INTRODUCTION 03

INTRODUCTION TO WESTERN RAILWAYS 04

SOURCE CODE 05

OUTPUTS 15

ACTUAL RESOURCES USED 20


INTRODUCTION
FreeJi is a simple web application that can be used to communicate with people
having internet access. With FreeJi you can also communicate with multiple people in
chatrooms.
This project is a client for the overall project. It is developed using html, css, and
javascript.

Javascript Implementations in the project:


1. Basic functions and methods.
a. Modular functionality was implemented using multiple functions assigned to
perform a set of related tasks.
b. Some functions used are, listChats(), listChatRooms(), loadChats() ,
saveProfile(), editProfile(), etc.

2. Objects and classes


a. Objects were used to create a standard layout for chat cards and message
bubbles.
b. Classes were instantiated inorder to reduce the redundant code.

3. Document methods
a. Document methods like getElementById(), getElementsByTagName() and
getElementsByClassName() were used.

4. Window methods
a. Windows methods like alert, prompt and confirm were used to display errors
and other informations.
5. Regular Expressions
a. Regex was used to validate the entries provided in the edit section of profile
page.
b. It was also used in making the functionality of the search bar implemented in
the chat list and chatrooms list section of chatting page.

6. Cookies
a. Cookies were used to store the global informations which is required by
multiple pages.
b. The user id was stored in cookies and was used in further pages like the home
page, chat page, etc.

7. Console
a. Console methods were used for debugging the project.
b. Log, error, warn are several methods used to find and solve problems that
raised in the project
SOURCE CODE
Index.html:

<html>
<head>

</head>
<frameset name="fr" cols="100%,0">
<frame src="login.html">

</frame>
<frame id="fr2" src="">

</frame>
</frameset>
</html>

Login.html:
<html>
<head>
<style>
html, body {
height:100%;
width:100%;
margin:0;
}

body {
background: linear-gradient(to bottom right , rgb(50,155,255),
rgb(50,255,155));
text-align: center;
}

#loginCard {
height:50%;
width:50%;
text-align: center;
color:rgb(50,155,255);
background:white;
border-radius: 20px;
box-shadow: 2px 4px 5px black;
position: absolute;
top:25%; left:25%;
font-family: arial;
}

label {
font-size:400%;
}
input {
font-size:70%;
border:none;
text-align: center;
border-bottom: solid 2px;
position: absolute;
bottom:5%; left:5%;
width:90%;
}
</style>
<script>
function main(e){
if(e.keyCode!=13){return;}
console.log(window.parent);
document.cookie="user="+document.getElementById("u").value;
window.parent.document.getElementById("fr2").src="home.html";
window.parent.document.body.cols="0,100%";
}
</script>
</head>
<body>
<div id="loginCard">
<label>
Enter a Username to continue<br>
<input type="text" id="u" onkeyup="main(event)"
placeholder="username">
</label>
</div>
</body>
</html>

Home.html:
<html>
<head>

<link href='home.css' rel='stylesheet'>


<link href='css/chats.css' rel='stylesheet'>
<link href='css/chatrooms.css' rel='stylesheet'>
<link href='css/profile.css' rel='stylesheet'>
<script src='home.js'></script>
<scriptsrc='js/chats.js'></script>
<scriptsrc='js/chatrooms.js'></script>
<scriptsrc='js/profile.js'></script>
</head>
<body>
<div id="load">Loading</div>
<div id='header'>
<div><img id="fji" src="img/fji.svg">FreeJi</div>
<div id="user">Logged In as </div>
</div>
<div id='navBar'>
<div id='navChats' class='navBtn' onclick='displayC();'>Chats</div>
<div id='navChatRooms' class='navBtn'
onclick='displayCR();'>Chatrooms</div>
<div id='navProfile' class='navBtn'
onclick='displayP();'>Profile</div>
</div>
<div id='body'>
<div id='sChat' class='screen'>
<div id='chatListCnt'>
<div id='chatSearch'>
<input type='search' onkeyup="search()"
placeholder='Search names...' id="chatSearchBox">
</div>
<div id='chatList'></div>
</div>
<div id='convo'>
<div id="convoHeader">
<img id="convoAvt">
<div id="convoName">convoName</div>
</div>
<div id="msgCnt"></div>
<div id="yConvoFooter">
<input type="text"
onkeydown="handleEnter(this,event)" placeholder="Start Front
typing..." class="msgBox" id="yMsgBox">
<button id="send" style="background:
green;" onclick="ySend()">&gt;</button>
</div>
<div id="convoFooter">
<input type="text"
onkeydown="handleEnter(this,event)" placeholder="Start typing..."
id="msgBox">
<button id="send"
onclick="send()">&gt;</button>
</div>
</div>
</div><!---
--><div id='sChatRooms' class='screen'>
<div id='chatListCnt'>
<div id='chatSearch'>
<input type='search' placeholder='Search
names...' onkeyup="searchCR()" class="chatSearchBox"
id="crSearchBox">
</div>
<div class='chatList' id="crList"></div>
</div>
<div id='convo'>
<div id="convoHeader">
<img class="convoAvt" id="cConvoAvt">
<div class="convoName"
id="cConvoName">convoName</div>
</div>
<div class="cMsgCnt" id="cMsgCnt"></div>
<div id="yConvoFooter1"
class="yConvoFooter">
<input type="text" placeholder="Start
typing..." onkeydown="handleEnter(this,event)" class="msgBox"
id="ycMsgBox1">
<button class="send" id="cSend"
onclick="cySend1()">&gt;</button>
</div>
<div id="yConvoFooter2"
class="yConvoFooter">
<input type="text" placeholder="Start
typing..." onkeydown="handleEnter(this,event)" class="msgBox"
id="ycMsgBox2">
<button class="send" id="cSend"
onclick="cySend2()">&gt;</button>
</div>
<div id="convoFooter">
<input type="text" placeholder="Start
typing..." onkeydown="handleEnter(this,event)" class="msgBox"
id="cMsgBox">
<button class="send" id="cSend"
onclick="cSend()">&gt;</button>
</div>
</div>
</div><!---
--><div id='sProfile' class='screen' >
<center id="pBody">
<br>
<img id='pAvt' src="https://asfm.ml/favicon.ico">
<br>
<label>Name<textarea id='pName' type="text"
onkeydown="pNext(event)" readonly>Shaikh Amaan FM</textarea></label>

<label>Bio<textarea id='pBio' onkeydown="pNext(event)"


readonly>17 years (+2 now) old Indian. 𝗡𝗢𝗞𝗜𝗔 ##MHSSPIAN Lumia 1020
brought out the photographer in me. Have high
ambitions.</textarea></label>

<label>Mail<textarea id='pMail' onkeydown="pNext(event)"


readonly>thisisamaan.s@gmail.com</textarea></label>

<label>Location<textarea id='pLoc'
onkeydown="pNext(event)" readonly>Mumbai, India</textarea></label>
<br>
<button id='pEdit' onclick='pEdit()'>Edit </button>

</center>
</div><!---
-->
</div>
</body>
</html>

Home.css
*{
margin:0;
box-sizing:border-box;
//border:solid 1px;
white-space:nowrap;
font-family:arial;
}
html,body {
height:100%; width:100%;
overflow: hidden;
}

html {
background:url("img/bg.jpg");
background-size:cover;
}

body {
width:70%;
margin:auto 15%;
box-shadow: 0px 0px 10px black;
position: absolute;
top:0%;
background:rgba(255,255,255,0.4);
}
html:before {
content:" ";
display: block;
background: white;
z-index:5;
height:110%;
width:20%;
position:absolute;
top:-5%; left:-5%;
box-shadow: 0px 0px 10px black inset;
}
html:after {
content:" ";
display: block;
background: white;
z-index:5;
height:110%;
width:20%;
position: absolute;
top:-5%;
right:-5%;
box-shadow: 0px 0px 10px black inset;
}

#load {
height: 100%;
width:100%;
opacity:0;
background: black;
position: fixed;
top:0; left:0;
z-index:10;
transform: scaleY(0);
transition:all .4s;
font-size:300%;
font-weight:bold;
color:white;
text-align:center;
padding-top:40%;
}

#header,#navBar {
position:absolute;
top:0; right:0;
height:5%;
width:100%;
background: white;
}

#header{
font-size:200%;
color:#003cff;
font-weight:bold;
padding-left:2%;
text-align:center;
border-bottom:solid 1px lightgrey;
}

#header div {
display: inline-block;
width:20%;
overflow:visible;
}
#fji {
height:100%;
border-radius: 100%;
padding:.3%;
background:#003cff;
float:left;
}
#user {
font-size:50%;
font-weight:normal;
text-align: right;
display:inline-block;
position: absolute;
right:5%; top:2%;
}

#navBar {
top:5%;
height:8%;
}

.navBtn {
height:100%; width:auto;
display:inline-block;
text-align: center;
font-size:150%;
padding:1%;
margin:auto 2%;
}

#body {
position:absolute;
top:13%; right:0;
height:87%; width:100%;
white-space:nowrap;
transform:translateX(0%);
transition:all 1s;
transition-timing-function: cubic-bezier(0.1,0.9,0.2,1);
border:solid 1px;
}
.screen {
display:inline-block;
height:100%;
width:100%;
border-top:solid 1px;
white-space: nowrap;
position: absolute;
top:0;
text-align:center;
}

#sChat {
left:0;
}

#sChatRooms {
left:100%;
}

#sProfile {
left:200%;
}

Home.js:
function $(id){
returndocument.getElementById(id);
}
function $_(className){
returndocument.getElementsByClassName(className);
}

functiondisplayC(){
//$('body').style.webkitTransform ="translateX(0)";
$('body').style.transform ="translateX(0)";
var a = $_("navBtn");
for(i=0; i<a.length; i++){
a[i].style.color = "rgba(0,60,255,0.3)";
a[i].style.fontWeight="normal";
}

$('navChats').style.color="rgba(0,60,255,1)";
$('navChats').style.fontWeight="bold";
}

functiondisplayCR(){
//$('body').style.webkitTransform ="translateX(-100%)";
$('body').style.transform ="translateX(-100%)";
var a = $_("navBtn");
for(i=0; i<a.length; i++){
a[i].style.color = "rgba(0,60,255,0.3)";
a[i].style.fontWeight="normal";
}

$('navChatRooms').style.color="rgba(0,60,255,1)";
$('navChatRooms').style.fontWeight="bold";
}

functiondisplayP(){
//$('body').style.webkitTransform="translateX(-200%)";
$('body').style.transform="translateX(-200%)";
var a = $_("navBtn");
for(i=0; i<a.length; i++){
a[i].style.color = "rgba(0,60,255,0.3)";
a[i].style.fontWeight="normal";
}

$('navProfile').style.color="rgba(0,60,255,1)";
$('navProfile').style.fontWeight="bold";
}

functionhandleEnter(obj,e) {
if(e.keyCode!=13){ return; }
switch(obj.id){
case "msgBox" : return send();
case "yMsgBox" : return ySend();
case "cMsgBox" : return cSend();
case "ycMsgBox1" : return cySend1();
case "ycMsgBox2" : return cySend2();
}
}

function main(){
displayC();
listChats();
listChatRooms();
$("user").innerHTML+=document.cookie.split("=")[1];
}

window.addEventListener("load",main);

Chat.js:
varchatCard = function(elm,img,name,userId){
varthisObj =this;
this.name = name; this.img = img; this.userId = userId;
var card = document.createElement("div");
card.setAttribute("class","cCard");
this.card = card;

varavt = document.createElement("img");
avt.setAttribute("class","cAvt");
avt.src=img;
card.appendChild(avt);

varnameElm = document.createElement("div");
nameElm.setAttribute("class","cName");
nameElm.innerHTML = name;
card.appendChild(nameElm);

card.onclick = function(){
loadChat(thisObj);
contacts.forEach(function(v){
v.card.style.background = "white";
});
thisObj.card.style.background ="skyblue";
};

this.display = function(){
elm.appendChild(card);
};

};

functionloadChat(obj){
varcnt = $("msgCnt");
cnt.innerHTML ="";
isLastMe=false;
$("convoName").innerHTML = obj.name;
$("convoAvt").src = obj.img;
}
var contacts =[];
functionlistChats(){

contacts.push(new
chatCard($("chatList"),"https://asfm.ml/favicon.ico","Farhanaaz",101
));
contacts.push(new
chatCard($("chatList"),"https://asfm.ml/favicon.ico","Afsha",102));
contacts.push(new
chatCard($("chatList"),"https://asfm.ml/favicon.ico","Fodkar",103));
contacts.push(new
chatCard($("chatList"),"https://asfm.ml/favicon.ico","Shahzad",104))
;
contacts.push(new
chatCard($("chatList"),"https://asfm.ml/favicon.ico","Sufyan",105));
contacts.push(new
chatCard($("chatList"),"https://asfm.ml/favicon.ico","Kothiwala",106
));
contacts.push(new
chatCard($("chatList"),"https://asfm.ml/favicon.ico","Yunus",107));
contacts.push(new
chatCard($("chatList"),"https://asfm.ml/favicon.ico","Sneha",108));
contacts.push(new
chatCard($("chatList"),"https://asfm.ml/favicon.ico","Arman",109));
contacts.push(new
chatCard($("chatList"),"https://asfm.ml/favicon.ico","Phudinawala",1
10));
contacts.push(new
chatCard($("chatList"),"https://asfm.ml/favicon.ico","Sumaira",111))
;
contacts.push(new
chatCard($("chatList"),"https://asfm.ml/favicon.ico","Ashmiza",112))
;
contacts.push(new
chatCard($("chatList"),"https://asfm.ml/favicon.ico","Shaikh Amaan
FM",113));
contacts.push(new
chatCard($("chatList"),"https://asfm.ml/favicon.ico","Faiz",114));
contacts.push(new
chatCard($("chatList"),"https://asfm.ml/favicon.ico","Khadeeja",115)
);
contacts.push(new
chatCard($("chatList"),"https://asfm.ml/favicon.ico","Noman",116));
contacts.push(new
chatCard($("chatList"),"https://asfm.ml/favicon.ico","Saba",117));
contacts.push(new
chatCard($("chatList"),"https://asfm.ml/favicon.ico","Sana",118));
contacts.push(new
chatCard($("chatList"),"https://asfm.ml/favicon.ico","Shumaila",119)
);
contacts.push(new
chatCard($("chatList"),"https://asfm.ml/favicon.ico","Urooj",120));
contacts.push(new
chatCard($("chatList"),"https://asfm.ml/favicon.ico","Wasima",121));
contacts.push(new
chatCard($("chatList"),"https://asfm.ml/favicon.ico","Shirgaonkar",1
22));
contacts.push(new
chatCard($("chatList"),"https://asfm.ml/favicon.ico","Zaryab",123));
contacts.push(new
chatCard($("chatList"),"https://asfm.ml/favicon.ico","Atika",124));
contacts.push(new
chatCard($("chatList"),"https://asfm.ml/favicon.ico","Moin",125));
contacts.push(new
chatCard($("chatList"),"https://asfm.ml/favicon.ico","Aamir",126));
contacts.push(new
chatCard($("chatList"),"https://asfm.ml/favicon.ico","Naved",127));

contacts.forEach(function(v){
v.display();
});
loadChat(contacts[13]);
}
varisLastMe=false;
varMeMessage = function(msg){
varcnt = $("msgCnt");
var box = document.createElement("div");

if(isLastMe) {
box.setAttribute("class","MeMessage");
}
else{
box.setAttribute("class","FirstMeMessage");
isLastMe=true;
}

box.innerHTML = msg;
cnt.appendChild(box);
setTimeout(function(){ box.style.transform = "scale(1,1)"; },100);
};

varYouMessage = function(msg){
varcnt = $("msgCnt");
var box = document.createElement("div");

if(!isLastMe) {
box.setAttribute("class","YouMessage");
}
else{
box.setAttribute("class","FirstYouMessage");
isLastMe=false;
}

box.innerHTML = msg;
cnt.appendChild(box);
setTimeout(function(){ box.style.transform = "scale(1,1)"; },100);
};

function send(){

if($("yConvoFooter").style.transform!="translateY(-120%)") {
$("yConvoFooter").style.transform="translateY(-120%)";
}
if($("msgBox").value=="") { return; }
newMeMessage($("msgBox").value);
$("msgCnt").scrollTop = $("msgCnt").scrollHeight;
}

functionySend(){
if($("yMsgBox").value=="") { return; }
newYouMessage($("yMsgBox").value);
$("msgCnt").scrollTop = $("msgCnt").scrollHeight;
}
/////////////////////////////////////////////////////

varasfmDummy;
function search(){
$("chatList").innerHTML="";
varstr = $("chatSearchBox").value;
var r = new RegExp(str,"i");
asfmDummy =r;
contacts.forEach(
function(v){
if(r.test(v.name)){
v.display();
}
}
);
}

Chat.css:
#chatListCnt {
height:100%;
width:40%;
position: absolute;
left:0%;
top:0%;
border-right:solid 2px;
}

#chatSearch {
position: absolute;
top:2.5%;
left:1%;
height:5%;
width:98%;
background:white;
border-radius:100px;
}
#chatSearchBox, .chatSearchBox {
height:100%;
width:90%;
display: inline-block;
border:solid 1px;
border-width: 0;
padding-left:2%;
position:absolute;
left:0; top:0;
background: transparent;
}
#chatSearch:after{
content:"🔍";
position: absolute;
right:2%;
top:5%;
text-align: center;
color:white;
height:100%; width:10%;
}

#chatList, .chatList {
height:90%;
width:100%;
position: absolute;
top:10%; left:0;
background: rgba(255,255,255,0.3);
overflow-y:scroll;
}

#convo {
height:100%;
width:60%;
display: inline-block;
position: absolute;
right:0;
top:0;
}

#convoHeader {
height:10%;
width:100%;
position:absolute;
top:0; right:0;
background:rgba(0,60,255,0.9);
color:white;
}
#convoAvt, .convoAvt {
height:80%;
width:10%;
background: black;
border-radius:100%;
position:absolute;
top:10%; left:5%;
}
#convoName, .convoName {
display:inline-block;
width:80%;
height:70%;
position:absolute;
top:30%; right:0;
}

.cCard, .crCard {
height:10%;
width:100%;
position: relative;
padding:2% 5%;
border-bottom:solid 1px;
background:white;
transition: all .3s;
}
.cAvt, .crAvt {
height:100%;
width:12%;
float:left;
background: black;
border-radius: 100%;
}
.cName, .crName {
display: inline-block;
margin-top:2.5%;
}

#msgCnt, #cMsgCnt {
height:80%;
width:100%;
position: absolute;
top:10%;
right:0;
overflow-y:scroll;
scroll-behavior: smooth;
padding-bottom: 20%;
}

.MeMessage, .FirstMeMessage {
float:right;
clear:both;
max-width:70%;
min-width:30%;
background:white;
color:#003cff;
padding:2%;
white-space: pre-wrap;
word-wrap:break-word;
text-align: right;
margin:1%;
margin-right:5%;
border-radius: 10px;
transform: scale(0,0);
transform-origin: right;
transition:all 0.5s;
}

.FirstMeMessage:after{
content: " ";
position: absolute;
top:0; right:-7.5px;
height:0px; width:0px;
border-style: solid;
border-width: 7.5px;
border-color:white transparent transparent white;
}
.YouMessage, .FirstYouMessage {
float:left;
clear:both;
max-width:70%;
min-width:30%;
background:#003cff;
color:white;
padding:2%;
white-space: pre-wrap;
word-wrap:break-word;
text-align: left;
margin:1%;
margin-right:5%;
border-radius: 10px;
transform: scale(0,0);
transform-origin: left;
transition:all 0.5s;
}

.FirstYouMessage:before{
content: " ";
position: absolute;
top:0; left:-7.5px;
height:0px; width:0px;
border-style: solid;
border-width: 7.5px;
border-color:#003cff #003cff transparent transparent;
}

#convoFooter, #yConvoFooter, .yConvoFooter {


position: absolute;
bottom:2%;
left:0;
height:8%;
width:100%;
transition:all .5s;
}
#msgBox, .msgBox {
width:80%;
height:90%;
position: absolute;
left:5%; top:5%;
border:none;
border-radius:100px;
padding: 10px;
}
#send, .send {
height:100%;
width:10%;
color:white;
font-size:200%;
border-radius:100%;
background:rgba(0,60,255,1);
position: absolute;
right:2.5%;
border:none;
}

Chatroom.js
varchatRoomCard = function(elm,img,name,userId){
varthisObj =this;
this.name = name; this.img = img; this.userId = userId;

var card = document.createElement("div");


card.setAttribute("class","crCard");
this.card = card;

varavt = document.createElement("img");
avt.setAttribute("class","crAvt");
avt.src=img;
card.appendChild(avt);

varnameElm = document.createElement("div");
nameElm.setAttribute("class","crName");
nameElm.innerHTML = name;
card.appendChild(nameElm);

card.onclick = function(){
loadChatRoom(thisObj);
chatRooms.forEach(function(v){
v.card.style.background = "white";
});
thisObj.card.style.background ="skyblue";
};

this.display = function(){
elm.appendChild(card);
};

};

functionloadChatRoom(obj){
varcnt = $("cMsgCnt");
cnt.innerHTML ="";
cisLastMe=false;
$("cConvoName").innerHTML = obj.name;
$("cConvoAvt").src = obj.img;
}

varcisLastMe=false;
varcMeMessage = function(msg){
varcnt = $("cMsgCnt");
var box = document.createElement("div");

if(isLastMe) {
box.setAttribute("class","cMeMessage");
}
else{
box.setAttribute("class","cFirstMeMessage");
cisLastMe=true;
}

box.innerHTML = msg;
cnt.appendChild(box);
setTimeout(function(){ box.style.transform = "scale(1,1)"; },100);
};

varcYouMessage = function(s,c,msg){
varcnt = $("cMsgCnt");
varboxL = document.createElement("span");
boxL.innerHTML=s;
boxL.style.margin ="1";
boxL.style.color = c;
boxL.style.display ="block";
boxL.style.fontSize ="70%";
boxL.style.position="absolute";
boxL.style.top="1%";
var box = document.createElement("div");
box.appendChild(boxL);

if(!cisLastMe) {
box.setAttribute("class","cYouMessage");
}
else{
box.setAttribute("class","cFirstYouMessage");
cisLastMe=false;
}

box.innerHTML += msg;
cnt.appendChild(box);
setTimeout(function(){ box.style.transform = "scale(1,1)"; },100);
};

functionloadChatRoom(obj){
varcnt = $("cMsgCnt");
cnt.innerHTML ="";
cisLastMe=false;
$("cConvoName").innerHTML = obj.name;
$("cConvoAvt").src = obj.img;
}
varchatRooms =[];
functionlistChatRooms(){

chatRooms.push(new
chatRoomCard($("crList"),"https://asfm.ml/favicon.ico","IFTY
OFFICIAL",101));
chatRooms.push(new
chatRoomCard($("crList"),"https://asfm.ml/favicon.ico","IFTY
UNOFFICIAL",102));
chatRooms.push(new
chatRoomCard($("crList"),"https://asfm.ml/favicon.ico","Windows
Phone fan hub",103));
chatRooms.push(new
chatRoomCard($("crList"),"https://asfm.ml/favicon.ico","apk2appx",10
4));
chatRooms.push(new
chatRoomCard($("crList"),"https://asfm.ml/favicon.ico","Nokia
fans",105));
chatRooms.push(new
chatRoomCard($("crList"),"https://asfm.ml/favicon.ico","winsta",106)
);
chatRooms.push(new
chatRoomCard($("crList"),"https://asfm.ml/favicon.ico","dev2dev",107
));
chatRooms.push(new
chatRoomCard($("crList"),"https://asfm.ml/favicon.ico","Family",108)
);
chatRooms.push(new
chatRoomCard($("crList"),"https://asfm.ml/favicon.ico","Friends",109
));
chatRooms.push(new
chatRoomCard($("crList"),"https://asfm.ml/favicon.ico","School",110)
);
chatRooms.push(new
chatRoomCard($("crList"),"https://asfm.ml/favicon.ico","Work",111));
chatRooms.push(new
chatRoomCard($("crList"),"https://asfm.ml/favicon.ico","Other",112))
;
chatRooms.push(new
chatRoomCard($("crList"),"https://asfm.ml/favicon.ico","Shaikh Amaan
FM",113));
chatRooms.push(new
chatRoomCard($("crList"),"https://asfm.ml/favicon.ico","Other",114))
;
chatRooms.push(new
chatRoomCard($("crList"),"https://asfm.ml/favicon.ico","Other",115))
;
chatRooms.push(new
chatRoomCard($("crList"),"https://asfm.ml/favicon.ico","Other",116))
;
chatRooms.push(new
chatRoomCard($("crList"),"https://asfm.ml/favicon.ico","Other",117))
;
chatRooms.push(new
chatRoomCard($("crList"),"https://asfm.ml/favicon.ico","Other",118))
;
chatRooms.push(new
chatRoomCard($("crList"),"https://asfm.ml/favicon.ico","Other",119))
;
chatRooms.push(new
chatRoomCard($("crList"),"https://asfm.ml/favicon.ico","Other",120))
;
chatRooms.push(new
chatRoomCard($("crList"),"https://asfm.ml/favicon.ico","Othera",121)
);
chatRooms.push(new
chatRoomCard($("crList"),"https://asfm.ml/favicon.ico","Otherr",122)
);
chatRooms.push(new
chatRoomCard($("crList"),"https://asfm.ml/favicon.ico","Other",123))
;
chatRooms.push(new
chatRoomCard($("crList"),"https://asfm.ml/favicon.ico","Other",124))
;
chatRooms.push(new
chatRoomCard($("crList"),"https://asfm.ml/favicon.ico","MOther",125)
);
chatRooms.push(new
chatRoomCard($("crList"),"https://asfm.ml/favicon.ico","Other",126))
;
chatRooms.push(new
chatRoomCard($("crList"),"https://asfm.ml/favicon.ico","Other",127))
;

chatRooms.forEach(function(v){
v.display();
});

loadChatRoom(chatRooms[3]);
}

functioncSend(){
if($("yConvoFooter1").style.transform!="translateY(-120%)") {
$("yConvoFooter1").style.transform="translateY(-120%)";
$("yConvoFooter2").style.transform="translateY(-240%)";
}

if($("cMsgBox").value=="") { return; }

newcMeMessage($("cMsgBox").value);
$("cMsgCnt").scrollTop = $("msgCnt").scrollHeight;
}

function cySend1(){

if($("ycMsgBox1").value=="") { return; }
newcYouMessage("Sender 1","lightgreen",$("ycMsgBox1").value);
$("msgCnt").scrollTop = $("msgCnt").scrollHeight;
}
function cySend2(){
if($("ycMsgBox2").value=="") { return; }
newcYouMessage("Sender 2","pink",$("ycMsgBox2").value);
$("msgCnt").scrollTop = $("msgCnt").scrollHeight;
}

functionsearchCR(){
$("crList").innerHTML="";
varstr = $("crSearchBox").value;
var r = new RegExp(str,"i");
asfmDummy =r;
chatRooms.forEach(
function(v){
if(r.test(v.name)){
v.display();
}
}
);
}

Chatroom.css

.crCard {
height:15%;
border-radius: 20px;
margin:2% auto;
}

.cMeMessage, .cFirstMeMessage {
float:right;
clear:both;
max-width:70%;
min-width:30%;
background:white;
color:#003cff;
padding:2%;
white-space: pre-wrap;
word-wrap:break-word;
text-align: right;
margin:1%;
margin-right:5%;
border-radius: 10px;
transform: scale(0,0);
transform-origin: right;
transition:all 0.5s;
}

.cFirstMeMessage:after{
content: " ";
position: absolute;
top:0; right:-7.5px;
height:0px; width:0px;
border-style: solid;
border-width: 7.5px;
border-color:white transparent transparent white;
}

.cYouMessage, .cFirstYouMessage {
float:left;
clear:both;
max-width:70%;
min-width:30%;
background:#003cff;
color:white;
padding:2%;
padding-top:5%;
white-space: pre-wrap;
word-wrap:break-word;
text-align: left;
margin:1%;
margin-right:5%;
border-radius: 10px;
transform: scale(0,0);
transform-origin: left;
transition:all 0.5s;
}

.cFirstYouMessage:before{
content: " ";
position: absolute;
top:0; left:-7.5px;
height:0px; width:0px;
border-style: solid;
border-width: 7.5px;
border-color:#003cff #003cff transparent transparent;
}

Profile.js
functionpEdit(){
$("pEdit").onclick=function(){};

varcnt = [$("pName"),$("pBio"),$("pMail"),$("pLoc")];

cnt.forEach(function(v){
v.readOnly = false;
v.style.background ="rgba(255,255,255,0.7)";
v.style.borderBottom = "solid 1px";
v.style.color="black";
});
cnt[0].focus();
varsaveBtn = document.createElement("button");
saveBtn.addEventListener("click",pSave);
saveBtn.innerHTML ="save";
saveBtn.setAttribute("id","pSave");
$("pBody").appendChild(saveBtn);
$("pAvt").onclick=changeAvt;
}

functionchangeAvt(){
varfilePicker = document.createElement("input");
filePicker.type = "file";
filePicker.accept = ".jpg,.jpeg,.png";
$("load").style.transform="scaleY(1)";
$("load").style.opacity =0.7;
filePicker.click();
filePicker.onchange = function(){
$("load").style.transform="scaleY(0)";
$("load").style.opacity =0.7;
if(filePicker.files[0]){
var f = filePicker.files[0];
if(f.type !="image/jpeg" &&f.type !="image/jpg" &&f.type
!="image/png" ){
alert("invalid file");
}
else {
$("pAvt").src = URL.createObjectURL(f);
}
}
};

}
varasfmDummy;
functionpNext(e){
varcnt = [$("pName"),$("pBio"),$("pMail"),$("pLoc")];
if(e.keyCode==13) {
e.preventDefault();
switch(e.srcElement){
casecnt[0]: return cnt[1].focus();
casecnt[1]: return cnt[2].focus();
casecnt[2]: return cnt[3].focus();
casecnt[3]: return $("pSave").click();
}
}
}

functionpSave(){

varcnt = [$("pName"),$("pBio"),$("pMail"),$("pLoc")];
var errors="";
var r;
////Validation///
r = /[a-z]{4,15}/i; ( r.test(cnt[0].value)
)?errors+="":errors+="Invalid Name\n";
r = /.{20,100}/i; ( r.test(cnt[1].value)
)?errors+="":errors+="Invalid Bio\n";
r = /\w+@\w+\.\w{2,5}/i; ( r.test(cnt[2].value)
)?errors+="":errors+="Invalid E-mail\n";
r = /.{8,}/i; ( r.test(cnt[3].value)
)?errors+="":errors+="Invalid Location\n";

if(errors!=""){
return alert("Error(s):\n"+errors);
}
//////

$("pEdit").onclick=pEdit;

$("pAvt").onclick = function(){};
cnt.forEach(function(v){
v.readOnly = true;
v.style.background ="transparent";
v.style.borderBottom = "solid 0px";
v.style.color="black";
v.blur();
});
$("pBody").lastChild.style.display="none";
}

Profile.css:
#pAvt {
height:30%;
width:20%;
border-radius:100%;
background:black;
display:block;
}

#pBody {
overflow: clip;
white-space:normal;
}

#sProfile label {
display:inline-block;
margin:2% 2.5%;
font-size: 140%;
font-weight: bold;
background:white;
border-radius:20px;
color:#003cff;
width:43%;
padding:2%;
box-shadow: 0px 0px 10px black;
}

#sProfile label * {
display:block;
overflow:visible;
background:transparent;
border:none;
text-align: center;
font-weight:normal;
transition:all 0.5s;
height:5%;
width:70%;
resize:none;
padding:0;
font-size:70%;
}

#pBio {
white-space: pre-wrap;
resize: none;
width:50%;
}
#pMail {
width:auto;
overflow: visible;
}

#pEdit, #pSave {
background:#003cff;
border:none;
color:white;
height:5%; width:30%;
font-size:150%;
transition:all .5s;
}

#pSave {
background:green;
}

You might also like