From 482caf5b4715fffd821c28e73c8dfaa27953e310 Mon Sep 17 00:00:00 2001 From: William Petit Date: Wed, 1 Apr 2015 11:17:02 +0200 Subject: [PATCH] Ajout exo VanillaTodos --- .../base/exercices/vanilla-todos/index.html | 43 +++++++ .../base/exercices/vanilla-todos/style.css | 4 + .../exercices/vanilla-todos/vanilla-todos.js | 112 ++++++++++++++++++ 3 files changed, 159 insertions(+) create mode 100644 javascript/base/exercices/vanilla-todos/index.html create mode 100644 javascript/base/exercices/vanilla-todos/style.css create mode 100644 javascript/base/exercices/vanilla-todos/vanilla-todos.js diff --git a/javascript/base/exercices/vanilla-todos/index.html b/javascript/base/exercices/vanilla-todos/index.html new file mode 100644 index 0000000..33d3cb9 --- /dev/null +++ b/javascript/base/exercices/vanilla-todos/index.html @@ -0,0 +1,43 @@ + + + + + +
+

Vanilla Todos

+
+ + + + + + + + + + + + + + + + + + + + +
+ +
TodoActions
Aucune todo pour le moment !
+ +
+
+
+ + + + diff --git a/javascript/base/exercices/vanilla-todos/style.css b/javascript/base/exercices/vanilla-todos/style.css new file mode 100644 index 0000000..f4099e8 --- /dev/null +++ b/javascript/base/exercices/vanilla-todos/style.css @@ -0,0 +1,4 @@ + +.container { + +} diff --git a/javascript/base/exercices/vanilla-todos/vanilla-todos.js b/javascript/base/exercices/vanilla-todos/vanilla-todos.js new file mode 100644 index 0000000..515f84b --- /dev/null +++ b/javascript/base/exercices/vanilla-todos/vanilla-todos.js @@ -0,0 +1,112 @@ +(function(VT, window) { + + "use strict"; + + // Déclaration des variables + var _rootEl; // Élement racine de notre application + var _todos = []; // Notre liste de todos + + // API publique + + /* + * "Monte" l'application VanillaTodo sur l'élément du DOM + * correspondant au sélecteur CSS donné + */ + VT.mount = function(selector) { + + _rootEl = window.document.querySelector(selector); + + if(!_rootEl) { + throw new Error('Invalid selector "'+selector+'" !'); + } + + _initHandlers(); + _renderTodos(); + + }; + + // API privée + + function _initHandlers() { + + var saveButton = _rootEl.querySelector('.new-todo'); + saveButton.addEventListener('keydown', _saveNewTodoHandler); + + var searchInput = _rootEl.querySelector('.search-todos'); + searchInput.addEventListener('keyup', _searchInputChangeHandler); + //searchInput.addEventListener('change', _searchInputChangeHandler); + + } + + function _searchInputChangeHandler(evt) { + + var searchInput = evt.currentTarget; + var searchText = searchInput.value.toLowerCase(); + + var todos; + + if(searchText) { + todos = _todos.filter(function(todo) { + if(todo.text.toLowerCase().indexOf(searchText) !== -1) { + return true; + } + }); + } + + _renderTodos(todos); + + } + + function _saveNewTodoHandler(evt) { + + if(evt.keyCode !== 13) return; // Enter + + var newTodoInput = evt.currentTarget; + + var todo = { + text: newTodoInput.value + }; + + newTodoInput.value = ''; + + _todos.push(todo); + + _renderTodos(_todos); + + } + + function _renderTodos(todos) { + + todos = todos || _todos; + + var todosList = _rootEl.querySelector('.todos-list'); + + todosList.innerHTML = ''; + + todos.forEach(function(todo, i) { + var row = _createTodoRow(todo); + todosList.appendChild(row); + }); + + } + + function _createTodoRow(todo) { + var row = document.createElement('tr'); + row.appendChild( _createTodoCell(todo) ); + row.appendChild( _createActionsCell(todo) ); + return row; + } + + function _createTodoCell(todo) { + var cell = document.createElement('td'); + cell.innerHTML = todo.text; + return cell; + } + + function _createActionsCell(todo) { + var cell = document.createElement('td'); + return cell; + } + + +}(this.VanillaTodos = this.VanillaTodos || {}, window));