javascript-tutorial · HachemiH · Apr 28, 2020 · Apr 18, 2020 · Apr 19, 2020
diff --git a/2-ui/4-forms-controls/2-focus-blur/3-editable-div/solution.view/my.css b/2-ui/4-forms-controls/2-focus-blur/3-editable-div/solution.view/my.css
@@ -14,12 +14,12 @@
 }
 
 .edit {
-  /* replace padding with border (still 3px not to shift the contents) */
+  /* remplace le padding par des bordures (toujours 3px pour ne pas déplacer le contenu) */
   border: 3px solid blue;
   padding: 0px;
 }
 
 .edit:focus {
-  /* remove focus border in Safari */
+  /* retire les bordure de focus sur Safari */
   outline: none;
 }
diff --git a/2-ui/4-forms-controls/2-focus-blur/3-editable-div/source.view/index.html b/2-ui/4-forms-controls/2-focus-blur/3-editable-div/source.view/index.html
@@ -18,9 +18,9 @@
   <div id="view" class="view">Text</div>
 
   <script>
-    // ...your code...
-    // Note: <textarea> should have class="edit"
-    // my.css has styles to make it the same size as div
+    // ...votre code...
+    // Note: <textarea> devrait avoir class="edit"
+    // my.css possède les styles pour la rendre de la même taille que div
   </script>
 
 </body>

diff --git a/2-ui/4-forms-controls/2-focus-blur/3-editable-div/source.view/my.css b/2-ui/4-forms-controls/2-focus-blur/3-editable-div/source.view/my.css
@@ -14,12 +14,12 @@
 }
 
 .edit {
-  /* replace padding with border (still 3px not to shift the contents) */
+  /* remplace le padding par des bordures (toujours 3px pour ne pas déplacer le contenu) */
   border: 3px solid blue;
   padding: 0px;
 }
 
 .edit:focus {
-  /* remove focus border in Safari */
+  /* retire les bordure de focus sur Safari */
   outline: none;
 }
diff --git a/2-ui/4-forms-controls/2-focus-blur/3-editable-div/task.md b/2-ui/4-forms-controls/2-focus-blur/3-editable-div/task.md
@@ -2,12 +2,12 @@ importance: 5
 
 ---
 
-# Editable div
+# Div éditable
 
-Create a `<div>` that turns into `<textarea>` when clicked.
+Créez une `<div>` qui se transforme en `<textarea>` lorsque l'on clique dessus.
 
-The textarea allows to edit the HTML in the `<div>`.
+La zone de texte permet de modifier le HTML présent dans la `<div>`.
 
-When the user presses `key:Enter` or it loses focus, the `<textarea>` turns back into `<div>`, and its content becomes HTML in `<div>`.
+Lorsque l'utilisateur appuie sur `key:Enter` ou perds le focus, la `<textarea>` se transforme à nouveau en `<div>`, et son contenu devient le HTML dans `<div>`.
 
 [demo src="solution"]
diff --git a/2-ui/4-forms-controls/2-focus-blur/4-edit-td-click/solution.md b/2-ui/4-forms-controls/2-focus-blur/4-edit-td-click/solution.md
@@ -1,5 +1,5 @@
 
-1. On click -- replace `innerHTML` of the cell by `<textarea>` with same sizes and no border. Can use JavaScript or CSS to set the right size.
-2. Set `textarea.value` to `td.innerHTML`.
-3. Focus on the textarea.
-4. Show buttons OK/CANCEL under the cell, handle clicks on them.
+1. Au clique -- remplacer `innerHTML` de la cellule par `<textarea>` avec les mêmes tailles et aucune bordure. Possibilité d'utiliser JavaScript ou CSS pour mettre les bonnes tailles.
+2. Mettre `textarea.value` a `td.innerHTML`.
+3. Mettre le focus sur la zone de texte.
+4. Afficher les boutons OK/CANCEL en dessous de la cellule, gèrent les cliques sur eux-mêmes.
diff --git a/2-ui/4-forms-controls/2-focus-blur/4-edit-td-click/solution.view/bagua.css b/2-ui/4-forms-controls/2-focus-blur/4-edit-td-click/solution.view/bagua.css
@@ -1,4 +1,4 @@
-/* common styles for the table, no need to modify these */
+/* styles communs pour la table, pas besoin de les modifier */
 
 th {
   text-align: center;

diff --git a/2-ui/4-forms-controls/2-focus-blur/4-edit-td-click/solution.view/my.css b/2-ui/4-forms-controls/2-focus-blur/4-edit-td-click/solution.view/my.css
@@ -3,14 +3,14 @@
   margin: 0;
   padding: 0;
   display: block;
-  
-  /* remove resizing handle in Firefox */
+
+  /* retire la poignée de redimensionnement dans Firefox */
   resize: none;
-  
-  /* remove outline on focus in Chrome */
+
+  /* retire le contour lors du focus sur Chrome */
   outline: none;
-  
-  /* remove scrollbar in IE */
+
+  /* retire la barre de défillement sur IE */
   overflow: auto;
 }
 
@@ -21,4 +21,4 @@
 .edit-td {
   position: relative;
   padding: 0;
-}
+}
diff --git a/2-ui/4-forms-controls/2-focus-blur/4-edit-td-click/solution.view/script.js b/2-ui/4-forms-controls/2-focus-blur/4-edit-td-click/solution.view/script.js
@@ -4,7 +4,7 @@ let editingTd;
 
 table.onclick = function(event) {
 
-  // 3 possible targets
+  // 3 cibles possible
   let target = event.target.closest('.edit-cancel,.edit-ok,td');
 
   if (!table.contains(target)) return;
@@ -14,7 +14,7 @@ table.onclick = function(event) {
   } else if (target.className == 'edit-ok') {
     finishTdEdit(editingTd.elem, true);
   } else if (target.nodeName == 'TD') {
-    if (editingTd) return; // already editing
+    if (editingTd) return; // déjà en cours d'édition
 
     makeTdEditable(target);
   }
@@ -27,7 +27,7 @@ function makeTdEditable(td) {
     data: td.innerHTML
   };
 
-  td.classList.add('edit-td'); // td is in edit state, CSS also styles the area inside
+  td.classList.add('edit-td'); // td est en train d'être édité, CSS stylise aussi la zone à l'intérieur
 
   let textArea = document.createElement('textarea');
   textArea.style.width = td.clientWidth + 'px';

diff --git a/2-ui/4-forms-controls/2-focus-blur/4-edit-td-click/source.view/bagua.css b/2-ui/4-forms-controls/2-focus-blur/4-edit-td-click/source.view/bagua.css
@@ -1,4 +1,4 @@
-/* common styles for the table, no need to modify these */
+/* styles communs pour la table, pas besoin de les modifier */
 
 th {
   text-align: center;

diff --git a/2-ui/4-forms-controls/2-focus-blur/4-edit-td-click/source.view/my.css b/2-ui/4-forms-controls/2-focus-blur/4-edit-td-click/source.view/my.css
@@ -1 +1 @@
-/* your styles */
+/* vos styles */
diff --git a/2-ui/4-forms-controls/2-focus-blur/4-edit-td-click/source.view/script.js b/2-ui/4-forms-controls/2-focus-blur/4-edit-td-click/source.view/script.js
@@ -1,3 +1,3 @@
 let table = document.getElementById('bagua-table');
 
-/* your code */
+/* votre code */
diff --git a/2-ui/4-forms-controls/2-focus-blur/4-edit-td-click/task.md b/2-ui/4-forms-controls/2-focus-blur/4-edit-td-click/task.md
@@ -2,15 +2,15 @@ importance: 5
 
 ---
 
-# Edit TD on click
+# Modifier TD au clique
 
-Make table cells editable on click.
+Rendre des cellules de table éditables au clique.
 
-- On click -- the cell should became "editable" (textarea appears inside), we can change HTML. There should be no resize, all geometry should remain the same.
-- Buttons OK and CANCEL appear below the cell to finish/cancel the editing.
-- Only one cell may be editable at a moment. While a `<td>` is in "edit mode", clicks on other cells are ignored.
-- The table may have many cells. Use event delegation.
+- Au clique -- la cellule doit devenir "éditable" (une zone de texte apparait à l'intérieur), nous pouvons changer le HTML. Il ne doit pas y avoir de redimensionnement, toute la géométrie doit rester la même.
+- Les boutons OK et CANCEL apparaissent sous la cellule pour terminer/annuler l'édition.
+- Seulement une cellule devrait être éditable à la fois. Pendant qu'un `<td>` est en "mode d'édition", les cliques sur les autres cellules sont ignorés.
+- La table devrait avoir beaucoup de cellules. Utilisez la délégation d'évènements.
 
-The demo:
+La démo:
 
 [iframe src="solution" height=400]
diff --git a/2-ui/4-forms-controls/2-focus-blur/5-keyboard-mouse/solution.md b/2-ui/4-forms-controls/2-focus-blur/5-keyboard-mouse/solution.md
@@ -1,6 +1,6 @@
 
-We can use `mouse.onclick` to handle the click and make the mouse "moveable" with `position:fixed`, then `mouse.onkeydown` to handle arrow keys.
+Nous pouvons utiliser `mouse.onclick` pour gérer le clique et rendre la souris "déplaçable" avec `position:fixed`, puis `mouse.onkeydown` pour gérer les touches flèche.
 
-The only pitfall is that `keydown` only triggers on elements with focus. So we need to add `tabindex` to the element.  As we're forbidden to change HTML, we can use `mouse.tabIndex` property for that.
+Le seul problème est que `keydown` ne se déclenche que sur les éléments avec le focus. Donc nous avons besoin d'ajouter `tabindex` à l'élément. Comme nous n'avons pas le droit de modifier le HTML, nous pouvons utiliser la propriété `mouse.tabIndex` pour ceci.
 
-P.S. We also can replace `mouse.onclick` with `mouse.onfocus`.
+P.S. Nous pouvons aussi remplacer `mouse.onclick` par `mouse.onfocus`.
diff --git a/2-ui/4-forms-controls/2-focus-blur/5-keyboard-mouse/source.view/index.html b/2-ui/4-forms-controls/2-focus-blur/5-keyboard-mouse/source.view/index.html
@@ -34,7 +34,7 @@
 
 
   <script>
-    // ...your code...
+    // ...votre code...
   </script>
 
 </body>

diff --git a/2-ui/4-forms-controls/2-focus-blur/5-keyboard-mouse/task.md b/2-ui/4-forms-controls/2-focus-blur/5-keyboard-mouse/task.md
@@ -2,11 +2,11 @@ importance: 4
 
 ---
 
-# Keyboard-driven mouse
+# Souris dirigée par le clavier
 
-Focus on the mouse. Then use arrow keys to move it:
+Mettre le focus sur la souris. Puis utiliser les touches flèches pour la déplacer:
 
 [demo src="solution"]
 
-P.S. Don't put event handlers anywhere except the `#mouse` element.
-P.P.S. Don't modify HTML/CSS, the approach should be generic and work with any element.
+P.S. Ne mettez de gestionnaire d'évènement que sur l'élément `#mouse`.
+P.P.S. Ne modifiez pas le HTML/CSS, l'approche devrait être générique et fonctionner avec n'importe quel élément.