This is probably really dumb but someone recommended this fiddle to me
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.
3 Answers
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 name="myText"></textarea> <br/> <br/>Cost: <input type="text" name="lineCount" size="1" value="0" />Dollars <br/> <br/>Formatted: <br/> <textarea 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.
1I 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 name="myText"></textarea> <br/> <br/>Cost: <input type="text" name="lineCount" size="1" value="0" />Dollars <br/> <br/>Formatted: <br/> <textarea name="formatText" disabled="yes"></textarea>
</form>
</body>
</html>
