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

(not) vanilla todos

Browse Source
This commit is contained in:
William Petit
2015-04-09 00:19:37 +02:00
parent 16a28eb88b
commit 11b5d82ce4
29 changed files with 411 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
javascript/angular/exercices/todos/.solution/img/vanilla.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 76 KiB

43
javascript/angular/exercices/todos/.solution/index.html Normal file
View File

@ -0,0 +1,43 @@
<html>
<head>
<meta charset="utf8">
<link rel="stylesheet" href="style.css" />
</head>
<body ng-app="Todos">
<div class="container" ng-controller="MainCtrl">
<h1><img class="logo" src="img/vanilla.png" /> (Not) Vanilla Todos</h1>
<div id="vanilla-todos">
<table>
<thead>
<tr>
<th>Mes tâches</th>
<th>Actions</th>
</tr>
</thead>
<tbody class="todos-list">
<tr ng-show="todos.length === 0">
<td colspan="2" class="no-todo">Pas de tâches pour le moment !</td>
</tr>
<tr ng-repeat="todo in todos track by $index">
<td>{{todo.text}}</td>
<td><a href="#" ng-click="removeTodoByIndex($index);">Supprimer</a></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">
<input class="new-todo"
type="text"
ng-model="newTodo"
ng-keydown="newTodoKeydownHandler($event)"
placeholder="Créer une nouvelle tâche..."/>
</td>
</tr>
</tfoot>
</table>
</div>
</div>
<script src="../node_modules/angular/angular.js"></script>
<script src="todos.js"></script>
</body>
</html>

62
javascript/angular/exercices/todos/.solution/style.css Normal file
View File

@ -0,0 +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%;
}

33
javascript/angular/exercices/todos/.solution/todos.js Normal file
View File

@ -0,0 +1,33 @@
var Todos = angular.module('Todos', []);
Todos.controller('MainCtrl', ['$scope', '$window', function($scope, $window) {
$scope.todos = _loadTodos();
$scope.newTodo = '';
$scope.newTodoKeydownHandler = function(evt) {
if(evt.keyCode === 13) {
$scope.todos.push({
text: $scope.newTodo
});
$scope.newTodo = '';
_saveTodos($scope.todos);
}
};
$scope.removeTodoByIndex = function(index) {
$scope.todos.splice(index, 1);
_saveTodos($scope.todos);
};
function _loadTodos() {
var todosStr = $window.localStorage.getItem('notVanillaTodos.todos');
return JSON.parse(todosStr || '[]');
}
function _saveTodos(todos) {
var todosStr = JSON.stringify(todos);
$window.localStorage.setItem('notVanillaTodos.todos', todosStr);
}
}]);

BIN
javascript/angular/exercices/todos/img/vanilla.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 76 KiB

34
javascript/angular/exercices/todos/index.html Normal file
View File

@ -0,0 +1,34 @@
<html>
<head>
<meta charset="utf8">
<link rel="stylesheet" href="style.css" />
</head>
<body ng-app="Todos">
<div class="container" ng-controller="MainCtrl">
<h1><img class="logo" src="img/vanilla.png" /> (Not) Vanilla Todos</h1>
<div id="vanilla-todos">
<table>
<thead>
<tr>
<th>Mes tâches</th>
<th>Actions</th>
</tr>
</thead>
<tbody class="todos-list">
<!-- Listing des todos -->
</tbody>
<tfoot>
<tr>
<td colspan="2">
<!-- Champ de création d'une nouvelle todo -->
<input class="new-todo" type="text" />
</td>
</tr>
</tfoot>
</table>
</div>
</div>
<script src="../node_modules/angular/angular.js"></script>
<script src="todos.js"></script>
</body>
</html>

62
javascript/angular/exercices/todos/style.css Normal file
View File

@ -0,0 +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%;
}

19
javascript/angular/exercices/todos/todos.js vendored Normal file
View File

@ -0,0 +1,19 @@
var Todos = angular.module('Todos', []);
Todos.controller('MainCtrl', ['$scope', '$window', function($scope, $window) {
$scope.todos = _loadTodos();
// ???
function _loadTodos() {
var todosStr = $window.localStorage.getItem('notVanillaTodos.todos');
return JSON.parse(todosStr || '[]');
}
function _saveTodos(todos) {
var todosStr = JSON.stringify(todos);
$window.localStorage.setItem('notVanillaTodos.todos', todosStr);
}
}]);