create live preview pane

7 files changed, 76 insertions, 45 deletions

diff --git a/README.org b/README.org
index 2bac59f..cd613a0 100644
--- a/README.org
+++ b/README.org
@@ -10,7 +10,13 @@ editing [[https://orgmode.org/][org-mode]].
 - Download the org-mode content to a local file.
 - Download the parsed HTML output to a local file.
 
-** TODO Further Development
+** Further Development
+*** DONE Explore feasability of parsing org-mode to HTML constantly and sending parsed HTML output to a "viewing" pane.
 
-- Explore feasability of parsing org-mode to HTML constantly and sending parsed
-  HTML output to a "viewing" pane.
+** Screenshots
+
+#+caption: Light Mode
+[[./screenshots/light_preview.png]]
+
+#+caption: Dark Mode
+[[./screenshots/dark_preview.png]]
diff --git a/index.html b/index.html
index cc30d1f..77fe6db 100644
--- a/index.html
+++ b/index.html
@@ -28,6 +28,7 @@
                 required
             ></textarea>
         </form>
+	<div id="preview"></div>
         <dialog id="modal"></dialog>
         <script src="./static/org.js"></script>
         <script src="./static/app.js"></script>
diff --git a/screenshots/dark_preview.png b/screenshots/dark_preview.png
new file mode 100644
index 0000000..0c5093c
--- /dev/null
+++ b/screenshots/dark_preview.png
diff --git a/screenshots/light_preview.png b/screenshots/light_preview.png
new file mode 100644
index 0000000..d89f306
--- /dev/null
+++ b/screenshots/light_preview.png
diff --git a/static/app.js b/static/app.js
index 7da442b..36f6c89 100644
--- a/static/app.js
+++ b/static/app.js
@@ -1,3 +1,14 @@
+window.onkeyup = keyup;
+var inputText;
+
+function keyup(e) {
+    // inputText = e.target.value;
+    inputText = parseOrg();
+
+    const preview = document.getElementById("preview");
+    preview.innerHTML = inputText;
+}
+
 function parseOrg() {
     var orgCode = document.getElementById("editor").value;
     var orgParser = new Org.Parser();
diff --git a/static/styles.css b/static/styles.css
index b3622d6..30c12ec 100644
--- a/static/styles.css
+++ b/static/styles.css
@@ -174,7 +174,8 @@ textarea {
  */
 
 button,
-input { /* 1 */
+input {
+  /* 1 */
   overflow: visible;
 }
 
@@ -184,7 +185,8 @@ input { /* 1 */
  */
 
 button,
-select { /* 1 */
+select {
+  /* 1 */
   text-transform: none;
 }
 
@@ -348,66 +350,77 @@ template {
   display: none;
 }
 
-
 /* CUSTOM SITE CSS
    ========================================================================== */
 body {
-    font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;
-    overflow-x: hidden;
-    margin: 0;
-    padding: 0;
+  font-family:
+    Menlo,
+    Consolas,
+    Monaco,
+    Liberation Mono,
+    Lucida Console,
+    monospace;
+  overflow-x: hidden;
+  margin: 0;
+  padding: 0;
 }
 
 form {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
 }
 
-div {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: center;
-    width: 100vw;
+div:not(#preview) {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  width: 100vw;
 }
 
 label {
-    text-align: center;
-    width: 20%;
+  text-align: center;
+  width: 20%;
 }
 
 .spacer {
-    width: 60%;
+  width: 60%;
 }
 
 button {
-    border: none;
-    border-radius: 0;
-    padding: 0.75rem;
-    width: 20%;
+  border: none;
+  border-radius: 0;
+  padding: 0.75rem;
+  width: 20%;
 }
 
 textarea {
-    background-color: inherit;
-    border: none;
-    border-radius: 0;
-    -webkit-box-shadow: none;
-    -moz-box-shadow: none;
-    box-shadow: none;
-    resize: none;
-    outline: none;
-
-    height: 100vh;
-    width: 100vw;
-    max-height: 100vw;
-    max-width: 90vw;
-    margin: 0 auto;
-    padding: 1.5rem;
+  background-color: inherit;
+  border: none;
+  border-bottom: 1px solid black;
+  border-radius: 0;
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
+  box-shadow: none;
+  resize: none;
+  outline: none;
+}
+
+textarea,
+#preview {
+  height: 40vh;
+  width: 100vw;
+  max-height: 40vh;
+  max-width: 90vw;
+  margin: 0 auto;
+  padding: 1.5rem;
+  /*  white-space: pre-wrap; */
+  overflow: scroll;
 }
 
 :modal {
-    height: 90vh;
-    width: 90vw;
+  height: 90vh;
+  width: 90vw;
 }
diff --git a/static/styles.min.css b/static/styles.min.css
index 01e7fb8..fc5d203 100644
--- a/static/styles.min.css
+++ b/static/styles.min.css
@@ -1 +1 @@
-/*!normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css*/html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:initial}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}body{font-family:Menlo,Consolas,Monaco,Liberation Mono,Lucida Console,monospace;overflow-x:hidden;margin:0;padding:0}form{display:flex;flex-direction:column;align-items:center;justify-content:center}div{display:flex;flex-direction:row;align-items:center;justify-content:center;width:100vw}label{text-align:center;width:20%}.spacer{width:60%}button{border:none;border-radius:0;padding:.75rem;width:20%}textarea{background-color:inherit;border:none;border-radius:0;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;resize:none;outline:none;height:100vh;width:100vw;max-height:100vw;max-width:90vw;margin:0 auto;padding:1.5rem}:modal{height:90vh;width:90vw}
\ No newline at end of file
+/*!normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css*/html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:initial}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}body{font-family:Menlo,Consolas,Monaco,Liberation Mono,Lucida Console,monospace;overflow-x:hidden;margin:0;padding:0}form{display:flex;flex-direction:column;align-items:center;justify-content:center}div:not(#preview){display:flex;flex-direction:row;align-items:center;justify-content:center;width:100vw}label{text-align:center;width:20%}.spacer{width:60%}button{border:none;border-radius:0;padding:.75rem;width:20%}textarea{background-color:inherit;border:none;border-bottom:1px solid #000;border-radius:0;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;resize:none;outline:none}textarea,#preview{height:40vh;width:100vw;max-height:40vh;max-width:90vw;margin:0 auto;padding:1.5rem;overflow:scroll}:modal{height:90vh;width:90vw}
\ No newline at end of file