folder names

3-terrarium/3-intro-to-DOM-and-closures/.github/post-lecture-quiz.md

@@ -0,0 +1,18 @@
+*Complete this quiz after the lesson by checking one answer per question.*
+
+1. [The DOM is a model to represent a document on the web]
+
+- [ ] [true]
+- [ ] [false]
+
+2. [Use JavaScript closures to perform the following:]
+
+- [ ] [write functions within functions]
+- [ ] [enclose the DOM]
+- [ ] [close script blocks]
+
+3. [Fill in the blank: Closures are useful when one or more functions need to access an outer function's ______]
+
+- [ ] [arrays]
+- [ ] [scope]
+- [ ] [functions]

3-terrarium/3-intro-to-DOM-and-closures/.github/pre-lecture-quiz.md

@@ -0,0 +1,18 @@
+*A warm-up quiz about the DOM*
+
+Complete this quiz in class
+
+1. The DOM stands for 'Document Object Management'
+
+- [ ] [true]
+- [ ] [false]
+
+2. The DOM can be thought of as a tree
+
+- [ ] [true]
+- [ ] [false]
+
+3. Using the Web API, you can manipulate the DOM
+
+- [ ] [true]
+- [ ] [false]

3-terrarium/3-intro-to-DOM-and-closures/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 WebDev-For-Beginners
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

3-terrarium/3-intro-to-DOM-and-closures/README.md

@@ -0,0 +1,211 @@
+# Terrarium Project Part 3: DOM Manipulation and a Closure
+
+![DOM and a closure](images/webdev101-js.png)
+> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## [Pre-lecture quiz](.github/pre-lecture-quiz.md)
+
+### Introduction:
+
+Manipulating the DOM, or the "Document Object Model", is a key aspect of web development. According to [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction), "The Document Object Model (DOM) is the data representation of the objects that comprise the structure and content of a document on the web." The challenges around DOM manipulation on the web have often been the impetus behind using JavaScript frameworks instead of vanilla JavaScript to manage the DOM, but we will manage on our own!
+
+In addition, this lesson will introduce the idea of a [JavaScript closure](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures), which you can think of as a function enclosed by another function so that the inner function has access to the outer function's scope.
+
+We will use a closure to manipulate the DOM.
+
+> Think of the DOM as a tree, representing all the ways that a web page document can be manipulated. Various APIs (Application Program Interfaces) have been written so that programmers, using their programming language of choice, can access the DOM and edit, change, rearrange, and otherwise manage it.
+
+![DOM tree representation](./images/dom-tree.png)
+
+> A representation of the DOM and the HTML markup that references it. From [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites)
+
+In this lesson, we will complete our interactive terrarium project by creating the JavaScript that will allow a user to manipulate the plants on the page.
+
+### Prequisite:
+
+You should have the HTML and CSS for your terrarium built. By the end of this lesson you will be able to move the plants into and out of the terrarium by dragging them.
+
+### Task:
+
+In your terrarium folder, create a new file called `script.js`. Import that file in the `<head>` section:
+
+```html
+	<script src="./script.js" defer></script>
+```
+
+> Note: use `defer` when importing an external JavaScript file into the html file so as to allow the JavaScript to execute only after the HTML file has been fully loaded. You could also use the `async` attribute, which allows the script to execute while the HTML file is parsing, but in our case, it's important to have the HTML elements fully available for dragging before we allow the drag script to be executed.
+---
+
+## 1. The DOM elements
+
+The first thing you need to do is to create references to the elements that you want to manipulate in the DOM. In our case, they are the 14 plants currently waiting in the side bars.
+
+### Task:
+
+```html
+dragElement(document.getElementById('plant1'));
+dragElement(document.getElementById('plant2'));
+dragElement(document.getElementById('plant3'));
+dragElement(document.getElementById('plant4'));
+dragElement(document.getElementById('plant5'));
+dragElement(document.getElementById('plant6'));
+dragElement(document.getElementById('plant7'));
+dragElement(document.getElementById('plant8'));
+dragElement(document.getElementById('plant9'));
+dragElement(document.getElementById('plant10'));
+dragElement(document.getElementById('plant11'));
+dragElement(document.getElementById('plant12'));
+dragElement(document.getElementById('plant13'));
+dragElement(document.getElementById('plant14'));
+```
+
+What's going on here? You are referencing the document and looking through its DOM to find an element with a particular Id. Remember in the first lesson on HTML that you gave individual Ids to each plant image (`id="plant1"`)? Now you will make use of that effort. After identifying each element, you pass that item to a function called `dragElement` that you'll build in a minute. Thus, the element in the HTML is now drag-enabled, or will be shortly.
+
+✅ Why do we reference elements by Id? Why not by their CSS class? You might refer to the previous lesson on CSS to answer this question.
+
+---
+
+## 2. The Closure
+
+Now you are ready to create the dragElement closure, which is an outer function that encloses an inner function or functions (in our case, we will have three). 
+
+Closures are useful when one or more functions need to access an outer function's scope. Here's an example:
+
+```javascript
+function displayCandy(){
+	let candy = ['jellybeans];
+	function addCandy(candyType) {
+		candy.push(candyType)
+	}
+	addCandy('gumdrops');
+}
+displayCandy();
+console.log(candy)
+```
+
+In this example, the displayCandy function surrounds a function that pushes a new candy type into an array that already exists in the function. If you were to run this code, the `candy` array would be undefined, as it is a local variable (local to the closure). 
+
+✅ How can you make the `candy` array accessible? Try moving it outside the closure. This way, the array becomes global, rather than remaining only available to the closure's local scope.
+
+### Task:
+
+Under the element declarations in `script.js`, create a function:
+
+```javascript
+function dragElement(terrariumElement) {
+	//set 4 positions for positioning on the screen
+	let pos1 = 0,
+		pos2 = 0,
+		pos3 = 0,
+		pos4 = 0;
+	terrariumElement.onpointerdown = pointerDrag;
+}
+```
+
+`dragElement` get its `terrariumElement` object from the declarations at the top of the script. Then, you set some local positions at `0` for the object passed into the function. These are the local variables that will be manipulated for each element as you add drag and drop functionality within the closure to each element. The terrarium will be populated by these dragged elements, so the application needs to keep track of where they are placed.
+
+In addition, the terrariumElement that is passed to this function is assigned a `pointerdown` event, which is part of the [web APIs](https://developer.mozilla.org/en-US/docs/Web/API) designed to help with DOM management. `onpointerdown` fires when a button is pushed, or in our case, a draggable element is touched. This event handler works on both [web and mobile browsers](https://caniuse.com/?search=onpointerdown), with a few exceptions.
+
+✅ The [event handler `onclick`](https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onclick) has much more support cross-browser; why wouldn't you use it here? Think about the exact type of screen interaction you're trying to create here.
+
+---
+
+## 3. The Pointerdrag function
+
+The terrariumElement is ready to be dragged around; when the `onpointerdown` event is fired, the function pointerDrag is invoked. Add that function right under this line: `terrariumElement.onpointerdown = pointerDrag;`:
+
+### Task: 
+
+```javascript
+function pointerDrag(e) {
+	e.preventDefault();
+	console.log(e);
+	pos3 = e.clientX;
+	pos4 = e.clientY;
+}
+```
+
+Several things happen. First, you prevent the default events that normally happen on pointerdown from occurring by using `e.preventDefault();`. This way you have more control over the interface's behavior.
+
+> Come back to this line when you've built the script file completely and try it without `e.preventDefault()` - what happens?
+
+Second, open `index.html` in a browser window, and inspect the interface. When you click a plant, you can see how the 'e' event is captured. Dig into the event to see how much information is gathered by one pointer down event!  
+
+Next, note how the local variables `pos3` and `pos4` are set to e.clientX. You can find the `e` values in the inspection pane. These values capture the x and y coordinates of the plant at the moment you click on it or touch it. You will need fine-grained control over the behavior of the plants as you click and drag them, so you keep track of their coordinates.
+
+✅ Is it becoming more clear why this entire app is built with one big closure? If it wasn't, how would you maintain scope for each of the 14 draggable plants?
+
+Complete the initial function by adding two more pointer event manipulations under `pos4 = e.clientY`:
+
+```html
+document.onpointermove = elementDrag;
+document.onpointerup = stopElementDrag;
+```
+Now you are indicating that you want the plant to be dragged along with the pointer as you move it, and for the dragging gesture to stop when you deselect the plant. `onpointermove` and `onpointerup` are all parts of the same API as `onpointerdown`. The interface will throw errors now as you have not yet defined the `elementDrag` and the `stopElementDrag` functions, so build those out next.
+
+## 4. The elementDrag and stopElementDrag functions
+
+You will complete your closure by adding two more internal functions that will handle what happens when you drag a plant and stop dragging it. The behavior you want is that you can drag any plant at any time and place it anywhere on the screen. This interface is quite un-opinionated (there is no drop zone for example) to allow you to design your terrarium exactly as you like it by adding, removing, and repositioning plants.
+
+### Task: 
+
+Add the `elementDrag` function right after the closing curly bracket of `pointerDrag`:
+
+```javascript
+function elementDrag(e) {
+	pos1 = pos3 - e.clientX;
+	pos2 = pos4 - e.clientY;
+	pos3 = e.clientX;
+	pos4 = e.clientY;
+	console.log(pos1, pos2, pos3, pos4);
+	terrariumElement.style.top = terrariumElement.offsetTop - pos2 + 'px';
+	terrariumElement.style.left = terrariumElement.offsetLeft - pos1 + 'px';
+}
+```
+In this function, you do a lot of editing of the initial positions 1-4 that you set as local variables in the outer function. What's going on here?
+
+As you drag, you reassign `pos1` by making it equal to `pos3` (which you set earlier as `e.clientX`)  minus the current `e.clientX` value. You do a similar operation to `pos2`. Then, you reset `pos3` and `pos4` to the new X and Y coordinates of the element. You can watch these changes in the console as you drag. Then, you manipulate the plant's css style to set its new position based on the new positions of `pos1` and `pos2`, calculating the plant's top and left X and Y coordinates based on comparing its offset with these new positions.
+
+> `offsetTop` and `offsetLeft` are CSS properties that set an element's position based on that of its parent; its parent can be any element that is not positioned as `static`. 
+
+All this recalculation of positioning allows you to fine-tune the behavior of the terrarium and its plants.
+
+### Task: 
+
+The final task to complete the interface is to add the `closeElementDrag` function after the closing curly bracket of `elementDrag`:
+
+```javascript
+function stopElementDrag() {
+	document.onpointerup = null;
+	document.onpointermove = null;
+}
+```
+
+This small function resets the `onpointerup` and `onpointermove` events so that you can either restart your plant's progress by starting to drag it again, or start dragging a new plant.
+
+✅ What happens if you don't set these events to null?
+
+Now you have completed your project!
+
+🥇Congratulations! You have finished your beautiful terrarium. ![finished terrarium](./images/terrarium-final.png)
+
+---
+
+## 🚀Challenge
+
+Add new event handler to your closure to do something more to the plants; for example, double-click a plant to bring it to the front. Get creative!
+
+## [Post-lecture quiz](.github/post-lecture-quiz.md)
+
+## Review & Self Study
+
+While dragging elements around the screen seems trivial, there are many ways to do this and many pitfalls, depending on the effect you seek. In fact, there is an entire [drag and drop API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API) that you can try. We didn't use it in this module because the effect we wanted was somewhat different, but try this API on your own project and see what you can achieve.
+
+Find more information on pointer events on the [W3C docs](https://www.w3.org/TR/pointerevents1/) and on [MDN web docs](https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events).
+
+Always check browser capabilities using [CanIUse.com](https://caniuse.com/).
+
+## Assignment
+
+[Work a bit more with the DOM](assignment.md)
+

3-terrarium/3-intro-to-DOM-and-closures/assignment.md

@@ -0,0 +1,11 @@
+# Work a bit more with the DOM
+
+## Instructions
+
+Research the DOM a little more by 'adoping' a DOM element. Visit the MSDN's [list of DOM interfaces](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model) and pick one. Find it being used on a web site in the web, and write an explanation of how it is used.
+
+## Rubric
+
+| Criteria | Exemplary                                     | Adequate                                         | Needs Improvement       |
+| -------- | --------------------------------------------- | ------------------------------------------------ | ----------------------- |
+|          | Paragraph write-up is presented, with example | Paragraph write-up is presented, without example | No writeup is presented |

3-terrarium/3-intro-to-DOM-and-closures/translations/README.es.md

@@ -0,0 +1,207 @@
+# Terrarium Project Part 3: DOM Manipulación y cierre
+
+! [DOM y un cierre](images/webdev101-js.png)
+> Boceto de [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## [Pre-lecture prueba](.github/pre-lecture-quiz.md)
+
+### Introducción:
+
+Manipular el DOM, o el "Modelo de objetos de documento", es un aspecto clave del desarrollo web. Según [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction), "El modelo de objetos de documento (DOM) es la representación de datos de los objetos que componen la estructura y contenido de un documento en la web ". Los desafíos en torno a la manipulación de DOM en la web a menudo han sido el ímpetu detrás del uso de marcos de JavaScript en lugar de JavaScript vanilla para administrar el DOM, ¡pero lo administraremos por nuestra cuenta!
+
+Además, esta lección presentará la idea de un [cierre de JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures), que puede considerar como una función encerrada por otra función para que la función interna tenga acceso al alcance de la función externa.
+
+Usaremos un cierre para manipular el DOM.
+
+> Piense en el DOM como un árbol, que representa todas las formas en que se puede manipular un documento de página web. Se han escrito varias API (interfaces de programas de aplicación) para que los programadores, utilizando el lenguaje de programación de su elección, puedan acceder al DOM y editarlo, cambiarlo, reorganizarlo y administrarlo de otro modo.
+
+
+![DOM tree representation](./images/dom-tree.png)
+
+> Una representación del DOM y el marcado HTML que lo hace referencia. De [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites)
+
+En esta lección, completaremos nuestro proyecto de terrario interactivo creando el JavaScript que permitirá al usuario manipular las plantas en la página.
+
+### Requisito previo:
+
+Debería tener el HTML y CSS para su terrario construido. Al final de esta lección, podrá mover las plantas dentro y fuera del terrario arrastrándolas.
+
+### Tarea:
+
+En su carpeta de terrario, cree un nuevo archivo llamado `script.js`. Importe ese archivo en la sección `<head>`:
+
+
+```html
+	<script src="./script.js" defer></script>
+```
+
+> Nota: use `defer` cuando importe un archivo JavaScript externo en el archivo html para permitir que JavaScript se ejecute solo después de que el archivo HTML se haya cargado por completo. También podría usar el atributo `async`, que permite que el script se ejecute mientras se analiza el archivo HTML, pero en nuestro caso, es importante tener los elementos HTML completamente disponibles para arrastrar antes de permitir que se ejecute el script de arrastre.
+---
+
+## 1. Los elementos DOM
+
+Lo primero que debe hacer es crear referencias a los elementos que desea manipular en el DOM. En nuestro caso, son las 14 plantas que esperan actualmente en las barras laterales.
+
+
+### Tarea:
+
+```html
+dragElement(document.getElementById('plant1'));
+dragElement(document.getElementById('plant2'));
+dragElement(document.getElementById('plant3'));
+dragElement(document.getElementById('plant4'));
+dragElement(document.getElementById('plant5'));
+dragElement(document.getElementById('plant6'));
+dragElement(document.getElementById('plant7'));
+dragElement(document.getElementById('plant8'));
+dragElement(document.getElementById('plant9'));
+dragElement(document.getElementById('plant10'));
+dragElement(document.getElementById('plant11'));
+dragElement(document.getElementById('plant12'));
+dragElement(document.getElementById('plant13'));
+dragElement(document.getElementById('plant14'));
+```
+
+¿Que está pasando aqui? Está haciendo referencia al documento y mirando a través de su DOM para encontrar un elemento con un Id particular. ¿Recuerda en la primera lección sobre HTML que le dio ID individuales a cada imagen de planta (`id = "plant1"`)? Ahora harás uso de ese esfuerzo. Después de identificar cada elemento, pasa ese elemento a una función llamada `dragElement` que creará en un minuto. Por lo tanto, el elemento en el HTML ahora está habilitado para arrastrar, o lo estará en breve.
+
+✅ ¿Por qué hacemos referencia a elementos por Id? ¿Por qué no por su clase de CSS? Puede consultar la lección anterior sobre CSS para responder a esta pregunta.
+
+---
+
+## 2. El cierre
+
+Ahora está listo para crear el cierre dragElement, que es una función externa que encierra una función o funciones internas (en nuestro caso, tendremos tres).
+
+Los cierres son útiles cuando una o más funciones necesitan acceder al alcance de una función externa. He aquí un ejemplo:
+
+```javascript
+function displayCandy(){
+	let candy = ['jellybeans];
+	function addCandy(candyType) {
+		candy.push(candyType)
+	}
+	addCandy('gumdrops');
+}
+displayCandy();
+console.log(candy)
+```
+
+En este ejemplo, la función displayCandy rodea una función que inserta un nuevo tipo de caramelo en una matriz que ya existe en la función. Si tuviera que ejecutar este código, la matriz `candy` no estaría definida, ya que es una variable local (local al cierre).
+
+✅ ¿Cómo se puede hacer accesible la matriz de `candy`? Intente moverlo fuera del cierre. De esta manera, la matriz se vuelve global, en lugar de permanecer solo disponible para el alcance local del cierre.
+
+### Tarea:
+
+Debajo de las declaraciones de elementos en `script.js`, crea una función:
+
+
+```javascript
+function dragElement(terrariumElement) {
+	//establecer 4 posiciones para posicionar en la pantalla
+	let pos1 = 0,
+		pos2 = 0,
+		pos3 = 0,
+		pos4 = 0;
+	terrariumElement.onpointerdown = pointerDrag;
+}
+```
+
+`dragElement` obtiene su objeto` terrariumElement` de las declaraciones en la parte superior del script. Luego, establece algunas posiciones locales en "0" para el objeto pasado a la función. Estas son las variables locales que se manipularán para cada elemento a medida que agrega la funcionalidad de arrastrar y soltar dentro del cierre de cada elemento. El terrario estará poblado por estos elementos arrastrados, por lo que la aplicación debe realizar un seguimiento de dónde se colocan.
+
+Además, al terrariumElement que se pasa a esta función se le asigna un evento `pointerdown`, que forma parte de las [API web](https://developer.mozilla.org/en-US/docs/Web/API) diseñadas para ayudar con la gestión del DOM. `Onpointerdown` se dispara cuando se presiona un botón, o en nuestro caso, se toca un elemento que se puede arrastrar. Este controlador de eventos funciona tanto en [navegadores web como móviles](https://caniuse.com/?search=onpointerdown), con algunas excepciones.
+
+✅ El [controlador de eventos `onclick`](https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onclick) tiene mucho más soporte entre navegadores; ¿Por qué no lo usarías aquí? Piense en el tipo exacto de interacción de pantalla que está intentando crear aquí.
+
+---
+
+## 3. La función Pointerdrag
+
+El terrariumElement está listo para ser arrastrado; cuando se dispara el evento `onpointerdown`, se invoca la función `pointerDrag`. Agrega esa función justo debajo de esta línea: `terrariumElement.onpointerdown = pointerDrag;`:
+
+### Tarea: 
+
+```javascript
+function pointerDrag(e) {
+	e.preventDefault();
+	console.log(e);
+	pos3 = e.clientX;
+	pos4 = e.clientY;
+}
+```
+
+Suceden varias cosas. Primero, evita que ocurran los eventos predeterminados que normalmente ocurren en el puntero hacia abajo usando `e.preventDefault ();`. De esta manera, tiene más control sobre el comportamiento de la interfaz.
+
+> Regrese a esta línea cuando haya construido el archivo de script por completo y pruébelo sin `e.preventDefault ()`- ¿qué sucede?
+
+En segundo lugar, abra `index.html` en una ventana del navegador e inspeccione la interfaz. Cuando hace clic en una planta, puede ver cómo se captura el evento 'e'. ¡Profundice en el evento para ver cuánta información recopila un evento de puntero hacia abajo!
+
+A continuación, observe cómo las variables locales `pos3` y` pos4` se establecen en e.clientX. Puede encontrar los valores de `e` en el panel de inspección. Estos valores capturan las coordenadas xey de la planta en el momento en que hace clic en ella o la toca. Necesitará un control detallado sobre el comportamiento de las plantas al hacer clic en ellas y arrastrarlas, de modo que pueda realizar un seguimiento de sus coordenadas.
+
+✅ ¿Está cada vez más claro por qué toda esta aplicación está construida con un gran cierre? Si no fuera así, ¿cómo mantendría el alcance para cada una de las 14 plantas arrastrables?
+
+Complete la función inicial agregando dos manipulaciones de eventos de puntero más en `pos4 = e.clientY`:
+
+```html
+document.onpointermove = elementDrag;
+document.onpointerup = stopElementDrag;
+```
+Ahora está indicando que desea que la planta se arrastre junto con el puntero mientras la mueve, y que el gesto de arrastre se detenga cuando anule la selección de la planta. `Onpointermove` y `onpointerup` son partes de la misma API que `onpointerdown`. La interfaz arrojará errores ahora ya que aún no ha definido las funciones `elementDrag` y `stopElementDrag`, así que compárelas a continuación.
+
+## 4. Las funciones elementDrag y stopElementDrag
+
+Completarás tu cierre agregando dos funciones internas más que se encargarán de lo que sucede cuando arrastras una planta y dejas de arrastrarla. El comportamiento que desea es que pueda arrastrar cualquier planta en cualquier momento y colocarla en cualquier lugar de la pantalla. Esta interfaz no tiene opiniones (no hay zona de caída, por ejemplo) para permitirle diseñar su terrario exactamente como le gusta agregando, quitando y reposicionando plantas.
+
+### Tarea:
+
+Agrega la función `elementDrag` justo después del corchete de cierre de `pointerDrag`:
+
+```javascript
+function elementDrag(e) {
+	pos1 = pos3 - e.clientX;
+	pos2 = pos4 - e.clientY;
+	pos3 = e.clientX;
+	pos4 = e.clientY;
+	console.log(pos1, pos2, pos3, pos4);
+	terrariumElement.style.top = terrariumElement.offsetTop - pos2 + 'px';
+	terrariumElement.style.left = terrariumElement.offsetLeft - pos1 + 'px';
+}
+```
+En esta función, usted edita mucho las posiciones iniciales 1-4 que establece como variables locales en la función externa. ¿Que está pasando aqui?
+
+A medida que arrastra, reasigna `pos1` haciéndolo igual a `pos3` (que configuró anteriormente como `e.clientX`) menos el valor actual de `e.clientX`. Realiza una operación similar a `pos2`. Luego, restablece `pos3` y `pos4` a las nuevas coordenadas X e Y del elemento. Puede ver estos cambios en la consola mientras arrastra. Luego, manipula el estilo CSS de la planta para establecer su nueva posición en función de las nuevas posiciones de `pos1` y` pos2`, calculando las coordenadas X e Y superior e izquierda de la planta en función de la comparación de su desplazamiento con estas nuevas posiciones.
+
+> `OffsetTop` y `offsetLeft` son propiedades CSS que establecen la posición de un elemento basándose en la de su padre; su padre puede ser cualquier elemento que no esté posicionado como "estático".
+
+Todo este recálculo de posicionamiento le permite afinar el comportamiento del terrario y sus plantas.
+
+### Tarea:
+
+La tarea final para completar la interfaz es agregar la función `closeElementDrag` después del corchete de cierre de `elementDrag`:
+
+```javascript
+function stopElementDrag() {
+	document.onpointerup = null;
+	document.onpointermove = null;
+}
+```
+
+Esta pequeña función restablece los eventos `onpointerup` y `onpointermove` para que pueda reiniciar el progreso de su planta comenzando a arrastrarla nuevamente, o comenzar a arrastrar una nueva planta.
+
+✅ ¿Qué sucede si no configura estos eventos como nulos?
+
+¡Ahora has completado tu proyecto!
+
+---
+
+🥇¡Felicitaciones! Has terminado tu hermoso terrario. ![terrario terminado](./images/terrarium-final.png)
+
+🚀Challenge: agregue un nuevo controlador de eventos a su cierre para hacer algo más en las plantas; por ejemplo, haga doble clic en una planta para traerla al frente. ¡Se creativo!
+
+## [Post-lecture prueba](.github/post-lecture-quiz.md)
+
+## Revisión y autoestudio
+
+Si bien arrastrar elementos por la pantalla parece trivial, hay muchas formas de hacerlo y muchas trampas, según el efecto que busque. De hecho, hay una [API de arrastrar y soltar](https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API) completa que puedes probar. No lo usamos en este módulo porque el efecto que queríamos era algo diferente, pero pruebe esta API en su propio proyecto y vea lo que puede lograr.
+
+** Tarea: [Trabajar un poco más con el DOM](assignment.md)
+

3-terrarium/3-intro-to-DOM-and-closures/translations/assignment.es.md

@@ -0,0 +1,11 @@
+# Trabaja un poco más con DOM
+
+## Instrucciones
+
+Investigue el DOM un poco más 'adoptando' un elemento DOM. Visite la [lista de interfaces DOM de MSDN](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model) y elija una. Encuéntrelo en un sitio web en la web y escriba una explicación de cómo se usa.
+
+## Rúbrica
+
+| Criterios | Ejemplar | Adecuado | Necesita mejorar |
+| -------- | --------------------------------------------- | ------------------------------------------------ | ----------------------- |
+| | Se presenta la redacción del párrafo, con ejemplo | Se presenta la redacción del párrafo, sin ejemplo | No se presenta ninguna reseña |