Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Mirror text project template from https://learnvanillajs.com.

Project Details

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.

Considerations

  • How do you handle line breaks?
  • How can you structure the script to support additional fields without having to change the code?

Need help?

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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.