(not) vanilla todos
This commit is contained in:
1
javascript/angular/exercices/.gitignore
vendored
1
javascript/angular/exercices/.gitignore
vendored
@ -1 +1,2 @@
|
||||
node_modules
|
||||
*.tar.gz
|
||||
|
22
javascript/angular/exercices/include/.solution/app.js
Normal file
22
javascript/angular/exercices/include/.solution/app.js
Normal file
@ -0,0 +1,22 @@
|
||||
/*
|
||||
* Énoncé:
|
||||
* Implémenter le code nécessaire afin de pouvoir sélectionner via un élément <select />
|
||||
* afin d'afficher via la directive ng-include la page sélectionnée. Par défaut, la page sélectionnée devra être la page 1.
|
||||
*
|
||||
* Documentation:
|
||||
* - Utilisation de <select /> et de sa directive "ng-options" en Angular: https://code.angularjs.org/1.3.15/docs/api/ng/directive/select
|
||||
*/
|
||||
|
||||
var Exo = angular.module('Exo', []);
|
||||
|
||||
Exo.controller('MainCtrl', ['$scope', function($scope) {
|
||||
|
||||
$scope.pages = [
|
||||
{label: 'Page 1', template: 'page-1'},
|
||||
{label: 'Page 2', template: 'page-2'},
|
||||
{label: 'Page 3', template: 'page-3'},
|
||||
];
|
||||
|
||||
$scope.selectedPage = $scope.pages[0];
|
||||
|
||||
}]);
|
18
javascript/angular/exercices/include/.solution/index.html
Normal file
18
javascript/angular/exercices/include/.solution/index.html
Normal file
@ -0,0 +1,18 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf8">
|
||||
<title>Exercice: inclusion de template</title>
|
||||
</head>
|
||||
<!-- Déclaration de l'application -->
|
||||
<body ng-app="Exo">
|
||||
|
||||
<div ng-controller="MainCtrl">
|
||||
<select ng-options="page.label for page in pages" ng-model="selectedPage"></select>
|
||||
<ng-include src="'pages/'+selectedPage.template+'.html'"></ng-include>
|
||||
</div>
|
||||
|
||||
<!-- Import de du framework Angular -->
|
||||
<script src="../../node_modules/angular/angular.js"></script>
|
||||
<script src="app.js"></script>
|
||||
</body>
|
||||
</html>
|
@ -0,0 +1,6 @@
|
||||
<div>
|
||||
<h1>Page 1</h1>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras porttitor, metus sit amet ornare porta, orci justo dictum justo, imperdiet ultrices risus nisl in magna. Suspendisse venenatis eros ligula, sed pretium nibh placerat a. Aenean eget iaculis quam. Integer eleifend risus nec sem commodo mattis. Proin pharetra elit ultrices dolor tincidunt, nec mattis ex tristique. Donec et augue sit amet mauris commodo consectetur venenatis sed quam. Nullam in enim diam. Quisque tristique risus sit amet ipsum elementum, et gravida enim molestie. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi tortor metus, vehicula vel sagittis id, malesuada non elit. Vivamus nulla sem, tristique a nisl in, laoreet ultrices neque. Nullam feugiat nulla ac augue semper fermentum vel eu risus. Quisque euismod nec nisl a ultrices. Praesent fringilla sed massa nec pulvinar. Suspendisse consequat enim in euismod aliquet. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
|
||||
</p>
|
||||
</div>
|
@ -0,0 +1,6 @@
|
||||
<div>
|
||||
<h1>Page 2</h1>
|
||||
<p>
|
||||
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus cursus urna vel tellus viverra auctor. Curabitur nec sem scelerisque, tempor massa id, dignissim quam. Vestibulum fermentum ipsum sem, non suscipit risus placerat in. Praesent at nisi at risus tincidunt tincidunt nec et tortor. Praesent lacinia nulla quam, quis sagittis dui dictum id. Nullam et neque dignissim, bibendum nibh quis, ornare felis.
|
||||
</p>
|
||||
</div>
|
@ -0,0 +1,6 @@
|
||||
<div>
|
||||
<h1>Page 3</h1>
|
||||
<p>
|
||||
Suspendisse dapibus, orci tempor auctor eleifend, erat tellus convallis lectus, in malesuada erat nunc sit amet diam. Suspendisse venenatis fringilla risus quis feugiat. Nulla tellus mi, volutpat quis lacus et, accumsan porttitor magna. Donec lobortis vehicula leo, accumsan malesuada metus. Nulla in pretium sapien, et sagittis lacus. In nulla leo, viverra sit amet dictum mollis, volutpat vitae magna. Nullam mauris metus, gravida iaculis nisl non, luctus vulputate erat. Duis et nisi nec risus laoreet fringilla vel sit amet sapien. Vivamus ac felis diam.
|
||||
</p>
|
||||
</div>
|
20
javascript/angular/exercices/include/app.js
vendored
Normal file
20
javascript/angular/exercices/include/app.js
vendored
Normal file
@ -0,0 +1,20 @@
|
||||
/*
|
||||
* Énoncé:
|
||||
* Implémenter le code nécessaire afin de pouvoir sélectionner via un élément <select />
|
||||
* afin d'afficher via la directive ng-include la page sélectionnée. Par défaut, la page sélectionnée devra être la page 1.
|
||||
*
|
||||
* Documentation:
|
||||
* - Utilisation de <select /> et de sa directive "ng-options" en Angular: https://code.angularjs.org/1.3.15/docs/api/ng/directive/select
|
||||
*/
|
||||
|
||||
var Exo = angular.module('Exo', []);
|
||||
|
||||
Exo.controller('MainCtrl', ['$scope', function($scope) {
|
||||
|
||||
$scope.pages = [
|
||||
{label: 'Page 1', template: 'page-1'},
|
||||
{label: 'Page 2', template: 'page-2'},
|
||||
{label: 'Page 3', template: 'page-3'},
|
||||
];
|
||||
|
||||
}]);
|
17
javascript/angular/exercices/include/index.html
Normal file
17
javascript/angular/exercices/include/index.html
Normal file
@ -0,0 +1,17 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf8">
|
||||
<title>Exercice: inclusion de template</title>
|
||||
</head>
|
||||
<!-- Déclaration de l'application -->
|
||||
<body ng-app="Exo">
|
||||
|
||||
<div ng-controller="MainCtrl">
|
||||
<!-- ??? -->
|
||||
</div>
|
||||
|
||||
<!-- Import de du framework Angular -->
|
||||
<script src="../node_modules/angular/angular.js"></script>
|
||||
<script src="app.js"></script>
|
||||
</body>
|
||||
</html>
|
6
javascript/angular/exercices/include/pages/page-1.html
Normal file
6
javascript/angular/exercices/include/pages/page-1.html
Normal file
@ -0,0 +1,6 @@
|
||||
<div>
|
||||
<h1>Page 1</h1>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras porttitor, metus sit amet ornare porta, orci justo dictum justo, imperdiet ultrices risus nisl in magna. Suspendisse venenatis eros ligula, sed pretium nibh placerat a. Aenean eget iaculis quam. Integer eleifend risus nec sem commodo mattis. Proin pharetra elit ultrices dolor tincidunt, nec mattis ex tristique. Donec et augue sit amet mauris commodo consectetur venenatis sed quam. Nullam in enim diam. Quisque tristique risus sit amet ipsum elementum, et gravida enim molestie. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi tortor metus, vehicula vel sagittis id, malesuada non elit. Vivamus nulla sem, tristique a nisl in, laoreet ultrices neque. Nullam feugiat nulla ac augue semper fermentum vel eu risus. Quisque euismod nec nisl a ultrices. Praesent fringilla sed massa nec pulvinar. Suspendisse consequat enim in euismod aliquet. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
|
||||
</p>
|
||||
</div>
|
6
javascript/angular/exercices/include/pages/page-2.html
Normal file
6
javascript/angular/exercices/include/pages/page-2.html
Normal file
@ -0,0 +1,6 @@
|
||||
<div>
|
||||
<h1>Page 2</h1>
|
||||
<p>
|
||||
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus cursus urna vel tellus viverra auctor. Curabitur nec sem scelerisque, tempor massa id, dignissim quam. Vestibulum fermentum ipsum sem, non suscipit risus placerat in. Praesent at nisi at risus tincidunt tincidunt nec et tortor. Praesent lacinia nulla quam, quis sagittis dui dictum id. Nullam et neque dignissim, bibendum nibh quis, ornare felis.
|
||||
</p>
|
||||
</div>
|
6
javascript/angular/exercices/include/pages/page-3.html
Normal file
6
javascript/angular/exercices/include/pages/page-3.html
Normal file
@ -0,0 +1,6 @@
|
||||
<div>
|
||||
<h1>Page 3</h1>
|
||||
<p>
|
||||
Suspendisse dapibus, orci tempor auctor eleifend, erat tellus convallis lectus, in malesuada erat nunc sit amet diam. Suspendisse venenatis fringilla risus quis feugiat. Nulla tellus mi, volutpat quis lacus et, accumsan porttitor magna. Donec lobortis vehicula leo, accumsan malesuada metus. Nulla in pretium sapien, et sagittis lacus. In nulla leo, viverra sit amet dictum mollis, volutpat vitae magna. Nullam mauris metus, gravida iaculis nisl non, luctus vulputate erat. Duis et nisi nec risus laoreet fringilla vel sit amet sapien. Vivamus ac felis diam.
|
||||
</p>
|
||||
</div>
|
BIN
javascript/angular/exercices/todos/.solution/img/vanilla.png
Normal file
BIN
javascript/angular/exercices/todos/.solution/img/vanilla.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 76 KiB |
43
javascript/angular/exercices/todos/.solution/index.html
Normal file
43
javascript/angular/exercices/todos/.solution/index.html
Normal 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
62
javascript/angular/exercices/todos/.solution/style.css
Normal 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
33
javascript/angular/exercices/todos/.solution/todos.js
Normal 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
BIN
javascript/angular/exercices/todos/img/vanilla.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 76 KiB |
34
javascript/angular/exercices/todos/index.html
Normal file
34
javascript/angular/exercices/todos/index.html
Normal 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
62
javascript/angular/exercices/todos/style.css
Normal 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
19
javascript/angular/exercices/todos/todos.js
vendored
Normal 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);
|
||||
}
|
||||
|
||||
}]);
|
Reference in New Issue
Block a user