"react facebook comment"
Bootstrap 3.0.0 Snippet by evarevirus

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html><html class=''> <head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/macio2/pen/pbOgmX?limit=all&page=4&q=comment" /> <style class="cp-pen-styles">body { background-color: #e9ebee; color: #1d2129; } #app { background-color: #fff; font-family: helvetica; margin: 30px auto; width: 500px; border: 1px solid; border-color: #e5e6e9 #dfe0e4 #d0d1d5; border-radius: 3px; } .creator { position: relative; } .creator img { width: 40px; height: 40px; background-image: url(http://cp91279.biography.com/1000509261001/1000509261001_1822909398001_BIO-Biography-29-Innovators-Mark-Zuckerberg-115956-SF.jpg); background-size: cover; background-position: center; margin: 12px 0 0 12px; position: absolute; } .creator div { display: inline-block; margin-left: 60px; } .creator div p { font-size: 14px; } .creator div p:first-of-type { cursor: pointer; font-weight: bold; color: #365899; } .creator div p:first-of-type:hover { text-decoration: underline; } .creator div p:last-of-type { font-size: 12px; color: #90949c; margin-top: -10px; } .message { font-size: 14px; margin-top: 8px; padding: 0 12px; line-height: 18px; } .bar { width: calc(100% - 24px); border-top: 1px solid #e5e5e5; margin: 0 12px; } .bar .action-button { margin-left: 20px; display: inline-block; font-size: 12px; font-weight: bold; color: #7f7f7f; cursor: pointer; } .bar .action-button:before { content: ''; background-image: url(https://www.facebook.com/rsrc.php/v2/yo/r/7-oMGl7sBZ-.png); display: inline-block; height: 14px; margin: 0 6px -3px 0; width: 14px; background-repeat: no-repeat; background-size: auto; } .bar .action-button:first-of-type { margin: 0; } .bar .action-button:first-of-type:before { content: ''; background-position: -47px -164px; } .bar .action-button:nth-of-type(2):before { background-position: -32px -164px; } .bar .action-button:nth-of-type(3):before { background-position: -45px -181px; } .bar .action-button:hover { text-decoration: underline; } .single-comment { padding: 0 0 0 12px; margin: 0; } .single-comment:first-of-type { border-top: 1px solid #e1e2e3; padding-top: 12px; } .single-comment:first-of-type img { background-image: url(http://static.srcdn.com/slir/w730-h383-q90-c730:383/wp-content/uploads/Batman-Movies-Worst-Moments.jpg); } .single-comment:nth-of-type(2) img { background-image: url(http://cp91279.biography.com/1000509261001/1000509261001_1822909398001_BIO-Biography-29-Innovators-Mark-Zuckerberg-115956-SF.jpg); } .single-comment img { position: absolute; width: 32px; height: 32px; background-image: url(https://heatherchristenaschmidt.files.wordpress.com/2011/09/facebook_no_profile_pic2-jpg.gif); background-size: cover; background-position: center; border: none; } .single-comment .single-container { padding-left: 40px; padding-right: 20px; } .single-comment .single-container span { font-size: 12px; margin-left: 5px; } .single-comment .single-container span:first-of-type { cursor: pointer; font-weight: bold; color: #365899; font-size: 12px; margin: 0; } .single-comment .single-container span:first-of-type:hover { text-decoration: underline; } .single-comment .buttons { margin-top: 0; padding-left: 40px; } .single-comment .buttons p { display: inline-block; color: #365899; cursor: pointer; text-decoration: none; font-size: 12px; margin-right: 8px; margin-top: 5px; } .single-comment .buttons p:hover { text-decoration: underline; } .single-comment .buttons p:last-of-type { color: #90949c; cursor: auto; text-decoration: none; } .comment-section { background-color: #f6f7f9; margin: 0; } .input { margin-top: 0; background-color: #f6f7f9; padding: 4px 12px 8px 12px; } .input img { width: 32px; height: 32px; background-image: url(https://heatherchristenaschmidt.files.wordpress.com/2011/09/facebook_no_profile_pic2-jpg.gif); background-size: cover; background-position: center; border: none; position: absolute; } .input textarea { background: #fff; border: 1px solid #bdc7d8; box-sizing: border-box; cursor: text; width: calc(100% - 40px); margin-left: 40px; padding: 7px; font-family: helvetica; outline: none; resize: none; overflow: hidden; height: 32px; } </style></head><body> <!-- I do not own any off the used images. Also I'm a total beginner so any comments and suggestions would be awesome! This is not in any way connected with facebook, so don't worry, you won't post anything on your profile :) --> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://fb.me/react-15.1.0.min.js'></script><script src='https://fb.me/react-dom-15.1.0.min.js'></script> <script >"use strict"; var appId = "app"; var main = document.createElement("DIV"); main.id = appId; document.body.appendChild(main); var app = document.getElementById('app'); var Hour = React.createClass({ displayName: "Hour", getDefaultProps: function getDefaultProps() { return { time: 42 }; }, render: function render() { return React.createElement( "p", null, this.props.time, " h" ); } }); var Creator = React.createClass({ displayName: "Creator", getDefaultProps: function getDefaultProps() { return { name: "Mark Zuckerberg" }; }, render: function render() { return React.createElement( "div", { className: "creator" }, React.createElement("img", null), React.createElement( "div", null, React.createElement( "p", null, this.props.name ), React.createElement(Hour, { time: 4 }) ) ); } }); var Message = React.createClass({ displayName: "Message", render: function render() { return React.createElement( "p", { className: "message" }, "Omg it's snowing outside!" ); } }); var Action = React.createClass({ displayName: "Action", render: function render() { return React.createElement( "p", { className: "action-button" }, this.props.text ); } }); var Bar = React.createClass({ displayName: "Bar", render: function render() { return React.createElement( "div", { className: "bar" }, React.createElement(Action, { text: "Like!" }), React.createElement(Action, { text: "Comment" }), React.createElement(Action, { text: "Share" }) ); } }); var Comment = React.createClass({ displayName: "Comment", getDefaultProps: function getDefaultProps() { return { name: "Douglas Adams" }; }, render: function render() { return React.createElement( "div", { className: "single-comment" }, React.createElement("img", null), React.createElement( "div", { className: "single-container" }, React.createElement( "span", null, this.props.name ), React.createElement( "span", null, this.props.children ) ), React.createElement( "div", { className: "buttons" }, React.createElement(Action, { text: "Like!" }), React.createElement(Action, { text: "Respond" }), React.createElement(Hour, { time: this.props.time }) ) ); } }); var CommentSection = React.createClass({ displayName: "CommentSection", getInitialState: function getInitialState() { return { comments: [] }; }, _eachComment: function _eachComment(text, i) { return React.createElement( Comment, { key: i, index: i, removeComment: this._deleteComment }, text ); }, _addComment: function _addComment(text) { var arr = this.state.comments; arr.push(text); this.setState({ comments: arr }); }, _handleKeyPress: function _handleKeyPress(e) { if (e.key === "Enter") { this._addComment(this.refs.newText.value); this.refs.newText.value = ""; e.preventDefault(); } }, render: function render() { return React.createElement( "div", null, React.createElement( "div", { className: "comment-section" }, React.createElement( Comment, { name: "Bruce Wayne", time: 3 }, "Mark, we have windows..." ), React.createElement( Comment, { name: "Mark Zuckerberg", time: 2 }, "Shut up Bruce" ), this.state.comments.map(this._eachComment) ), React.createElement( "div", { className: "input" }, React.createElement("img", null), React.createElement("textarea", { ref: "newText", onKeyPress: this._handleKeyPress, placeholder: "Write a comment..." }) ) ); } }); var Post = React.createElement( "div", null, React.createElement(Creator, null), React.createElement(Message, null), React.createElement(Bar, null), React.createElement(CommentSection, null) ); ReactDOM.render(Post, app); // Normal js var textarea = document.getElementsByTagName('textarea')[0]; textarea.onkeyup = function () { textarea.style.height = "34px"; textarea.style.height = textarea.scrollHeight + "px"; }; /* */ //# sourceURL=pen.js </script> </body></html>

Related: See More


Questions / Comments: