Cadoles/formations
21
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Corrections typo + exo VanillaTodos complet

Browse Source
This commit is contained in:
wpetit
2015-04-01 15:11:13 +02:00
committed by Benjamin Bohard
parent 482caf5b47
commit ee0ae6d1be
8 changed files with 121 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
javascript/base/exercices/vanilla-todos/index.html
View File

@ -1,32 +1,33 @@
<html>
<head>
<meta charset="utf8">
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<h1>Vanilla Todos</h1>
<h1><img class="logo" src="../../img/vanilla.png" /> Vanilla Todos</h1>
<div id="vanilla-todos">
<table>
<thead>
<tr>
<th colspan="2">
<input class="search-todos" type="text" placeholder="Filter todos..." />
<input class="search-todos" type="text" placeholder="Filtrer les tâches..." />
</th>
</tr>
<tr>
<th>Todo</th>
<th>Mes tâches</th>
<th>Actions</th>
</tr>
</thead>
<tbody class="todos-list">
<tr>
<td colspan="2">Aucune todo pour le moment !</td>
<td colspan="2" class="no-todo">Pas de tâches pour le moment !</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">
<input class="new-todo" type="text" />
<input class="new-todo" type="text" placeholder="Créer une nouvelle tâche..."/>
</td>
</tr>
</tfoot>

60
javascript/base/exercices/vanilla-todos/style.css
View File

@ -1,4 +1,62 @@
body {
font-family: "Droid Sans", "sans-serif";
font-size: 16px;
background-color: #F8F8F8;
color: #333;
}
.container {
margin: 0 auto;
width: 80%;
}
.logo {
transform: rotate(45deg);
height: 40px;
display: inline-block;
vertical-align: bottom;
margin-right: 5px;
}
#vanilla-todos {
width: 100%;
}
#vanilla-todos table {
width: 100%;
text-align: left;
border-collapse: collapse;
}
#vanilla-todos tr {
height: 40px;
}
#vanilla-todos tr:hover {
background-color: #f4F4F4;
}
#vanilla-todos tbody td {
border-bottom: 1px solid #CCC;
}
#vanilla-todos tbody tr:last-child td {
border-bottom: none;
}
#vanilla-todos table td:last-child {
width: 100px;
}
#vanilla-todos .no-todo {
text-align: center;
}
#vanilla-todos input[type="text"] {
border-radius: 3px;
border: 1px solid #ccc;
height: 40px;
padding: 3px 10px;
width: 100%;
}

54
javascript/base/exercices/vanilla-todos/vanilla-todos.js
View File

@ -5,8 +5,11 @@
// Déclaration des variables
var _rootEl; // Élement racine de notre application
var _todos = []; // Notre liste de todos
var document = window.document; // Alias
// API publique
/*
* API publique
*/
/*
* "Monte" l'application VanillaTodo sur l'élément du DOM
@ -14,18 +17,23 @@
*/
VT.mount = function(selector) {
_rootEl = window.document.querySelector(selector);
_rootEl = document.querySelector(selector);
if(!_rootEl) {
throw new Error('Invalid selector "'+selector+'" !');
}
_initHandlers();
_renderTodos();
_todos = _loadTodos();
if(_todos.length > 0) {
_renderTodos();
}
};
// API privée
/*
* API privée
*/
function _initHandlers() {
@ -34,8 +42,25 @@
var searchInput = _rootEl.querySelector('.search-todos');
searchInput.addEventListener('keyup', _searchInputChangeHandler);
//searchInput.addEventListener('change', _searchInputChangeHandler);
// Délégation d'évènement, voir _removeTodoClickHandler
_rootEl.addEventListener('click', _removeTodoClickHandler);
}
function _removeTodoClickHandler(evt){
if(evt.target.matches('a.remove-todo')) {
var todoId = evt.target.dataset.todoId;
var todo;
for(var i = 0; i < _todos.length; ++i) {
todo = _todos[i];
if(todo.id == todoId) {
_todos.splice(i, 1);
_renderTodos(_todos);
_saveTodos(_todos);
}
}
}
}
function _searchInputChangeHandler(evt) {
@ -64,6 +89,7 @@
var newTodoInput = evt.currentTarget;
var todo = {
id: Date.now(),
text: newTodoInput.value
};
@ -73,6 +99,8 @@
_renderTodos(_todos);
_saveTodos(_todos);
}
function _renderTodos(todos) {
@ -105,8 +133,24 @@
function _createActionsCell(todo) {
var cell = document.createElement('td');
var removeLink = document.createElement('a');
removeLink.href = '#';
removeLink.className = "remove-todo";
removeLink.dataset.todoId = todo.id;
removeLink.innerHTML = 'Supprimer';
cell.appendChild(removeLink);
return cell;
}
function _loadTodos() {
var todosStr = window.localStorage.getItem('vanillaTodos.todos');
return JSON.parse(todosStr || '[]');
}
function _saveTodos(todos) {
var todosStr = JSON.stringify(todos);
window.localStorage.setItem('vanillaTodos.todos', todosStr);
}
}(this.VanillaTodos = this.VanillaTodos || {}, window));