Merge pull request #205 from pierangelomiceli/eventdelegationstasks

Event delegation - task and solutions

Author: longo-andrea

2-ui/2-events/03-event-delegation/1-hide-message-delegate/task.md

@@ -2,12 +2,12 @@ importance: 5
 
 ---
 
-# Hide messages with delegation
+# Nascondere messaggi traminte delegation
 
-There's a list of messages with removal buttons `[x]`. Make the buttons work.
+C'è una lista di messaggi con il pulsante di rimozione `[x]`. Fare in modo che il pulsante funzioni.
 
-Like this:
+Come questo per esempio:
 
 [iframe src="solution" height=420]
 
-P.S. Should be only one event listener on the container, use event delegation.
+P.S.: Sul container dovrebbe esserci solo un listener, usare event delegation.

2-ui/2-events/03-event-delegation/2-sliding-tree/solution.md

@@ -1,4 +1,4 @@
-The solution has two parts.
+La soluzione viene divisa in due parti distinte.
 
-1. Wrap every tree node title into `<span>`. Then we can CSS-style them on `:hover` and handle clicks exactly on text, because `<span>` width is exactly the text width (unlike without it).
-2. Set a handler to the `tree` root node and handle clicks on that `<span>` titles.
+1. Inglobare il nodo che rappresenta il titolo dentro uno `<span>` e su questo elemento modificare gli i CSS per l'`:hover`; la gestione dei click con lo `<span>` è agevole perché questo occupa esattamente la larghezza del testo.
+2. Impostare un gestore sul nodo radice dell'`albero` e gestire i click su questi titoli `<span>`.

2-ui/2-events/03-event-delegation/2-sliding-tree/task.md

@@ -2,13 +2,13 @@ importance: 5
 
 ---
 
-# Tree menu
+# Menù ad albero
 
-Create a tree that shows/hides node children on click:
+Creare una struttura ad albero che al click, mostra o nasconde i nodi figli:
 
 [iframe border=1 src="solution"]
 
-Requirements:
+Requisiti:
 
-- Only one event handler (use delegation)
-- A click outside the node title (on an empty space) should not do anything.
+- Un solo gestore di eventi (usare delegation)
+- Un click fuori dal nodo del titolo (su uno spazio vuoto) non dovrebbe generare alcuna operazione.

2-ui/2-events/03-event-delegation/3-sortable-table/task.md

@@ -2,11 +2,11 @@ importance: 4
 
 ---
 
-# Sortable table
+# Tabella ordinabile
 
-Make the table sortable: clicks on `<th>` elements should sort it by corresponding column.
+Rendere la tabella ordinabile: i click sui `<th>` dovrebbero ordinarne i valori secondo la colonna corrispondente.
 
-Each `<th>` has the type in the attribute, like this:
+Ogni `<th>` ha il suo tipo specificato nell'attributo, come in questo esempio:
 
 ```html
 <table id="grid">
@@ -32,12 +32,12 @@ Each `<th>` has the type in the attribute, like this:
 </table>
 ```
 
-In the example above the first column has numbers, and the second one -- strings. The sorting function should handle sort according to the type.
+Nell'esempio, la prima colonna contiene numeri, la seconda -- stringhe. La funzione di ordinamento dovrebbe gestire l'ordine secondo il tipo specificato in attributo.
 
-Only `"string"` and `"number"` types should be supported.
+Devono essere supportati solo i tipi `"string"` e `"number"`.
 
-The working example:
+Esempio funzionante:
 
 [iframe border=1 src="solution" height=190]
 
-P.S. The table can be big, with any number of rows and columns.
+P.S.: La tabella potrebbe essere grande, con una quantità arbitraria di righe e colonne.

2-ui/2-events/03-event-delegation/4-behavior-tooltip/task.md

@@ -2,13 +2,13 @@ importance: 5
 
 ---
 
-# Tooltip behavior
+# Comportamento tooltip
 
-Create JS-code for the tooltip behavior.
+Creare uno script JS per un tooltip.
 
-When a mouse comes over an element with `data-tooltip`, the tooltip should appear over it, and when it's gone then hide.
+Quando il mouse passa sopra un elemento HTML con `data-tooltip`, dovrebbe comparire su di esso un tooltip, e scomparire dopo che ha abbandonato la usa area.
 
-An example of annotated HTML:
+Un esempio di HTML con tooltip:
 ```html
 <button data-tooltip="the tooltip is longer than the element">Short button</button>
 <button data-tooltip="HTML<br>tooltip">One more button</button>
@@ -18,21 +18,21 @@ Should work like this:
 
 [iframe src="solution" height=200 border=1]
 
-In this task we assume that all elements with `data-tooltip` have only text inside. No nested tags (yet).
+In questo compito assumiamo che tutti gli elementi con il `data-tooltip` contengano solamente testo. Nessun tag annidato.
 
-Details:
+Dettagli:
 
-- The distance between the element and the tooltip should be `5px`.
-- The tooltip should be centered relative to the element, if possible.
-- The tooltip should not cross window edges. Normally it should be above the element, but if the element is at the page top and there's no space for the tooltip, then below it.
-- The tooltip content is given in the `data-tooltip` attribute. It can be arbitrary HTML.
+- La distanza tra l'elemento e la sua tooltip dovrebbe essere di `5px`.
+- Il tooltip, possibilmente, dovrebbe essere centrato rispetto all'elemento.
+- Il tooltip non dovrebbe oltrepassare i bordi della finestra. Normalmente dovrebbe stare sopra l'elemento, ma se quest'ultimo dovesse essere nella parte superiore della finestra, allora dovrebbe stare sotto.
+- Il contenuto del tooltip è dato dall'attributo `data-tooltip`. Può essere un qualunque HTML.
 
-You'll need two events here:
-- `mouseover` triggers when a pointer comes over an element.
-- `mouseout` triggers when a pointer leaves an element.
+Sono necessari due eventi:
+- `mouseover` viene innescato quando il puntatore passa sopra l'elemento.
+- `mouseout` innescato quando il puntatore abbandona un elemento.
 
-Please use event delegation: set up two handlers on `document` to track all "overs" and "outs" from elements with `data-tooltip` and manage tooltips from there.
+Usare la event delegation: impostare due gestori su `document` per tenere traccia di tutti gli "overs" ed "outs" degli elementi con `data-tooltip` e gestirli da lì.
 
-After the behavior is implemented, even people unfamiliar with JavaScript can add annotated elements.
+Dopo che il comportamento è stato implementato, anche persone non avvezze a JavaScript possono aggiungere elementi con i tooltip.
 
-P.S. Only one tooltip may show up at a time.
+P.S.: Può essere mostrato solo un tooltip alla volta.