Build a Markdown Previewer [freeCodeCamp [Data Visualization]] (Challenge)

Build a Markdown Previewer [freeCodeCamp [Data Visualization]] (Challenge).markdown

Build a Markdown Previewer [freeCodeCamp [Data Visualization]] (Challenge)

A Pen by Svetlana Linuxenko on CodePen.

License.

script.babel

var mdURI = 'https://cdn.rawgit.com/chjj/marked/master/README.md';

class Dashboard extends React.Component {
  constructor() {
    super();
    this.state = {
      defaultText : null,
      markup : ''
    }
    
    fetch(mdURI).then(response => response.text())
      .then(text => {
        this.setState({defaultText : text})
        this.changeText({target : {value : text}});
    });
  }
  
  changeText(e) {
    this.setState({markup : marked(e.target.value)});
  }
  
  render() {
    return (
      <div className="container">
        <div className="row">
          <div className="col-xs-6">
            {this.state.defaultText !== null ?
              <textarea className="editor" onChange={this.changeText.bind(this)} defaultValue={this.state.defaultText}></textarea>
            : <p>loading...</p>}
          </div>
          <div className="col-xs-6 preview" dangerouslySetInnerHTML={{__html: this.state.markup}}>
          </div>
        </div>
      </div>
    )
  }
}

React.render(<Dashboard />, document.body);

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/fetch/0.11.0/fetch.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/marked/0.3.5/marked.min.js"></script>

style.scss

body,html, .container {
  height: 100%;
}
  
  .container {
    width: 100%;
    padding: 10px 20px;
  }


.container .row,
.container .row > div {
  height: 100%;
}

.preview {
  height: 100%;
  overflow: auto;
}

.editor {
  width: 100%;
  height: 100%;
}

styles

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />