mirror of
https://github.com/TrentSPalmer/fcc-challenges.git
synced 2024-11-24 04:11:30 -08:00
add markdown-previewer
This commit is contained in:
parent
5147ed98e8
commit
15c1baf09a
104
index.html
104
index.html
@ -1,63 +1,47 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta
|
<meta name="generator" content="HTML Tidy for HTML5 for Linux version 5.6.0">
|
||||||
name="generator"
|
<meta charset="utf-8">
|
||||||
content="HTML Tidy for HTML5 for Linux version 5.6.0"
|
<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=
|
||||||
<meta charset="utf-8" />
|
"sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
<link rel="stylesheet" type="text/css" href="fcc_challenges.css">
|
||||||
<link
|
<title>FCC Challenges</title>
|
||||||
rel="stylesheet"
|
</head>
|
||||||
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
|
<body>
|
||||||
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
|
<h1 id="title">FCC Challenges</h1>
|
||||||
crossorigin="anonymous"
|
<div id="directory-list">
|
||||||
/>
|
<ul>
|
||||||
<link rel="stylesheet" type="text/css" href="fcc_challenges.css" />
|
<li>
|
||||||
<title>FCC Challenges</title>
|
<a href="https://github.com/TrentSPalmer/fcc-challenges" target="_blank">GitHub Repository View of This
|
||||||
</head>
|
Page</a>
|
||||||
<body>
|
</li>
|
||||||
<h1 id="title">FCC Challenges</h1>
|
<li>
|
||||||
<div id="directory-list">
|
<a href="mccain-tribute/" target="_blank">Build a Tribute Page - McCain Tribute - Responsive Web Design
|
||||||
<ul>
|
Projects</a>
|
||||||
<li>
|
</li>
|
||||||
<a
|
<li>
|
||||||
href="https://github.com/TrentSPalmer/fcc-challenges"
|
<a href="how-was-dinner/" target="_blank">Build a Survey Form - How Was Dinner? - Responsive Web Design
|
||||||
target="_blank"
|
Projects</a>
|
||||||
>GitHub Repository View of This Page</a
|
</li>
|
||||||
>
|
<li>
|
||||||
</li>
|
<a href="tools-that-love-you/" target="_blank">Build a Product Landing Page - Tools That Love You - Responsive
|
||||||
<li>
|
Web Design Projects</a>
|
||||||
<a href="mccain-tribute/" target="_blank"
|
</li>
|
||||||
>Build a Tribute Page - McCain Tribute - Responsive Web Design
|
<li>
|
||||||
Projects</a
|
<a href="lmde-3-disk-encryption/" target="_blank">Build a Technical Documentation Page - LMDE 3 Disk Encryption
|
||||||
>
|
- Responsive Web Design Projects</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a href="how-was-dinner/" target="_blank"
|
<a href="random-quote-machine/build" target="_blank">Random Quote Machine - Build a Random Quote Machine -
|
||||||
>Build a Survey Form - How Was Dinner? - Responsive Web Design
|
Front End Libraries Projects</a>
|
||||||
Projects</a
|
</li>
|
||||||
>
|
<li>
|
||||||
</li>
|
<a href="markdown-previewer" target="_blank">Markdown Previewer - Build a Markdown Previewer -
|
||||||
<li>
|
Front End Libraries Projects</a>
|
||||||
<a href="tools-that-love-you/" target="_blank"
|
</li>
|
||||||
>Build a Product Landing Page - Tools That Love You - Responsive Web
|
</ul>
|
||||||
Design Projects</a
|
</div>
|
||||||
>
|
</body>
|
||||||
</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>
|
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
BIN
markdown-previewer/PIA23595_hires.jpg
Normal file
BIN
markdown-previewer/PIA23595_hires.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 818 KiB |
49
markdown-previewer/defaultText.js
Normal file
49
markdown-previewer/defaultText.js
Normal file
@ -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 += "";
|
||||||
33
markdown-previewer/index.html
Normal file
33
markdown-previewer/index.html
Normal file
@ -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>
|
||||||
108
markdown-previewer/markdownPreviewer.css
Normal file
108
markdown-previewer/markdownPreviewer.css
Normal file
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
48
markdown-previewer/markdownPreviewer.js
Executable file
48
markdown-previewer/markdownPreviewer.js
Executable file
@ -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);
|
||||||
|
};
|
||||||
Loading…
Reference in New Issue
Block a user