Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <header></header>

      <section id="wrapper-content">
        <h3>The Road to Home</h3>
        <span class="post-date">June 18, 2015</span>
        <p class="first-par">Made last it seen went no just when of by. Occasional 
          entreaties comparison me difficulty so themselves. 
          At brother inquiry of offices without do my service. 
          As particular to companions at sentiments. Weather however 
          luckily enquire so certain do. Aware did stood was day under ask. 
          Dearest affixed enquire on explain opinion he. Reached who 
          the mrs joy offices pleased. Towards did colonel 
          article any parties.</p>
          <article>
              <img src="./pic.png" alt="">
              <p>Needed feebly dining oh talked wisdom oppose at. Applauded use 
                attempted strangers now are middleton concluded had. It is tried 
                no added purse shall no on truth. Pleased anxious or as in by viewing 
                forbade minutes prevent. Too leave had those get being led weeks blind.
                Had men rose from down lady able. Its son him ferrars proceed six 
                parlors. Her say projection age announcing decisively men. Few gay 
                sir those green men timed downs widow chief. Prevailed remainder 
                may propriety can and.  Now for manners use has company believe
                parlors. Least nor party who wrote while did. </p>
          </article>
          <p>We diminution preference thoroughly if. Joy deal pain view
            much her time. Led young gay would now state. Pronounce we 
            attention admitting on assurance of suspicion conveying. That
            his west quit had met till. Of advantage he attending household 
            do perceived. Middleton in objection discovery as agreeable.
            Edward thrown dining so he my around to. </p>
          <p>Sense child do state to defer mr of forty. Become latter but 
            nor abroad wisdom waited. Was delivered gentleman acuteness but
            daughters. In as of whole as match asked. Pleasure exertion put
            add entrance distance drawings. In equally matters showing 
            greatly it as. Want name any wise are able park when. Saw 
            vicinity judgment remember finished men throwing. </p>
          <p>Too leave had those get being led weeks blind. Had men rose
            from down lady able. Its son him ferrars proceed six parlors.
            Her say projection age announcing decisively men. </p>

          <div id="comApp"></div>
      </section>
              
            
!

CSS

              
                
body {
  background: #f2f2f2;
  margin: 0;
  margin-bottom: 270px;
}
header {
  background: url('./assets/img/header.png');
  background-size: cover;
  width: 100%;
  height: 440px;
}
p{
  font-family: 'STAG';
  padding: 0 0 0 7px;
  letter-spacing: 1px;
  word-spacing: -1px;
  font-size: 17px;
  line-height: 28px;
  margin: 25px 0;
}
#wrapper-content {
  padding-bottom: 70px;
  max-width: 870px;
  border: 1px solid transparent;
  margin: -88px auto 0;
  padding: 0 80px;
  background: #fff;

  .first-par {margin-top: 12px}
  h3{
    font-size: 32px;
    font-family: 'MyFont';
    margin: 0 0 8px;
    padding: 47px 7px 5px;
    word-spacing: 2px;
    border-bottom: 1px solid silver;
  }
  .post-date {
    font-family: 'medium';
    color: #c9c9c9;
    padding: 0 6px;
    letter-spacing: 0.1px;
    word-spacing: 1px;
  }

  article {
   margin: 0;
   background: #fff;
   p{margin: 0}
    img{
      border: 5px solid #F2F2F2;
      border-left: none;
      float: left;
      margin: 3px 24px 0 -80px;
      width: 400px;
      height: 267px;
    }
  }
}
#wrapper-content p:first-child {margin-top: 12px}

.textarea {
  height: 90px;
  resize: none;
  border-color: #EBEDEE;
  border-radius: 4px;
  width: 100%;
  margin-top: -13px;
  font-size: 18px;
  color:#B6B6B6;
  line-height: 23px;
  padding: 10px 20px;
  box-sizing: border-box;
}


#comApp {
  .bottomPost {
    border-top: 1px solid silver;
    border-bottom: 1px solid silver;
    line-height: 57px;
    span:first-child {
      margin-left: 9px;
      i{
        padding-right: 5px;
      }
    }
    span {
      margin: 0 35px;
      letter-spacing: 0.2px;
      font-size: 17px;
      word-spacing: -3px;
      color: #B6B6B6;
    }
  }
  h5{
    font-family: 'medium';
    font-size: 33px;
    margin: 0 0 5px 5px;
    line-height: 110px;
  }
  .leaveComment {
      display: flex;
      position: relative;
      margin-bottom: 114px;
      .avaForleaveComment img {
        width: 89px;
        padding: 28px 15px !important;
        margin: 0px 25px 0 5px;
        border: 2px solid #EBEDEE;
        padding: 3px;
        border-radius: 4px;
      }
      textarea {
        @extend .textarea;
        margin-top: 2px !important;
        height: 97px;
      }
      button {
        position: absolute;
        right: 0;
        bottom: -55px;
        width: 151px;
        line-height: 45px;
        border-radius: 4px;
        border: none;
        font-weight: bold;
        background: #F1C40F;
        color: #000;
        font-size: 17px;
        cursor: pointer;
        transition:0.3s linear;
        &:hover{opacity: 0.7; }
      }
      .separate {
        position: absolute;
        bottom: -10px;
        bottom: -72px;
        left: 0;
        right: 0;
        border-bottom: 2px solid #EBEDEE;
      }
  }
  .commentWrapper {
    margin-bottom: 15px;
    img {
      float: left;
    }
    p{
      font-family: 'STAG';
      padding: 0 0 0 7px;
      letter-spacing: 1px;
      word-spacing: -1px;
      font-size: 17px;
      margin: 25px 0;
    }
    .commentUserAva {
      padding: 28px 2px !important;
      width: 89px;
      margin: 0px 25px 0 5px;
      border: 2px solid #EBEDEE;
      padding: 3px;
      border-radius: 4px;
    }
    .theComment{
      overflow: hidden;
      line-height: 28px;
      p:first-child {
        margin: 0;
      }
      p{
        font-size: 17px;
        margin-top: 10px;
        margin-bottom: 0;
        span{
          color: #B6B6B6;
        }
      }
      button {
        margin-top: 15px;
        margin-bottom: 25px;
        background: no-repeat;
        border: none;
        font-size: 15px;
        cursor: pointer;
        color: #B6B6B6;
      }
      .addReplyArea{
        display: none;
        flex-direction: column;
        position: relative;
        align-items: flex-end;
        width: calc(100% - 10px);
        float: right;
        .replyesTo {
          position: absolute;
          left: 0;
          margin: 0;
          padding: 0;
          top: 10px;
          color:#B6B6B6;
          i {transform: scale(-1,1)}
        }
        span{
          display: flex;
          justify-content: flex-end;
          .addReplyBut {
            width: 151px;
            line-height: 45px;
            border-radius: 4px;
            border: none;
            font-weight: bold;
            background: #F1C40F;
            color: #000;
            font-size: 17px;
            cursor: pointer;
            transition:0.3s linear;
            text-align: center;
            &:hover{opacity: 0.7; }
          }
        }
        textarea { @extend .textarea }
      }
    }
  }
}

.replysComponentBlock{
  font-family: 'STAG';
  margin: 0;
  list-style: none;
  min-height: 13px;
  padding: 0;
}
.replysComponentBlock> li {
  list-style: none;
  height: 100px;
  margin-top: 5px;
  img{
    width: 66px;
   padding: 38px 5px !important;
    border: 2px solid #EBEDEE;
    border-radius: 4px;
    margin-right: 21px;
  }
  ul{
    list-style: none;
    margin-left: 57px;
    li{
      margin-bottom: 10px;
      i, span, b:last-child{
        color:#B6B6B6;
        padding: 0 3px;
      }
    }
  }
}

.loadMoreButton {
  padding: 5px 19px;
  font-size: 17px;
  background: #fff;
  border: 2px solid #F2F2F2;
  color: #B6B6B6;
  border-radius: 4px;
  z-index: 0;
  cursor: pointer;
  margin: 20px auto 50px;
  display: block;
}

@media (max-width: 850px) {
  #wrapper-content {
    padding: 0 20px}
}

@media (max-width: 777px) {
  #comApp .commentWrapper .theComment p, .replysComponentBlock {
    font-size: 14px}
  .bottomPost{
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  #comApp .commentWrapper .commentUserAva{margin: 0px 7px 0 5px}
}

@media (max-width: 550px) {
  .commentUserAva, .replysComponentBlock img {display: none}
  .replysComponentBlock > li ul {margin-left: inherit}
  .avaForleaveComment {display: none}
  #comApp .bottomPost span {margin: 0}
  #wrapper-content article img {

    height: 100%;
    width: 100%;
    margin: 0;
}
}
              
            
!

JS

              
                var ava2 = 0;
var avatar = 0;
class App extends React.Component {
  constructor(props) {
    super(props);
    this.handlerNEWComment = this.handlerNEWComment.bind(this);
    this.addCommetButoon = this.addCommetButoon.bind(this);
    this.editButton = this.editButton.bind(this);
    this.editInput = this.editInput.bind(this);
    this.delBut = this.delBut.bind(this);
    this.repBut = this.repBut.bind(this);
    this.LoadMoreHandler = this.LoadMoreHandler.bind(this);
    this.addNewReplyButton = this.addNewReplyButton.bind(this);

    this.replyInput = this.replyInput.bind(this);
    this.cancelReply = this.cancelReply.bind(this);
    this.state = {
      currentUser: 'Kurt Thompson',
      comments: [
        { user: 'Miranda Rojah',
          photo: ava2, 
          coment: 'If non everyone makes money blogging, why is blogging so popular?', 
          time: '2015-07-06 at 13-57',
          sw: true,
          replyValue: [ ],
        }
      ],
      newComment: { 
        user: 'Kurt Thompson', 
        photo: avatar, 
        coment: '', 
        time: 0, 
        sw: true ,
        replyValue: [ ],
      },
      newReply: { user: 'Antony Musk', photo: avatar, coment: '', time: 0 },
      limit: 5
    }
  }

  componentDidUpdate() {
    $('.replyTarget').click( function() {
      $('.addReplyArea').css({'display':'none'});
      $(this).parents('.commentWrapper').find('.addReplyArea').slideDown('fast').css({'display': 'flex'});
    })
  }

  handlerNEWComment(e) {
      this.state.newComment['coment'] = e.target.value;
      this.setState({newComment: this.state.newComment});
  }
  addCommetButoon() {

    let date = new Date().toLocaleString().replace(',', ' at').slice(0, -3);
    this.state.newComment['time'] = date;
    this.setState({time: this.state.newComment });
   
    this.state.comments.push(this.state.newComment);
    this.setState({comments: this.state.comments,
      newComment: { user: 'Kurt Thompson', photo: avatar, coment: '', time: 0, sw: true,
      replyValue: [  ] }});
  }

  editButton(id) {
    this.state.comments[id]['sw'] = !this.state.comments[id]['sw'];
    this.setState({comments: this.state.comments});
  }
  editInput(id, e) {
    this.state.comments[id]['coment'] = e.target.value;
    this.setState({commen: this.state.comments});
  }
  delBut(id) {
    this.state.comments.splice(id, 1);
    this.setState({comments: this.state.comments});
  }
  repBut(id) {
    this.state.newReply['coment'] = '';
    this.state.comments[id]['showRep'] = !this.state.comments[id]['showRep'];
    this.setState({showRep: this.state.comments});
  }
  LoadMoreHandler() {
    this.setState({limit: this.state.limit + 5});
    console.log(this.state.limit);
  }

  replyInput(e) {
   
    let date = new Date().toLocaleString().replace(',', ' at').slice(0, -3);
    this.state.newReply['time'] = date;
    this.state.newReply['coment'] = e.target.value;
    this.setState({coment: this.state.newReply});
  }
  cancelReply() {
    this.state.newReply['coment'] = '';
    this.setState({coment: this.state.newReply});
    $('.addReplyArea').css({'display':'none'});
  }
  addNewReplyButton(id) {
    this.state.comments[id].replyValue.push(this.state.newReply);
    this.setState({ replyValue: this.state.comments, newReply: { user: 'Antony Musk', photo: avatar, coment: '', time: 0 } });
    $('.addReplyArea').css({'display':'none'});
  }
  render() {
    let countCommets = this.state.comments.length;
    const listOFcomments = this.state.comments.slice(0, this.state.limit).map( (item, id) => {  //
      return <Comments
                  key={id}
                  index={id}
                  name={item.user}
                  ava={item.photo}
                  text={item.coment}
                  time={item.time}
                  editBut={this.editButton}
                  editInp={this.editInput}
                  delBut={this.delBut}
                  repBut={this.repBut}
                  sw={item.sw}
                  curUser={this.state.currentUser}
                  
                  replyValue={item.replyValue}
                 
                  newReply={this.state.newReply}
                  replyInput={this.replyInput}
                  addNewReplyButton={this.addNewReplyButton}
                  cancelReply={this.cancelReply}
      />
    })
    return <div>
    <div className="bottomPost">
      <span><i className="fa fa-user" aria-hidden="true"></i>Post by <b>Will Smith</b></span>
      <span><i className="fa fa-clock-o" aria-hidden="true"></i> Posted <b>June 18, 2015</b> at <b>21:44</b></span>
      <span><i className="fa fa-comment" aria-hidden="true"></i> <b>{countCommets}  {countCommets == 1 ? `comment`: `comments` } </b> </span>
    </div>
    <h5>Leave comment:</h5>
        <AddComment
            photo={this.state.newComment['photo']}
            areaFcomment={this.handlerNEWComment}
            user={this.state.newComment['user']}
            value={this.state.newComment['coment']}
            button={this.addCommetButoon}
        />       
        {listOFcomments}
        
        { this.state.comments.length > 5 ? <LoadMore more={this.LoadMoreHandler} /> : null }
    </div>
  }
}


class AddComment extends React.Component {
  render() {
    let { photo, user, value, areaFcomment, button } = this.props;
    return <div className="leaveComment">
              <div className="avaForleaveComment"><img src={photo} alt={user}/></div>
              <textarea
                  type="text"
                  value={value}
                  placeholder="Your message"
                  onChange={areaFcomment}
              />
              <br/>
              <button onClick={button} 
                      disabled={ this.props.value == "" ? true:false } >Send</button>
              <div className="separate"></div>
    </div>
  }
}


class Comments extends React.Component {
  render() {
    let { index, 
          name, 
          ava, 
          text, 
          time, 
          sw, 
          editBut, 
          editInp, 
          delBut, 
          repBut,
          curUser,
          replyValue,
          //for new reply comment
          newReply,
          replyInput,
          addNewReplyButton,
          cancelReply } = this.props;
          
    return <div className="commentWrapper">
            <img className="commentUserAva" src={ava} alt={name}/>
            <div className="theComment">
              <p><b>{name}</b> <span> <i className="fa fa-clock-o" aria-hidden="true"></i> {time}</span></p>
              <p className="lengthOFcomment">{ sw ? text : 
                    <textarea 
                        type="text"
                        value={text}
                        onChange={editInp.bind(null, index)}
                    />}
              </p>
              {curUser == name ? <button onClick={editBut.bind(null, index)}>{sw ? <i className="fa fa-pencil-square-o" aria-hidden="true"> Edit</i>:`Ok`}</button> :null }
              {curUser == name ? <button onClick={delBut.bind(null, index)}><i className="fa fa-times" aria-hidden="true"> Delete</i></button>: null}
              
              <button className="replyTarget" onClick={repBut.bind(null, index)}><i className="fa fa-reply" aria-hidden="true"> Reply</i>
              </button>

              <ReplyComments
                index={index}
                name={name}
                replyValue={replyValue}
              />
              <AddReplyComment
                index={index}
                name={name}
                newReply={newReply}
                replyInput={replyInput}
                addNewReplyButton={addNewReplyButton}
                cancelReply={cancelReply}
              />
            </div>
    </div>
  }
}

class ReplyComments extends React.Component {
  render() {
    let clas = {transform: 'scale(-1, 1)'};
    let { name, replyValue } = this.props;
    let lostOfReplyes = this.props.replyValue.map( (i, id) => {
      return  <li key={id}>
                    <img src={i.photo}/>
                    <ul>
                        <li>
                            <b>{i.user}</b> <span> </span> 
                            <i style={clas} className="fa fa-reply" aria-hidden="true"></i> 
                            <span> {name} </span> 
                            <b><i className="fa fa-clock-o" aria-hidden="true"></i> {i.time}</b>
                        </li>
                        <li>{i.coment}</li>
                    </ul>
              </li>
    })
    return <ul className="replysComponentBlock">
      {lostOfReplyes}
    </ul>
  }
}


class AddReplyComment extends React.Component {
  render() {
    let { index,name, addNewReplyButton, cancelReply, newReply } = this.props;
    return <div className="addReplyArea">
            <p className="replyesTo"><i className="fa fa-reply" aria-hidden="true"></i> { name}</p>
            <button onClick={cancelReply.bind(null, index)}>
                <i className="fa fa-times" aria-hidden="true"> Cancel</i>
            </button>
            <textarea
                type="text"
                placeholder="Your message"
                value={newReply.coment}
                onChange={this.props.replyInput.bind(null)}
            />
            <span>
              <button disabled={newReply.coment == '' ? true:false} 
                     data-cl={index} 
                     className="addReplyBut"
                     onClick={addNewReplyButton.bind(null,index)}>
                                    Send
              </button>
            </span>
    </div>
  }
}

const LoadMore = (props) => <button className="loadMoreButton" onClick={props.more}>Load more comments</button>

ReactDOM.render(<App />, document.getElementById('comApp'));
              
            
!
999px

Console