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 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>
