This is probably really dumb but someone recommended this fiddle to me
http://goo.gl/Fgmwjj
and I want to test it out but I want to write it in Notepad++ the only thing is I don't know the right syntax to combine all three languages into one document.
Best Answer
Add <script> tags to include a script. For something you need loaded AFTER the HTML, load it at the bottom before your </body>.
Add a <style> tag inside your head to include CSS.
<!DOCTYPE html><html><head><style>#textin {width: 500px;height: 150px;}#textout {font-family: courier;font-size: 12px;width: 40em;height: 200px;resize: none;}</style></head><body><form><textarea id="textin" name="myText"></textarea><br/><br/>Cost:<input type="text" name="lineCount" size="1" value="0" />Dollars<br/><br/>Formatted:<br/><textarea id="textout" name="formatText" disabled="yes"></textarea></form><script>function countLines() {var theArea = document.getElementById("textin");var theLines = theArea.value;theLines = theLines.split("\n");var finalLines = [];var numLines = theLines.length;for (var i = 0; i < numLines; i++) {if (theLines[i].length > 40) {if(theLines[i].match(/^.{0,38}\S{41}/)) {theLines[i] = theLines[i].replace(/^(.{40})/, "$1\n");var newLines = [i,1].concat(theLines[i].split("\n"));numLines++;Array.prototype.splice.apply(theLines, newLines);} else {theLines[i] = theLines[i].replace(/(.{1,40}[^\S\n])/, "$1\n");var newLines = [i,1].concat(theLines[i].split("\n"));numLines++;Array.prototype.splice.apply(theLines, newLines);}}finalLines.push(theLines[i]);}while (finalLines.length && finalLines[finalLines.length - 1].match(/^\s*$/)) {finalLines.pop();}theArea.form.lineCount.value = finalLines.length;document.getElementById("textout").value = finalLines.join("\n");}var el = document.getElementById("textin");if (el.addEventListener) {el.addEventListener("input", countLines, false);} else {el.attachEvent('onpropertychange', countLines);el.attachEvent('onkeypress', countLines);}var observe;if (window.attachEvent) {observe = function (element, event, handler) {element.attachEvent('on' + event, handler);};} else {observe = function (element, event, handler) {element.addEventListener(event, handler, false);};}function init() {var text = document.getElementById('text');function resize() {text.style.height = 'auto';text.style.height = text.scrollHeight + 'px';}/* 0-timeout to get the already changed text */function delayedResize() {window.setTimeout(resize, 0);}observe(text, 'change', resize);observe(text, 'cut', delayedResize);observe(text, 'paste', delayedResize);observe(text, 'drop', delayedResize);observe(text, 'keydown', delayedResize);text.focus();text.select();resize();}</script></body></html>Jsfiddle uses HTML, CSS and JavaScript to render the final result. Both CSS and JS can be easily embedded into an HTML document using <style> and <script> tags respectively. You would be looking at something like this:
<html><head><style type="text/css">CSS goes here</style><script type="text/javascript">JS goes here</script></head><body>HTML goes here</body></html>It's usually best to put your CSS/JS in external files then link them so the browser can cache them, among other reasons, but embedded works in a pinch.
I didn't even look at the code but I just put it together for you, hopefully this gets you started :)
<html><head><style>#textin {width: 500px;height: 150px;}#textout {font-family: courier;font-size: 12px;width: 40em;height: 200px;resize: none;}</style><script type="text/javascript">function countLines() {var theArea = document.getElementById("textin");var theLines = theArea.value;theLines = theLines.split("\n");var finalLines = [];var numLines = theLines.length;for (var i = 0; i < numLines; i++) {if (theLines[i].length > 40) {if(theLines[i].match(/^.{0,38}\S{41}/)) {theLines[i] = theLines[i].replace(/^(.{40})/, "$1\n");var newLines = [i,1].concat(theLines[i].split("\n"));numLines++;Array.prototype.splice.apply(theLines, newLines);} else {theLines[i] = theLines[i].replace(/(.{1,40}[^\S\n])/, "$1\n");var newLines = [i,1].concat(theLines[i].split("\n"));numLines++;Array.prototype.splice.apply(theLines, newLines);}}finalLines.push(theLines[i]);}while (finalLines.length && finalLines[finalLines.length - 1].match(/^\s*$/)) {finalLines.pop();}theArea.form.lineCount.value = finalLines.length;document.getElementById("textout").value = finalLines.join("\n");}var el = document.getElementById("textin");if (el.addEventListener) {el.addEventListener("input", countLines, false);} else {el.attachEvent('onpropertychange', countLines);el.attachEvent('onkeypress', countLines);}var observe;if (window.attachEvent) {observe = function (element, event, handler) {element.attachEvent('on' + event, handler);};} else {observe = function (element, event, handler) {element.addEventListener(event, handler, false);};}function init() {var text = document.getElementById('text');function resize() {text.style.height = 'auto';text.style.height = text.scrollHeight + 'px';}/* 0-timeout to get the already changed text */function delayedResize() {window.setTimeout(resize, 0);}observe(text, 'change', resize);observe(text, 'cut', delayedResize);observe(text, 'paste', delayedResize);observe(text, 'drop', delayedResize);observe(text, 'keydown', delayedResize);text.focus();text.select();resize();}</script><body><form><textarea id="textin" name="myText"></textarea><br/><br/>Cost:<input type="text" name="lineCount" size="1" value="0" />Dollars<br/><br/>Formatted:<br/><textarea id="textout" name="formatText" disabled="yes"></textarea></form></body></html>