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