├── README.md
├── LICENSE
├── css
    └── style.css
├── index.html
└── js
    └── js.js


/README.md:
--------------------------------------------------------------------------------
 1 | Playground
 2 | ==========
 3 | 
 4 | This is an interactive HTML/CSS/JS playground similar to jsFiddle, jsBin, CodePen and the likes but much simpler with only the basic features.
 5 | 
 6 | This project is based on the wonderful work and [write-up](http://codetheory.in/building-your-own-html-css-js-realtime-playground/) of the CSSDeck Author, [Rishabh](http://codetheory.in/about/). You can see the [CSSDeck](http://cssdeck.com/) variant [here](http://cssdeck.com/labs/zcqps6a7). I couldn't find an example on Github so I created one.
 7 | 
 8 | To use it, clone or download and unzip the project and start a local webserver (like `python -m SimpleHTTPServer`).
 9 | 
10 | ![screenshot](http://content.screencast.com/users/dirkk1/folders/Jing/media/35515ad5-ca5d-4de5-b976-24c8ce572037/00000249.png)


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2013 Dirk Krause
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of
 6 | this software and associated documentation files (the "Software"), to deal in
 7 | the Software without restriction, including without limitation the rights to
 8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
 9 | the Software, and to permit persons to whom the Software is furnished to do so,
10 | subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
17 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
18 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
19 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
20 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.


--------------------------------------------------------------------------------
/css/style.css:
--------------------------------------------------------------------------------
 1 | * {
 2 | 	-webkit-box-sizing: border-box;
 3 | 	-moz-box-sizing: border-box;
 4 | 	box-sizing: border-box;
 5 | }
 6 | 
 7 | html, body {
 8 | 	width: 100%; height: 100%;
 9 | }
10 | 
11 | #wrap {
12 | 	width: 100%;
13 | 	height: 100%;
14 | }
15 | 
16 | /* Code Editors */
17 | 
18 | #code_editors {
19 | 	position: absolute;
20 | 	top: 0; left: 0; bottom: 0; right: 60%;
21 | }
22 | 
23 | #code_editors .code_box {
24 | 	height: 33%; width: 100%;
25 | 	position: relative;
26 | }
27 | .code_box h3 {
28 | 	font-size: 13px;
29 | 	height: 30px;
30 | 	padding: 5px 10px; margin: 0;
31 | 	background: linear-gradient(#707070, #555);
32 | 	color: white;
33 | 	border-top: 1px solid #8F8F8F;
34 | 	border-bottom: 1px solid #202020;
35 | }
36 | .code_box textarea {
37 | 	position: absolute;
38 | 	left: 0; right: 0; top: 30px; bottom: 0;
39 | 	resize: none; border: 0;
40 | 	padding: 10px;
41 | 	font-family: monospace;
42 | }
43 | .code_box textarea:focus {
44 | 	outline: none;
45 | 	background: #EFEFEF;
46 | }
47 | 
48 | /* Output Area */
49 | #output {
50 | 	position: absolute;
51 | 	left: 40%; top: 0; right: 0; bottom: 0;
52 | 	border: 5px solid #444;
53 | 	border-left-width: 10px;
54 | 	overflow: hidden;
55 | }
56 | 
57 | #output iframe {
58 | 	width: 100%; height: 100%;
59 | 	border: 0;
60 | }


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.19.0/codemirror.css">
 2 | <link rel="stylesheet" href="css/style.css">
 3 | 
 4 | 
 5 | <div id="wrap">
 6 | 
 7 |   <!-- Code Editors -->
 8 |   <section id="code_editors">
 9 |     <div id="html" class="code_box">
10 |       <h3>HTML</h3>
11 |       <textarea name="html"></textarea>
12 |     </div>
13 |     <div id="css" class="code_box">
14 |       <h3>CSS</h3>
15 |       <textarea name="css"></textarea>
16 |     </div>
17 |     <div id="js" class="code_box">
18 |       <h3>JavaScript</h3>
19 |       <textarea name="js"></textarea>
20 |     </div>
21 |   </section>
22 |   
23 |   <!-- Sandboxing -->
24 |   <section id="output">
25 |     <iframe></iframe>
26 |   </section>
27 |   
28 | </div>
29 | 
30 | <script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.19.0/codemirror.js"></script>
31 | 
32 | <!-- For HTML/XML -->
33 | <script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.19.0/mode/xml/xml.js"></script>
34 | <script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.19.0/mode/htmlmixed/htmlmixed.js"></script>
35 | 
36 | <!-- For CSS -->
37 | <script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.16.0/mode/css/css.js"></script>
38 | 
39 | <!-- For JS -->
40 | <script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.19.0/mode/javascript/javascript.js"></script>
41 | <script src="js/js.js"></script>
42 | 


--------------------------------------------------------------------------------
/js/js.js:
--------------------------------------------------------------------------------
  1 | (function() {
  2 | 	
  3 | 	// Base template
  4 | 	var base_tpl =
  5 | 			"<!doctype html>\n" +
  6 | 			"<html>\n\t" +
  7 |       "<head>\n\t\t" +
  8 |       "<meta charset=\"utf-8\">\n\t\t" +
  9 |       "<title>Test</title>\n\n\t\t\n\t" +
 10 |       "</head>\n\t" +
 11 |       "<body>\n\t\n\t" +
 12 |       "</body>\n" +
 13 |       "</html>";
 14 | 	
 15 | 	var prepareSource = function() {
 16 | 		var html = html_editor.getValue(),
 17 | 				css = css_editor.getValue(),
 18 | 				js = js_editor.getValue(),
 19 | 				src = '';
 20 | 		
 21 | 		// HTML
 22 | 		src = base_tpl.replace('</body>', html + '</body>');
 23 | 		
 24 | 		// CSS
 25 | 		css = '<style>' + css + '</style>';
 26 | 		src = src.replace('</head>', css + '</head>');
 27 | 		
 28 | 		// Javascript
 29 | 		js = '<script>' + js + '<\/script>';
 30 | 		src = src.replace('</body>', js + '</body>');
 31 | 		
 32 | 		return src;
 33 | 	};
 34 | 	
 35 | 	var render = function() {
 36 | 		var source = prepareSource();
 37 | 		
 38 | 		var iframe = document.querySelector('#output iframe'),
 39 | 				iframe_doc = iframe.contentDocument;
 40 | 		
 41 | 		iframe_doc.open();
 42 | 		iframe_doc.write(source);
 43 | 		iframe_doc.close();
 44 | 	};
 45 | 	
 46 | 	
 47 | 	// EDITORS
 48 | 	
 49 | 	// CM OPTIONS
 50 | 	var cm_opt = {
 51 | 		mode: 'text/html',
 52 | 		gutter: true,
 53 | 		lineNumbers: false,
 54 | 		
 55 | 		onChange: function () {
 56 | 			console.log('1')
 57 | 			render();
 58 | 		}
 59 | 	};
 60 | 	
 61 | 	// HTML EDITOR
 62 | 	var html_box = document.querySelector('#html textarea');
 63 | 	var html_editor = CodeMirror.fromTextArea(html_box, cm_opt);
 64 | 	html_editor.on("change", function(html_editor, change) {
 65 | 	  // console.log("something changed! (" + change.origin + ")");
 66 | 	  render();
 67 | 	});
 68 | 
 69 | 	
 70 | 	// CSS EDITOR
 71 | 	cm_opt.mode = 'css';
 72 | 	var css_box = document.querySelector('#css textarea');
 73 | 	var css_editor = CodeMirror.fromTextArea(css_box, cm_opt);
 74 | 	css_editor.on("change", function(css_editor, change) {
 75 | 	  // console.log("something changed! (" + change.origin + ")");
 76 | 	  render();
 77 | 	});
 78 | 	
 79 | 	// JAVASCRIPT EDITOR
 80 | 	cm_opt.mode = 'javascript';
 81 | 	var js_box = document.querySelector('#js textarea');
 82 | 	var js_editor = CodeMirror.fromTextArea(js_box, cm_opt);
 83 | 	js_editor.on("change", function(js_editor, change) {
 84 | 	  // console.log("something changed! (" + change.origin + ")");
 85 | 	  render();
 86 | 	});
 87 | 	
 88 | 	// SETTING CODE EDITORS INITIAL CONTENT
 89 | 	html_editor.setValue('<p>Hello World</p>');
 90 | 	css_editor.setValue('body { color: red; }');
 91 | 	
 92 | 	
 93 | 	// RENDER CALL ON PAGE LOAD
 94 | 	// NOT NEEDED ANYMORE, SINCE WE RELY
 95 | 	// ON CODEMIRROR'S onChange OPTION THAT GETS
 96 | 	// TRIGGERED ON setValue
 97 | 	// render();
 98 | 	
 99 | 	
100 | 	// NOT SO IMPORTANT - IF YOU NEED TO DO THIS
101 | 	// THEN THIS SHOULD GO TO CSS
102 | 	
103 | 	/*
104 | 		Fixing the Height of CodeMirror.
105 | 		You might want to do this in CSS instead
106 | 		of JS and override the styles from the main
107 | 		codemirror.css
108 | 	*/
109 | 	var cms = document.querySelectorAll('.CodeMirror');
110 | 	for (var i = 0; i < cms.length; i++) {
111 | 		
112 | 		cms[i].style.position = 'absolute';
113 | 		cms[i].style.top = '30px';
114 | 		cms[i].style.bottom = '0';
115 | 		cms[i].style.left = '0';
116 | 		cms[i].style.right = '0';
117 | 	}
118 | 	cms = document.querySelectorAll('.CodeMirror-scroll');
119 | 	for (i = 0; i < cms.length; i++) {
120 | 		cms[i].style.height = '100%';
121 | 	}
122 | 			
123 | }());


--------------------------------------------------------------------------------