Dec 17, 2020 · Oct 20, 2020 · Oct 20, 2020 · Oct 20, 2020 · Oct 20, 2020 · Oct 20, 2020
diff --git a/2-ui/1-document/09-size-and-scroll/1-get-scroll-height-bottom/solution.md b/2-ui/1-document/09-size-and-scroll/1-get-scroll-height-bottom/solution.md
 The solution is:
 La solución es:

 ```js
 let scrollBottom = elem.scrollHeight - elem.scrollTop - elem.clientHeight;
 ```

 In other words: (full height) minus (scrolled out top part) minus (visible part) --that's exactly the scrolled out bottom part.
 En otras palabras: (altura total) menos (parte superior desplazada) menos (parte visible) --esa es exactamente la parte inferior desplazada.
diff --git a/2-ui/1-document/09-size-and-scroll/1-get-scroll-height-bottom/task.md b/2-ui/1-document/09-size-and-scroll/1-get-scroll-height-bottom/task.md

 ---

 #What's the scroll from the bottom?
 #¿Qué es el desplazamiento desde la parte inferior?

 The`elem.scrollTop`property is the size of the scrolled out part from the top. How to get the size of the bottom scroll (let's call it `scrollBottom`)?
 La propiedad`elem.scrollTop`es el tamaño desplazado desde la parte superior. ¿Cómo obtener el tamaño de la parte inferior desplazada (vamos a llamarlo `scrollBottom`)?

 Write the code that works for an arbitrary`elem`.
 Escribe el código que funcione para un`elem` arbitrario.

 P.S.Please check your code: if there'snoscroll or the element is fully scrolled down, then it should return `0`.
 P.S.Por favor revisa tu código: sinohay desplazamiento o el elemento está complemamente desplazado, debería retornar `0`.
diff --git a/2-ui/1-document/09-size-and-scroll/2-scrollbar-width/solution.md b/2-ui/1-document/09-size-and-scroll/2-scrollbar-width/solution.md
 To get the scrollbar width, we can create an element with thescroll,but without borders and paddings.
 Para obtener el ancho de la barra de desplazamiento, podemos crear un elemento con elscroll,pero sin bordes ni rellenos.

 Then the difference between its full width `offsetWidth`and the inner content areawidth `clientWidth`will be exactly the scrollbar:
 Entonces la diferencia entre su ancho completo `offsetWidth`y el ancho del areainterior `clientWidth`será exactamente la barra de desplazamiento:

 ```js run
 //create a divwith the scroll
 //crea un divcon el scroll
 let div = document.createElement('div');

 div.style.overflowY = 'scroll';
 div.style.width = '50px';
 div.style.height = '50px';

 //must put it in the document, otherwise sizes will be 0
 //debe ponerlo en el documento, de lo contrario los tamaños serán 0
 document.body.append(div);
 let scrollWidth = div.offsetWidth - div.clientWidth;

diff --git a/2-ui/1-document/09-size-and-scroll/2-scrollbar-width/task.md b/2-ui/1-document/09-size-and-scroll/2-scrollbar-width/task.md

 ---

 #What is the scrollbar width?
 #¿Qué es el ancho de la barra de desplazamiento?

 Write the code that returns the width of a standard scrollbar.
 Escribe el código que retorna el tamaño de una barra de desplazamiento estándar.

 For Windowsit usually varies between `12px`and `20px`.If the browser doesn't reserve any space for it (the scrollbar is half-translucent over the text, also happens),then it may be `0px`.
 Para Windowsesto usualmente varía entre `12px`y `20px`.Si el navegador no reserva algún espacio para esto (la barra de desplazamiento es medio traslúcida sobre el texto, también pasa),entonces puede ser `0px`.

 P.S.The code should work for any HTML document, do not depend on its content.
 P.S.El código debería funcionar con cualquier documento HTML, no depende de su contenido.
diff --git a/2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/solution.md b/2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/solution.md
 The ball has `position:absolute`.It means that its `left/top`coordinates are measured from the nearest positioned element, that is `#field` (because it has `position:relative`).
 La pelota tiene `position:absolute`.Significa que sus coordenadas `left/top`se miden desde el elemento posicionado más cercano, es decir `#field` (porque tiene `position:relative`).

 The coordinates start from the inner left-upper corner of the field:
 Las coordenadas inician desde el interior de la esquina superior izquierda del campo:

 ![](field.svg)

 The inner field width/height is `clientWidth/clientHeight`.So the field center has coordinates `(clientWidth/2, clientHeight/2)`.
 El interior del campo ancho/alto es `clientWidth/clientHeight`.Entonces el centro del campo tiene coordenadas `(clientWidth/2, clientHeight/2)`.

 ...But if we set`ball.style.left/top`to such values, then not the ball as a whole, but the left-upper edge of the ball would be in the center:
 ...Pero si configuramos`ball.style.left/top`a tales valores, entonces no la pelota en su conjunto, sino el borde superior izquierdo de la pelota estaría en el centro:

 ```js
 ball.style.left = Math.round(field.clientWidth / 2) + 'px';
 ball.style.top = Math.round(field.clientHeight / 2) + 'px';
 ```

 Here's how it looks:
 Así es como se ve:

 [iframe height=180 src="ball-half"]

 To align the ball center with the center of the field, we should move the ball to the half of its width to the left and to the half of its height to the top:
 Para alinear la pelota al centro con el centro del campo, deberíamos mover la pelota a la mitad de su ancho a la izquierda y a la mitad de su altura hacia arriba:

 ```js
 ball.style.left = Math.round(field.clientWidth / 2 - ball.offsetWidth / 2) + 'px';
 ball.style.top = Math.round(field.clientHeight / 2 - ball.offsetHeight / 2) + 'px';
 ```

 Now the ball is finally centered.
 Ahora la pelota está finalmente centrada.

 ````warn header="Attention: the pitfall!"
 ````warn header="Atención: ¡la trampa!"

 The code won't work reliably while `<img>`has no width/height:
 El código no funcionará seguramente mientras `<img>`no tenga width/height:

 ```html
 <img src="ball.png" id="ball">
 ```
 ````

 When the browser does not know the width/height of an image (from tag attributes or CSS),then it assumes them to equal`0`until the image finishes loading.
 Cuando el navegador no conoce el ancho/alto de una imagen (de un atributo o CSS),entonces este asume que es igual a`0`hasta que la imagen termine de cargarse.

 So the value of `ball.offsetWidth`will be `0`until the image loads. That leads to wrong coordinates in the code above.
 Entonces el valor de `ball.offsetWidth`deberá ser `0`hasta que la imagen carge. Eso conduce a coordinadas incorrectas en el código anterior.

 After the first load, the browser usually caches the image, and on reloads it will have the size immediately. But on the first load the value of `ball.offsetWidth`is `0`.
 Después de la primera carga, el navegador usualmente almacena en caché la imagen, y cuando se vuelva a cargar esta tendrá el tamaño inmediatamente. Pero en la primera carga el valor de `ball.offsetWidth`es `0`.

 We should fix that by adding`width/height`to `<img>`:
 Deberíamos arreglar eso agregando`width/height`en `<img>`:

 ```html
 <img src="ball.png" *!*width="40" height="40"*/!* id="ball">
 ```

 ...Or provide the size in CSS:
 ...O indicar el tamaño en CSS:

 ```css
 #ball {
diff --git a/2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/task.md b/2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/task.md

 ---

 #Place the ball in the field center
 #Coloca la pelota en el centro del campo.

 Here's how the source document looks:
 Así es como se ve el documento de origen:

 [iframe src="source" edit link height=180]

 What are coordinates of the field center?
 ¿Cuáles son las coordenadas del centro de campo?

 Calculate them and use to place the ball into the center of the green field:
 Calcúlalos y úsalos para colocar la pelota en el centro del campo verde:

 [iframe src="solution" height=180]

 -The element should be moved by JavaScript,not CSS.
 -The code should work with any ball size(`10`, `20`, `30` pixels)and any field size, not be bound to the given values.
 -El elemento debe ser movido por JavaScript,no por CSS.
 -El código debería funcionar con cualquier una pelota de cualquier tamaño(`10`, `20`, `30` pixels)y cualquier tamaño de campo, no debe estar vinculado a los valores dados.

 P.S.Sure, centering could be done withCSS,but here we want exactlyJavaScript.Further we'll meet other topics and more complex situations when JavaScript must be used. Here we do a "warm-up".
 P.S.Claro, el centrado se podría hacer conCSS,pero aquí lo queremos específicamente conJavaScript.Además, conoceremos otros temas y situaciones más complejas en las que se debe utilizar JavaScript. Aquí hacemos un "calentamiento".
diff --git a/2-ui/1-document/09-size-and-scroll/6-width-vs-clientwidth/solution.md b/2-ui/1-document/09-size-and-scroll/6-width-vs-clientwidth/solution.md
 Differences:
 Diferencias:

 1. `clientWidth`is numeric, while `getComputedStyle(elem).width`returns a string with `px`at the end.
 2. `getComputedStyle`may return non-numeric width like`"auto"`for an inline element.
 3. `clientWidth`is the inner content area of the element plus paddings, while CSS width (with standard`box-sizing`)is the inner content area *without paddings*.
 4.If there's a scrollbar and the browser reserves the space for it, some browser substract that space from CSS width (cause it's not available for content any more),and some do not. The`clientWidth`property is always the same: scrollbar size is substracted if reserved.
 1. `clientWidth`es numérico, mientras `getComputedStyle(elem).width`retorna una cadena con `px`en el final.
 2. `getComputedStyle`puede devolver un ancho no numérico como`"auto"`para un elemento en linea.
 3. `clientWidth`es el contenido interior del área del elemento más los rellenos, mientras el ancho de CSS (con el estándar`box-sizing`)es el contenido interior del área *sin rellenos*.
 4.Si hay una barra de desplazamiento y el navegador reserva espacio para esta, algunos navegadores restan ese espacio del ancho de CSS (por que no está disponible para el contenido),y otros no. La propiedad`clientWidth`es siempre la misma: el tamaño de la barra de desplazamiento se resta si está reservado.
diff --git a/2-ui/1-document/09-size-and-scroll/6-width-vs-clientwidth/task.md b/2-ui/1-document/09-size-and-scroll/6-width-vs-clientwidth/task.md

 ---

 #The difference: CSS width versus clientWidth
 #La diferencia: CSS width versus clientWidth

 What's the difference between`getComputedStyle(elem).width`and `elem.clientWidth`?
 ¿Cuál es la diferencia entre`getComputedStyle(elem).width`y `elem.clientWidth`?

 Give at least 3differences. The more the better.
 Dar al menos 3diferencias. Mientras más, mejor.
Original file line number	Diff line number	Diff line change
		@@ -1,7 +1,7 @@
		The solution is:
		La solución es:

		```js
		let scrollBottom = elem.scrollHeight - elem.scrollTop - elem.clientHeight;
		```

		In other words: (full height) minus (scrolled out top part) minus (visible part) --that's exactly the scrolled out bottom part.
		En otras palabras: (altura total) menos (parte superior desplazada) menos (parte visible) --esa es exactamente la parte inferior desplazada.
Original file line number	Diff line number	Diff line change
Expand Up		@@ -2,10 +2,10 @@ importance: 5

		---

		#What's the scroll from the bottom?
		#¿Qué es el desplazamiento desde la parte inferior?

		The`elem.scrollTop`property is the size of the scrolled out part from the top. How to get the size of the bottom scroll (let's call it `scrollBottom`)?
		La propiedad`elem.scrollTop`es el tamaño desplazado desde la parte superior. ¿Cómo obtener el tamaño de la parte inferior desplazada (vamos a llamarlo `scrollBottom`)?

		Write the code that works for an arbitrary`elem`.
		Escribe el código que funcione para un`elem` arbitrario.

		P.S.Please check your code: if there'snoscroll or the element is fully scrolled down, then it should return `0`.
		P.S.Por favor revisa tu código: sinohay desplazamiento o el elemento está complemamente desplazado, debería retornar `0`.
Original file line number	Diff line number	Diff line change
		@@ -1,16 +1,16 @@
		To get the scrollbar width, we can create an element with thescroll,but without borders and paddings.
		Para obtener el ancho de la barra de desplazamiento, podemos crear un elemento con elscroll,pero sin bordes ni rellenos.

		Then the difference between its full width `offsetWidth`and the inner content areawidth `clientWidth`will be exactly the scrollbar:
		Entonces la diferencia entre su ancho completo `offsetWidth`y el ancho del areainterior `clientWidth`será exactamente la barra de desplazamiento:

		```js run
		//create a divwith the scroll
		//crea un divcon el scroll
		let div = document.createElement('div');

		div.style.overflowY = 'scroll';
		div.style.width = '50px';
		div.style.height = '50px';

		//must put it in the document, otherwise sizes will be 0
		//debe ponerlo en el documento, de lo contrario los tamaños serán 0
		document.body.append(div);
		let scrollWidth = div.offsetWidth - div.clientWidth;

Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -2,10 +2,10 @@ importance: 3

		---

		#What is the scrollbar width?
		#¿Qué es el ancho de la barra de desplazamiento?

		Write the code that returns the width of a standard scrollbar.
		Escribe el código que retorna el tamaño de una barra de desplazamiento estándar.

		For Windowsit usually varies between `12px`and `20px`.If the browser doesn't reserve any space for it (the scrollbar is half-translucent over the text, also happens),then it may be `0px`.
		Para Windowsesto usualmente varía entre `12px`y `20px`.Si el navegador no reserva algún espacio para esto (la barra de desplazamiento es medio traslúcida sobre el texto, también pasa),entonces puede ser `0px`.

		P.S.The code should work for any HTML document, do not depend on its content.
		P.S.El código debería funcionar con cualquier documento HTML, no depende de su contenido.
Original file line number	Diff line number	Diff line change
		@@ -1,53 +1,53 @@
		The ball has `position:absolute`.It means that its `left/top`coordinates are measured from the nearest positioned element, that is `#field` (because it has `position:relative`).
		La pelota tiene `position:absolute`.Significa que sus coordenadas `left/top`se miden desde el elemento posicionado más cercano, es decir `#field` (porque tiene `position:relative`).

		The coordinates start from the inner left-upper corner of the field:
		Las coordenadas inician desde el interior de la esquina superior izquierda del campo:

		![](field.svg)

		The inner field width/height is `clientWidth/clientHeight`.So the field center has coordinates `(clientWidth/2, clientHeight/2)`.
		El interior del campo ancho/alto es `clientWidth/clientHeight`.Entonces el centro del campo tiene coordenadas `(clientWidth/2, clientHeight/2)`.

		...But if we set`ball.style.left/top`to such values, then not the ball as a whole, but the left-upper edge of the ball would be in the center:
		...Pero si configuramos`ball.style.left/top`a tales valores, entonces no la pelota en su conjunto, sino el borde superior izquierdo de la pelota estaría en el centro:

		```js
		ball.style.left = Math.round(field.clientWidth / 2) + 'px';
		ball.style.top = Math.round(field.clientHeight / 2) + 'px';
		```

		Here's how it looks:
		Así es como se ve:

		[iframe height=180 src="ball-half"]

		To align the ball center with the center of the field, we should move the ball to the half of its width to the left and to the half of its height to the top:
		Para alinear la pelota al centro con el centro del campo, deberíamos mover la pelota a la mitad de su ancho a la izquierda y a la mitad de su altura hacia arriba:

		```js
		ball.style.left = Math.round(field.clientWidth / 2 - ball.offsetWidth / 2) + 'px';
		ball.style.top = Math.round(field.clientHeight / 2 - ball.offsetHeight / 2) + 'px';
		```

		Now the ball is finally centered.
		Ahora la pelota está finalmente centrada.

		````warn header="Attention: the pitfall!"
		````warn header="Atención: ¡la trampa!"

		The code won't work reliably while `<img>`has no width/height:
		El código no funcionará seguramente mientras `<img>`no tenga width/height:

		```html
		<img src="ball.png" id="ball">
		```
		````

		When the browser does not know the width/height of an image (from tag attributes or CSS),then it assumes them to equal`0`until the image finishes loading.
		Cuando el navegador no conoce el ancho/alto de una imagen (de un atributo o CSS),entonces este asume que es igual a`0`hasta que la imagen termine de cargarse.

		So the value of `ball.offsetWidth`will be `0`until the image loads. That leads to wrong coordinates in the code above.
		Entonces el valor de `ball.offsetWidth`deberá ser `0`hasta que la imagen carge. Eso conduce a coordinadas incorrectas en el código anterior.

		After the first load, the browser usually caches the image, and on reloads it will have the size immediately. But on the first load the value of `ball.offsetWidth`is `0`.
		Después de la primera carga, el navegador usualmente almacena en caché la imagen, y cuando se vuelva a cargar esta tendrá el tamaño inmediatamente. Pero en la primera carga el valor de `ball.offsetWidth`es `0`.

		We should fix that by adding`width/height`to `<img>`:
		Deberíamos arreglar eso agregando`width/height`en `<img>`:

		```html
		<img src="ball.png" !width="40" height="40"/! id="ball">
		```

		...Or provide the size in CSS:
		...O indicar el tamaño en CSS:

		```css
		#ball {
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -2,19 +2,19 @@ importance: 5

		---

		#Place the ball in the field center
		#Coloca la pelota en el centro del campo.

		Here's how the source document looks:
		Así es como se ve el documento de origen:

		[iframe src="source" edit link height=180]

		What are coordinates of the field center?
		¿Cuáles son las coordenadas del centro de campo?

		Calculate them and use to place the ball into the center of the green field:
		Calcúlalos y úsalos para colocar la pelota en el centro del campo verde:

		[iframe src="solution" height=180]

		-The element should be moved by JavaScript,not CSS.
		-The code should work with any ball size(`10`, `20`, `30` pixels)and any field size, not be bound to the given values.
		-El elemento debe ser movido por JavaScript,no por CSS.
		-El código debería funcionar con cualquier una pelota de cualquier tamaño(`10`, `20`, `30` pixels)y cualquier tamaño de campo, no debe estar vinculado a los valores dados.

		P.S.Sure, centering could be done withCSS,but here we want exactlyJavaScript.Further we'll meet other topics and more complex situations when JavaScript must be used. Here we do a "warm-up".
		P.S.Claro, el centrado se podría hacer conCSS,pero aquí lo queremos específicamente conJavaScript.Además, conoceremos otros temas y situaciones más complejas en las que se debe utilizar JavaScript. Aquí hacemos un "calentamiento".
Original file line number	Diff line number	Diff line change
		@@ -1,6 +1,6 @@
		Differences:
		Diferencias:

		1. `clientWidth`is numeric, while `getComputedStyle(elem).width`returns a string with `px`at the end.
		2. `getComputedStyle`may return non-numeric width like`"auto"`for an inline element.
		3. `clientWidth`is the inner content area of the element plus paddings, while CSS width (with standard`box-sizing`)is the inner content area without paddings.
		4.If there's a scrollbar and the browser reserves the space for it, some browser substract that space from CSS width (cause it's not available for content any more),and some do not. The`clientWidth`property is always the same: scrollbar size is substracted if reserved.
		1. `clientWidth`es numérico, mientras `getComputedStyle(elem).width`retorna una cadena con `px`en el final.
		2. `getComputedStyle`puede devolver un ancho no numérico como`"auto"`para un elemento en linea.
lgabrielvleon marked this conversation as resolved. Show resolvedHide resolved
		3. `clientWidth`es el contenido interior del área del elemento más los rellenos, mientras el ancho de CSS (con el estándar`box-sizing`)es el contenido interior del área sin rellenos.
		4.Si hay una barra de desplazamiento y el navegador reserva espacio para esta, algunos navegadores restan ese espacio del ancho de CSS (por que no está disponible para el contenido),y otros no. La propiedad`clientWidth`es siempre la misma: el tamaño de la barra de desplazamiento se resta si está reservado.
Original file line number	Diff line number	Diff line change
Expand Up		@@ -2,8 +2,8 @@ importance: 5

		---

		#The difference: CSS width versus clientWidth
		#La diferencia: CSS width versus clientWidth

		What's the difference between`getComputedStyle(elem).width`and `elem.clientWidth`?
		¿Cuál es la diferencia entre`getComputedStyle(elem).width`y `elem.clientWidth`?

		Give at least 3differences. The more the better.
		Dar al menos 3diferencias. Mientras más, mejor.