ZenCoding CodeAcademy Material

<script src="https://raw.github.com/seriousmoth/zen-markup/master/zen-markup.js"></script>

by BinaryAcid

HTML

<script src="http://jslib.dotcloud.com/fiddle-require.js"></script>
<script src="https://raw.github.com/seriousmoth/zen-markup/master/zen-markup.js"></script>

<h1>Zen Coding Training</h1><br>

<h2>Use '.' to indicate the class of the element being created.</h2>
<p>Example: ul#my-list > li.elem + li.elem</p>
<textarea id="field1" rows="2" cols="55"></textarea>
<div id="output1"></div>

<h2>Use '#' to indicate the id of the element being created.</h2>
<p>Example: ul#my-list > li.elem + li.elem</p>
<textarea id="field2" rows="2" cols="55"></textarea>

<h2>Use '>' to indicate the next elements should be created as children.</h2>
<p>Example: ul#my-list > li.elem + li.elem</p>
<textarea id="field3" rows="2" cols="55"></textarea>

<h2>Use '+' to indicate the next elments should be created as siblings</h2>
<p>Example: ul#my-list > li.elem + li.elem</p>
<textarea id="field4" rows="2" cols="55"></textarea>

JavaScript

var zenSnippet1 = ZenHTML('ul#my-list > li.elem + li.elem');
$("#field1").val(zenSnippet1);

var zenSnippet2 = ZenHTML('ul#my-list > li.elem + li.elem');
$("#field2").val(zenSnippet2);

var zenSnippet3 = ZenHTML('ul#my-list > li.elem + li.elem');
$("#field3").val(zenSnippet3);

var zenSnippet4 = ZenHTML('ul#my-list > li.elem + li.elem');
$("#field4").val(zenSnippet4);

$("#output1").text(zenSnippet4);