todo-backbone-modelbinder

by niki4810

HTML

<div class="container">
    <div class="form-input">
        <input name="todo-item" class="todo-item" type="text" placeholder="what needs to be done?" />
        <button class="todo-add">+</button>
    </div>
    <hr class="hr-separator" />
    <div class="form-list">
        <ul>
            <li>
                <div class="todo-list-item">
                    <div class="todo-description">
                        <label>abs</div>
                    </div>
                    <div class="todo-complete">
                        <button>X</button>
                    </div>
                </div>
            </li>
        </ul>
      </div>
</div>

CSS

.container {
    padding:10px;
    margin:10px;
    /*border :1px solid;*/
}
.form-input {
    padding : 10px;
}
.form-list {
    padding :10px;
}
.todo-item {
    width : 80%;
    font-size:20px;
    height : 40px;
}
.todo-add {
    width : 10%;
    font-size: 20px;
    height:40px;
    border-style:none;
    padding: 10px;
    border-radius: 5px;
}
.hr-separator {
    margin:10px;
}
.todo-add:hover {
    padding: 20px;
    border-radius:10px;
}
.form-list li {
    list-style : none;
}
.todo-list-item {
    width:100%;
}
.todo-description {
    float : left;
    width:80%;
}
.todo-description label {
    font-size : 20px;
}
.todo-complete {
    float:left;
}