FCC: Build a Markdown Previewer

What is a fcc: build a markdown previewer How do you make a fcc: build a markdown previewer? This script and codes were developed by Jeanine on 16 November 2021, Tuesday.

How do I make an fcc: build a markdown previewer?
  1. FCC: Build a Markdown Previewer Previews
  2. FCC: Build a Markdown Previewer HTML Codes
  3. FCC: Build a Markdown Previewer CSS Codes
  4. FCC: Build a Markdown Previewer JS Codes
FCC: Build a Markdown Previewer Previews

FCC: Build a Markdown Previewer HTML Codes

<!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>

FCC: Build a Markdown Previewer CSS Codes

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;
}

FCC: Build a Markdown Previewer JS Codes

"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"));
Do you want hide your ip address?Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup.