Visitar URL original
Coordinates by maksumi · Pull Request #349 · javascript-tutorial/es.javascript.info · GitHub
Skip to content

Coordinates #349

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
EzequielCaste merged 71 commits into from
Aug 31, 2020
Merged

Coordinates #349

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
71 commits
Select commit Hold shift + click to select a range
b5e3cc5
Merge pull request #3 from javascript-tutorial/master
Jul 21, 2020
53e75b5
Merge pull request #4 from javascript-tutorial/master
Jul 23, 2020
d5ea01b
Merge pull request #5 from javascript-tutorial/master
Jul 25, 2020
cde00e0
Merge pull request #6 from javascript-tutorial/master
Jul 25, 2020
81e9cfd
Merge pull request #7 from javascript-tutorial/master
Jul 29, 2020
5402692
Update (#8)
Jul 31, 2020
16ccddf
Merge pull request #9 from javascript-tutorial/master
Aug 1, 2020
707db67
Update (#10)
Aug 2, 2020
5d7a154
Update (#11)
Aug 5, 2020
8c26be9
Merge pull request #13 from javascript-tutorial/master
Aug 5, 2020
371af05
Merge pull request #14 from javascript-tutorial/master
Aug 6, 2020
281ce34
Merge pull request #15 from javascript-tutorial/master
Aug 7, 2020
9328be8
Merge pull request #16 from javascript-tutorial/master
Aug 9, 2020
8210b40
Merge pull request #17 from javascript-tutorial/master
Aug 11, 2020
9c9f628
Merge pull request #18 from javascript-tutorial/master
Aug 13, 2020
c2728b4
Add files via upload
Aug 14, 2020
c1c77b6
Update task.md
Aug 14, 2020
712ee25
Update index.html
Aug 14, 2020
daa4e2e
Update 2-ui/1-document/11-coordinates/1-find-point-coordinates/soluti…
Aug 15, 2020
18c86b5
Apply suggestions from code review
Aug 15, 2020
2d26388
Update task.md
Aug 15, 2020
a0ce03f
Update 2-ui/1-document/11-coordinates/2-position-at/solution.md
vplentinax Aug 31, 2020
6ed3ab8
Update 2-ui/1-document/11-coordinates/1-find-point-coordinates/task.md
vplentinax Aug 31, 2020
173b33f
Update 2-ui/1-document/11-coordinates/1-find-point-coordinates/soluti…
vplentinax Aug 31, 2020
8b8edce
Update 2-ui/1-document/11-coordinates/1-find-point-coordinates/soluti…
vplentinax Aug 31, 2020
81f71b7
Update 2-ui/1-document/11-coordinates/1-find-point-coordinates/soluti…
vplentinax Aug 31, 2020
55f258c
Update 2-ui/1-document/11-coordinates/article.md
vplentinax Aug 31, 2020
f3ea4b2
Update 2-ui/1-document/11-coordinates/article.md
vplentinax Aug 31, 2020
22c83e8
Update 2-ui/1-document/11-coordinates/article.md
vplentinax Aug 31, 2020
e7c72a8
Update 2-ui/1-document/11-coordinates/article.md
vplentinax Aug 31, 2020
ce8912d
Update 2-ui/1-document/11-coordinates/article.md
vplentinax Aug 31, 2020
29f6934
Update 2-ui/1-document/11-coordinates/1-find-point-coordinates/soluti…
vplentinax Aug 31, 2020
e80f5e5
Update 2-ui/1-document/11-coordinates/1-find-point-coordinates/task.md
vplentinax Aug 31, 2020
a2b9c18
Update 2-ui/1-document/11-coordinates/2-position-at/solution.view/ind…
vplentinax Aug 31, 2020
84a0b84
Update 2-ui/1-document/11-coordinates/2-position-at/solution.view/ind…
vplentinax Aug 31, 2020
258d32d
Update 2-ui/1-document/11-coordinates/2-position-at/solution.view/ind…
vplentinax Aug 31, 2020
37eeb35
Update 2-ui/1-document/11-coordinates/2-position-at/solution.view/ind…
vplentinax Aug 31, 2020
7890137
Update 2-ui/1-document/11-coordinates/2-position-at/solution.view/ind…
vplentinax Aug 31, 2020
c3b1668
Update 2-ui/1-document/11-coordinates/2-position-at/solution.view/ind…
vplentinax Aug 31, 2020
066cff9
Update 2-ui/1-document/11-coordinates/2-position-at/solution.view/ind…
vplentinax Aug 31, 2020
7357d41
Update 2-ui/1-document/11-coordinates/2-position-at/solution.view/ind…
vplentinax Aug 31, 2020
625dbad
Update 2-ui/1-document/11-coordinates/2-position-at/solution.view/ind…
vplentinax Aug 31, 2020
c22725f
Update 2-ui/1-document/11-coordinates/2-position-at/source.view/index…
vplentinax Aug 31, 2020
1fe6863
Update 2-ui/1-document/11-coordinates/2-position-at/source.view/index…
vplentinax Aug 31, 2020
28628fa
Update 2-ui/1-document/11-coordinates/2-position-at/source.view/index…
vplentinax Aug 31, 2020
28bab5c
Update 2-ui/1-document/11-coordinates/2-position-at/source.view/index…
vplentinax Aug 31, 2020
c7c75cf
Update 2-ui/1-document/11-coordinates/2-position-at/source.view/index…
vplentinax Aug 31, 2020
130c8b4
Update 2-ui/1-document/11-coordinates/2-position-at/source.view/index…
vplentinax Aug 31, 2020
4c6ed4d
Update 2-ui/1-document/11-coordinates/2-position-at/source.view/index…
vplentinax Aug 31, 2020
952d4cf
Update 2-ui/1-document/11-coordinates/2-position-at/source.view/index…
vplentinax Aug 31, 2020
491a080
Update 2-ui/1-document/11-coordinates/3-position-at-absolute/solution…
vplentinax Aug 31, 2020
1bc20bd
Update 2-ui/1-document/11-coordinates/3-position-at-absolute/solution…
vplentinax Aug 31, 2020
861b2e9
Update 2-ui/1-document/11-coordinates/3-position-at-absolute/solution…
vplentinax Aug 31, 2020
1141d1c
Update 2-ui/1-document/11-coordinates/3-position-at-absolute/solution…
vplentinax Aug 31, 2020
454ac36
Update 2-ui/1-document/11-coordinates/3-position-at-absolute/solution…
vplentinax Aug 31, 2020
de345d5
Update 2-ui/1-document/11-coordinates/3-position-at-absolute/solution…
vplentinax Aug 31, 2020
4c9f381
Update 2-ui/1-document/11-coordinates/3-position-at-absolute/solution…
vplentinax Aug 31, 2020
dc59ce6
Update 2-ui/1-document/11-coordinates/4-position-inside-absolute/solu…
vplentinax Aug 31, 2020
1a823bb
Update 2-ui/1-document/11-coordinates/4-position-inside-absolute/solu…
vplentinax Aug 31, 2020
2015eae
Update 2-ui/1-document/11-coordinates/4-position-inside-absolute/solu…
vplentinax Aug 31, 2020
f15a998
Update 2-ui/1-document/11-coordinates/4-position-inside-absolute/solu…
vplentinax Aug 31, 2020
ac0230b
Update 2-ui/1-document/11-coordinates/4-position-inside-absolute/solu…
vplentinax Aug 31, 2020
ab22501
Update 2-ui/1-document/11-coordinates/4-position-inside-absolute/solu…
vplentinax Aug 31, 2020
c1a5d4e
Update 2-ui/1-document/11-coordinates/4-position-inside-absolute/solu…
vplentinax Aug 31, 2020
dc115cc
Update 2-ui/1-document/11-coordinates/4-position-inside-absolute/solu…
vplentinax Aug 31, 2020
082548e
Update 2-ui/1-document/11-coordinates/4-position-inside-absolute/task.md
vplentinax Aug 31, 2020
49a83d5
Update 2-ui/1-document/11-coordinates/article.md
vplentinax Aug 31, 2020
3ac35a1
Update 2-ui/1-document/11-coordinates/article.md
vplentinax Aug 31, 2020
51e697a
Merge branch 'master' into coordinates
EzequielCaste Aug 31, 2020
8629435
Update 2-ui/1-document/11-coordinates/2-position-at/solution.view/ind…
EzequielCaste Aug 31, 2020
1262db8
Update 2-ui/1-document/11-coordinates/3-position-at-absolute/solution…
EzequielCaste Aug 31, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 9 additions & 9 deletions 2-ui/1-document/11-coordinates/1-find-point-coordinates/solution.md
View file
Open in desktop
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
6 changes: 3 additions & 3 deletions 2-ui/1-document/11-coordinates/1-find-point-coordinates/solution.view/index.html
View file
Open in desktop
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
8 changes: 4 additions & 4 deletions 2-ui/1-document/11-coordinates/1-find-point-coordinates/source.view/index.html
View file
Open in desktop
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 All @@ -32,7 +32,7 @@


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

</body>
Expand Down
22 changes: 11 additions & 11 deletions 2-ui/1-document/11-coordinates/1-find-point-coordinates/task.md
View file
Open in desktop
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 the iframe below you can see a document with the green "field".
En el siguiente iframe puedes ver un documento con el "campo" verde.

Use JavaScript to find window coordinates of corners pointed by with arrows.
Usa JavaScript para 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 click at any place shows coordinates there.
Hay una pequeña característica implementada en el documento para conveniencia. Un click en cualquier lugar mostrará las coordenadas ahí.

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

Your code should use DOM to get window coordinates of:
Tu código debe usar el DOM para obtener las coordenadas en la ventana de:

1. Upper-left, outer corner (that's simple).
2. Bottom-right, outer corner (simple too).
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 (simple tambié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.
6 changes: 3 additions & 3 deletions 2-ui/1-document/11-coordinates/2-position-at/solution.md
View file
Open in desktop
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 has no size.
Ten en cuenta: los elementos deben estar en el documento para leer `offsetHeight` y otras propiedades.
Un elemento oculto (`display:none`) o fuera del documento no tiene medidas.
32 changes: 16 additions & 16 deletions 2-ui/1-document/11-coordinates/2-position-at/solution.view/index.html
View file
Open in desktop
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 elem relative to anchor as said in position.
* Posiciona elem en relación a anchor como se indica en position.
*
* @param {Node} anchor Anchor element for positioning
* @param {string} position One of: top/right/bottom
* @param {Node} elem Element to position
* @param {Node} anchor Elemento ancla para posicionamiento
* @param {string} position Cualquiera de los siguientes: top/right/bottom
* @param {Node} elem Elemento para position
*
* Both elements: elem and anchor must be in the document
* Ambos elementos: elem y anchor deben estar en el documento
*/
function positionAt(anchor, position, elem) {

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

/**
* Shows a note with the given html at the given position
* relative to the anchor element.
* Muestra una nota con el html proporcionado 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
32 changes: 16 additions & 16 deletions 2-ui/1-document/11-coordinates/2-position-at/source.view/index.html
View file
Open in desktop
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 elem relative to anchor as said in position.
* Posiciona elem en relación a anchor como se indica en position.
*
* @param {Node} anchor Anchor element for positioning
* @param {string} position One of: top/right/bottom
* @param {Node} elem Element to position
* @param {Node} anchor Elemento anchor para posicionamiento
* @param {string} position Cualquiera de los siguientes: top/right/bottom
* @param {Node} elem Elemento para position
*
* Both elements: elem and anchor must be in the document
* Ambos elementos: elem y anchor deben estar en el documento
*/
function positionAt(anchor, position, elem) {
// ... your code ...
// ... tu código ...
}

/**
* Shows a note with the given html at the given position
* relative to the anchor element.
* Muestra una nota con el html proporcionado 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!
Comment thread
EzequielCaste marked this conversation as 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
16 changes: 8 additions & 8 deletions 2-ui/1-document/11-coordinates/2-position-at/task.md
View file
Open in desktop
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 string with any one of 3 values:
- `"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 string con alguno de estos 3 valores:
- `"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`.
Comment thread
joaquinelio marked this conversation as resolved.

Here's the demo of notes:
Aquí está el demo de las notas:

[iframe src="solution" height="350" border="1" link]
6 changes: 3 additions & 3 deletions 2-ui/1-document/11-coordinates/3-position-at-absolute/solution.md
View file
Open in desktop
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 CSS instead 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 CSS en 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.
18 changes: 9 additions & 9 deletions 2-ui/1-document/11-coordinates/3-position-at-absolute/solution.view/index.html
View file
Open in desktop
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
Comment thread
joaquinelio marked this conversation as 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 Down Expand 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
8 changes: 4 additions & 4 deletions 2-ui/1-document/11-coordinates/3-position-at-absolute/task.md
View file
Open in desktop
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">`.
17 changes: 9 additions & 8 deletions 2-ui/1-document/11-coordinates/4-position-inside-absolute/solution.view/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,15 +12,16 @@
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();
Expand Down Expand Up @@ -83,10 +84,10 @@

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>


Expand Down
Loading