javascript-tutorial · HachemiH · Aug 25, 2019 · Aug 25, 2019 · Aug 25, 2019 · Aug 25, 2019
diff --git a/2-ui/3-event-details/8-onscroll/1-endless-page/solution.md b/2-ui/3-event-details/8-onscroll/1-endless-page/solution.md
@@ -1,65 +1,72 @@
-The core of the solution is a function that adds more dates to the page (or loads more stuff in real-life) while we're at the page end.
+L'essence de la solution est une fonction qui ajoute plus de dates à la page  (ou charge plus de chose en réalité) alors que nous sommes en fin de page.
 
-We can call it immediately and add as a `window.onscroll` handler.
+Nous pouvons l'appeler immédiatement et y ajouter un contrôleur d’évènement avec  `window.onscroll`.
 
-The most important question is: "How do we detect that the page is scrolled to bottom?"
+La question cruciale est: " Comment détectons nous que la page est défilée vers le bas?"
 
-Let's use window-relative coordinates.
+Utilisons les coordonnées relatives de window: window-relative.
 
-The document is represented (and contained) within `<html>` tag, that is `document.documentElement`.
+Le document est représenté (et contenu) dans la balise  `<html>`, qui est `document.documentElement`.
 
-We can get window-relative coordinates of the whole document as `document.documentElement.getBoundingClientRect()`, the `bottom` property will be window-relative coordinate of the document bottom.
 
-For instance, if the height of the whole HTML document is `2000px`, then:
+Nous pouvons obtenir les coordonnées relatives à la fenêtre du document en entier avec  `document.documentElement.getBoundingClientRect()`, la propriété `bottom` sera la coordonnée relative à la fenêtre de la fin du document.
+
+Par exemple, si la hauteur totale du document HTML est de 2000px, alors :
 
 ```js
-// when we're on the top of the page
+// Lorsqu'on est en haut de la page 
+
 // window-relative top = 0
 document.documentElement.getBoundingClientRect().top = 0
 
-// window-relative bottom = 2000
-// the document is long, so that is probably far beyond the window bottom
+// window-relative en bas de page = 2000
+// le document est long, alors c'est probablement bien au-delà des limites inferieures de la fenêtre
 document.documentElement.getBoundingClientRect().bottom = 2000
 ```
 
-If we scroll `500px` below, then:
+Si nous défilonsla page de `500px` vers le bas, alors:
 
 ```js
 // document top is above the window 500px
 document.documentElement.getBoundingClientRect().top = -500
-// document bottom is 500px closer
+// le bas du document est  500px plus proche
 document.documentElement.getBoundingClientRect().bottom = 1500
 ```
 
-When we scroll till the end, assuming that the window height is `600px`:
+Lorsque nous défilons jusque vers la fin, en assumant que la hauteur de la fenêtre  est de `600px`:
 
 
 ```js
-// document top is above the window 1400px
+// La limite supérieure du document est au-dessus de la fenêtre à 1400px
 document.documentElement.getBoundingClientRect().top = -1400
-// document bottom is below the window 600px
+// Le bas du document est au bas de la fenêtre à 600px
 document.documentElement.getBoundingClientRect().bottom = 600
 ```
 
-Please note that the `bottom` can't be `0`, because it never reaches the window top. The lowest limit of the `bottom` coordinate is the window height (we assumed it to be `600`), we can't scroll it any more up.
 
-We can obtain the window height as `document.documentElement.clientHeight`.
+Veuillez noter que le `bottom` ne peut être `0`, parce qu’elle n'atteint jamais le haut de la fenêtre. La limite la plus basse de coordonées `bottom` est la hauteur de la fenêtre (nous avons supposé que ce soit `600`),, nous ne pouvons plus la défiler vers le haut.
+
+Nous pouvons obtenir la hauteur de la fenêtre comme `document.documentElement.clientHeight`.
+
+Pour notre tâche, nous devons savoir quand la fin du document n’est pas plus éloigné de `100px` (c’est-à-dire `600-700px` si la hauteur est `600`).
 
-For our task, we need to know when the document bottom is not no more than `100px` away from it (that is: `600-700px`, if the height is `600`).
 
-So here's the function:
+Donc voici la fonction:
 
 ```js
 function populate() {
   while(true) {
-    // document bottom
+    // la fin du document
     let windowRelativeBottom = document.documentElement.getBoundingClientRect().bottom;
 
-    // if the user scrolled far enough (<100px to the end)
+
+    // si l'utilisateur a suffisamment défilé (<100px de la fin)
     if (windowRelativeBottom < document.documentElement.clientHeight + 100) {
-      // let's add more data
-      document.body.insertAdjacentHTML("beforeend", `<p>Date: ${new Date()}</p>`);
+
+    // ajoutons plus de données
+    document.body.insertAdjacentHTML("beforeend", `<p>Date: ${new Date()}</p>`);
     }
+
   }
 }
-```
+```
diff --git a/2-ui/3-event-details/8-onscroll/1-endless-page/solution.view/index.html b/2-ui/3-event-details/8-onscroll/1-endless-page/solution.view/index.html
@@ -6,7 +6,7 @@
 
 <body>
 
-<h1>Scroll me</h1>
+<h1>Défile moi</h1>
 
 <script>
   function populate() {
@@ -19,7 +19,7 @@ <h1>Scroll me</h1>
 
   window.addEventListener('scroll', populate);
 
-  populate(); // init document
+  populate(); // initialise le document.
 </script>
 
 </body>

diff --git a/2-ui/3-event-details/8-onscroll/1-endless-page/source.view/index.html b/2-ui/3-event-details/8-onscroll/1-endless-page/source.view/index.html
@@ -6,10 +6,10 @@
 
 <body>
 
-<h1>Scroll me</h1>
+<h1>Défile moi</h1>
 
 <script>
-  // ... your code ...
+  // ... votre code ...
 </script>
 
 </body>

diff --git a/2-ui/3-event-details/8-onscroll/1-endless-page/task.md b/2-ui/3-event-details/8-onscroll/1-endless-page/task.md
@@ -2,19 +2,19 @@ importance: 5
 
 ---
 
-# Endless page
+# Page sans Fin
 
-Create an endless page. When a visitor scrolls it to the end, it auto-appends current date-time to the text (so that a visitor can scroll more).
+Créez une page sans fin. Lorsqu'un visiteur la défile vers la fin, elle y appose automatiquement au texte l'heure et la date en temps réelle   (de sorte à ce que le visiteur puisse défiler d'avantage la page).
 
-Like this:
+Comme ceci:
 
 [iframe src="solution" height=200]
 
-Please note two important features of the scroll:
+S'il vous plait veuillez noter deux importants aspects du défilement:
 
-1. **The scroll is "elastic".** We can scroll a little beyond the document start or end in some browsers/devices (empty space below is shown, and then the document will automatically "bounces back" to normal).
-2. **The scroll is imprecise.** When we scroll to page end, then we may be in fact like 0-50px away from the real document bottom.
+1. **Le défilement est "élastique".** Nous pouvons défiler un peu au-delà du  début ou la fin du document avec certains navigateurs /appareils (l'espace vide en bas est montrée, et ensuite le document va automatiquement "retourner" à la normale).
+2. **Le défilement est imprécis.** Quand nous défilons vers la fin de la page, alors nous pouvons être en réalité entre 0-50px de la fin réelle document.
 
-So, "scrolling to the end" should mean that the visitor is no more than 100px away from the document end.
+donc, "le défilement vers la fin" doit signifier que le visiteur n'est  pas à  plus de 100px de la fin du document.
 
-P.S. In real life we may want to show "more messages" or "more goods".
+P.S. En réalité nous pourrions vouloir montrer " plus de messages" ou " plus de bonnes choses".
diff --git a/2-ui/3-event-details/8-onscroll/2-updown-button/solution.view/index.html b/2-ui/3-event-details/8-onscroll/2-updown-button/solution.view/index.html
@@ -49,7 +49,7 @@
 
     arrowTop.onclick = function() {
       window.scrollTo(pageXOffset, 0);
-      // after scrollTo, there will be a "scroll" event, so the arrow will hide automatically
+      // Après  scrollTo, il y aura un évènement "scroll", de sorte à ce que la flèche puisse être cachée automatiquement
     };
 
     window.addEventListener('scroll', function() {

diff --git a/2-ui/3-event-details/8-onscroll/2-updown-button/source.view/index.html b/2-ui/3-event-details/8-onscroll/2-updown-button/source.view/index.html
@@ -46,7 +46,7 @@
   <div id="arrowTop"></div>
 
   <script>
-    // ... your code ...
+    // ... votre code ...
   </script>
 
 </body>

diff --git a/2-ui/3-event-details/8-onscroll/2-updown-button/task.md b/2-ui/3-event-details/8-onscroll/2-updown-button/task.md
@@ -2,15 +2,17 @@ importance: 5
 
 ---
 
-# Up/down button
+# Bouton Up/down 
 
-Create a "to the top" button to help with page scrolling.
+Créer un bouton nomme "to the top" pour aider à effectuer un défilement de page.
 
-It should work like this:
-- While the page is not scrolled down at least for the window height -- it's invisible.
-- When the page is scrolled down more than the window height -- there appears an "upwards" arrow in the left-top corner. If the page is scrolled back, it disappears.
-- When the arrow is clicked, the page scrolls to the top.
+Cela doit être ainsi:
+- Tandis que la page n'est pas défilée vers le bas pour au moins une hauteur égale a la fenêtre --  être invisible.
+- Quand la page est défilée vers le bas au-delà de la hauteur de la fenêtre -- il doit apparaitre une flèche pointant "vers le haut" au coin gauche supérieur. Si la page est défilée dans l'autre sens, elle disparait.
+- Lorsqu'on clique sur la flèche, la page défile vers le haut.
+
+
+Comme ceci (coin supérieur gauche, faites défiler pour voir) :
 
-Like this (top-left corner, scroll to see):
 
 [iframe border="1" height="200" link src="solution"]
diff --git a/2-ui/3-event-details/8-onscroll/3-load-visible-img/solution.md b/2-ui/3-event-details/8-onscroll/3-load-visible-img/solution.md
@@ -1,21 +1,24 @@
-The `onscroll` handler should check which images are visible and show them.
 
-We also want to run it when the page loads, to detect immediately visible images and load them.
 
-The code should execute when the document is loaded, so that it has access to its content.
+Nous souhaitons également l’exécuter lors du chargement de la page, afin de détecter les images immédiatement visibles et de les charger.
+
+Le code doit être exécuté lors du chargement du document afin qu'il ait accès à son contenu.
+
+Ou le mettre en dessous du `<body>` :
 
-Or put it at the `<body>` bottom:
 
 ```js
-// ...the page content is above...
+// ...Le contenu de la page est en haut...
 
 function isVisible(elem) {
 
   let coords = elem.getBoundingClientRect();
 
   let windowHeight = document.documentElement.clientHeight;
 
-  // top elem edge is visible?
+
+  // Le bord supérieur de l'elem est visible ?
+
   let topVisible = coords.top > 0 && coords.top < windowHeight;
 
   // bottom elem edge is visible?
@@ -46,4 +49,8 @@ window.onscroll = showVisible;
 */!*
 ```
 
-P.S. The solution also has a variant of `isVisible` that "preloads" images that are within 1 page above/below the current document scroll.
+
+Pour les images visibles nous pouvons prendre `img.dataset.src` et l'assigner à `img.src` (si cela n’a pas été fait déjà).
+
+P.S. La solution propose également une variante de `isVisible` qui "précharge" les images situées dans une page au-dessus / au-dessous du document en cours de défilement.
+