FCC: Build a Markdown Previewer

In this example below you will see how to do a FCC: Build a Markdown Previewer with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by virtual, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright virtual ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>FCC: Build a Markdown Previewer</title>
  
  
  <link rel='stylesheet prefetch' href='http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='http://fonts.googleapis.com/css?family=Kaushan+Script'>
<link rel='stylesheet prefetch' href='http://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <header>
  <h1><span class="fa fa-free-code-camp"><span class="sr-only">FreeCodeCamp</span></span> Markdown Previewer</h1></header>
<div id="app"></div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/marked/0.3.2/marked.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/virtual/fcc-build-a-markdown-previewer-aBarwb */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

header {
  position: fixed;
  bottom: 0;
  z-index: 1000;
  width: 100%;
  background: #ececec;
}
header h1 {
  margin: 0;
  padding: 8px 13px;
  border-top: 1px solid #ccc;
  color: #333;
  font-family: 'Kaushan Script', cursive;
  text-align: center;
}

.editor .row {
  display: -ms-flex;
  display: -webkit-flex;
  display: flex;
}

.editor .row > div {
  width: 50%;
}

.markdown-input,
.markdown-input textarea {
  background: #000;
  color: #ccc;
  border: 0;
  padding: 0;
  margin: 0;
  font-family: 'Courier New', monospace;
  font-size: 14px;
  height: 100vh;
}

textarea.form-control,
.markdown-output {
  padding: 10px 20px;
}

.form-control:focus {
  -webkit-box-shadow: none;
  box-shadow: none;
  color: #fff;
}


/*Downloaded from https://www.codeseek.co/virtual/fcc-build-a-markdown-previewer-aBarwb */
var Display = React.createClass({
  displayName: "Display",


  getInitialState: function getInitialState() {
    return {
      value: "<h3>Instructions:</h3>\n- Type some markup or HTML"
    };
  },
  handleUpdateText: function handleUpdateText(e) {
    this.setState({
      value: e.target.value
    });
  },
  render: function render() {
    return React.createElement(
      "div",
      { className: "editor container-fluid" },
      React.createElement(
        "div",
        { className: "row" },
        React.createElement(
          "div",
          { className: "markdown-input col-sm-6" },
          React.createElement("textarea", {
            value: this.state.value,
            className: "form-control",
            onChange: this.handleUpdateText
          })
        ),
        React.createElement(
          "div",
          { className: "markdown-output col-sm-6" },
          React.createElement(Output, {
            value: this.state.value })
        )
      )
    );
  }
});

function Output(props) {
  return React.createElement("div", {
    dangerouslySetInnerHTML: { __html: marked(props.value) } });
}

ReactDOM.render(React.createElement(Display, null), document.getElementById("app"));

Comments