diff --git a/index.html b/index.html
index 9a22483..51ad2cc 100644
--- a/index.html
+++ b/index.html
@@ -1,63 +1,47 @@
-
-
-
-
-
-
- FCC Challenges
-
-
- FCC Challenges
-
-
+
+
+
+
+
+
+ FCC Challenges
+
+
+ FCC Challenges
+
+
diff --git a/markdown-previewer/PIA23595_hires.jpg b/markdown-previewer/PIA23595_hires.jpg
new file mode 100644
index 0000000..3a78b42
Binary files /dev/null and b/markdown-previewer/PIA23595_hires.jpg differ
diff --git a/markdown-previewer/defaultText.js b/markdown-previewer/defaultText.js
new file mode 100644
index 0000000..67cfada
--- /dev/null
+++ 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)";
diff --git a/markdown-previewer/index.html b/markdown-previewer/index.html
new file mode 100644
index 0000000..4173369
--- /dev/null
+++ b/markdown-previewer/index.html
@@ -0,0 +1,33 @@
+
+
+
+
+
+
+
+
+
+
+
+ Markdown Previewer - Build a Markdown Previewer - Front End Libraries Projects
+
+
+
+
+
+
+
+
+
+
+
diff --git a/markdown-previewer/markdownPreviewer.css b/markdown-previewer/markdownPreviewer.css
new file mode 100644
index 0000000..9324345
--- /dev/null
+++ 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;
+ }
+}
diff --git a/markdown-previewer/markdownPreviewer.js b/markdown-previewer/markdownPreviewer.js
new file mode 100755
index 0000000..360350b
--- /dev/null
+++ 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);
+};