Merge pull request #495 from joaquinelio/cu

Custom elements
javascript-tutorial · Sep 25, 2021 · 8d9a24a · 8d9a24a
2 parents bfb6ef5 + 919de36
commit 8d9a24a
Show file tree

Hide file tree

Showing 6 changed files with 115 additions and 115 deletions.
diff --git a/8-web-components/2-custom-elements/1-live-timer/solution.md b/8-web-components/2-custom-elements/1-live-timer/solution.md
@@ -1,4 +1,4 @@
 
-Please note:
-1. We clear `setInterval` timer when the element is removed from the document. That's important, otherwise it continues ticking even if not needed any more. And the browser can't clear the memory from this element and referenced by it.
-2. We can access current date as `elem.date` property. All class methods and properties are naturally element methods and properties.
+Por favor ten en cuenta:
+1. Borramos el temporizador `setInterval` cuando el elemento es quitado del documento. Esto es importante, de otro modo continuará ejecutando aunque no se lo necesite más, y el navegador no puede liberar la memoria asignada a este elemento.
+2. Podemos acceder a la fecha actual con la propiedad `elem.date`. Todos los métodos y propiedades de clase son naturalmente métodos y propiedades del elemento.
diff --git a/8-web-components/2-custom-elements/1-live-timer/solution.view/live-timer.js b/8-web-components/2-custom-elements/1-live-timer/solution.view/live-timer.js
@@ -24,7 +24,7 @@ class LiveTimer extends HTMLElement {
   }
 
   disconnectedCallback() {
-    clearInterval(this.timer); // important to let the element be garbage-collected
+    clearInterval(this.timer); // importante para hacer el elemento disponible al recolector de basura
   }
 
 }

diff --git a/8-web-components/2-custom-elements/1-live-timer/source.view/index.html b/8-web-components/2-custom-elements/1-live-timer/source.view/index.html
@@ -1,8 +1,8 @@
 <!doctype html>
-<!-- don't modify this -->
+<!-- No modificar esto -->
 <script src="time-formatted.js"></script>
 
-<!-- your code here: -->
+<!-- tu código aquí: -->
 <script src="live-timer.js"></script>
 
 <live-timer id="elem"></live-timer>

diff --git a/8-web-components/2-custom-elements/1-live-timer/source.view/live-timer.js b/8-web-components/2-custom-elements/1-live-timer/source.view/live-timer.js
@@ -1,6 +1,6 @@
 class LiveTimer extends HTMLElement {
 
-  /* your code here */
+  /* tu código aquí */
 
 }
 

diff --git a/8-web-components/2-custom-elements/1-live-timer/task.md b/8-web-components/2-custom-elements/1-live-timer/task.md
@@ -1,14 +1,14 @@
 
-# Live timer element
+# Elemento reloj dinámico
 
-We already have `<time-formatted>` element to show a nicely formatted time.
+Ya tenemos un elemento `<time-formatted>` para mostrar la hora agradablemente formateada.
 
-Create `<live-timer>` element to show the current time:
-1. It should use `<time-formatted>` internally, not duplicate its functionality.
-2. Ticks (updates) every second.
-3. For every tick, a custom event named `tick` should be generated, with the current date in `event.detail` (see chapter <info:dispatch-events>).
+Crea el elemento `<live-timer>` para mostrar la hora actual:
+1. Internamente debe usar `<time-formatted>`, no duplicar su funcionalidad.
+2. Aactualiza (¡tic!) cada segundo.
+3. Por cada tic, se debe generar un evento personalizado llamado `tick` con la fecha actual en `event.detail` (ver artículo <info:dispatch-events>).
 
-Usage:
+Uso:
 
 ```html
 <live-timer id="elem"></live-timer>
-Original file line number
+Diff line change
@@ Expand Up / @@ -24,7 +24,7 @@ class LiveTimer extends HTMLElement { @@
       }
       disconnectedCallback() {
-        clearInterval(this.timer); // important to let the element be garbage-collected
+        clearInterval(this.timer); // importante para hacer el elemento disponible al recolector de basura
       }
     }
@@ Expand Down @@