Merge pull request #188 from pierangelomiceli/bro_details

Introduction to browser events

Author: longo-andrea

2-ui/2-events/01-introduction-browser-events/01-hide-other/task.md

@@ -2,10 +2,10 @@ importance: 5
 
 ---
 
-# Hide on click
+# Nascondere al click
 
-Add JavaScript to the `button` to make `<div id="text">` disappear when we click it.
+Aggiungi del codice JavaScript al pulsante `button` per nascondere `<div id="text">` al click.
 
-The demo:
+Demo:
 
 [iframe border=1 src="solution" height=80]

2-ui/2-events/01-introduction-browser-events/02-hide-self-onclick/solution.md

@@ -1,5 +1,5 @@
-Can use `this` in the handler to reference "the element itself" here:
+Qui possiamo usare `this` nel gestore per fare riferimento all'"elemento stesso":
 
 ```html run height=50
-<input type="button" onclick="this.hidden=true" value="Click to hide">
+<input type="button" onclick="this.hidden=true" value="Clicca per nascondere">
 ```

2-ui/2-events/01-introduction-browser-events/02-hide-self-onclick/task.md

@@ -2,11 +2,11 @@ importance: 5
 
 ---
 
-# Hide self
+# Nascondere sé stesso
 
-Create a button that hides itself on click.
+Creare un pulsante che nasconde sé stesso al click.
 
 ```online
-Like this:
-<input type="button" onclick="this.hidden=true" value="Click to hide">
+Come questo:
+<input type="button" onclick="this.hidden=true" value="Clicca per nascondere">
 ```

2-ui/2-events/01-introduction-browser-events/03-which-handlers-run/solution.md

@@ -1,8 +1,8 @@
-The answer: `1` and `2`.
+Risposta: `1` e `2`.
 
-The first handler triggers, because it's not removed by `removeEventListener`. To remove the handler we need to pass exactly the function that was assigned. And in the code a new function is passed, that looks the same, but is still another function.
+Il primo gestore verrà innescato, poiché non viene rimosso da `removeEventListener`. Per rimuovere il gestore dobbiamo passare esattamente la stessa funzione che era stata assegnata. E nel codice viene passata una nuova funzione, che è identica, ma è comunque una nuova funzione.
 
-To remove a function object, we need to store a reference to it, like this:
+Per poter rimuovere un oggetto funzione, dobbiamo salvarci un suo riferimento:
 
 ```js
 function handler() {
@@ -13,4 +13,4 @@ button.addEventListener("click", handler);
 button.removeEventListener("click", handler);
 ```
 
-The handler `button.onclick` works independently and in addition to `addEventListener`.
+Il gestore `button.onclick` aggiunto ad `addEventListener` funziona perfettamente.

2-ui/2-events/01-introduction-browser-events/03-which-handlers-run/task.md

@@ -2,11 +2,11 @@ importance: 5
 
 ---
 
-# Which handlers run?
+# Quale gestore verrà eseguito?
 
-There's a button in the variable. There are no handlers on it.
+Nella variabile c'è un pulsante. Non vi sono gestori assegnati.
 
-Which handlers run on click after the following code? Which alerts show up?
+Dopo aver eseguito questo codice, quali gestori verranno eseguiti al click sul pulsante? Quale alert verrà mostrato?
 
 ```js no-beautify
 button.addEventListener("click", () => alert("1"));

2-ui/2-events/01-introduction-browser-events/04-move-ball-field/solution.md

@@ -1,11 +1,11 @@
 
-First we need to choose a method of positioning the ball.
+Per prima cosa dobbiamo scegliere un metodo per posizionare la palla.
 
-We can't use `position:fixed` for it, because scrolling the page would move the ball from the field.
+Non possiamo usare `position:fixed` per questo, perché lo scorrimento della pagina sposterebbe la palla dal campo.
 
-So we should use `position:absolute` and, to make the positioning really solid, make `field` itself positioned.
+Dobbiamo quindi usare `position:absolute` per la palla, e per rendere il posizionamento stabile, posizionare anche `field` stesso ("static" se non diversamente specificato). 
 
-Then the ball will be positioned relatively to the field:
+In questo modo a palla verrà posizionata in relazione al campo:
 
 ```css
 #field {
@@ -16,36 +16,36 @@ Then the ball will be positioned relatively to the field:
 
 #ball {
   position: absolute;
-  left: 0; /* relative to the closest positioned ancestor (field) */
+  left: 0; /* relativo all'antenato più vicino (field) */
   top: 0;
-  transition: 1s all; /* CSS animation for left/top makes the ball fly */
+  transition: 1s all; /* Una animazione CSS impostata su left/top fa volare la palla */
 }
 ```
 
-Next we need to assign the correct `ball.style.left/top`. They contain field-relative coordinates now.
+Il prossimo passo sarà quello di assegnare correttamente `ball.style.left/top`, le cui coordinate saranno relazionate alla dimensione del campo.
 
-Here's the picture:
+Osserviamo la figura:
 
 ![](move-ball-coords.svg)
 
-We have `event.clientX/clientY` -- window-relative coordinates of the click.
+`event.clientX/clientY` sono le coordinate del click relative alla window (N.d.T. l'oggetto window).
 
-To get field-relative `left` coordinate of the click, we can substract the field left edge and the border width:
+Per ottenere le coordinate `left` relative al campo, dobbiamo sottrarre il valore del limite sinistro del campo e la sua larghezza:
 
 ```js
 let left = event.clientX - fieldCoords.left - field.clientLeft;
 ```
 
-Normally, `ball.style.left` means the "left edge of the element" (the ball). So if we assign that `left`, then the ball edge, not center, would be under the mouse cursor.
+Normalmente, `ball.style.left` significa "limite destro dell'elemento" (la palla). Ma se assegnassimo questo valore di `left`, sotto il puntatore si verrebbe a posizionare, appunto, il limite destro della palla, e non il suo centro.
 
-We need to move the ball half-width left and half-height up to make it center.
+Per poter centrare la palla, dobbiamo spostarla tenendo conto della metà della sua altezza e metà della sua larghezza.
 
-So the final `left` would be:
+Quindi il `left` definitivo sarebbe:
 
 ```js
 let left = event.clientX - fieldCoords.left - field.clientLeft - ball.offsetWidth/2;
 ```
 
-The vertical coordinate is calculated using the same logic.
+Le coordinate in verticale vengono calcolate usando la stessa logica. 
 
-Please note that the ball width/height must be known at the time we access `ball.offsetWidth`. Should be specified in HTML or CSS.
+Nota bene che larghezza e altezza della palla devono essere note nel momento in cui accediamo a  `ball.offsetWidth`. Dovrebbero essere specificate nell'HTML o nel CSS.

2-ui/2-events/01-introduction-browser-events/04-move-ball-field/task.md

@@ -2,20 +2,20 @@ importance: 5
 
 ---
 
-# Move the ball across the field
+# Sposta la palla sul campo
 
-Move the ball across the field to a click. Like this:
+Sposta la palla sul campo al click. Così:
 
 [iframe src="solution" height="260" link]
 
-Requirements:
+Requisiti:
 
-- The ball center should come exactly under the pointer on click (if possible without crossing the field edge).
-- CSS-animation is welcome.
-- The ball must not cross field boundaries.
-- When the page is scrolled, nothing should break.
+- Il centro della palla, al click, dovrà essere esattamente sotto il puntatore (possibilmente senza attraversare i bordi del campo).
+- Le animazioni CSS sono ben accette.
+- La palla non deve attraversare i confini del campo.
+- Allo scroll della pagina, lo script non si deve rompere.
 
-Notes:
+Note:
 
-- The code should also work with different ball and field sizes, not be bound to any fixed values.
-- Use properties `event.clientX/event.clientY` for click coordinates.
+- Il codice dovrebbe funzionare anche con differenti tipi di palle e campi, senza essere legato a nessun valore prefissato.
+- Usa le proprietà `event.clientX/event.clientY` per le coordinate del click.

2-ui/2-events/01-introduction-browser-events/05-sliding-menu/solution.md

@@ -1,47 +1,45 @@
 
-# HTML/CSS
-First let's create HTML/CSS.
+# HTML e CSS
+Per prima cosa creiamo l'HTML ed il CSS.
 
-A menu is a standalone graphical component on the page, so it's better to put it into a single DOM element.
+Un menù è un componente grafico indipendente nella pagina, quindi è bene inserirlo all'interno di un singolo elemento genitore del DOM.
 
-A list of menu items can be laid out as a list `ul/li`.
+Una lista di elementi del menù può essere rappresentata da una lista di `ul/li`.
 
-Here's the example structure:
+Ecco la struttura d'esempio:
 
 ```html
 <div class="menu">
-  <span class="title">Sweeties (click me)!</span>
+  <span class="title">Dolciumi (cliccami)!</span>
   <ul>
-    <li>Cake</li>
-    <li>Donut</li>
-    <li>Honey</li>
+    <li>Torte</li>
+    <li>Ciambelle</li>
+    <li>Miele</li>
   </ul>
 </div>
 ```
 
-We use `<span>` for the title, because `<div>` has an implicit `display:block` on it, and it will occupy 100% of the horizontal width.
-
-Like this:
+Usiamo `<span>` per il titolo perché `<div>`, avendo un `display:block` implicito, occuperebbe il 100% della larghezza disponibile.
 
 ```html autorun height=50
-<div style="border: solid red 1px" onclick="alert(1)">Sweeties (click me)!</div>
+<div style="border: solid red 1px" onclick="alert(1)">Dolciumi (cliccami)!</div>
 ```
 
-So if we set `onclick` on it, then it will catch clicks to the right of the text.
+Impostando un `onclick` su di esso, intercetterà i click alla destra del testo.
 
-As `<span>` has an implicit `display: inline`, it occupies exactly enough place to fit all the text:
+Dato che `<span>` ha un `display: inline` implicito, occupa esattamente lo spazio necessario per la visualizzazione del testo:
 
 ```html autorun height=50
-<span style="border: solid red 1px" onclick="alert(1)">Sweeties (click me)!</span>
+<span style="border: solid red 1px" onclick="alert(1)">Dolciumi (cliccami)!</span>
 ```
 
-# Toggling the menu
+# Azionamento del menù
 
-Toggling the menu should change the arrow and show/hide the menu list.
+L'azionamento del menù dovrebbe cambiare la direzione della freccia e mostrare/nascondere la lista degli elementi.
 
-All these changes are perfectly handled by CSS. In JavaScript we should label the current state of the menu by adding/removing the class `.open`.
+Tutte queste modifiche sono gestite perfettamente dai CSS. In JavaScript dovremmo solamente etichettare lo stato corrente del menù aggiungendo/rimuovendo la classe `.open`.
 
-Without it, the menu will be closed:
+Senza di essa, il menù risulterebbe chiuso:
 
 ```css
 .menu ul {
@@ -58,7 +56,7 @@ Without it, the menu will be closed:
 }
 ```
 
-...And with `.open` the arrow changes and the list shows up:
+...invece con `.open`, la frecca si modifica e la lista si apre:
 
 ```css
 .menu.open .title::before {

2-ui/2-events/01-introduction-browser-events/05-sliding-menu/task.md

@@ -2,10 +2,10 @@ importance: 5
 
 ---
 
-# Create a sliding menu
+# Create un menù a scorrimento
 
-Create a menu that opens/collapses on click:
+Create un menù che si apra e chiuda al click:
 
 [iframe border=1 height=100 src="solution"]
 
-P.S. HTML/CSS of the source document is to be modified.
+P.S.: HTML e CSS del codice della pagina andranno modificati.

2-ui/2-events/01-introduction-browser-events/06-hide-message/solution.md

@@ -1,12 +1,12 @@
 
-To add the button we can use either `position:absolute` (and make the pane `position:relative`) or `float:right`. The `float:right` has the benefit that the button never overlaps the text, but `position:absolute` gives more freedom. So the choice is yours.
+Per aggiungere un pulsante possiamo usare sia `position:absolute` (e quindi il suo contenitore dovrà avere `position:relative`) oppure `float:right`. `float:right` ha il vantaggio di non fare sovrapporre il pulsante al testo,  `position:absolute` invece ci dà un po' più di libertà. La scelta è tua.
 
-Then for each pane the code can be like:
+Quindi per ogni contenitore il codice potrebbe essere come questo:
 ```js
 pane.insertAdjacentHTML("afterbegin", '<button class="remove-button">[x]</button>');
 ```
 
-Then the `<button>` becomes `pane.firstChild`, so we can add a handler to it like this:
+Il `<button>` diventa `pane.firstChild`, e gli possiamo aggiungere un gestore come questo:
 
 ```js
 pane.firstChild.onclick = () => pane.remove();