FCC: Build a Markdown Previewer

Tutorials of (Fcc: build a markdown previewer) by Jeanine

<!DOCTYPE html>
<html >
<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/ */
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/ */
"use strict";

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"));

This awesome code ( FCC: Build a Markdown Previewer ) is write by Jeanine, you can se more from this user in the personal repository

You can find the original code on Codepen.io

2018 © Jeanine