Merge pull request #443 from gabifs/translate/custom-elements

gabifs · web-flow · commit e3aff357b879 · 2025-11-21T15:11:02.000-03:00
Custom elements
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 @@
+Observe:
 
-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.
+1. Limpamos o temporizador `setInterval` quando o elemento é removido do documento. Isso é importante, caso contrário ele continua atualizando mesmo que não seja mais necessário. E o navegador não consegue limpar a memória deste elemento e referenciados por ele.
+2. Podemos acessar a data atual como propriedade `elem.date`. Todos os métodos e propriedades da classe são naturalmente métodos e propriedades do 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 deixar o elemento ser coletado como lixo
   }
 
 }
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 -->
+<!-- não modifique isso -->
 <script src="time-formatted.js"></script>
 
-<!-- your code here: -->
+<!-- seu código aqui: -->
 <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 */
+  /* Seu código aqui */
 
 }
 
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,20 +1,20 @@
+# Elemento temporizador ao vivo
 
-# Live timer element
+Já temos o elemento `<time-formatted>` para mostrar um tempo bem formatado.
 
-We already have `<time-formatted>` element to show a nicely formatted time.
+Crie o elemento `<live-timer>` para mostrar o tempo atual:
 
-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>).
+1. Ele deve usar `<time-formatted>` internamente, não duplicar sua funcionalidade.
+2. Atualiza a cada segundo.
+3. Para cada atualização, um evento customizado chamado `tick` deve ser gerado, com a data atual em `event.detail` (veja o capítulo <info:dispatch-events>).
 
-Usage:
+Uso:
 
 ```html
 <live-timer id="elem"></live-timer>
 
 <script>
-  elem.addEventListener('tick', event => console.log(event.detail));
+  elem.addEventListener("tick", (event) => console.log(event.detail));
 </script>
 ```
 
diff --git a/8-web-components/2-custom-elements/article.md b/8-web-components/2-custom-elements/article.md

Original file line number	Diff line number	Diff line change
`@@ -24,7 +24,7 @@ class LiveTimer extends HTMLElement {`
`24`	`24`	`}`
`25`	`25`
`26`	`26`	`disconnectedCallback() {`
`27`		`- clearInterval(this.timer); // important to let the element be garbage-collected`
	`27`	`+ clearInterval(this.timer); // importante para deixar o elemento ser coletado como lixo`
`28`	`28`	`}`
`29`	`29`
`30`	`30`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`class LiveTimer extends HTMLElement {`
`2`	`2`
`3`		`- /* your code here */`
	`3`	`+ /* Seu código aqui */`
`4`	`4`
`5`	`5`	`}`
`6`	`6`