Merge pull request #186 from HachemiH/master

Modifying the document

Author: HachemiH

2-ui/1-document/07-modifying-document/1-createtextnode-vs-innerhtml/solution.md

@@ -1,8 +1,8 @@
-Answer: **1 and 3**.
+Réponse : **1 et 3**.
 
-Both commands result in adding the `text` "as text" into the `elem`.
+Les deux commandes ont pour résultat d'ajouter le `texte` "en tant que texte" dans `elem`.
 
-Here's an example:
+Voici un exemple :
 
 ```html run height=80
 <div id="elem1"></div>

2-ui/1-document/07-modifying-document/1-createtextnode-vs-innerhtml/task.md

@@ -4,9 +4,9 @@ importance: 5
 
 # createTextNode vs innerHTML vs textContent
 
-We have an empty DOM element `elem` and a string `text`.
+Nous avons un élément DOM vide `elem` et une chaîne de caractères `text`.
 
-Which of these 3 commands do exactly the same?
+Lesquelles de ces 3 commandes font exactement la même chose ?
 
 1. `elem.append(document.createTextNode(text))`
 2. `elem.innerHTML = text`

2-ui/1-document/07-modifying-document/10-clock-setinterval/solution.md

@@ -1,16 +1,16 @@
-First, let's make HTML/CSS.
+Tout d'abord, créons notre HTML/CSS.
 
-Each component of the time would look great in its own `<span>`:
+Chaque composante du temps aurait fière allure dans son propre `<span>` :
 
 ```html
 <div id="clock">
   <span class="hour">hh</span>:<span class="min">mm</span>:<span class="sec">ss</span>
 </div>
 ```
 
-Also we'll need CSS to color them.
+Nous aurons également besoin de CSS pour les colorer.
 
-The `update` function will refresh the clock, to be called by `setInterval` every second:
+La fonction `update` rafraîchira l'horloge, qui sera appelée par `setInterval` toutes les secondes :
 
 ```js
 function update() {
@@ -32,14 +32,14 @@ function update() {
 }
 ```
 
-In the line `(*)` we every time check the current date. The calls to `setInterval` are not reliable: they may happen with delays.
+Dans la ligne `(*)` nous vérifions à chaque fois la date actuelle. Les appels à `setInterval` ne sont pas fiables : ils peuvent survenir avec des retards.
 
-The clock-managing functions:
+Les fonctions de gestion d'horloge :
 
 ```js
 let timerId;
 
-function clockStart() { // run the clock
+function clockStart() { // exécute l'horloge
   timerId = setInterval(update, 1000);
   update(); // (*)
 }
@@ -50,4 +50,4 @@ function clockStop() {
 }
 ```
 
-Please note that the call to `update()` is not only scheduled in `clockStart()`, but immediately run in the line `(*)`. Otherwise the visitor would have to wait till the first execution of `setInterval`. And the clock would be empty till then.
+Veuillez noter que l'appel à `update()` est non seulement planifié dans `clockStart()`, mais s'exécute immédiatement dans la ligne `(*)`. Sinon, le visiteur devra attendre la première exécution de `setInterval`. Et l'horloge serait vide jusque-là.

2-ui/1-document/07-modifying-document/10-clock-setinterval/task.md

@@ -2,10 +2,10 @@ importance: 4
 
 ---
 
-# Colored clock with setInterval
+# Horloge colorée avec setInterval
 
-Create a colored clock like here:
+Créez une horloge colorée comme ici : 
 
 [iframe src="solution" height=60]
 
-Use HTML/CSS for the styling, JavaScript only updates time in elements.
+Utilisez HTML/CSS pour le style, JavaScript ne met à jour que le temps dans les éléments.

2-ui/1-document/07-modifying-document/11-append-to-list/solution.md

@@ -1,7 +1,7 @@
 
-When we need to insert a piece of HTML somewhere, `insertAdjacentHTML` is the best fit.
+Lorsque nous devons insérer un morceau de HTML quelque part, `insertAdjacentHTML` est le meilleur choix.
 
-The solution:
+La solution :
 
 ```js
 one.insertAdjacentHTML('afterend', '<li>2</li><li>3</li>');

2-ui/1-document/07-modifying-document/11-append-to-list/task.md

@@ -2,9 +2,9 @@ importance: 5
 
 ---
 
-# Insert the HTML in the list
+# Insérez le HTML dans la liste
 
-Write the code to insert `<li>2</li><li>3</li>` between two `<li>` here:
+Écrivez le code pour insérer `<li>2</li><li>3</li>` entre deux `<li>` ici :
 
 ```html
 <ul id="ul">

2-ui/1-document/07-modifying-document/12-sort-table/solution.md

@@ -1,4 +1,4 @@
-The solution is short, yet may look a bit tricky, so here I provide it with extensive comments:
+La solution est courte, mais peut sembler un peu délicate, alors ici je la présente avec de nombreux commentaires :
 
 ```js
 let sortedRows = Array.from(table.tBodies[0].rows) // 1
@@ -7,12 +7,12 @@ let sortedRows = Array.from(table.tBodies[0].rows) // 1
 table.tBodies[0].append(...sortedRows); // (3)
 ```
 
-The step-by-step algorthm:
+L'algorithme pas à pas :
 
-1. Get all `<tr>`, from `<tbody>`.
-2. Then sort them comparing by the content of the first `<td>` (the name field).
-3. Now insert nodes in the right order by `.append(...sortedRows)`.
+1. Obtenez tous les `<tr>` de `<tbody>`.
+2. Triez-les ensuite en les comparant au contenu du premier `<td>` (le champ du nom).
+3. Insérez maintenant les nœuds dans le bon ordre par `.append(...sortedRows)`.
 
-We don't have to remove row elements, just "re-insert", they leave the old place automatically.
+Nous n'avons pas à supprimer les éléments de ligne, il suffit de les "réinsérer", ils quittent automatiquement l'ancien emplacement.
 
-P.S. In our case, there's an explicit `<tbody>` in the table, but even if HTML table doesn't have `<tbody>`, the DOM structure always has it.
+P.S. Dans notre cas, il y a un `<tbody>` explicite dans le tableau, mais même si le tableau HTML n'a pas de `<tbody>`, la structure DOM l'a toujours.

2-ui/1-document/07-modifying-document/12-sort-table/task.md

@@ -2,9 +2,9 @@ importance: 5
 
 ---
 
-# Sort the table
+# Trier le tableau
 
-There's a table:
+Il y a un tableau :
 
 ```html run
 <table>
@@ -30,6 +30,6 @@ There's a table:
 </table>
 ```
 
-There may be more rows in it.
+Il peut y avoir plus de lignes.
 
-Write the code to sort it by the `"name"` column.
+Écrivez le code pour le trier par la colonne `"name"`.

2-ui/1-document/07-modifying-document/4-clear-elem/solution.md

@@ -1,5 +1,5 @@
 
-First, let's see how *not* to do it:
+Voyons d'abord comment ne *pas* le faire :
 
 ```js
 function clear(elem) {
@@ -9,11 +9,11 @@ function clear(elem) {
 }
 ```
 
-That won't work, because the call to `remove()` shifts the collection `elem.childNodes`, so elements start from the index `0` every time. But `i` increases, and some elements will be skipped.
+Cela ne fonctionnera pas, car l'appel à `remove()` décale la collection `elem.childNodes`, donc les éléments commencent à partir de l'index `0` à chaque fois. Mais `i` augmente et certains éléments seront ignorés.
 
-The `for..of` loop also does the same.
+La boucle `for..of` fait de même.
 
-The right variant could be:
+La bonne variante pourrait être :
 
 ```js
 function clear(elem) {
@@ -23,7 +23,7 @@ function clear(elem) {
 }
 ```
 
-And also there's a simpler way to do the same:
+Et il existe également un moyen plus simple de faire de même :
 
 ```js
 function clear(elem) {

2-ui/1-document/07-modifying-document/4-clear-elem/task.md

@@ -2,9 +2,9 @@ importance: 5
 
 ---
 
-# Clear the element
+# Effacer l'élément
 
-Create a function `clear(elem)` that removes everything from the element.
+Créez une fonction `clear(elem)` qui supprime tout de l'élément.
 
 ```html run height=60
 <ol id="elem">
@@ -13,8 +13,8 @@ Create a function `clear(elem)` that removes everything from the element.
 </ol>
 
 <script>
-  function clear(elem) { /* your code */ }
+  function clear(elem) { /* votre code */ }
 
-  clear(elem); // clears the list
+  clear(elem); // efface la liste
 </script>
 ```