Aug 31, 2020 · Jul 21, 2020 · Jul 23, 2020 · Jul 25, 2020 · Jul 25, 2020 · Jul 29, 2020
diff --git a/2-ui/1-document/11-coordinates/1-find-point-coordinates/solution.md b/2-ui/1-document/11-coordinates/1-find-point-coordinates/solution.md
 #Outer corners
 #Esquinas externas

 Outer corners are basically what we get from[elem.getBoundingClientRect()](https://developer.mozilla.org/en-US/docs/DOM/element.getBoundingClientRect).
 Las esquinas externas son básicamente las que obtenemos de[elem.getBoundingClientRect()](https://developer.mozilla.org/es/docs/Web/API/Element/element.getBoundingClientRect).

 Coordinates of the upper-left corner`answer1`and the bottom-right corner `answer2`:
 Las coordenadas de la esquina superior izquierda`answer1`y la esquina inferior derecha `answer2`:

 ```js
 let coords = elem.getBoundingClientRect();
 let answer2 = [coords.right, coords.bottom];
 ```

 #Left-upper inner corner
 #Esquina interna y superior izquierda

 That differs from the outer corner by the border width. A reliable way to get the distance is `clientLeft/clientTop`:
 Esta es diferente a la esquina externa por el ancho del borde. Una manera confiable de obtener la distancia es usando `clientLeft/clientTop`:

 ```js
 let answer3 = [coords.left + field.clientLeft, coords.top + field.clientTop];
 ```

 #Right-bottom inner corner
 #Esquina interna e inferior derecha

 In our case we need to substract the border size from the outer coordinates.
 En nuestro caso necesitamos sustraer la medida del borde de las coordenadas externas.

 We could use CSS way:
 Podemos usar la forma de CSS:

 ```js
 let answer4 = [
 ];
 ```

 An alternative way would be to add`clientWidth/clientHeight`to coordinates of the left-upper corner. That's probably even better:
 Una forma alternativa puede ser agregando`clientWidth/clientHeight`a las coordenadas de la esquina superior izquierda. Probablemente sea incluso mejor:

 ```js
 let answer4 = [
diff --git a/2-ui/1-document/11-coordinates/1-find-point-coordinates/solution.view/index.html b/2-ui/1-document/11-coordinates/1-find-point-coordinates/solution.view/index.html

 <body>

 Click anywhere to get window coordinates.
  <br>That's for testing, to check the result you get by JavaScript.
 Haz click en cualquier lugar para obtener las coordenadas de la ventana.
  <br>Esto es útil para testear y confirmar el resultado que obtuviste con JavaScript.
  <br>
  <div id="coords">(click coordinates show up here)</div>
  <div id="coords">(Las coordenadas del click se mostrarán aquí)</div>


  <div id="field">
diff --git a/2-ui/1-document/11-coordinates/1-find-point-coordinates/source.view/index.html b/2-ui/1-document/11-coordinates/1-find-point-coordinates/source.view/index.html

 <body>

 Click anywhere to get window coordinates.
  <br>That's for testing, to check the result you get by JavaScript.
 Haz click en cualquier lugar para obtener las coordenadas de la ventana.
  <br>Esto es útil para testear y confirmar el resultado que obtuviste con JavaScript.
  <br>
  <div id="coords">(click coordinates show up here)</div>
  <div id="coords">(Las coordenadas del click se mostrarán aquí)</div>


  <div id="field">


  <script>
    // ...your code...
    // ...tu código...
  </script>

 </body>
diff --git a/2-ui/1-document/11-coordinates/1-find-point-coordinates/task.md b/2-ui/1-document/11-coordinates/1-find-point-coordinates/task.md

 ---

 #Find window coordinates of the field
 #Encuentra las coordenadas del campo en la ventana

 In theiframebelow you can see a document with the green "field".
 En el siguienteiframepuedes ver un documento con el "campo" verde.

 Use JavaScriptto find window coordinates of corners pointed by with arrows.
 Usa JavaScriptpara encontrar las coordenadas de las esquinas de la ventana señaladas con las flechas.

 There's a small feature implemented in the document for convenience. A clickat any place shows coordinates there.
 Hay una pequeña característica implementada en el documento para conveniencia. Un clicken cualquier lugar mostrará las coordenadas ahí.

 [iframe border=1 height=360 src="source" link edit]

 Your code should useDOMto get window coordinates of:
 Tu código debe usar elDOMpara obtener las coordenadas en la ventana de:

 1.Upper-left, outer corner (that's simple).
 2.Bottom-right, outer corner(simpletoo).
 3.Upper-left, inner corner (a bit harder).
 4.Bottom-right, inner corner (there are several ways, choose one).
 1.La esquina superior izquierda externa (eso es simple).
 2.La esquina inferior derecha externa(simpletambién).
 3.La esquina superior izquierda interna (un poco más difícil).
 4.La esquina inferior derecha interna (existen muchas maneras, elige una).

 The coordinates that you calculate should be the same as those returned by the mouse click.
 Las coordenadas que tú calcules deben ser iguales a las devueltas por el click del mouse.

 P.S. The code should also work if the element has another size or border, not bound to any fixed values.
 P.D. El código también debe funcionar si el elemento tiene otro tamaño o borde, no está ligado a ningún valor fijo.
diff --git a/2-ui/1-document/11-coordinates/2-position-at/solution.md b/2-ui/1-document/11-coordinates/2-position-at/solution.md
 In this task we only need to accurately calculate the coordinates. See the code for details.
 En esta tarea sólo necesitamos calcular exactamente las coordenadas. Mira el código para más detalles.

 Please note: the elements must be in the document to read `offsetHeight`and other properties.
 A hidden(`display:none`)or out of the document element hasnosize.
 Ten en cuenta: los elementos deben estar en el documento para leer `offsetHeight`y otras propiedades.
 Un elemento oculto(`display:none`)o fuera del documentonotiene medidas.
diff --git a/2-ui/1-document/11-coordinates/2-position-at/solution.view/index.html b/2-ui/1-document/11-coordinates/2-position-at/solution.view/index.html
    esse sequi officia sapiente.</p>

  <blockquote>
 Teacher: Why are you late?
 Student: There was a man who lost a hundred dollar bill.
 Teacher: That's nice. Were you helping him look for it?
 Student: No.I was standing on it.
 Maestra: Por qué llegas tarde?
 Alumno: Alguien perdió un billete de cien dólares.
 Maestra: Que bueno. Lo estábas ayudando a buscarlo?
 Alumno: No.Estaba parado encima del billete.
  </blockquote>

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit sint atque dolorum fuga ad incidunt voluptatum error fugiat animi amet! Odio temporibus nulla id unde quaerat dignissimos enim nisi rem provident molestias sit tempore omnis recusandae
 esse sequi officia sapiente.</p>
   esse sequi officia sapiente.</p>


  <script>
    /**
     *Positions elemrelative toanchoras said in position.
     *Posiciona elemen relación aanchorcomo se indica en position.
     *
     * @param {Node} anchor Anchor element for positioning
     * @param {string} positionOne of: top/right/bottom
     * @param {Node} elemElement to position
     * @param {Node} anchorElemento ancla para posicionamiento
     * @param {string} positionCualquiera de los siguientes: top/right/bottom
     * @param {Node} elemElemento para position
     *
     *Both elements: elemand anchormust be in the document
     *Ambos elementos: elemy anchordeben estar en el documento
     */
    function positionAt(anchor, position, elem) {

    }

    /**
     *Shows a note with the givenhtmlat the given position
     *relative to the anchor element.
     *Muestra una nota con elhtmlproporcionado en el lugar indicado por position
     *relativa al elemento anchor.
     */
    function showNote(anchor, position, html) {

      positionAt(anchor, position, note);
    }

    //test it
    //¡Testéalo!
    let blockquote = document.querySelector('blockquote');

    showNote(blockquote, "top", "note above");
    showNote(blockquote, "right", "note at the right");
    showNote(blockquote, "bottom", "note below");
    showNote(blockquote, "top", "nota encima");
    showNote(blockquote, "right", "nota a la derecha");
    showNote(blockquote, "bottom", "nota debajo");
  </script>


diff --git a/2-ui/1-document/11-coordinates/2-position-at/source.view/index.html b/2-ui/1-document/11-coordinates/2-position-at/source.view/index.html
    esse sequi officia sapiente.</p>

  <blockquote>
 Teacher: Why are you late?
 Student: There was a man who lost a hundred dollar bill.
 Teacher: That's nice. Were you helping him look for it?
 Student: No.I was standing on it.
 Maestra: Por qué llegas tarde?
 Alumno: Alguien perdió un billete de cien dólares.
 Maestra: Que bueno. Lo estábas ayudando a buscarlo?
 Alumno: No.Estaba parado encima del billete.
  </blockquote>

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit sint atque dolorum fuga ad incidunt voluptatum error fugiat animi amet! Odio temporibus nulla id unde quaerat dignissimos enim nisi rem provident molestias sit tempore omnis recusandae

  <script>
    /**
     *Positions elemrelative toanchoras said in position.
     *Posiciona elemen relación aanchorcomo se indica en position.
     *
     * @param {Node} anchor Anchor element for positioning
     * @param {string} positionOne of: top/right/bottom
     * @param {Node} elemElement to position
     * @param {Node} anchorElemento anchor para posicionamiento
     * @param {string} positionCualquiera de los siguientes: top/right/bottom
     * @param {Node} elemElemento para position
     *
     *Both elements: elemand anchormust be in the document
     *Ambos elementos: elemy anchordeben estar en el documento
     */
    function positionAt(anchor, position, elem) {
      // ...your code ...
      // ...tu código ...
    }

    /**
     *Shows a note with the givenhtmlat the given position
     *relative to the anchor element.
     *Muestra una nota con elhtmlproporcionado en el lugar indicado por position
     *relativa al elemento anchor.
     */
    function showNote(anchor, position, html) {

      positionAt(anchor, position, note);
    }

    //test it
    //¡Testealo!
    let blockquote = document.querySelector('blockquote');

    showNote(blockquote, "top", "note above");
    showNote(blockquote, "right", "note at the right");
    showNote(blockquote, "bottom", "note below");
    showNote(blockquote, "top", "nota encima");
    showNote(blockquote, "right", "nota a la derecha");
    showNote(blockquote, "bottom", "nota debajo");
  </script>


diff --git a/2-ui/1-document/11-coordinates/2-position-at/task.md b/2-ui/1-document/11-coordinates/2-position-at/task.md

 ---

 #Show a note near the element
 #Muestra una nota cercana al elemento

 Create a function `positionAt(anchor, position, elem)`that positions `elem`,depending on`position`near`anchor` element.
 Crea una función `positionAt(anchor, position, elem)`que posicione `elem`,dependiendo de la proximidad de`position`al elemento`anchor`.

 The`position`must be a stringwith any one of 3values:
 - `"top"` -position `elem`right above `anchor`
 - `"right"` -position `elem`immediately at the right of `anchor`
 - `"bottom"` -position `elem`right below `anchor`
 `position`debe ser un stringcon alguno de estos 3valores:
 - `"top"` -posiciona `elem`encima de `anchor`
 - `"right"` -posiciona `elem`inmediatamente a la derecha de `anchor`
 - `"bottom"` -posiciona `elem`debajo de `anchor`

 It's used inside function`showNote(anchor, position, html)`,provided in the task source code, that creates a"note"element with given`html`and shows it at the given`position`near the `anchor`.
 Esto será usado dentro de la función`showNote(anchor, position, html)`,proveída en el código fuente de la tarea, que crea un elemento"note"con el`html`y lo muestra en el lugar proporcionado por`position`cercano a `anchor`.

 Here's thedemoof notes:
 Aquí está eldemode las notas:

 [iframe src="solution" height="350" border="1" link]
diff --git a/2-ui/1-document/11-coordinates/3-position-at-absolute/solution.md b/2-ui/1-document/11-coordinates/3-position-at-absolute/solution.md
 The solution is actually pretty simple:
 La solución realmente es muy simple:

 -Use `position:absolute`in CSSinstead of`position:fixed`for `.note`.
 -Use the function [getCoords()](info:coordinates#getCoords)from the chapter<info:coordinates>to get document-relative coordinates.
 -Usa `position:absolute`con CSSen lugar de`position:fixed`para `.note`.
 -Usa la función [getCoords()](info:coordinates#getCoords)del capítulo<info:coordinates>para obtener las coordenadas relativas al documento.
diff --git a/2-ui/1-document/11-coordinates/3-position-at-absolute/solution.view/index.html b/2-ui/1-document/11-coordinates/3-position-at-absolute/solution.view/index.html

 <body style="height: 2000px">

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit sint atque dolorum fuga ad incidunt voluptatum error fugiat animi amet! Odio temporibus nulla id unde quaerat dignissimos enim nisi rem provident molestias sit tempore omnis recusandae
  <p>El malvado Lord Vader, obsesionado por encontrar al joven Skywalker
    esse sequi officia sapiente.</p>

  <blockquote>
 Teacher: Why are you late?
 Student: There was a man who lost a hundred dollar bill.
 Teacher: That's nice. Were you helping him look for it?
 Student: No.I was standing on it.
 Maestra: Por qué llegas tarde?
 Alumno: Alguien perdió un billete de cien dólares.
 Maestra: Que bueno. Lo estábas ayudando a buscarlo?
 Alumno: No.Estaba parado encima del billete.
  </blockquote>

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit sint atque dolorum fuga ad incidunt voluptatum error fugiat animi amet! Odio temporibus nulla id unde quaerat dignissimos enim nisi rem provident molestias sit tempore omnis recusandae
      positionAt(anchor, position, note);
    }

    //test it
    //¡Testéalo!
    let blockquote = document.querySelector('blockquote');

    showNote(blockquote, "top", "note above");
    showNote(blockquote, "right", "note at the right");
    showNote(blockquote, "bottom", "note below");
    showNote(blockquote, "top", "nota encima");
    showNote(blockquote, "right", "nota a la derecha");
    showNote(blockquote, "bottom", "nota debajo");
  </script>


diff --git a/2-ui/1-document/11-coordinates/3-position-at-absolute/task.md b/2-ui/1-document/11-coordinates/3-position-at-absolute/task.md

 ---

 #Show a note near the element (absolute)
 #Muestra una nota cercana al elemento (absolute)

 Modify the solution of the [previous task](info:task/position-at)so that the note uses`position:absolute`instead of `position:fixed`.
 Modifica la solución de la [tarea previa](info:task/position-at)de manera que la nota use`position:absolute`en lugar de `position:fixed`.

 That will prevent its "runaway" from the element when the page scrolls.
 Esto evitará que se "aleje" del elemento cuando se desplace la página.

 Take the solution of that task as a starting point. To test the scroll,add the style `<body style="height: 2000px">`.
 Toma la solución de la tarea anterior como punto de partida. Para testear el scroll,agrega el estilo `<body style="height: 2000px">`.
diff --git a/2-ui/1-document/11-coordinates/4-position-inside-absolute/solution.view/index.html b/2-ui/1-document/11-coordinates/4-position-inside-absolute/solution.view/index.html
    esse sequi officia sapiente.</p>

  <blockquote>
 Teacher: Why are you late?
 Student: There was a man who lost a hundred dollar bill.
 Teacher: That's nice. Were you helping him look for it?
 Student: No.I was standing on it.
 Maestra: Por qué llegas tarde?
 Alumno: Alguien perdió un billete de cien dólares.
 Maestra: Que bueno. Lo estábas ayudando a buscarlo?
 Alumno: No.Estaba parado encima del billete.
  </blockquote>

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit sint atque dolorum fuga ad incidunt voluptatum error fugiat animi amet! Odio temporibus nulla id unde quaerat dignissimos enim nisi rem provident molestias sit tempore omnis recusandae
    esse sequi officia sapiente.</p>


  <script>
    function getCoords(elem) {
      let box = elem.getBoundingClientRect();

    let blockquote = document.querySelector('blockquote');

    showNote(blockquote, "top-in", "note top-in");
    showNote(blockquote, "top-out", "note top-out");
    showNote(blockquote, "right-out", "note right-out");
    showNote(blockquote, "bottom-in", "note bottom-in");
    showNote(blockquote, "top-in", "nota superior interna");
    showNote(blockquote, "top-out", "nota superior externa");
    showNote(blockquote, "right-out", "nota a la derecha externa");
    showNote(blockquote, "bottom-in", "nota inferior interna");
  </script>
Original file line number	Diff line number	Diff line change
		@@ -1,8 +1,8 @@
		#Outer corners
		#Esquinas externas

		Outer corners are basically what we get from[elem.getBoundingClientRect()](https://developer.mozilla.org/en-US/docs/DOM/element.getBoundingClientRect).
		Las esquinas externas son básicamente las que obtenemos de[elem.getBoundingClientRect()](https://developer.mozilla.org/es/docs/Web/API/Element/element.getBoundingClientRect).

		Coordinates of the upper-left corner`answer1`and the bottom-right corner `answer2`:
		Las coordenadas de la esquina superior izquierda`answer1`y la esquina inferior derecha `answer2`:

		```js
		let coords = elem.getBoundingClientRect();
Expand All		@@ -11,19 +11,19 @@ let answer1 = [coords.left, coords.top];
		let answer2 = [coords.right, coords.bottom];
		```

		#Left-upper inner corner
		#Esquina interna y superior izquierda

		That differs from the outer corner by the border width. A reliable way to get the distance is `clientLeft/clientTop`:
		Esta es diferente a la esquina externa por el ancho del borde. Una manera confiable de obtener la distancia es usando `clientLeft/clientTop`:

		```js
		let answer3 = [coords.left + field.clientLeft, coords.top + field.clientTop];
		```

		#Right-bottom inner corner
		#Esquina interna e inferior derecha

		In our case we need to substract the border size from the outer coordinates.
		En nuestro caso necesitamos sustraer la medida del borde de las coordenadas externas.

		We could use CSS way:
		Podemos usar la forma de CSS:

		```js
		let answer4 = [
Expand All		@@ -32,7 +32,7 @@ let answer4 = [
		];
		```

		An alternative way would be to add`clientWidth/clientHeight`to coordinates of the left-upper corner. That's probably even better:
		Una forma alternativa puede ser agregando`clientWidth/clientHeight`a las coordenadas de la esquina superior izquierda. Probablemente sea incluso mejor:

		```js
		let answer4 = [
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -13,10 +13,10 @@

		<body>

		Click anywhere to get window coordinates.
		<br>That's for testing, to check the result you get by JavaScript.
		Haz click en cualquier lugar para obtener las coordenadas de la ventana.
		<br>Esto es útil para testear y confirmar el resultado que obtuviste con JavaScript.
		<br>
		<div id="coords">(click coordinates show up here)</div>
		<div id="coords">(Las coordenadas del click se mostrarán aquí)</div>


		<div id="field">
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -2,23 +2,23 @@ importance: 5

		---

		#Find window coordinates of the field
		#Encuentra las coordenadas del campo en la ventana

		In theiframebelow you can see a document with the green "field".
		En el siguienteiframepuedes ver un documento con el "campo" verde.

		Use JavaScriptto find window coordinates of corners pointed by with arrows.
		Usa JavaScriptpara encontrar las coordenadas de las esquinas de la ventana señaladas con las flechas.

		There's a small feature implemented in the document for convenience. A clickat any place shows coordinates there.
		Hay una pequeña característica implementada en el documento para conveniencia. Un clicken cualquier lugar mostrará las coordenadas ahí.

		[iframe border=1 height=360 src="source" link edit]

		Your code should useDOMto get window coordinates of:
		Tu código debe usar elDOMpara obtener las coordenadas en la ventana de:

		1.Upper-left, outer corner (that's simple).
		2.Bottom-right, outer corner(simpletoo).
		3.Upper-left, inner corner (a bit harder).
		4.Bottom-right, inner corner (there are several ways, choose one).
		1.La esquina superior izquierda externa (eso es simple).
		2.La esquina inferior derecha externa(simpletambién).
		3.La esquina superior izquierda interna (un poco más difícil).
		4.La esquina inferior derecha interna (existen muchas maneras, elige una).

		The coordinates that you calculate should be the same as those returned by the mouse click.
		Las coordenadas que tú calcules deben ser iguales a las devueltas por el click del mouse.

		P.S. The code should also work if the element has another size or border, not bound to any fixed values.
		P.D. El código también debe funcionar si el elemento tiene otro tamaño o borde, no está ligado a ningún valor fijo.
Original file line number	Diff line number	Diff line change
		@@ -1,4 +1,4 @@
		In this task we only need to accurately calculate the coordinates. See the code for details.
		En esta tarea sólo necesitamos calcular exactamente las coordenadas. Mira el código para más detalles.

		Please note: the elements must be in the document to read `offsetHeight`and other properties.
		A hidden(`display:none`)or out of the document element hasnosize.
		Ten en cuenta: los elementos deben estar en el documento para leer `offsetHeight`y otras propiedades.
		Un elemento oculto(`display:none`)o fuera del documentonotiene medidas.
Original file line number	Diff line number	Diff line change
Expand Up		@@ -12,25 +12,25 @@
		esse sequi officia sapiente.</p>

		<blockquote>
		Teacher: Why are you late?
		Student: There was a man who lost a hundred dollar bill.
		Teacher: That's nice. Were you helping him look for it?
		Student: No.I was standing on it.
		Maestra: Por qué llegas tarde?
		Alumno: Alguien perdió un billete de cien dólares.
		Maestra: Que bueno. Lo estábas ayudando a buscarlo?
		Alumno: No.Estaba parado encima del billete.
		</blockquote>

		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit sint atque dolorum fuga ad incidunt voluptatum error fugiat animi amet! Odio temporibus nulla id unde quaerat dignissimos enim nisi rem provident molestias sit tempore omnis recusandae
		esse sequi officia sapiente.</p>
		esse sequi officia sapiente.</p>


		<script>
		/**
		*Positions elemrelative toanchoras said in position.
		*Posiciona elemen relación aanchorcomo se indica en position.
		*
		* @param {Node} anchor Anchor element for positioning
		* @param {string} positionOne of: top/right/bottom
		* @param {Node} elemElement to position
		* @param {Node} anchorElemento ancla para posicionamiento
		* @param {string} positionCualquiera de los siguientes: top/right/bottom
		* @param {Node} elemElemento para position
		*
		*Both elements: elemand anchormust be in the document
		*Ambos elementos: elemy anchordeben estar en el documento
		*/
		function positionAt(anchor, position, elem) {

Expand All		@@ -56,8 +56,8 @@
		}

		/**
		*Shows a note with the givenhtmlat the given position
		*relative to the anchor element.
		*Muestra una nota con elhtmlproporcionado en el lugar indicado por position
		*relativa al elemento anchor.
		*/
		function showNote(anchor, position, html) {

Expand All		@@ -69,12 +69,12 @@
		positionAt(anchor, position, note);
		}

		//test it
		//¡Testéalo!
		let blockquote = document.querySelector('blockquote');

		showNote(blockquote, "top", "note above");
		showNote(blockquote, "right", "note at the right");
		showNote(blockquote, "bottom", "note below");
		showNote(blockquote, "top", "nota encima");
		showNote(blockquote, "right", "nota a la derecha");
		showNote(blockquote, "bottom", "nota debajo");
		</script>


Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -12,10 +12,10 @@
		esse sequi officia sapiente.</p>

		<blockquote>
		Teacher: Why are you late?
		Student: There was a man who lost a hundred dollar bill.
		Teacher: That's nice. Were you helping him look for it?
		Student: No.I was standing on it.
		Maestra: Por qué llegas tarde?
		Alumno: Alguien perdió un billete de cien dólares.
		Maestra: Que bueno. Lo estábas ayudando a buscarlo?
		Alumno: No.Estaba parado encima del billete.
		</blockquote>

		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit sint atque dolorum fuga ad incidunt voluptatum error fugiat animi amet! Odio temporibus nulla id unde quaerat dignissimos enim nisi rem provident molestias sit tempore omnis recusandae
Expand All		@@ -24,21 +24,21 @@

		<script>
		/**
		*Positions elemrelative toanchoras said in position.
		*Posiciona elemen relación aanchorcomo se indica en position.
		*
		* @param {Node} anchor Anchor element for positioning
		* @param {string} positionOne of: top/right/bottom
		* @param {Node} elemElement to position
		* @param {Node} anchorElemento anchor para posicionamiento
		* @param {string} positionCualquiera de los siguientes: top/right/bottom
		* @param {Node} elemElemento para position
		*
		*Both elements: elemand anchormust be in the document
		*Ambos elementos: elemy anchordeben estar en el documento
		*/
		function positionAt(anchor, position, elem) {
		// ...your code ...
		// ...tu código ...
		}

		/**
		*Shows a note with the givenhtmlat the given position
		*relative to the anchor element.
		*Muestra una nota con elhtmlproporcionado en el lugar indicado por position
		*relativa al elemento anchor.
		*/
		function showNote(anchor, position, html) {

Expand All		@@ -50,12 +50,12 @@
		positionAt(anchor, position, note);
		}

		//test it
		//¡Testealo!
EzequielCaste marked this conversation as resolved. Show resolvedHide resolved
		let blockquote = document.querySelector('blockquote');

		showNote(blockquote, "top", "note above");
		showNote(blockquote, "right", "note at the right");
		showNote(blockquote, "bottom", "note below");
		showNote(blockquote, "top", "nota encima");
		showNote(blockquote, "right", "nota a la derecha");
		showNote(blockquote, "bottom", "nota debajo");
		</script>


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

		---

		#Show a note near the element
		#Muestra una nota cercana al elemento

		Create a function `positionAt(anchor, position, elem)`that positions `elem`,depending on`position`near`anchor` element.
		Crea una función `positionAt(anchor, position, elem)`que posicione `elem`,dependiendo de la proximidad de`position`al elemento`anchor`.

		The`position`must be a stringwith any one of 3values:
		- `"top"` -position `elem`right above `anchor`
		- `"right"` -position `elem`immediately at the right of `anchor`
		- `"bottom"` -position `elem`right below `anchor`
		`position`debe ser un stringcon alguno de estos 3valores:
		- `"top"` -posiciona `elem`encima de `anchor`
		- `"right"` -posiciona `elem`inmediatamente a la derecha de `anchor`
		- `"bottom"` -posiciona `elem`debajo de `anchor`

		It's used inside function`showNote(anchor, position, html)`,provided in the task source code, that creates a"note"element with given`html`and shows it at the given`position`near the `anchor`.
		Esto será usado dentro de la función`showNote(anchor, position, html)`,proveída en el código fuente de la tarea, que crea un elemento"note"con el`html`y lo muestra en el lugar proporcionado por`position`cercano a `anchor`.
joaquinelio marked this conversation as resolved. Show resolvedHide resolved

		Here's thedemoof notes:
		Aquí está eldemode las notas:

		[iframe src="solution" height="350" border="1" link]
Original file line number	Diff line number	Diff line change
		@@ -1,4 +1,4 @@
		The solution is actually pretty simple:
		La solución realmente es muy simple:

		-Use `position:absolute`in CSSinstead of`position:fixed`for `.note`.
		-Use the function [getCoords()](info:coordinates#getCoords)from the chapter<info:coordinates>to get document-relative coordinates.
		-Usa `position:absolute`con CSSen lugar de`position:fixed`para `.note`.
		-Usa la función [getCoords()](info:coordinates#getCoords)del capítulo<info:coordinates>para obtener las coordenadas relativas al documento.
Original file line number	Diff line number	Diff line change
Expand Up		@@ -8,14 +8,14 @@

		<body style="height: 2000px">

		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit sint atque dolorum fuga ad incidunt voluptatum error fugiat animi amet! Odio temporibus nulla id unde quaerat dignissimos enim nisi rem provident molestias sit tempore omnis recusandae
		<p>El malvado Lord Vader, obsesionado por encontrar al joven Skywalker
joaquinelio marked this conversation as resolved. Show resolvedHide resolved
		esse sequi officia sapiente.</p>

		<blockquote>
		Teacher: Why are you late?
		Student: There was a man who lost a hundred dollar bill.
		Teacher: That's nice. Were you helping him look for it?
		Student: No.I was standing on it.
		Maestra: Por qué llegas tarde?
		Alumno: Alguien perdió un billete de cien dólares.
		Maestra: Que bueno. Lo estábas ayudando a buscarlo?
		Alumno: No.Estaba parado encima del billete.
		</blockquote>

		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit sint atque dolorum fuga ad incidunt voluptatum error fugiat animi amet! Odio temporibus nulla id unde quaerat dignissimos enim nisi rem provident molestias sit tempore omnis recusandae
Expand DownExpand Up		@@ -66,12 +66,12 @@
		positionAt(anchor, position, note);
		}

		//test it
		//¡Testéalo!
		let blockquote = document.querySelector('blockquote');

		showNote(blockquote, "top", "note above");
		showNote(blockquote, "right", "note at the right");
		showNote(blockquote, "bottom", "note below");
		showNote(blockquote, "top", "nota encima");
		showNote(blockquote, "right", "nota a la derecha");
		showNote(blockquote, "bottom", "nota debajo");
		</script>


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

		---

		#Show a note near the element (absolute)
		#Muestra una nota cercana al elemento (absolute)

		Modify the solution of the [previous task](info:task/position-at)so that the note uses`position:absolute`instead of `position:fixed`.
		Modifica la solución de la [tarea previa](info:task/position-at)de manera que la nota use`position:absolute`en lugar de `position:fixed`.

		That will prevent its "runaway" from the element when the page scrolls.
		Esto evitará que se "aleje" del elemento cuando se desplace la página.

		Take the solution of that task as a starting point. To test the scroll,add the style `<body style="height: 2000px">`.
		Toma la solución de la tarea anterior como punto de partida. Para testear el scroll,agrega el estilo `<body style="height: 2000px">`.