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

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()">></button>
</div>
<div id="convoFooter">
<input type="text"
onkeydown="handleEnter(this,event)" placeholder="Start typing..."
id="msgBox">
<button id="send"
onclick="send()">></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()">></button>
</div>
<div id="yConvoFooter2"
class="yConvoFooter">
id="ycMsgBox2">
onclick="cySend2()">></button>
</div>
<div id="convoFooter">
id="cMsgBox">
onclick="cSend()">></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%;
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;
text-align: center;
font-size:150%;
padding:1%;
margin:auto 2%;
}
#body {
position:absolute;
top:13%; right:0;
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 {
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%)";
}
$('navChatRooms').style.color="rgba(0,60,255,1)";
$('navChatRooms').style.fontWeight="bold";
}
functiondisplayP(){
//$('body').style.webkitTransform="translateX(-200%)";
$('body').style.transform="translateX(-200%)";
}
$('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){
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){
if(!isLastMe) {
box.setAttribute("class","YouMessage");
}
else{
box.setAttribute("class","FirstYouMessage");
isLastMe=false;
}
};
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);
}
/////////////////////////////////////////////////////
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%;
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;
}
#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%;
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 {
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 {
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%;
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%;
text-align: left;
margin:1%;
margin-right:5%;
transform-origin: left;
}
.FirstYouMessage:before{
content: " ";
position: absolute;
top:0; left:-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){
if(isLastMe) {
box.setAttribute("class","cMeMessage");
}
else{
box.setAttribute("class","cFirstMeMessage");
cisLastMe=true;
}
};
varcYouMessage = function(s,c,msg){
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%";
box.appendChild(boxL);
if(!cisLastMe) {
box.setAttribute("class","cYouMessage");
}
else{
box.setAttribute("class","cFirstYouMessage");
cisLastMe=false;
}
box.innerHTML += msg;
};
functionloadChatRoom(obj){
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
;
chatRooms.push(new
;
chatRooms.push(new
;
chatRooms.push(new
;
chatRooms.push(new
;
chatRooms.push(new
;
chatRooms.push(new
;
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
;
chatRooms.push(new
;
chatRooms.push(new
chatRoomCard($("crList"),"https://asfm.ml/favicon.ico","MOther",125)
);
chatRooms.push(new
;
chatRooms.push(new
;
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);
}
function cySend2(){
if($("ycMsgBox2").value=="") { return; }
newcYouMessage("Sender 2","pink",$("ycMsgBox2").value);
}
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%;
margin:2% auto;
}
.cMeMessage, .cFirstMeMessage {
float:right;
clear:both;
max-width:70%;
min-width:30%;
background:white;
color:#003cff;
padding:2%;
text-align: right;
margin:1%;
margin-right:5%;
transform-origin: right;
}
.cFirstMeMessage:after{
content: " ";
position: absolute;
top:0; right:-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%;
text-align: left;
margin:1%;
margin-right:5%;
transform-origin: left;
}
.cFirstYouMessage:before{
content: " ";
position: absolute;
top:0; left:-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){
if(e.keyCode==13) {
e.preventDefault();
switch(e.srcElement){
casecnt[0]: return cnt[1].focus();
casecnt[3]: return $("pSave").click();
}
}
}
functionpSave(){
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 {
margin:2% 2.5%;
font-size: 140%;
font-weight: bold;
background:white;
border-radius:20px;
color:#003cff;
width:43%;
padding:2%;
}
#sProfile label * {
display:block;
overflow:visible;
background:transparent;
border:none;
text-align: center;
font-weight:normal;
height:5%;
width:70%;
resize:none;
padding:0;
font-size:70%;
}
#pBio {
resize: none;
width:50%;
}
#pMail {
width:auto;
overflow: visible;
}
#pEdit, #pSave {
background:#003cff;
border:none;
color:white;
font-size:150%;
transition:all .5s;
}
#pSave {
background:green;
}

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

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

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

Uploaded by

Copyright:

Available Formats

CLIENT SIDE SCRIPTING (CSS)

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

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

INTRODUCTION TO WESTERN RAILWAYS 04

ACTUAL RESOURCES USED 20

Javascript Implementations in the project:

2. Objects and classes

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

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

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

#convoFooter, #yConvoFooter, .yConvoFooter {

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

You might also like