Minified - EE

by tjansen

HTML

<script src="http://minifiedjs.com/download/minified-src.js"></script>
<body>
    <h2>My TODOs</h2>
    <ol class="todos"></ol>

    <h3>Add new TODO</h3>
    <input id="textInput" placeholder="Enter Todo!"/>
    <input id="linkInput" placeholder="Enter URL (optional)!"/>
    <input id="importantCB" type="checkbox"/><label for="importantCB">Important</label>
    <button id="addButton">Add</button>
</body>

CSS

.important { font-weight: bold }

JavaScript

var MINI = require('minified'); 
var $ = MINI.$, $$ = MINI.$$, EE = MINI.EE;

$(function() {
    $('#addButton').on('click', function() {
        if ($$('#textInput').value) {
            var classes = $$('#importantCB').checked ? 'important' : '';
            if ($$('#linkInput').value)
                $('.todos').add(EE('li', {$: classes}, 
                                   EE('a', {href: $$('#linkInput').value}, $$('#textInput').value)));
            else
                $('.todos').add(EE('li', {$: classes}, $$('#textInput').value));
        }
        $('input').set({value: '', checked: false}); // reset inputs
    });
});