diff --git a/R4.01_R4.A.10/cours/dom.pdf b/R4.01_R4.A.10/cours/dom.pdf
new file mode 100644
index 0000000..71bff2f
Binary files /dev/null and b/R4.01_R4.A.10/cours/dom.pdf differ
diff --git a/R4.01_R4.A.10/td_tp/tp2/README.md b/R4.01_R4.A.10/td_tp/tp2/README.md
new file mode 100644
index 0000000..ca5b4a1
--- /dev/null
+++ b/R4.01_R4.A.10/td_tp/tp2/README.md
@@ -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.
+
+
+
+
+
+
+#### 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.
+
+
+
+
+
+Chaque lumière, via l'interface dataset, possède un numéro (de 0 à size^2-1).
+
diff --git a/R4.01_R4.A.10/td_tp/tp2/aide.md b/R4.01_R4.A.10/td_tp/tp2/aide.md
new file mode 100644
index 0000000..f2ce6f8
--- /dev/null
+++ b/R4.01_R4.A.10/td_tp/tp2/aide.md
@@ -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
+
+ Carina Anand
+
+```
+
+```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")
+
+```
+
diff --git a/R4.01_R4.A.10/td_tp/tp2/img/lights.png b/R4.01_R4.A.10/td_tp/tp2/img/lights.png
new file mode 100644
index 0000000..917547e
Binary files /dev/null and b/R4.01_R4.A.10/td_tp/tp2/img/lights.png differ
diff --git a/R4.01_R4.A.10/td_tp/tp2/img/ligue1.png b/R4.01_R4.A.10/td_tp/tp2/img/ligue1.png
new file mode 100644
index 0000000..a73f1c4
Binary files /dev/null and b/R4.01_R4.A.10/td_tp/tp2/img/ligue1.png differ
diff --git a/R4.01_R4.A.10/td_tp/tp2/img/mole.png b/R4.01_R4.A.10/td_tp/tp2/img/mole.png
new file mode 100644
index 0000000..7540321
Binary files /dev/null and b/R4.01_R4.A.10/td_tp/tp2/img/mole.png differ
diff --git a/R4.01_R4.A.10/td_tp/tp2/img/todo.png b/R4.01_R4.A.10/td_tp/tp2/img/todo.png
new file mode 100644
index 0000000..7478a61
Binary files /dev/null and b/R4.01_R4.A.10/td_tp/tp2/img/todo.png differ
diff --git a/R4.01_R4.A.10/td_tp/tp2/src/ex0/favoris.html b/R4.01_R4.A.10/td_tp/tp2/src/ex0/favoris.html
new file mode 100644
index 0000000..da59793
--- /dev/null
+++ b/R4.01_R4.A.10/td_tp/tp2/src/ex0/favoris.html
@@ -0,0 +1,18 @@
+
+
+
+
+
+
+ Favoris
+
+
+
+
+
+
+