<!DOCTYPE html>
<head>
<title>Recipe</title>
<script>

window.onload=function() {
 document.getElementById("preview").onclick=processText;
}

function processText() {
 var txtBox = document.getElementById("inputbox");
 var lines = txtBox.value.split("\n");

 // generate HTML version of text
 var resultString  = "<p>";
 for (var i = 0; i < lines.length; i++) {
   resultString += lines[i] + "<br />";
 }
 resultString += "</p>";

 // print out to page
 var   blk   = document.getElementById("result");
 blk.innerHTML  =  resultString; 
}

</script>

</head>
<body>
<textarea id="inputbox" cols="20" rows="10"></textarea>
<div><button id="preview">Preview</button></div>
<div id="result"></div>
</body>
// Code goes here

/* Styles go here */