cferdinandi/README.md

## README.md

      
          Raw
        
        
              README.md
            
          
    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.

  
## index.html
<!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>
	<!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>