Compare commits
2 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 EmmanuelTiamzon
|
d1e3f215aa | ||
|
EmmanuelTiamzon
|
cc752a0fc9 |
@@ -0,0 +1,55 @@
|
||||
# TP javascript : DOM
|
||||
|
||||
Un peu [d'aide](./aide.md).
|
||||
#### Ex0
|
||||
On stocke dans un objet une liste de favoris :
|
||||
|
||||
```js
|
||||
let favs = [
|
||||
{
|
||||
nom:"Google",
|
||||
url:"http://www.google.fr"
|
||||
},
|
||||
{
|
||||
nom:"Le Monde",
|
||||
url:"http://www.google.fr"
|
||||
},
|
||||
{
|
||||
nom:"L'Equipe",
|
||||
url:"http://www.lequipe.fr"
|
||||
}
|
||||
];
|
||||
```
|
||||
Compléter le fichier `favoris.js` de manière à créer dans la page html la liste de liens
|
||||
correspondant
|
||||
|
||||
|
||||
|
||||
Il vous faut créer dynamiquement les noeuds nécessaires avec l'api dom de javascript.
|
||||
|
||||
|
||||
|
||||
#### Ex1
|
||||
|
||||
Il s'agit de réaliser une version "simple" du jeu (whac-a-mole)[https://en.wikipedia.org/wiki/Whac-A-Mole].
|
||||
|
||||
Le principe du jeu est de frapper à l'aide d'un marteau sur le plus grand nombre
|
||||
de taupes parmi celles qui sortent pour un temps très limité et aléatoirement
|
||||
des trous situés sur un panneau de contrôle.
|
||||
|
||||
<div align="center">
|
||||
<img src="./img/mole.png">
|
||||
</div>
|
||||
|
||||
|
||||
#### Ex2
|
||||
Vous devez compléter les [sources](./src/ex1) d'un jeu qui consiste à essayer
|
||||
d'éteindre toutes les lumières d'une grille en utilisant la règle suivante.
|
||||
Quand on allume/éteint une lumière, on allume/éteint aussi ses voisines.
|
||||
|
||||
<div align="center">
|
||||
<img src="./img/lights.png">
|
||||
</div>
|
||||
|
||||
Chaque lumière, via l'interface dataset, possède un numéro (de 0 à size^2-1).
|
||||
|
||||
@@ -0,0 +1,132 @@
|
||||
#### Selection d'éléments
|
||||
|
||||
```js
|
||||
// le premier
|
||||
document.querySelector(".box")
|
||||
|
||||
// ou tous
|
||||
document.querySelectorAll(".box")
|
||||
|
||||
// avec l'id
|
||||
|
||||
document.getElementById("toto")
|
||||
|
||||
// selection d'un élément dans un autre
|
||||
|
||||
let container = document.querySeletor('.container')
|
||||
container.querySelector('.box')
|
||||
```
|
||||
|
||||
#### Traverser le dom
|
||||
|
||||
```js
|
||||
var box = document.querySelector(".box")
|
||||
box.nextElementSibling
|
||||
box.previousElementSibling
|
||||
box.parentElement
|
||||
box.childNodes
|
||||
```
|
||||
|
||||
#### Création/insertion d'éléments
|
||||
|
||||
```js
|
||||
let p = document.createElement('p')
|
||||
p.textContent="blabla"
|
||||
document
|
||||
.getElementById("myDiv")
|
||||
.appendChild(p)
|
||||
|
||||
div.replaceChildren(p)
|
||||
```
|
||||
|
||||
|
||||
#### Gestionnaire évènementiels
|
||||
|
||||
```js
|
||||
document.querySelector(".button").addEventListener("click", (e) => { /* ... */ })
|
||||
document.querySelector(".button").addEventListener("mouseenter", (e) => { /* ... */ })
|
||||
document.addEventListener("keyup", (e) => { /* ... */ })
|
||||
```
|
||||
|
||||
#### window/document prêt
|
||||
|
||||
```js
|
||||
|
||||
document.addEventListener("DOMContentLoaded",() = > { .....})
|
||||
// le dom a été construit (on n'attend pas le chargement du css, images, etc.
|
||||
|
||||
windon.addEventListener('load',()=>{...})
|
||||
// le dom est prêt et toutes les ressources ont été chargées.
|
||||
```
|
||||
|
||||
#### dataset
|
||||
```html
|
||||
<div id="user" data-id="1234567890" data-user="carinaanand" data-date-of-birth>
|
||||
Carina Anand
|
||||
</div>
|
||||
```
|
||||
|
||||
```javascript
|
||||
const el = document.querySelector("#user");
|
||||
|
||||
// el.id === 'user'
|
||||
// el.dataset.id === '1234567890'
|
||||
// el.dataset.user === 'carinaanand'
|
||||
// el.dataset.dateOfBirth === ''
|
||||
```
|
||||
#### Local storage
|
||||
|
||||
```js
|
||||
|
||||
localStorage.setItem('monChat', 'Tom')
|
||||
let cat = localStorage.getItem('myCat')
|
||||
localStorage.clear()
|
||||
```
|
||||
|
||||
#### Limiter les appels successifs à une fonction
|
||||
|
||||
```js
|
||||
function debounce(f,wait)
|
||||
{
|
||||
let timeout
|
||||
return function(...args){
|
||||
clearTimeout(timeout)
|
||||
timeout=setTimeout(()=>f(...args),wait)
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
#### Gestion du css depuis le DOM
|
||||
|
||||
```js
|
||||
// Select the first .box and change its text color to #000
|
||||
document.querySelector(".box").style.color = "#000";
|
||||
|
||||
// Set color to #000 and background to red
|
||||
var box = document.querySelector(".box")
|
||||
box.style.color = "#000"
|
||||
box.style.backgroundColor = "red"
|
||||
|
||||
// Set all styles at once (and override any existing styles)
|
||||
box.style.cssText = "color: #000; background-color: red"
|
||||
|
||||
|
||||
// Hide and show an element by changing "display" to block and none
|
||||
document.querySelector(".box").style.display = "none"
|
||||
document.querySelector(".box").style.display = "block"
|
||||
|
||||
// Add, remove, and the toggle the "focus" class
|
||||
var box = document.querySelector(".box")
|
||||
box.classList.add("focus")
|
||||
box.classList.remove("focus")
|
||||
box.classList.toggle("focus")
|
||||
|
||||
|
||||
box.classList.add("focus", "highlighted")
|
||||
box.classList.remove("focus", "highlighted")
|
||||
|
||||
box.classList.add("focus", "highlighted")
|
||||
box.classList.remove("focus", "highlighted")
|
||||
|
||||
```
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 48 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 97 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 58 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
@@ -0,0 +1,18 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.classless.min.css"
|
||||
>
|
||||
<title>Favoris</title>
|
||||
<script src="./js/favoris.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<h1>Favoris</h1>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,36 @@
|
||||
let favoris = [
|
||||
{
|
||||
nom:"Google" ,
|
||||
url:"https://www.google.fr",
|
||||
img:"https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/200px-Google_2015_logo.svg.png"
|
||||
},
|
||||
{
|
||||
nom:"Le Monde",
|
||||
url:"https://www.lemonde.fr",
|
||||
img:"https://upload.wikimedia.org/wikipedia/commons/thumb/2/22/Lemonde_fr_2005_logo.svg/200px-Lemonde_fr_2005_logo.svg.png?uselang=fr"
|
||||
|
||||
},
|
||||
{
|
||||
nom:"L'Equipe",
|
||||
url:"https://www.lequipe.fr",
|
||||
img:"https://upload.wikimedia.org/wikipedia/commons/thumb/3/32/L%27%C3%89quipe_wordmark.svg/200px-L%27%C3%89quipe_wordmark.svg.png"
|
||||
}
|
||||
]
|
||||
|
||||
window.addEventListener("load",()=>{
|
||||
|
||||
let laListe = document.createElement("ul");
|
||||
favoris.forEach((favori) => {
|
||||
let li = document.createElement("li");
|
||||
let lien = document.createElement("a");
|
||||
let image = document.createElement("img");
|
||||
lien.href = favori.url;
|
||||
lien.textContent = favori.nom;
|
||||
image.src = favori.img;
|
||||
|
||||
lien.append(image);
|
||||
li.append(lien);
|
||||
laListe.append(li);
|
||||
});
|
||||
document.body.append(laListe);
|
||||
})
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.1 KiB |
@@ -0,0 +1,37 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Whack-a-Mole Game</title>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.classless.min.css"
|
||||
>
|
||||
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="game">
|
||||
<h1>Whack-a-Mole!</h1>
|
||||
<div class="score-board">
|
||||
<span>Score: </span><span id="score">0</span>
|
||||
</div>
|
||||
<div class="holes">
|
||||
<div class="hole"><div class="mole"><img src="img/mole2.png"></div></div>
|
||||
<div class="hole"><div class="mole"><img src="img/mole2.png"></div></div>
|
||||
<div class="hole"><div class="mole up"><img src="img/mole2.png"></div></div>
|
||||
<div class="hole"><div class="mole"><img src="img/mole2.png"></div></div>
|
||||
<div class="hole"><div class="mole"><img src="img/mole2.png"></div></div>
|
||||
<div class="hole"><div class="mole"><img src="img/mole2.png"></div></div>
|
||||
<div class="hole"><div class="mole"><img src="img/mole2.png"></div></div>
|
||||
<div class="hole"><div class="mole"><img src="img/mole2.png"></div></div>
|
||||
<div class="hole"><div class="mole"><img src="img/mole2.png"></div></div>
|
||||
</div>
|
||||
<button id="startButton">START</button>
|
||||
</div>
|
||||
</main>
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,53 @@
|
||||
const holes = document.querySelectorAll('.hole');
|
||||
const moles = document.querySelectorAll('.mole');
|
||||
const scoreBoard = document.getElementById('score');
|
||||
const startButton = document.getElementById('startButton');
|
||||
|
||||
let lastHole;
|
||||
let timeUp = false;
|
||||
let score = 0;
|
||||
let duration = 30
|
||||
|
||||
function randomTime(min, max) {
|
||||
return Math.round(Math.random() * (max - min) + min);
|
||||
}
|
||||
|
||||
function randomHole(holes) {
|
||||
const idx = Math.floor(Math.random() * holes.length);
|
||||
const hole = holes[idx];
|
||||
if (hole === lastHole) {
|
||||
return randomHole(holes);
|
||||
}
|
||||
lastHole = hole;
|
||||
return hole;
|
||||
}
|
||||
|
||||
function peep() {
|
||||
const time = randomTime(1000, 1500);
|
||||
const hole = randomHole(holes);
|
||||
|
||||
// TODO
|
||||
|
||||
setTimeout(() => {
|
||||
|
||||
// TODO
|
||||
//
|
||||
}}, time);
|
||||
}
|
||||
|
||||
function startGame() {
|
||||
scoreBoard.textContent = 0;
|
||||
score = 0;
|
||||
timeUp = false;
|
||||
|
||||
// TODO
|
||||
}
|
||||
|
||||
function bonk(e) {
|
||||
|
||||
// TODO
|
||||
|
||||
}
|
||||
|
||||
moles.forEach(mole => mole.addEventListener('click', bonk));
|
||||
startButton.addEventListener('click', startGame);
|
||||
@@ -0,0 +1,68 @@
|
||||
body {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100vh;
|
||||
background-color: #f0f0f0;
|
||||
/* font-family: Arial, sans-serif;*/
|
||||
}
|
||||
|
||||
.game {
|
||||
text-align: center;
|
||||
}
|
||||
.holes {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
flex-wrap: wrap;
|
||||
width: 400px;
|
||||
margin: 20px auto;
|
||||
}
|
||||
|
||||
.hole {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background : radial-gradient(rgb(150,250,150), #00ee00);
|
||||
|
||||
/* background-color: red;/*#8b4513;*/
|
||||
/* background-image : url('img/mole2.png');*/
|
||||
position: relative;
|
||||
border-radius: 50%;
|
||||
margin: 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.mole img{
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
/* background-color: #555;*/
|
||||
position: absolute;
|
||||
bottom: -100px;
|
||||
left: 0px;
|
||||
/*border-radius: 50%;*/
|
||||
transition: bottom 0.3s;
|
||||
}
|
||||
|
||||
.mole.up img{
|
||||
/* background-image : url('img/mole2.png');
|
||||
background-size:contain;
|
||||
background-repeat: no-repeat;*/
|
||||
width:90px;
|
||||
height:90px;
|
||||
|
||||
bottom: 0px;
|
||||
}
|
||||
|
||||
.mole.whacked img {
|
||||
content: url('img/mole-whacked.png');
|
||||
/* background-image : url('img/mole-whacked.png');
|
||||
background-size:contain;
|
||||
background-repeat: no-repeat;*/
|
||||
width:90px;
|
||||
height:90px;
|
||||
|
||||
bottom: -20px;
|
||||
}
|
||||
.score-board {
|
||||
font-size: 1.5em;
|
||||
margin: 20px;
|
||||
}
|
||||
@@ -0,0 +1,71 @@
|
||||
// variables de vue
|
||||
|
||||
const button = document.querySelector("input[type=submit]");
|
||||
const select = document.querySelector("select");
|
||||
const board = document.querySelector(".board");
|
||||
const message = document.querySelector("#message");
|
||||
let lights = null
|
||||
|
||||
// state <-> tableau de booléen pour
|
||||
// stocker l'état des lumières
|
||||
// neighbors <-> tableau des voisins de chaque lumière
|
||||
|
||||
let state = [];
|
||||
let neighbors = [];
|
||||
|
||||
let newBoard = ( (size ) => {
|
||||
let frag = document.createDocumentFragment()
|
||||
|
||||
// TODO
|
||||
// la fonction crée dans le dom la grille des lumières
|
||||
|
||||
board.replaceChildren(frag)
|
||||
});
|
||||
|
||||
let calcNeighbours = ( (size) =>{
|
||||
|
||||
let res = [];
|
||||
for(let i = 0; i < size; i ++){
|
||||
for(let j = 0; j < size; j++){
|
||||
let v = [];
|
||||
v.push(i*size + j);
|
||||
if ( (j - 1) >= 0) v.push(i*size + j - 1);
|
||||
if ( (j + 1) < size) v.push(i*size + j + 1);
|
||||
if ( (i - 1) >= 0) v.push(size*(i-1) + j );
|
||||
if ( (i + 1) < size) v.push(size*(i+1) + j);
|
||||
res.push(v)
|
||||
}
|
||||
}
|
||||
return res
|
||||
});
|
||||
|
||||
|
||||
function play(){
|
||||
let size = select.value;
|
||||
newBoard(size);
|
||||
neighbors = calcNeighbours(size);
|
||||
lights = document.querySelectorAll(".board span");
|
||||
state = Array.from({length: size*size}, () => Math.random() < 0.5 ? 1:0);
|
||||
state.forEach((el,i)=>{
|
||||
if (el) lights[i].classList.toggle("off");
|
||||
});
|
||||
message.textContent = "";
|
||||
}
|
||||
|
||||
// abonnements
|
||||
|
||||
document
|
||||
.querySelector(".board")
|
||||
.addEventListener("click", ev => {
|
||||
|
||||
// TODO
|
||||
// permet de choisir d'éteindre/allumer une lumière et
|
||||
// ses voisines
|
||||
// Il faut en outre detecter la fin de partie
|
||||
|
||||
});
|
||||
|
||||
button.addEventListener("click",play);
|
||||
|
||||
play();
|
||||
|
||||
@@ -0,0 +1,52 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title></title>
|
||||
<!-- Centered viewport -->
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.classless.min.css"
|
||||
>
|
||||
<link rel="stylesheet" href="style.css" type="text/css" media="screen" title="no title" charset="utf-8">
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<h4>Lights</h4>
|
||||
<p>Le but est d'éteindre l'ensemble des lumières.</p>
|
||||
|
||||
<p id="message"></p>
|
||||
<article>
|
||||
<div class="board">
|
||||
<!--div class="row">
|
||||
<span data-num="0"></span>
|
||||
<span data-num="1"></span>
|
||||
<span data-num="2"></span>
|
||||
</div>
|
||||
<div class="row">
|
||||
<span data-num="3"></span>
|
||||
<span data-num="4"></span>
|
||||
<span data-num="5"></span>
|
||||
</div>
|
||||
<div class="row">
|
||||
<span data-num="6"></span>
|
||||
<span data-num="7"></span>
|
||||
<span data-num="8"></span-->
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
<div role="group">
|
||||
<select aria-label="Select size" required>
|
||||
<option selected value="3">3x3</option>
|
||||
<option value="2">2x2</option>
|
||||
<option value="6">6x6</option>
|
||||
<option value="7">7x7</option>
|
||||
<option value="8">8x8</option>
|
||||
<option value="10">10x10</option>
|
||||
</select>
|
||||
<input type="submit" value="New Game">
|
||||
</div>
|
||||
</main>
|
||||
<script src="app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,50 @@
|
||||
/*.grid {
|
||||
display:grid;
|
||||
grid-template-columns : 100px 100px 100px;
|
||||
grid-template-rows: auto;
|
||||
grid-gap: 10px;
|
||||
}*/
|
||||
.board > div {
|
||||
display : flex;
|
||||
}
|
||||
.board span {
|
||||
display: inline-block;
|
||||
vertical-align:baseline;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
/*padding : 1em;*/
|
||||
margin : 0.1em;
|
||||
cursor: pointer;
|
||||
border: 1px solid #444;
|
||||
border-radius: 50px;
|
||||
background: radial-gradient(rgb(150,250,150), #00ee00);
|
||||
}
|
||||
|
||||
.board span.off {
|
||||
background: #009900;
|
||||
}
|
||||
.board span.off:hover {
|
||||
background: #3AB903;
|
||||
}
|
||||
|
||||
.board span:hover {
|
||||
background: #3AB903;
|
||||
background: radial-gradient(rgb(66, 255, 66), #065006);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/*
|
||||
.wrapper {
|
||||
display : flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
.wrapper .grid {
|
||||
flex-basis : auto;
|
||||
}
|
||||
*/
|
||||
@@ -0,0 +1,172 @@
|
||||
#### Ex3 : modele MVC
|
||||
Le but est d'écrire une todolist en javascript, en respectant le pattern MVC. Il est important de mener à bout cet exercice, car il nous servira
|
||||
de fil rouge notamment en ajoutant une api rest et ajax pour la communication avec le service.
|
||||
|
||||
<div align="center">
|
||||
<img src="./img/todo.png">
|
||||
</div>
|
||||
|
||||
Le contrôleur a accès à la vue et au modèle.
|
||||
|
||||
##### Le modèle
|
||||
|
||||
Cette "classe" (rien à compléter) utilise
|
||||
l'objet [localStorage](https://developer.mozilla.org/fr/docs/Web/API/Window/localStorage)
|
||||
pour sauvegarder la todolist.
|
||||
|
||||
Chaque todo est un objet json de la forme
|
||||
|
||||
```js
|
||||
{ id : 1 , text : "apprendre le js", done : false }
|
||||
```
|
||||
|
||||
La liste des méthodes publiques de cette classe
|
||||
|
||||
```js
|
||||
/** @brief return the todolist
|
||||
* @param filter "all" or "active" or "done"
|
||||
* @return array of todos
|
||||
*/
|
||||
getTodos(filter)
|
||||
|
||||
/** @brief add (and save) a new todo with todoText
|
||||
* @param todoText : text of the new todo
|
||||
*/
|
||||
add(todoText)
|
||||
|
||||
/** @brief delete a todo
|
||||
* @param id id of the todo
|
||||
*/
|
||||
delete(id)
|
||||
|
||||
/** @brief update a todo
|
||||
* @param id id of the todo
|
||||
*/
|
||||
edit(id,updatedText)
|
||||
|
||||
/** @brief toggle a todo (done<->active)
|
||||
* @param id id of the todo
|
||||
* @param updatedText text of the todo
|
||||
*/
|
||||
toggle(id)
|
||||
```
|
||||
|
||||
##### La vue
|
||||
Cette "classe" permet au contrôleur de gérer la vue.
|
||||
|
||||
|
||||
Liste des méthodes publiques
|
||||
|
||||
```js
|
||||
/** @brief change the active tab (all,active or done)
|
||||
* @param filter the active tab (all, active or done)
|
||||
*/
|
||||
setFilterTabs(filter)
|
||||
|
||||
/** @brief update the todo list with todos
|
||||
* @param todos array of todo
|
||||
*/
|
||||
renderTodoList(todos)
|
||||
```
|
||||
|
||||
Le contrôleur peut s'abonner (notification de la vue au contrôleur)
|
||||
aux événements suivants :
|
||||
|
||||
add/delete/edit/toggle todo : avec `bind{Add|Delete|Edit|Toggle}Todo`
|
||||
|
||||
Ces méthodes d'abonnement prennent en paramètre une fonction du contrôleur qui est appelé par la vue pour lui notifier
|
||||
une requête.
|
||||
|
||||
```js
|
||||
/** @brief subscribe to add event
|
||||
* @param handler function(text)
|
||||
*/
|
||||
bindAddTodo(handler)
|
||||
|
||||
/** @brief suscribe to delete event
|
||||
* @param handler function(id)
|
||||
*/
|
||||
bindDeleteTodo(handler)
|
||||
|
||||
/** @brief suscribe to edit event
|
||||
* @param handler function(id,text)
|
||||
*/
|
||||
bindEditTodo(handler)
|
||||
|
||||
/** @brief suscribe to toggle event
|
||||
* @param handler function(id)
|
||||
*/
|
||||
bindToggleTodo(handler)
|
||||
```
|
||||
|
||||
##### Le contrôleur
|
||||
C'est lui qui gére le routage. Il y a trois urls possibles `index.html/#/{all|active|done}` (listener sur l'évenement
|
||||
dom `hashchange`.
|
||||
|
||||
Liste des méthodes
|
||||
```js
|
||||
/** @brief get the todolist from the model
|
||||
* and use the view to render
|
||||
*/
|
||||
filterTodoList()
|
||||
|
||||
/** @brief binding function called by the view
|
||||
* to add a new todo
|
||||
* @param text text of the new todo
|
||||
*/
|
||||
addTodo(text)
|
||||
|
||||
/** @brief binding function called by the view
|
||||
* to delete a todo
|
||||
* @param id id of the todo
|
||||
*/
|
||||
deleteTodo(id)
|
||||
|
||||
/** @brief binding function to toggle the state
|
||||
* of a todo
|
||||
* @param id id of the todo
|
||||
*/
|
||||
toggleTodo(id)
|
||||
|
||||
/** @brief binding function to change the text
|
||||
* of a todo
|
||||
* @param id id of the todo
|
||||
* @param changedText new text for the todo
|
||||
*/
|
||||
editTodo(id,changedText)
|
||||
```
|
||||
|
||||
Par exemple, lorsque l'utilisateur ajoute une todo :
|
||||
|
||||
1. la vue est sensible à l'événement de soumission du formulaire,
|
||||
2. la fonction reflexe récupére le texte saisie,
|
||||
3. elle appelle la fonction avec laquelle le contrôleur s'est abonné, en lui passant le texte,
|
||||
4. la fonction du contrôleur `addTodo` récupére le texte,
|
||||
5. le contrôleur demande au modèle la création d'une nouvelle todo,
|
||||
6. le contrôleur demande un rafraichissement de la vue.
|
||||
|
||||
|
||||
#### Travail à faire
|
||||
- Commpléter la méthode privée dans la vue `#createNewTodoElement` qui permet de créer un
|
||||
nouvel élément dom représentant une todo. Ce qui est attendu est de la forme
|
||||
```html
|
||||
<li class="todo" data-id="1">
|
||||
<label>
|
||||
<input type="checkbox">
|
||||
<span>apprendre un peu de javascript</span>
|
||||
</label>
|
||||
<i class="fas fa-trash"></i>
|
||||
</li>
|
||||
```
|
||||
- Compléter la méthode `bindDeleteTodo` de la vue.
|
||||
- Compléter la méthode `bindToggleTodo` de la vue.
|
||||
- Compléter la méthode `bindEditTodo` de la vue.
|
||||
|
||||
#### Ex4
|
||||
On veut maintenant utiliser l'oberserver Pattern. Quand le **modèle change**, il notifie automatiquement tous les observateurs.
|
||||
> Le Modèle est un obervable.
|
||||
> La Vue est un oberver.
|
||||
|
||||
- Ajouter dans le modèle un tableau d'obervateurs (callbacks), et une méthode notify.
|
||||
- La vue devient un observeur.
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
@@ -0,0 +1,63 @@
|
||||
:focus-visible {outline:none;}
|
||||
|
||||
.is-active {
|
||||
color : #8EB901;
|
||||
}
|
||||
|
||||
#add_form > div {
|
||||
display : flex;
|
||||
justify-content:space-between;
|
||||
}
|
||||
|
||||
.todo {
|
||||
display : flex;
|
||||
align-items: center;
|
||||
}
|
||||
.todo checkbox,.todo i {
|
||||
flex-grow : 0;
|
||||
flex-shrink : 0;
|
||||
flex-basis : auto;
|
||||
}
|
||||
.todo span {
|
||||
flex-grow : 1;
|
||||
flex-shrink : 1;
|
||||
flex-basis : auto;
|
||||
}
|
||||
|
||||
|
||||
.todolist {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.todolist li {
|
||||
list-style: none;
|
||||
padding: var(--pico-form-element-spacing-vertical) 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
#todos_filter {
|
||||
display:flex;
|
||||
justify-content : center;
|
||||
}
|
||||
|
||||
#todos_filter a {
|
||||
margin:1em;
|
||||
}
|
||||
|
||||
.todolist i {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.todolist li:not(:last-child) {
|
||||
border-bottom: 1.5px solid var(--pico-form-element-border-color);
|
||||
}
|
||||
|
||||
.todolist > li > label:has(input:checked) {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
footer {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,53 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
|
||||
<title>Todo</title>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.classless.min.css"
|
||||
>
|
||||
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" integrity="sha512-q3eWabyZPc1XTCmF+8/LuE1ozpg5xxn7iO89yfSOd5/oKvyqLngoNGsx8jq92Y8eXJ/IRxQbEC+FGSYxtk2oiw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
|
||||
<link rel="stylesheet" href="./css/style.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<h1>To Do List</h1>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<article>
|
||||
<header>
|
||||
<form id='add_form'>
|
||||
<fieldset role="group">
|
||||
<input id="input_todo" type="text" placeholder="Buy milk and eggs...">
|
||||
<button><i class="fas fa-plus"></i></button>
|
||||
</fieldset>
|
||||
<div>
|
||||
<span>
|
||||
<a id="active" href="#/active"><i class="far fa-circle"></i></a>
|
||||
<a id="done" href="#/done"><i class="fas fa-circle"></i></a>
|
||||
<a id="all" href="#/all"><i class="fas fa-adjust"></i></a>
|
||||
</span>
|
||||
|
||||
<small><span id="count">0</span>/50 characters</small>
|
||||
</div>
|
||||
</form>
|
||||
</header>
|
||||
<!-- Render todos -->
|
||||
<ul id="todos_list" class="todolist"></ul>
|
||||
</article>
|
||||
</main>
|
||||
|
||||
</body>
|
||||
|
||||
<script src="js/model.js"></script>
|
||||
<script src="js/view.js"></script>
|
||||
<script src="js/controller.js"></script>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,64 @@
|
||||
class Controller {
|
||||
constructor(model, view) {
|
||||
|
||||
this.model = model;
|
||||
this.view = view;
|
||||
this.filter = "all";
|
||||
|
||||
/** Abonnements à la vue **/
|
||||
|
||||
this.view.bindAddTodo(this.addTodo.bind(this));
|
||||
this.view.bindDeleteTodo(this.deleteTodo.bind(this));
|
||||
this.view.bindToggleTodo(this.toggleTodo.bind(this));
|
||||
this.view.bindEditTodo(this.editTodo.bind(this));
|
||||
|
||||
/** filtrages par url **/
|
||||
|
||||
this.routes = ['all','active','done'];
|
||||
|
||||
/** Routage **/
|
||||
window.addEventListener("load",this.routeChanged.bind(this));
|
||||
window.addEventListener("hashchange",this.routeChanged.bind(this));
|
||||
}
|
||||
|
||||
|
||||
routeChanged(){
|
||||
let route = window.location.hash.replace(/^#\//,'');
|
||||
this.filter = this.routes.find( r => r === route) || 'all';
|
||||
this.filterTodoList();
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
filterTodoList () {
|
||||
let todos = this.model.getTodos(this.filter)
|
||||
this.view.renderTodoList(todos)
|
||||
this.view.setFilterTabs(this.filter)
|
||||
}
|
||||
|
||||
addTodo(text) {
|
||||
this.model.add(text)
|
||||
this.filterTodoList()
|
||||
}
|
||||
|
||||
deleteTodo(id) {
|
||||
this.model.delete(parseInt(id))
|
||||
this.filterTodoList()
|
||||
}
|
||||
|
||||
toggleTodo(id) {
|
||||
this.model.toggle(parseInt(id))
|
||||
this.filterTodoList()
|
||||
}
|
||||
|
||||
editTodo(id, text) {
|
||||
this.model.edit(parseInt(id),text)
|
||||
this.filterTodoList()
|
||||
}
|
||||
}
|
||||
|
||||
const model = new Model()
|
||||
const view = new View()
|
||||
const app = new Controller(model, view)
|
||||
|
||||
@@ -0,0 +1,48 @@
|
||||
class Model {
|
||||
constructor() {
|
||||
this.todos = JSON.parse(localStorage.getItem('todos')) || []
|
||||
}
|
||||
|
||||
#commit(todos) {
|
||||
localStorage.setItem('todos', JSON.stringify(todos))
|
||||
}
|
||||
|
||||
getTodos(filter){
|
||||
if (filter === "active")
|
||||
return this.todos.filter(todo => !todo.done)
|
||||
if (filter === "done")
|
||||
return this.todos.filter(todo => todo.done)
|
||||
|
||||
return this.todos
|
||||
}
|
||||
|
||||
add(todoText) {
|
||||
const todo = {
|
||||
id: this.todos.length > 0 ? this.todos[this.todos.length - 1].id + 1 : 1,
|
||||
text: todoText,
|
||||
done : false,
|
||||
}
|
||||
this.todos.push(todo)
|
||||
this.#commit(this.todos)
|
||||
}
|
||||
|
||||
edit(id, updatedText) {
|
||||
this.todos = this.todos.map(todo =>
|
||||
todo.id === id ? { id: todo.id, text: updatedText, done: todo.done} : todo
|
||||
)
|
||||
this.#commit(this.todos)
|
||||
}
|
||||
|
||||
delete(id) {
|
||||
this.todos = this.todos.filter(todo => todo.id !== id)
|
||||
this.#commit(this.todos)
|
||||
}
|
||||
|
||||
toggle(id) {
|
||||
this.todos = this.todos.map(todo =>
|
||||
todo.id === id ? { id: todo.id, text: todo.text, done: !todo.done } : todo
|
||||
)
|
||||
this.#commit(this.todos)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,83 @@
|
||||
class View {
|
||||
charLimit = 70;
|
||||
|
||||
constructor() {
|
||||
this.form = document.querySelector("#add_form")
|
||||
this.input = document.querySelector("#input_todo")
|
||||
this.list = document.querySelector("#todos_list")
|
||||
this.tabs = document.querySelectorAll("#add_form span a")
|
||||
this.loader = document.querySelector("#loader")
|
||||
this.count = document.querySelector("#count")
|
||||
|
||||
|
||||
this.input.addEventListener("input", (e) => {
|
||||
if (e.target.value.length >= this.charLimit) {
|
||||
e.target.value = e.target.value.substring(0,this.charLimit);
|
||||
}
|
||||
count.textContent = e.target.value.length;
|
||||
});
|
||||
count.nextSibling.textContent = `/${this.charLimit} characters`
|
||||
}
|
||||
|
||||
#getTodo() {
|
||||
return this.input.value
|
||||
}
|
||||
|
||||
#resetInput() {
|
||||
this.input.value = ''
|
||||
count.textContent = 0
|
||||
}
|
||||
|
||||
#createNewTodoElement(todo){
|
||||
let li = document.createElement("li")
|
||||
|
||||
// TODO
|
||||
|
||||
return li
|
||||
}
|
||||
|
||||
|
||||
setFilterTabs(filter){
|
||||
this.tabs.forEach( tab => {
|
||||
if (filter === tab.id)
|
||||
tab.classList.add("is-active")
|
||||
else
|
||||
tab.classList.remove("is-active")
|
||||
})
|
||||
}
|
||||
|
||||
renderTodoList(todos) {
|
||||
let list = new DocumentFragment()
|
||||
for (let todo of todos){
|
||||
list.appendChild(this.#createNewTodoElement(todo))
|
||||
}
|
||||
this.list.replaceChildren(list)
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/** Abonnements événements **/
|
||||
|
||||
bindAddTodo(handler) {
|
||||
this.form.addEventListener("submit", (e=>{
|
||||
e.preventDefault()
|
||||
let text = this.#getTodo()
|
||||
handler(text)
|
||||
this.#resetInput()
|
||||
}))
|
||||
}
|
||||
|
||||
|
||||
bindDeleteTodo(handler) {
|
||||
// TODO
|
||||
}
|
||||
|
||||
bindEditTodo(handler) {
|
||||
// TODO
|
||||
}
|
||||
|
||||
bindToggleTodo(handler) {
|
||||
// TODO
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user