up

iliakan · iliakan · commit d85be5f17b8a · 2017-03-05T19:49:29.000+03:00
diff --git a/2-ui/1-document/07-modifying-document/5-why-aaa/task.md b/2-ui/1-document/07-modifying-document/5-why-aaa/task.md
@@ -2,7 +2,7 @@ importance: 1
 
 ---
 
-# Why "ааа" remains?
+# Why "aaa" remains?
 
 Run the example. Why `table.remove()` does not delete the text `"aaa"`?
 
diff --git a/2-ui/1-document/07-modifying-document/7-create-object-tree/innerhtml.view/index.html b/2-ui/1-document/07-modifying-document/7-create-object-tree/innerhtml.view/index.html
@@ -27,7 +27,7 @@
       container.innerHTML = createTreeText(obj);
     }
 
-    function createTreeText(obj) { // отдельная рекурсивная функция
+    function createTreeText(obj) { // standalone recursive function
       let li = '';
       for (let key in obj) {
         li += '<li>' + key + createTreeText(obj[key]) + '</li>';
@@ -38,7 +38,6 @@
       return ul || '';
     }
 
-    let container = document.getElementById('container');
     createTree(container, data);
   </script>
 </body>
diff --git a/2-ui/1-document/07-modifying-document/8-tree-count/solution.view/index.html b/2-ui/1-document/07-modifying-document/8-tree-count/solution.view/index.html
@@ -43,12 +43,12 @@
     let lis = document.getElementsByTagName('li');
 
     for (let li of lis) {
-      // получить количество детей
-      let childCount = li.getElementsByTagName('li').length;
-      if (!childCount) continue;
+      // get the count of all <li> below this <li>
+      let descendantsCount = li.getElementsByTagName('li').length;
+      if (!descendantsCount) continue;
 
-      // добавить кол-во детей к текстовому узлу
-      li.firstChild.data += ' [' + childCount + ']';
+      // add directly to the text node (append to the text)
+      li.firstChild.data += ' [' + descendantsCount + ']';
     }
   </script>
 
diff --git a/2-ui/1-document/08-styles-and-classes/getiecomputedstyle.view/getiecomputedstyle.js b/2-ui/1-document/08-styles-and-classes/getiecomputedstyle.view/getiecomputedstyle.js
diff --git a/2-ui/1-document/08-styles-and-classes/getiecomputedstyle.view/index.html b/2-ui/1-document/08-styles-and-classes/getiecomputedstyle.view/index.html
diff --git a/2-ui/1-document/09-size-and-scroll/article.md b/2-ui/1-document/09-size-and-scroll/article.md
@@ -152,7 +152,7 @@ They include the content width together with paddings, but without the scrollbar
 
 ![](metric-client-width-height.png)
 
-On the picture above let's first consider `clientHeight`: it's easier to evaluate. There's no horizontal scrollbar, so its exactly the sum of what's inside the borders: CSS-высота `200px` plus top and bottom paddings (`2*20px`) total `240px`.
+On the picture above let's first consider `clientHeight`: it's easier to evaluate. There's no horizontal scrollbar, so its exactly the sum of what's inside the borders: CSS-height `200px` plus top and bottom paddings (`2*20px`) total `240px`.
 
 Now `clientWidth` -- here the content width is not `300px`, but `284px`, because `16px` are occupied by the scrollbbar. So the sum is `284px` plus left and right paddings, total `324px`.
 
diff --git a/2-ui/1-document/10-size-and-scroll-window/article.md b/2-ui/1-document/10-size-and-scroll-window/article.md
@@ -90,7 +90,7 @@ We can do the same for the page:
 
 It should work.
 
-But there's a simpler, more universal solution: special methods  [window.scrollBy(x,y)](mdn:api/Window/scrollBy) и [window.scrollTo(pageX,pageY)](mdn:api/Window/scrollTo).
+But there's a simpler, more universal solution: special methods  [window.scrollBy(x,y)](mdn:api/Window/scrollBy) and [window.scrollTo(pageX,pageY)](mdn:api/Window/scrollTo).
 
 - The method `scrollBy(x,y)` scrolls the page relative to its current position. For instance, `scrollBy(0,10)` scrolls the page `10px` down.
 
diff --git a/2-ui/2-events/1-introduction-browser-events/01-hide-other/source.view/index.html b/2-ui/2-events/1-introduction-browser-events/01-hide-other/source.view/index.html
@@ -7,13 +7,13 @@
 
 <body>
 
-  <input type="button" id="hider" value="Нажмите, чтобы спрятать текст" />
+  <input type="button" id="hider" value="Click to hide the text" />
 
-  <div id="text">Текст</div>
+  <div id="text">Text</div>
 
   <script>
-    /* ваш код */
+    /* your code */
   </script>
-</body>
 
-</html>
+</body>
+</html>
diff --git a/2-ui/2-events/1-introduction-browser-events/06-hide-message/solution.md b/2-ui/2-events/1-introduction-browser-events/06-hide-message/solution.md
@@ -1,10 +1,13 @@
 
-1. Изменим HTML/CSS, чтобы кнопка была в нужном месте сообщения. Кнопка -- это тег `<button>`, поэтому понадобится несколько стилей.
+To add the button we can use either `position:absolute` (and make the pane `position:relative`) or `float:right`. The `float:right` has the benefit that the button never overlaps the text, but `position:absolute` gives more freedom. So the choice is yours.
 
-    Расположить кнопку справа можно при помощи `position:relative` для `pane`, а для кнопки `position:absolute + right/top`. Так как `position:absolute` вынимает элемент из потока, то кнопка может частично оказаться "сверху" текста заголовка, перекрыв его конец. Чтобы этого не произошло, можно добавить `padding-right` к заголовку.
+Then for each pane the code can be like:
+```js
+pane.insertAdjacentHTML("afterbegin", '<button class="remove-button">[x]</button>');
+```
 
-    Если использовать `float:right`, то кнопка никогда не перекроет текст. Это, пожалуй хорошо.
-
-    С другой стороны, потенциальным преимуществом способа с `position` по сравнению с `float` в данном случае является возможность поместить элемент кнопки в HTML *после текста*, а не до него.
-2. Для того, чтобы получить кнопку из контейнера, используем `querySelectorAll`. На каждую кнопку повесим обработчик, который будет убирать родителя. Найти родителя можно через `parentNode`.
+Then the `<button>` becomes `pane.firstChild`, so we can add a handler to it like this:
 
+```js
+pane.firstChild.onclick = () => pane.remove();
+```
diff --git a/2-ui/2-events/1-introduction-browser-events/07-carousel/solution.view/index.html b/2-ui/2-events/1-introduction-browser-events/07-carousel/solution.view/index.html
@@ -11,16 +11,16 @@
     <button class="arrow prev">⇦</button>
     <div class="gallery">
       <ul class="images">
-        <li><img src="https://js.cx/carousel/1.png"></li>
-        <li><img src="https://js.cx/carousel/2.png"></li>
-        <li><img src="https://js.cx/carousel/3.png"></li>
-        <li><img src="https://js.cx/carousel/4.png"></li>
-        <li><img src="https://js.cx/carousel/5.png"></li>
-        <li><img src="https://js.cx/carousel/6.png"></li>
-        <li><img src="https://js.cx/carousel/7.png"></li>
-        <li><img src="https://js.cx/carousel/8.png"></li>
-        <li><img src="https://js.cx/carousel/9.png"></li>
-        <li><img src="https://js.cx/carousel/10.png"></li>
+        <li><img src="https://en.js.cx/carousel/1.png"></li>
+        <li><img src="https://en.js.cx/carousel/2.png"></li>
+        <li><img src="https://en.js.cx/carousel/3.png"></li>
+        <li><img src="https://en.js.cx/carousel/4.png"></li>
+        <li><img src="https://en.js.cx/carousel/5.png"></li>
+        <li><img src="https://en.js.cx/carousel/6.png"></li>
+        <li><img src="https://en.js.cx/carousel/7.png"></li>
+        <li><img src="https://en.js.cx/carousel/8.png"></li>
+        <li><img src="https://en.js.cx/carousel/9.png"></li>
+        <li><img src="https://en.js.cx/carousel/10.png"></li>
       </ul>
     </div>
     <button class="arrow next">⇨</button>
diff --git a/2-ui/2-events/1-introduction-browser-events/07-carousel/source.view/index.html b/2-ui/2-events/1-introduction-browser-events/07-carousel/source.view/index.html
@@ -7,28 +7,28 @@
 
 <body>
 
-  <!-- ваша верстка виджета, ваши стили -->
+  <!-- create your markup and styles -->
 
   <button class="arrow">⇦</button>
   <button class="arrow">⇨</button>
 
 
   <ul>
-    <li><img src="https://js.cx/carousel/1.png"></li>
-    <li><img src="https://js.cx/carousel/2.png"></li>
-    <li><img src="https://js.cx/carousel/3.png"></li>
-    <li><img src="https://js.cx/carousel/4.png"></li>
-    <li><img src="https://js.cx/carousel/5.png"></li>
-    <li><img src="https://js.cx/carousel/6.png"></li>
-    <li><img src="https://js.cx/carousel/7.png"></li>
-    <li><img src="https://js.cx/carousel/8.png"></li>
-    <li><img src="https://js.cx/carousel/9.png"></li>
-    <li><img src="https://js.cx/carousel/10.png"></li>
+    <li><img src="https://en.js.cx/carousel/1.png"></li>
+    <li><img src="https://en.js.cx/carousel/2.png"></li>
+    <li><img src="https://en.js.cx/carousel/3.png"></li>
+    <li><img src="https://en.js.cx/carousel/4.png"></li>
+    <li><img src="https://en.js.cx/carousel/5.png"></li>
+    <li><img src="https://en.js.cx/carousel/6.png"></li>
+    <li><img src="https://en.js.cx/carousel/7.png"></li>
+    <li><img src="https://en.js.cx/carousel/8.png"></li>
+    <li><img src="https://en.js.cx/carousel/9.png"></li>
+    <li><img src="https://en.js.cx/carousel/10.png"></li>
   </ul>
 
 
   <script>
-    // label the images, just for convenience, to visually track them
+    // label the images to visually track them, just for convenience,
     // this code can be removed
     let i = 1;
     for(let li of carousel.querySelectorAll('li')) {
diff --git a/2-ui/2-events/1-introduction-browser-events/article.md b/2-ui/2-events/1-introduction-browser-events/article.md
@@ -48,7 +48,7 @@ For instance, to assign a `click` handler for an `input`, we can use `onclick`,
 
 On mouse click, the code inside `onclick` runs.
 
-Please note that inside `onclick` we use single quotes, because the attribute itself is in double quotes. If we fforget that the code is inside the attribute and use double quotes inside, like this:  `onclick="alert("Клик!")"`, then it won't work right.
+Please note that inside `onclick` we use single quotes, because the attribute itself is in double quotes. If we fforget that the code is inside the attribute and use double quotes inside, like this:  `onclick="alert("Click!")"`, then it won't work right.
 
 An HTML-attribute is not a convenient place to write a lot of code, so we'd better create a JavaScript function and call it there.
 
@@ -340,7 +340,7 @@ Here's an example of getting mouse coordinates from the event object:
 <script>
   elem.onclick = function(*!*event*/!*) {
     // show event type, element and coordinates of the click
-    alert(event.type + " на " + event.currentTarget);
+    alert(event.type + " at " + event.currentTarget);
     alert(event.clientX + ":" + event.clientY);
   };
 </script>

Original file line number	Diff line number	Diff line change
`@@ -27,7 +27,7 @@`
`27`	`27`	`container.innerHTML = createTreeText(obj);`
`28`	`28`	`}`
`29`	`29`
`30`		`- function createTreeText(obj) { // отдельная рекурсивная функция`
	`30`	`+ function createTreeText(obj) { // standalone recursive function`
`31`	`31`	`let li = '';`
`32`	`32`	`for (let key in obj) {`
`33`	`33`	`li += '<li>' + key + createTreeText(obj[key]) + '</li>';`
`@@ -38,7 +38,6 @@`
`38`	`38`	`return ul \|\| '';`
`39`	`39`	`}`
`40`	`40`
`41`		`- let container = document.getElementById('container');`
`42`	`41`	`createTree(container, data);`
`43`	`42`	`</script>`
`44`	`43`	`</body>`