add markdown-previewer

2020-04-05 04:46:13 -07:00 · 2020-04-05 04:46:13 -07:00 · 15c1baf09a
parent 5147ed98e8
commit 15c1baf09a
6 changed files with 282 additions and 60 deletions
--- a/index.html
+++ b/index.html
@ -1,63 +1,47 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta
-      name="generator"
-      content="HTML Tidy for HTML5 for Linux version 5.6.0"
-    />
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link
-      rel="stylesheet"
-      href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
-      integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
-      crossorigin="anonymous"
-    />
-    <link rel="stylesheet" type="text/css" href="fcc_challenges.css" />
-    <title>FCC Challenges</title>
-  </head>
-  <body>
-    <h1 id="title">FCC Challenges</h1>
-    <div id="directory-list">
-      <ul>
-        <li>
-          <a
-            href="https://github.com/TrentSPalmer/fcc-challenges"
-            target="_blank"
-            >GitHub Repository View of This Page</a
-          >
-        </li>
-        <li>
-          <a href="mccain-tribute/" target="_blank"
-            >Build a Tribute Page - McCain Tribute - Responsive Web Design
-            Projects</a
-          >
-        </li>
-        <li>
-          <a href="how-was-dinner/" target="_blank"
-            >Build a Survey Form - How Was Dinner? - Responsive Web Design
-            Projects</a
-          >
-        </li>
-        <li>
-          <a href="tools-that-love-you/" target="_blank"
-            >Build a Product Landing Page - Tools That Love You - Responsive Web
-            Design Projects</a
-          >
-        </li>
-        <li>
-          <a href="lmde-3-disk-encryption/" target="_blank"
-            >Build a Technical Documentation Page - LMDE 3 Disk Encryption -
-            Responsive Web Design Projects</a
-          >
-        </li>
-        <li>
-          <a href="random-quote-machine/build" target="_blank"
-            >Random Quote Machine - Build a Random Quote Machine - Front End
-            Libraries Projects</a
-          >
-        </li>
-      </ul>
-    </div>
-  </body>
+<head>
+  <meta name="generator" content="HTML Tidy for HTML5 for Linux version 5.6.0">
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity=
+  "sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
+  <link rel="stylesheet" type="text/css" href="fcc_challenges.css">
+  <title>FCC Challenges</title>
+</head>
+<body>
+  <h1 id="title">FCC Challenges</h1>
+  <div id="directory-list">
+    <ul>
+      <li>
+        <a href="https://github.com/TrentSPalmer/fcc-challenges" target="_blank">GitHub Repository View of This
+        Page</a>
+      </li>
+      <li>
+        <a href="mccain-tribute/" target="_blank">Build a Tribute Page - McCain Tribute - Responsive Web Design
+        Projects</a>
+      </li>
+      <li>
+        <a href="how-was-dinner/" target="_blank">Build a Survey Form - How Was Dinner? - Responsive Web Design
+        Projects</a>
+      </li>
+      <li>
+        <a href="tools-that-love-you/" target="_blank">Build a Product Landing Page - Tools That Love You - Responsive
+        Web Design Projects</a>
+      </li>
+      <li>
+        <a href="lmde-3-disk-encryption/" target="_blank">Build a Technical Documentation Page - LMDE 3 Disk Encryption
+        - Responsive Web Design Projects</a>
+      </li>
+      <li>
+        <a href="random-quote-machine/build" target="_blank">Random Quote Machine - Build a Random Quote Machine -
+        Front End Libraries Projects</a>
+      </li>
+      <li>
+        <a href="markdown-previewer" target="_blank">Markdown Previewer - Build a Markdown Previewer -
+        Front End Libraries Projects</a>
+      </li>
+    </ul>
+  </div>
+</body>
 </html>
--- a/markdown-previewer/PIA23595_hires.jpg
+++ b/markdown-previewer/PIA23595_hires.jpg
--- a/markdown-previewer/defaultText.js
+++ b/markdown-previewer/defaultText.js
@ -0,0 +1,49 @@
+let defaultText = "# Markdown Editor";
+defaultText += "\n---";
+defaultText += "\n---";
+defaultText += "\n## Markdown Features Below";
+defaultText += "\n* [What is Markdown?](#what-is-markdown)";
+defaultText += "\n* [Quote Blocks](#quote-blocks)";
+defaultText += "\n* [This Is An H2 Header](#this-is-an-h2-header)";
+defaultText += "\n* [Line Breaks](#line-breaks)";
+defaultText += "\n* [Inline Code](#inline-code)";
+defaultText += "\n* [Code Block](#code-block)";
+defaultText += "\n* [Photo of Jupiter](#photo-of-jupiter)";
+defaultText += "\n";
+defaultText += "\n---";
+defaultText += "\n## What is Markdown?  ";
+defaultText += "\n You could read the [wikipedia page for markdown](https://en.wikipedia.org/wiki/Markdown)";
+defaultText += "\n";
+defaultText += "\n---";
+defaultText += "\n## Quote Blocks  ";
+defaultText += "\nYou will find the following quote from the link above.";
+defaultText += "\n> Markdown is a lightweight markup language with plain-text-formatting syntax. Markdown is a lightweight markup language with plain-text-formatting syntax.";
+defaultText += "\n";
+defaultText += "\n---";
+defaultText += "\n## This Is An H2 Header  ";
+defaultText += "\n The **editor** on the left (or above if in portrait orientation) is an input field; ***you can type in it***";
+defaultText += "\n";
+defaultText += "\n---";
+defaultText += "\n## Line Breaks";
+defaultText += "\nUse a double space at the end of a line  ";
+defaultText += "\nto add a line break.";
+defaultText += "\n";
+defaultText += "\n---";
+defaultText += "\n## Inline Code";
+defaultText += "\nThis is an example of inline code:  ";
+defaultText += "\nType `apt-get update && apt-get dist-upgrade` to update Debian or Ubuntu";
+defaultText += "\n";
+defaultText += "\n---";
+defaultText += "\n## Code Block";
+defaultText += "\nThis is an example of a (python) code block:";
+defaultText += "\n```python";
+defaultText += "\ndef addTogether(x,y):";
+defaultText += "\n    return x + y";
+defaultText += "\n# should print 8";
+defaultText += "\nprint(addTogether(5,3))";
+defaultText += "\n```";
+defaultText += "\n";
+defaultText += "\n---";
+defaultText += "\n## Photo of Jupiter";
+defaultText += "\n";
+defaultText += "![Jupiter](PIA23595_hires.jpg)";
--- a/markdown-previewer/index.html
+++ b/markdown-previewer/index.html
@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="icon" href="#" />
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity=
+                                 "sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
+    <link rel="stylesheet" type="text/css" href="markdownPreviewer.css">
+    <title>Markdown Previewer - Build a Markdown Previewer - Front End Libraries Projects</title>
+  </head>
+  <body>
+    <header id="buttonHeader">
+      <button id="eraseButton" class="btn">Erase Editor</button>
+      <button id="reloadButton" class="btn">Reload Example</button>
+    </header>
+    <div id="test">
+      <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
+    </div>
+    <div id="editorAndPreview">
+      <div id="textEditor">
+        <textarea id="editor">
+        </textarea>
+      </div>
+      <div id="preview"></div>
+    </div>
+    <script type="text/javascript" src="defaultText.js"></script>
+    <script type="text/javascript" src="markdownPreviewer.js"></script>
+  </body>
+</html>
--- a/markdown-previewer/markdownPreviewer.css
+++ b/markdown-previewer/markdownPreviewer.css
@ -0,0 +1,108 @@
+body {
+  display: flex;
+  flex-direction: column;
+  background-color: #eee8d5;
+  color: #073642;
+  overflow: hidden;
+}
+
+#editorAndPreview {
+  display: flex;
+}
+
+#buttonHeader {
+  height: 3rem;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+}
+
+#eraseButton {
+  background-color: #dc322f;
+  color: #fdf6e3;
+}
+
+#reloadButton {
+  background-color: #268bd2;
+  color: #fdf6e3;
+  margin-left: 1rem;
+  margin-right: 1rem;
+}
+
+#editor {
+  font: monospace;
+  border: none;
+  outline: none;
+  background-color: #073642;
+  color: #eee8d5;
+}
+
+#editor, #preview {
+  padding: 0px 3rem 0px 3rem;
+}
+
+#preview {
+  overflow: auto;
+}
+
+code {
+  font: monospace;
+  background-color: LightGrey;
+}
+
+blockquote {
+  background: #f9f9f9;
+  border-left: 10px solid #ccc;
+  margin: 1.5em 10px;
+  padding: 0.5em 10px;
+  quotes: "\201C""\201D""\2018""\2019";
+}
+blockquote:before {
+  color: #ccc;
+  content: open-quote;
+  font-size: 4em;
+  line-height: 0.1em;
+  margin-right: 0.25em;
+  vertical-align: -0.4em;
+}
+blockquote p {
+  display: inline;
+}
+
+img {
+  max-width: 100%;
+  height: auto;
+}
+
+@media  (orientation: landscape) {
+  #editorAndPreview {
+    flex-direction: row;
+    justify-content: flex-end;
+  }
+  #textEditor, #preview {
+    width: 50vw;
+    height: 95vh;
+  }
+  #editor {
+    resize: none;
+    width: 100%;
+    height: 100%;
+  }
+}
+
+@media  (orientation: portrait) {
+  #buttonHeader {
+    height: 3rem;
+  }
+  #editorAndPreview {
+    flex-direction: column;
+  }
+  #editor {
+    height: 43vh;
+    width: 100vw;
+  }
+  #preview {
+    overflow: scroll;
+    height: 50vh;
+  }
+}
--- a/markdown-previewer/markdownPreviewer.js
+++ b/markdown-previewer/markdownPreviewer.js
@ -0,0 +1,48 @@
+marked.setOptions({
+  breaks: true,
+});
+
+$(document).ready(function() {
+  /* if there is editorText in sessionStorage, load that into
+   * the editor, otherwise load the default text into the editor */
+  if (sessionStorage.hasOwnProperty('editorText')) {
+    $('#editor').val(sessionStorage.editorText);
+  } else {
+    $('#editor').val(defaultText);
+  };
+
+  // render the editor contents to the preview element
+  $('#preview').html(marked($('#editor').val()));
+
+  /* on every input event in the editor, store the editor
+   * contents in sessionStorage and also render the contents
+   * of the editor to the preview element */
+  $('#editor').on('input',function() {
+    sessionStorage.setItem('editorText',$(this).val());
+    $('#preview').html(marked($(this).val()));
+  });
+
+  // handle eraseButton
+  $('#eraseButton').click(function() {
+    $('#editor').val('');
+    sessionStorage.setItem('editorText',$('#editor').val());
+    $('#preview').html(marked($('#editor').val()));
+  });
+
+  // handle reloadButton
+  $('#reloadButton').click(function() {
+    $('#editor').val(defaultText);
+    sessionStorage.setItem('editorText',defaultText);
+    $('#preview').html(marked(defaultText));
+  });
+
+  $('#editor').on('scroll', scrollSync);
+});
+
+const scrollSync = () => {
+  const editorScrollable = document.getElementById('editor').scrollHeight - $('#editor').height();
+  const previewScrollable = document.getElementById('preview').scrollHeight - $('#preview').height();
+  const editorScrollRatio = $('#editor').scrollTop() === 0 ? 0 : $('#editor').scrollTop() / editorScrollable;
+  const previewScrollPosition = previewScrollable * editorScrollRatio;
+  $('#preview').scrollTop(previewScrollPosition);
+};