Skip to content

D
dojo-javascript
You need to sign in or sign up before continuing.
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