JSFiddle - React, Tailwind, and code Playground

by Ramya Ranganathan

HTML

<script src="https://cdn.rawgit.com/thingsinjars/jQuery-Scoped-CSS-plugin/master/jquery.scoped.js"></script>
<p id="header"><h1>Screenshot.js -  <div id="run">Run</div></h1>Enter your CSS styles in the upper box, and your HTML in the lower one and push the "Run" button. You may then right click the generated image, and click "Save Image As" to download a PNG screenshot of your work.</p><p>NOTE: The <code>INPUT</code> element cannot be screenshotted!</p>

<div id="boxes">
	Screenshot Size: <input type="text" id="sWidth" placeholder="Width" /> x <input type="text" id="sHeight" placeholder="Height" /> - Clipping may occur if too small.

	<textarea class="box" id="css" placeholder="CSS"></textarea>
	<textarea class="box" id="html" placeholder="HTML"></textarea>
</div>

<div id="output">

</div>

<div id="image">
	<svg xmlns='http://www.w3.org/2000/svg' id="svg">
		<foreignObject width='100%' height='100%' style="font-size:15px">
			<div xmlns='http://www.w3.org/1999/xhtml' id="imageElements">
			
			</div>
		</foreignObject>
	</svg>
</div>

CSS

html, body {
	height: 100%;
	padding: 0;
	margin: 0;
}

#header {
	text-align: center;
}

#boxes {
	width: 50%;
	height: 100%;
	float: left;
}

.box {
	width: 100%;
	height: 50%;
	border:1px solid #d3d3d3;
}

#output {
	width:50%;
	height:100%;
	float:right;
}


#image {
	display:none;
	width:100%;
	height:100%;
}

#run {
	background-color:#007dc1;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	border-radius:3px;
	border:1px solid #124d77;
	display:inline-block;
	color:#ffffff;
	font-family:Arial;
	font-size:13px;
	padding:6px 24px;
	text-shadow:0px 1px 0px #154682;
}

#run:hover {
	background-color:#0061a7;
}
#run:active {
	position:relative;
	top:1px;
}

#svg {
	width:1000px;
	height:1000px;
}

JavaScript

/* This application generates a screenshot from HTML and CSS. It allows for a user to enter in HTML and CSS which it then converts into XML for use in an SVG element.
The SVG element with the rendered HTML and CSS is then encoded into base64, and added to a canvas element.
Once the canvas element has been generated, toDataURL() is then used to create a PNG image out of the canvas element, and that is displayed on the page. */

/*  It contains the following techniques (the numbers in paranthesis refer to the line number of an example):
	1. DOM element creation, modification and deletion (108, 105, 97)
	2. DOM traversal (97) - (87, kind of)
	3. Creation and handling of a data structure - JSON and a custom object (70, 21, 40)
	4. Form validation (62)
	5. Closures (120)
*/

window.onload = function() {

	//Checks if it's running in chrome or firefox, and alerts the user if not
	if (!(navigator.userAgent.toLowerCase().indexOf('chrome') > -1 || navigator.userAgent.toLowerCase().indexOf('firefox') > -1)) {
		alert("WARNING: This website only works on Chrome or Firefox!")
	}

	//Load the saved code and options from local storage into the page
	var storedCode = JSON.parse(window.localStorage.getItem("SavedCode"));
    if (storedCode) {
	    $('#css').val(storedCode.css);
	    $('#html').val(storedCode.html);
	    $('#sWidth').val(storedCode.sWidth);
	    $('#sHeight').val(storedCode.sHeight);
    }

	//Registers the #run button on click event
	$('#run').click(function(){run()});

	//Write the page load welcome content
	var startHtml = "<h2>Welcome to the Screenshot.js demo!</h2><h2> You can try out all sorts of cool CSS3 effects, and then download the image generated here. </h2><h2>Try out it out - enter some CSS and HTML on the left!</h2>";
	var startCss = 'h2 {font: normal 40px/normal "Comic Sans MS", cursive, sans-serif;color: rgba(255,255,255,1);text-align: center;text-shadow: 0 1px 0 rgb(204,204,204) , 0 2px 0 rgb(201,201,201) , 0 3px 0 rgb(187,187,187) , 0 4px 0...