Material Chat app Interface with ReactJS
How do I make an material chat app interface with reactjs?
What is a material chat app interface with reactjs? How do you make a material chat app interface with reactjs? This script and codes were developed by Ajala Comfort on 11 January 2023, Wednesday.
Material Chat app Interface with ReactJS Previews
Material Chat app Interface with ReactJS - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Material Chat app Interface with ReactJS</title> <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,700" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css" rel="stylesheet"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <body> <div id="space"></div>
</body> <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script src='https://fb.me/react-15.0.1.min.js'></script>
<script src='https://fb.me/react-with-addons-15.0.1.min.js'></script>
<script src='https://fb.me/react-dom-15.0.1.min.js'></script> <script src="js/index.js"></script>
</body>
</html>Material Chat app Interface with ReactJS - Script Codes CSS Codes
body{margin:0;padding:0;width:100%;height:720px;background:#ecf0f1;}
#space{min-height:500px;margin-left:30%;margin-top:100px;}
div {background-repeat:no-repeat;background-size:cover;background-position:center;}
#phone{width:350px;height:500px;}
#phone > div{width:100%;height:100%;background-repeat:no-repeat;background-position:center;background-size:cover;}
header{height:100px;}
/**************PROFILE*********/
#profile > header, #profile > div{background:#3949ab}
#profile > div{ height:400px;}
#profile header .fa{color:white;font-size:25px;width:46.5%;margin-top:20px;font-weight:100;}
#profile .fa-times{margin-left:2.5%;}
#profile .fa-cog{text-align:right;}
#profileimage{width:100px;height:100px;border-radius:50%;margin:auto;}
#content p{color:white;font-size:15px;text-align:center;font-weight:300;text-transform:uppercase;}
#content button{background:#ff9800;margin-left:145px;margin-top:50px;}
/*************CHAT ******************/
#header{background:#1abc9c;height:50px;}
#chat > #header > p{color:white;font-size:15px;width:40%;margin-left:10%;height:50px;padding-top:10px;text-transform:uppercase;}
#header i{color:white;width:20%;}
#header i, #header p{float:left;height:25px;padding-top:12.5px;}
#chatroom{height:390px;}
#inpuroom{height:50px;}
#inpuroom > .fa{width:15%;height:50px;padding-top:12.5px;}
#inpuroom input{width:70%;border:none;background-color:#cfd8dc;height:50px;}
#inpuroom .fa, #inpuroom input{float:left;color:gray;}
#chat .fa{text-align:center;}
.fa-camera{background:rgba(39, 174, 96,0.5);}
.fa-paper-plane-o{background:rgba(241, 196, 15,0.5);}
#chatroom ul{width:100%;height:300px;}
#chatroom li{width:70%;min-height:60px;color:#34495e;margin-top:10px;padding-top:10px;padding-left:5px;border-radius:10px;}
#chatroom li > div{display:inline-block;}
.textarea{width:60%;margin-left:2%;}
.leftpushed{background:rgba(149, 165, 166,0.1);margin-left:5%;}
.rightpushed{background:rgba(149, 165, 166,0.3);margin-left:25%;}
.leftpushed .profilePic{display:inline-block;}
.profilePic{width:30px;height:30px;border-radius:50%;}
/************************CONTACT'*************/
#contact > div{width:100%;} #C_header{background: #009688;height:50px;}
#C_header > p{color:white;width:70%;margin-left:10%;font-weight:800;float:left;}
#C_header i{width:20%;color:white;}
#C_header i,#C_header > p{float:left;height:25px;padding-top:12.5px;}
#contact_list{min-height:300px;}
#contact_list ul{width:100%;height:100%;}
#contact_list ul li{height:80px;width:100%;}
#contact_list div{float:left;height:100%;}
#contact_list .pic{width:30%;}
#contact_list .personInfo{width:70%;}
.personInfo{padding-left:5%;}
.personInfo .name{color:#34495e;font-weight:800;}
.personInfo .status{width:10px;height:10px;border-radius:50%;box-shadow:1px 1px rgba(20,20,20,0.5)}
.green{background:#27ae60;}
.gold{background:gold;}
.fa{cursor:pointer;}
Material Chat app Interface with ReactJS - Script Codes JS Codes
"use strict";
var Profile = React.createClass({ displayName: "Profile", getInitialState: function getInitialState() { return { name: "Becky GoodHair", link: "https://hd.unsplash.com/photo-1445633883498-7f9922d37a3f" }; }, render: function render() { var style = { backgroundImage: 'url(' + this.state.link + ')' }; return React.createElement( "div", { id: "profile" }, React.createElement( "header", null, React.createElement("i", { className: "fa fa-times", "aria-hidden": "true" }), React.createElement("i", { className: "fa fa-cog", "aria-hidden": "true" }) ), React.createElement( "div", { id: "content" }, React.createElement("div", { id: "profileimage", style: style }), React.createElement( "p", null, this.state.name ), React.createElement( "button", { className: "btn-floating btn-large waves-effect waves-light", onClick: this.props.statusChange.bind(null, "contact") }, React.createElement("i", { className: "fa fa-long-arrow-right", "aria-hidden": "true" }) ) ) ); }
});
var Chat = React.createClass({ displayName: "Chat", getInitialState: function getInitialState() { return { user: "Becky GoodHair", chat: [{ name: "Becky GoodHair", link: "https://hd.unsplash.com/photo-1445633883498-7f9922d37a3f", message: "What'z gud bey?" }, { name: this.props.person.name, link: "https://fuzfeed.com/wp-content/uploads/2014/09/Beyonc%C3%A9-newest-photos.jpg", message: "My Money!..." }] }; }, render: function render() { return React.createElement( "div", { id: "chat" }, React.createElement( "div", { className: "card", id: "header" }, React.createElement( "p", null, this.props.person.name ), React.createElement("i", { className: "fa fa-long-arrow-left", "aria-hidden": "true", onClick: this.props.statusChange.bind(null, "contact") }) ), React.createElement( "div", { id: "chatroom" }, React.createElement( "ul", null, this.state.chat.map(function (msg, i) { var style = { backgroundImage: 'url(' + msg.link + ')' }; return msg.name === this.state.user ? React.createElement( "li", { className: "leftpushed" }, React.createElement( "div", { className: "textarea" }, msg.message ) ) : React.createElement( "li", { className: "rightpushed" }, React.createElement( "div", { className: "textarea" }, msg.message ) ); }.bind(this)) ) ), React.createElement( "div", { id: "inpuroom" }, React.createElement("i", { className: "fa fa-camera", "aria-hidden": "true" }), React.createElement("input", { type: "text", id: "message" }), React.createElement("i", { className: "fa fa-paper-plane-o", "aria-hidden": "true" }) ) ); }
});
var ContactList = React.createClass({ displayName: "ContactList", getInitialState: function getInitialState() { return { contact: [{ name: "Bangtan Boys", link: "http://www.allkpop.com/upload/2015/11/af_org/bts_1446583057_af_org.jpg", online: false }, { name: "Beyonce", link: "https://fuzfeed.com/wp-content/uploads/2014/09/Beyonc%C3%A9-newest-photos.jpg", online: true }, { name: "Rihanna", link: "http://pixel.nymag.com/imgs/daily/vulture/2016/01/27/27-rihanna.w529.h529.jpg", online: false }, { name: "Justin Timberlake", link: "http://vignette2.wikia.nocookie.net/simpsons/images/2/2a/Justin_timberlake.jpeg/revision/latest?cb=20150913223250", online: true }, { name: "Mary J Blige", link: "https://67.media.tumblr.com/610f911fac7fb699b8a23f40d39657e0/tumblr_nys71nCW4O1u7na33o7_1280.jpg", online: true }] }; }, render: function render() { return React.createElement( "div", { id: "contact" }, React.createElement( "div", { id: "C_header" }, React.createElement( "p", null, " Contact List" ), React.createElement("i", { className: "fa fa-long-arrow-left", "aria-hidden": "true", onClick: this.props.statusChange.bind(null, "profile") }) ), React.createElement( "div", { id: "contact_list" }, React.createElement( "ul", null, this.state.contact.map(function (person) { var style = { backgroundImage: 'url(' + person.link + ')' }; return React.createElement( "li", { onClick: this.props.partner.bind(null, person) }, React.createElement("div", { className: "pic", style: style }), React.createElement( "div", { className: "personInfo" }, React.createElement( "p", { className: "name" }, person.name ), React.createElement("p", { className: person.online ? "status green" : "status gold" }) ) ); }.bind(this)) ) ) ); }
});
var Phone = React.createClass({ displayName: "Phone", getInitialState: function getInitialState() { return { status: "profile", partner: {} }; }, switchStatus: function switchStatus(status) { return this.setState({ status: status }); }, partner: function partner(person) { //console.log(person) return this.setState({ status: "chat", partner: person }); }, render: function render() { return React.createElement( "div", { id: "phone", className: "card" }, this.state.status == "profile" ? React.createElement(Profile, { statusChange: this.switchStatus }) : null, this.state.status == "contact" ? React.createElement(ContactList, { statusChange: this.switchStatus, partner: this.partner }) : null, this.state.status == "chat" ? React.createElement(Chat, { person: this.state.partner, statusChange: this.switchStatus }) : null ); }
});
ReactDOM.render(React.createElement(Phone, null), document.getElementById("space"));
| Developer | Ajala Comfort |
| Username | AJALACOMFORT |
| Uploaded | January 11, 2023 |
| Rating | 3 |
| Size | 5,851 Kb |
| Views | 4,048 |
Do you need developer help for Material Chat app Interface with ReactJS?
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Ajala Comfort (AJALACOMFORT) Script Codes
| Name | Size |
| Intermediate Todo List with React.js | 6,191 Kb |
| Calender with ReactJS | 6,983 Kb |
| Calender Update | 6,157 Kb |
| My Porfolio | 5,245 Kb |
| Palindrome Word | 3,421 Kb |
| Second Website | 6,234 Kb |
| Math using Stacks | 5,686 Kb |
| COLOR PICKER | 8,468 Kb |
| Slide Show with ReactJs | 3,672 Kb |
| Hashtables | 1,836 Kb |
Create amazing SEO content with AI!
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Similar Scripts & Codes
| Name | Username | Size |
| Simple blog concept | Drew_mc | 2,666 Kb |
| LAMP PURE CSS with Animation | Dam62500 | 2,911 Kb |
| Search Box in Content Moves to Fixed Header | Chriscoyier | 2,768 Kb |
| Masonry | Uriuriuriu | 5,005 Kb |
| Resume | Rottingroom | 5,483 Kb |
| Sitemap generator for Sharepoint | Gyusza | 2,518 Kb |
| STIKHOI | Denmch | 7,122 Kb |
| Scroll Arrow | Robooneus | 4,437 Kb |
| Fullscreen audio play button | 72 | 2,148 Kb |
| GrcJS | Vino6 | 2,047 Kb |
Do you want hide your ip address?
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!