Bars Demo App

This is a simple To Do app made with Bars App.

HTML

<script src="https://mike96angelo.github.io/Bars/src/bars-app.min.js"></script>
<script id="bars-template" type="text/x-bars-template">
{{#with todos=todos}}
<h2>To Do App</h2>
<input id="new-list" todos:{{todos}} placeholder="Add something to your list..." />
<ul>
{{#each todos}}
  <li class="{{del ? 'del' : ''}}">
    <div>
      <span class="list-complete {{complete ? 'done' : ''}}" todo:{{this}}></span>
      <span class="list">{{text}}</span>
      <span class="list-del" todo:{{this}} todos:{{todos}}>x</span>
    </div>
  </li>
{{else}}
  <li>
    <span>You have nothing left to do.</span>
  </li>
{{/each}}
</ul>
{{/with}}
</script>
<div id="bars-output"></div>

CSS

*, *:before, *:after {
    margin: 0;
    padding: 0;
}

ul {
    min-height: 25px;
}

ul, li {
    list-style: none;
}

input {
    width: 250px;
    outline: none;
    padding: 5px;

    margin-top: 10px;
    margin-bottom: 10px;
    text-align: center;
}

#bars-output {
    padding: 10px;
    text-align: center;
}

li > div {
    display: inline-block;
    width: 250px;
}
li {
    height: 25px;
    opacity: 1;
    overflow: hidden;
}
li.del {
    height: 0;
    opacity: 0;
    transition: height 0.2s, opacity 0.2s;
}

.list,
.list-complete,
.list-del {
    display: inline-block;
    height: 20px;
    float: left;
}

.list {
    text-align: left;
    padding-left: 10px;
}

.list-complete,
.list-del {
    cursor: pointer;
    width: 20px;
    color: rgba(0, 0, 0, 0.5);
}

.list-complete.done {
    border-width: 10px;
    border-color: rgb(50, 200, 75);
}

.list-complete {
    box-sizing: border-box;
    border-radius: 10px;
    border-width: 2px;
    border-color: #cccccc;
    border-style: solid;
    transition: border-width 0.2s;
}

.list-del {
    float: right;
}

JavaScript

function loadData() {
    var todos = localStorage.getItem('todos');
    todos = todos && JSON.parse(todos);

    return todos || {
        todos: [
            {
                text: 'Buy eggs'
            }
        ]
    };
}

function storeData(todos) {
    localStorage.setItem('todos', JSON.stringify(todos));

    return todos;
}

var app = new App(
    {
        index: document.getElementById('bars-template').innerHTML,
        // partials: {},
        // transforms: {}
    },
    loadData()
);
app.appendTo('#bars-output');

app.view.on('click', '.list-complete', function (evt, target){
    var todo = target.data('todo');
    todo.complete = !todo.complete;
    app.render();
    storeData(app.state);
});

app.view.on('click', '.list-del', function (evt, target){
    var todo = target.data('todo');
    var todos = target.data('todos');

    todo.del = true;
    app.render();

    setTimeout(function () {
        todos.splice(todos.indexOf(todo), 1);

        app.render();
        storeData(app.state);
    }, 200);
});

app.view.on('change', '#new-list', function (evt, target){
    var todos = target.data('todos');

    var todo = {
        del: true,
        text: target.value
    };

    todos.unshift(todo);
    app.render();
    target.value = '';

    setTimeout(function () {
        delete todo.del;
        app.render();
        storeData(app.state);
    }, 0);
});