Corrections typo + exo VanillaTodos complet
This commit is contained in:
parent
482caf5b47
commit
ee0ae6d1be
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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));
|
||||
|
|
|
|||
|
|
@ -9,13 +9,13 @@ var showThisAndArgs = function() {
|
|||
|
||||
showThisAndArgs(); // -> Window, []
|
||||
|
||||
// Lier un fonction à un contexte
|
||||
// Lier une fonction à un contexte
|
||||
var myContext = {};
|
||||
var bound = showThisAndArgs.bind(myContext);
|
||||
|
||||
bound(); // -> myContext, []
|
||||
|
||||
// Invoquer une fonction en modifiant son contexte et/en injectant des arguments
|
||||
// Invoquer une fonction en modifiant son contexte et/ou en injectant des arguments
|
||||
|
||||
showThisAndArgs.call(myContext, 'arg1', 'arg2'); // -> myContext, ['arg1', 'arg2']
|
||||
showThisAndArgs.apply(myContext, ['arg1', 'arg2']); // -> myContext, ['arg1', 'arg2']
|
||||
|
|
|
|||
|
|
@ -3,5 +3,5 @@
|
|||
.cadoles-list[
|
||||
- Javascript (jusqu'à ES6) n'intègre pas de mécanisme particulier afin de modulariser le code.
|
||||
- L'envergure des projets Javascript devenant de plus en plus importante, différentes méthodes ont vu le jour dans les projets portées par la communauté.
|
||||
- Certaines sont accompagnées de spécification facilitant l'inter-opérabilité des projets, d'autres tiennent plus de la convention.
|
||||
- Certaines sont accompagnées de spécification facilitant l'interopérabilité des projets, d'autres tiennent plus de la convention.
|
||||
]
|
||||
|
|
|
|||
|
|
@ -4,7 +4,8 @@
|
|||
- Simple à mettre en place, méthode très répandue (ex: jQuery)
|
||||
- Peu de surcoût d'exécution
|
||||
- Pas de transformation à apporter au code pour le rendre exécutable dans le navigateur
|
||||
- Interopérable avec les autres systèmes de modularisation via [UMD](https://github.com/umdjs/umd)
|
||||
|
||||
**Désavantages**
|
||||
- Beaucoup de variantes, avec parfois des comportements légèrement différents
|
||||
- Ne gère par les dépendances
|
||||
- Ne gère pas directement les dépendances
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
**Avantages**
|
||||
- Gestion et injection des dépendances
|
||||
- Inter-opérable avec les autres méthodes de modularisation via configuration
|
||||
- Interopérable avec les autres méthodes de modularisation via configuration
|
||||
- Véritable [spécification](https://github.com/amdjs/amdjs-api/blob/master/AMD.md), de nombreux "loaders" (Exemple: [requirejs](http://requirejs.org/)) compatibles existent
|
||||
- "Lazy-loading" possible de certaines parties du code
|
||||
- Possibilité de charger des ressources autres que du Javascript via un mécanisme de plugin (ressources type texte, templates, etc...)
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ var test = 1;
|
|||
if(test < 1) {
|
||||
console.log('test est strictement inférieur à 1');
|
||||
} else if(test > 1) {
|
||||
console.log('test est strictement supérieur à 2');
|
||||
console.log('test est strictement supérieur à 1');
|
||||
} else {
|
||||
console.log('test est égal à 1');
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue