ES6 Todo
HTML
<div id="test">
<input type="text" id="todo-text" placeHolder="Enter to do text"/>
</div>
CSS
#todo-text{
padding:12px 10px;
}
#test{
padding-top : 20px;
width : 80%;
margin : 0 auto;
}
#test .done{
text-decoration: line-through;
color : red;
}
#test div{
padding : 10px 0;
cursor : pointer;
}
ES6
class todos {
constructor(text) {
this.istodo = false;
this.text = text;
}
_changestatus() {
this.istodo = !this.istodo;
this._node.className = `${this.istodo?'done':''}`;
console.log(this.text);
}
setText() {
this._node = document.createElement('div');
this._node.appendChild(new Text(this.text));
this._node.onclick = (event) => {
this. _changestatus();
};
}
getNode() {
return this._node;
}
}
let container = document.getElementById('test');
let textBox = document.getElementById('todo-text');
let todo;
textBox.onkeyup = (e)=>{
if(e.keyCode==13){
todo = new todos(e.target.value);
todo.setText();
container.appendChild(todo.getNode());
e.target.value = '';
}
};
