Write a script that shows content typed into the textarea#content field in the #preview-content element.
Bonus: Convert the content from markdown to HTML using an open source plugin like MarkedJS.
This project is part of the Writing Plugins pocket guide and video course.
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Project Template</title> | |
| <style type="text/css"> | |
| body { | |
| margin-left: auto; | |
| margin-right: auto; | |
| max-width: 40em; | |
| width: 88%; | |
| } | |
| label { | |
| font-weight: bold; | |
| } | |
| input, | |
| textarea { | |
| margin-bottom: 2em; | |
| width: 100%; | |
| } | |
| textarea { | |
| height: 12em; | |
| } | |
| /** | |
| * Simple Grid | |
| * https://gridbyexample.com/examples/example37/ | |
| */ | |
| @media (min-width: 40em) { | |
| .grid { | |
| display: grid; | |
| grid-gap: 2em; | |
| grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>Mirror Test</h1> | |
| <div class="grid"> | |
| <div> | |
| <label for="content">Content</label> | |
| <textarea id="content"></textarea> | |
| </div> | |
| <div> | |
| <strong>Preview</strong> | |
| <div id="preview-content"></div> | |
| </div> | |
| </div> | |
| <script> | |
| // Project code... | |
| </script> | |
| </body> | |
| </html> |