Skip to content

D
dojo-javascript
Commit bbb4b4ce authored by Daniel González Peña's avatar Daniel González Peña
Browse files
Options

Initial commit

parents
Hide whitespace changes
Inline Side-by-side
Showing with 282 additions and 0 deletions
README.md 0 → 100644
View file @ bbb4b4ce
# Dojo-Javascript
A todo list without model-view binding frameworks
todo-list-handlebars/index.html 0 → 100644
View file @ bbb4b4ce
<!DOCTYPE html>
<html>
<head>
<script src="todocontroller.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.6/handlebars.min.js"></script>
<style>
#todos {
list-style-type: none;
}
.todo-item {
padding-top: 10px;
padding-bottom: 10px;
vertical-align: middle;
}
.todo-item span {
cursor: pointer;
}
.todo-item input {
float: right;
}
.todo-item.done {
background-color: lightgrey;
}
.hidden {
display: none;
}
</style>
<script id="todo-list-template" type="text/x-handlebars-template">
{{#each this}}
<li id="todo-item-{{@index}}" class="todo-item {{#if done}}done{{/if}}">
<span class="name">{{name}}</span>
<input value="{{#if done}}Reopen{{else}}Close{{/if}}" id="done-item-{{@index}}" type="button">
<div class="description hidden">{{description}}</div>
</li>
{{/each}}
</script>
</head>
<body onload="todocontroller.init()">
<h1>Todo List</h1>
<ul id="todos">
</ul>
<form>
Name: <input type="text" id="todo-name"><br> Description:
<br>
<textarea id="todo-description"></textarea><br>
<input type="button" id="add-button" value="Add"></input>
</form>
</body>
</html>
\ No newline at end of file
todo-list-handlebars/todocontroller.js 0 → 100644
View file @ bbb4b4ce
class TodoController {
constructor() {
this.todos = [{
name: 'lunch',
description: '13.00h, A Palleira Restaurant'
},
{
name: 'dojo',
description: '17.00h. Create a todo list!'
},
];
}
init() {
this.updateTodos();
this.createAddButtonListener();
}
updateTodos() { // <---- full render!!
var render = Handlebars.compile(document.getElementById('todo-list-template').innerHTML);
var html = render(this.todos);
document.getElementById('todos').innerHTML = html; // <--- DOM Destroyed
this.createTodoListeners();
}
toggleDoneItem(todo) {
return () => {
console.log('closing item');
todo.done = !todo.done;
this.updateTodos(); // <---- force re-render
}
}
createAddButtonListener() {
document.getElementById('add-button').addEventListener('click', () => {
var newTodoName = document.getElementById('todo-name').value;
var newTodoDescription = document.getElementById('todo-description').value;
this.todos.push({
name: newTodoName,
description: newTodoDescription
});
this.updateTodos(); // <--- force re-render
});
}
createTodoListeners() {
this.todos.forEach((todo, index) => {
document.getElementById('done-item-' + index).addEventListener(
'click', this.toggleDoneItem(todo));
document.getElementById('todo-item-' + index)
.getElementsByClassName('name')[0].addEventListener(
'click', (event) => {
event.target.parentNode.getElementsByClassName('description')[0]
.classList.toggle('hidden');
})
});
}
}
var todocontroller = new TodoController();
\ No newline at end of file
todo-list-vanilla/index.html 0 → 100644
View file @ bbb4b4ce
<!DOCTYPE html>
<html>
<head>
<script src="todocontroller.js"></script>
<style>
#todos {
list-style-type: none;
}
.todo-item {
padding-top: 10px;
padding-bottom: 10px;
vertical-align: middle;
}
.todo-item span {
cursor: pointer;
}
.todo-item input {
float: right;
}
.todo-item.done {
background-color: lightgrey;
}
.hidden {
display: none;
}
</style>
</head>
<body onload="todocontroller.init()">
<h1>Todo List</h1>
<ul id="todos">
</ul>
<form>
Name: <input type="text" id="todo-name"><br> Description:
<br>
<textarea id="todo-description"></textarea><br>
<input type="button" id="add-button" value="Add"></input>
</form>
</body>
</html>
\ No newline at end of file
todo-list-vanilla/todocontroller.js 0 → 100644
View file @ bbb4b4ce
class TodoController {
constructor() {
this.todos = [{
name: 'lunch',
description: '13.00h, A Palleira Restaurant'
},
{
name: 'dojo',
description: '17.00h. Create a todo list!'
},
];
}
init() {
this.updateTodos();
this.createAddButtonListener();
}
updateTodos() { // <---- full render!!
var todosListElement = document.getElementById('todos');
todosListElement.innerHTML = ''; // <--- DOM destroyed!
this.todos.forEach((todo, index) => {
var todoItemElement = document.createElement('li');
todoItemElement.id = 'todo-item-' + index;
var todoItemLabelElement = document.createElement('span');
todoItemLabelElement.classList.add('name');
todoItemLabelElement.innerHTML = todo.name;
var todoItemDescriptionElement = document.createElement('div');
todoItemDescriptionElement.innerHTML = todo.description;
todoItemDescriptionElement.classList.add('description');
todoItemDescriptionElement.classList.add('hidden');
todoItemElement.classList.add('todo-item');
if (todo.done) {
todoItemElement.classList.add('done');
}
todoItemElement.appendChild(todoItemLabelElement);
var todoItemDoneButton = document.createElement('input');
todoItemDoneButton.type = 'button';
todoItemDoneButton.value = todo.done ? 'Reopen' : 'Done';
todoItemDoneButton.id = 'done-item-' + index;
todoItemElement.appendChild(todoItemDoneButton);
todoItemElement.appendChild(todoItemDescriptionElement);
todosListElement.appendChild(todoItemElement);
});
this.createTodoListeners();
}
toggleDoneItem(todo) {
return () => {
console.log('closing item');
todo.done = !todo.done;
this.updateTodos(); // <---- force re-render
}
}
createAddButtonListener() {
document.getElementById('add-button').addEventListener('click', () => {
var newTodoName = document.getElementById('todo-name').value;
var newTodoDescription = document.getElementById('todo-description').value;
this.todos.push({
name: newTodoName,
description: newTodoDescription
});
this.updateTodos(); // <--- force re-render
});
}
createTodoListeners() {
this.todos.forEach((todo, index) => {
document.getElementById('done-item-' + index).addEventListener(
'click', this.toggleDoneItem(todo));
document.getElementById('todo-item-' + index)
.getElementsByClassName('name')[0].addEventListener(
'click', (event) => {
event.target.parentNode.getElementsByClassName('description')[0]
.classList.toggle('hidden');
})
});
}
}
var todocontroller = new TodoController();
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment