From fa4d92412d26ea87f27ab6dab5f9b193f687104c Mon Sep 17 00:00:00 2001
From: pierangelomiceli <pierangelo.miceli@gmail.com>
Date: Sat, 20 Feb 2021 14:01:26 +0100
Subject: [PATCH 01/18] traduzione articolo

---
 2-ui/4-forms-controls/2-focus-blur/article.md | 144 +++++++++---------
 1 file changed, 72 insertions(+), 72 deletions(-)

diff --git a/2-ui/4-forms-controls/2-focus-blur/article.md b/2-ui/4-forms-controls/2-focus-blur/article.md
index d4348d25b..6c331898e 100644
--- a/2-ui/4-forms-controls/2-focus-blur/article.md
+++ b/2-ui/4-forms-controls/2-focus-blur/article.md
@@ -1,25 +1,25 @@
 # Focusing: focus/blur
 
-An element receives the focus when the user either clicks on it or uses the `key:Tab` key on the keyboard. There's also an `autofocus` HTML attribute that puts the focus onto an element by default when a page loads and other means of getting the focus.
+Un elemento riceve il focus sia quando l'utente ci clicca sopra, sia quando usa il tasto `key:Tab` della tastiera. Esiste anche un attributo HTML `autofocus` che mette il focus dentro un elemento di default al caricamento della pagina ed anche altri modi per ottenere il focus.
 
-Focusing on an element generally means: "prepare to accept the data here", so that's the moment when we can run the code to initialize the required functionality.
+Porre il focus su un elemento in genere significa: "preparati ad accettare il dato qui", quindi è questo il momento in cui possiamo eseguire il codice per inizializzare la funzionalità richiesta.
 
-The moment of losing the focus ("blur") can be even more important. That's when a user clicks somewhere else or presses `key:Tab` to go to the next form field, or there are other means as well.
+Il momento della perdita del focus ("blur") può essere ancora più importante. Si concretizza quando un utente clicca da qualche altra parte o preme il tasto `key:Tab` per andare al prossimo campo del form, ma ci sono altri modi per farlo.
 
-Losing the focus generally means: "the data has been entered", so we can run the code to check it or even to save it to the server and so on.
+Perdere il focus generalmente significa: "il dato è stato inserito", quindi possiamo eseguire il codice per controllarlo oppure salvarlo sul server e così via.
 
-There are important peculiarities when working with focus events. We'll do the best to cover them further on.
+Ci sono delle peculiarità importanti da considerare quando si lavora con gli eventi focus. Faremo il nostro meglio per affrontarle più avanti.
 
-## Events focus/blur
+## Gli eventi focus/blur
 
-The `focus` event is called on focusing, and `blur` -- when the element loses the focus.
+L'evento `focus` viene chiamato quando si entra dentro un elemento (focusing), e `blur` -- quando l'elemento perde il focus.
 
-Let's use them for validation of an input field.
+Ora proviamoli per la validazione di un campo di input.
 
-In the example below:
+Nell'esempio seguente:
 
-- The `blur` handler checks if the field has an email entered, and if not -- shows an error.
-- The `focus` handler hides the error message (on `blur` it will be checked again):
+- Il gestore `blur` controlla se il campo contiene un indirizzo email, altrimenti -- mostra un errore.
+- Il gestore `focus` nasconde il messaggio d'errore (sul `blur` verrà controllato nuovamente):
 
 ```html run autorun height=60
 <style>
@@ -27,21 +27,21 @@ In the example below:
   #error { color: red }
 </style>
 
-Your email please: <input type="email" id="input">
+Inserire la mail: <input type="email" id="input">
 
 <div id="error"></div>
 
 <script>
 *!*input.onblur*/!* = function() {
-  if (!input.value.includes('@')) { // not email
+  if (!input.value.includes('@')) { // non si tratta di una email
     input.classList.add('invalid');
-    error.innerHTML = 'Please enter a correct email.'
+    error.innerHTML = 'Per favore inserire un indirizzo email valido.'
   }
 };
 
 *!*input.onfocus*/!* = function() {
   if (this.classList.contains('invalid')) {
-    // remove the "error" indication, because the user wants to re-enter something
+    // rimuove il messaggio di "errore", in quanto l'utente vuole reinserire qualcosa
     this.classList.remove('invalid');
     error.innerHTML = "";
   }
@@ -49,14 +49,14 @@ Your email please: <input type="email" id="input">
 </script>
 ```
 
-Modern HTML allows us to do many validations using input attributes: `required`, `pattern` and so on. And sometimes they are just what we need. JavaScript can be used when we want more flexibility. Also we could automatically send the changed value to the server if it's correct.
+Il codice HTML moderno, ci permette di eseguire diverse validazioni tramite gli attributi degli input: `required`, `pattern` e così via. E talvolta sono sufficienti per le nostre esigenze. JavaScript può essere usato se vogliamo più flessibilità. Inoltre potremmo voler inviare in automatico il valore al server nel caso sia corretto.
 
 
-## Methods focus/blur
+## I metodi focus/blur
 
-Methods `elem.focus()` and `elem.blur()` set/unset the focus on the element.
+I metodi `elem.focus()` e `elem.blur()` attivano/disattivano il focus su un elemento.
 
-For instance, let's make the visitor unable to leave the input if the value is invalid:
+Per esempio, facciamo in modo che l'utente non possa spostarsi da un input fintanto che il valore sia scorretto:
 
 ```html run autorun height=80
 <style>
@@ -65,16 +65,16 @@ For instance, let's make the visitor unable to leave the input if the value is i
   }
 </style>
 
-Your email please: <input type="email" id="input">
-<input type="text" style="width:220px" placeholder="make email invalid and try to focus here">
+La tua email: <input type="email" id="input">
+<input type="text" style="width:220px" placeholder="scrivi un indirizzo email non valido e prova a spostarti qui">
 
 <script>
   input.onblur = function() {
-    if (!this.value.includes('@')) { // not email
-      // show the error
+    if (!this.value.includes('@')) { // non si tratta di una email
+      // mostra l'errore
       this.classList.add("error");
 *!*
-      // ...and put the focus back
+      // ...e rimette il focus
       input.focus();
 */!*
     } else {
@@ -84,59 +84,59 @@ Your email please: <input type="email" id="input">
 </script>
 ```
 
-It works in all browsers except Firefox ([bug](https://bugzilla.mozilla.org/show_bug.cgi?id=53579)).
+Funziona su tutti i browser tranne che su Firefox ([bug](https://bugzilla.mozilla.org/show_bug.cgi?id=53579)).
 
-If we enter something into the input and then try to use `key:Tab` or click away from the `<input>`, then `onblur` returns the focus back.
+Se inseriamo qualcosa nell'input e proviamo ad usare `key:Tab` o cliccare fuori dall'input `<input>`, `onblur` rimette il focus sull'input.
 
-Please note that we can't "prevent losing focus" by calling `event.preventDefault()` in `onblur`, because `onblur` works *after* the element lost the focus.
+Nota bene che non possiamo "prevenire la perdita del focus" chiamando `event.preventDefault()` su `onblur`, perché `onblur` viene creato *dopo* che l'elemento per il focus.
 
-```warn header="JavaScript-initiated focus loss"
-A focus loss can occur for many reasons.
+```warn header="Perdita del focus creata tramite JavaScript"
+La perdita del focus può avvenire per varie ragioni.
 
-One of them is when the visitor clicks somewhere else. But also JavaScript itself may cause it, for instance:
+Una di queste è quando il visitatore clicca da qualche altra parte. Ma anche JavaScript stesso può causarlo, per esempio:
 
-- An `alert` moves focus to itself, so it causes the focus loss at the element (`blur` event), and when the `alert` is dismissed, the focus comes back (`focus` event).
-- If an element is removed from DOM, then it also causes the focus loss. If it is reinserted later, then the focus doesn't return.
+- Un `alert` sposta il focus su sé stesso, questo causa la perdita del focus sull'elemento (evento `blur`), e quando l'`alert` viene dismesso, il focus ritorna sull'elemento (evento `focus`).
+- La rimozione di un elemento dal DOM, causa essa stessa la perdita del ficus. Nel caso in cui venga reinserito, ovviamente il focus non ritornerà su di esso.
 
-These features sometimes cause `focus/blur` handlers to misbehave -- to trigger when they are not needed.
+Queste caratteristiche causano, nei gestori `focus/blur`, dei comportamenti inattesi -- a scatenarsi quando non richiesto.
 
-The best recipe is to be careful when using these events. If we want to track user-initiated focus-loss, then we should avoid causing it ourselves.
+La pratica migliore è quella di fare attenzione nell'uso di questi eventi. Se vogliamo tenere traccia della perdita del focus causata volontariamente dall'utente, dovremmo evitare di causarla noi stessi.
 ```
-## Allow focusing on any element: tabindex
+## Permettere il focus su ogni elemento: tabindex
 
-By default many elements do not support focusing.
+Di default c'è una varietà di elementi che non supporta il focus.
 
-The list varies a bit between browsers, but one thing is always correct: `focus/blur` support is guaranteed for elements that a visitor can interact with: `<button>`, `<input>`, `<select>`, `<a>` and so on.
+La lista varia leggermente a seconda del browser, ma una cosa è sempre vera: il supporto al `focus/blur` viene garantito per elementi con i quali l'utente può interagire: `<button>`, `<input>`, `<select>`, `<a>` e così via.
 
-On the other hand, elements that exist to format something, such as `<div>`, `<span>`, `<table>` -- are unfocusable by default. The method `elem.focus()` doesn't work on them, and `focus/blur` events are never triggered.
+D'altra parte, gli elementi che esistono per formattare qualcosa, come `<div>`, `<span>`, `<table>` -- di default non sono soggetti al focus. Il metodo `elem.focus()` su di essi non funziona, e gli eventi `focus/blur` non verranno mai scatenati.
 
-This can be changed using HTML-attribute `tabindex`.
+La cosa può essere cambiata attraverso l'uso dell'attributo HTML `tabindex`.
 
-Any element becomes focusable if it has `tabindex`. The value of the attribute is the order number of the element when `key:Tab` (or something like that) is used to switch between them.
+Se possiede `tabindex` ogni elemento può avere il focus. Il valore dell'attributo è l'indice dell'elemento che segue il `key:Tab` (o qualcosa di equivalente) per spostarsi da un elemento a un altro.
 
-That is: if we have two elements, the first has `tabindex="1"`, and the second has `tabindex="2"`, then pressing `key:Tab` while in the first element -- moves the focus into the second one.
+Ossia: se abbiamo due elementi, il primo dei quali ha `tabindex="1"`, ed il secondo ha `tabindex="2"`, premendo `key:Tab` mentre siamo sul primo elemento -- sposterà il focus nel secondo.
 
-The switch order is: elements with `tabindex` from `1` and above go first (in the `tabindex` order), and then elements without `tabindex` (e.g. a regular `<input>`).
+L'ordine di spostamento è: gli elementi con `tabindex` da `1` in sù vanno prima ( nell'ordine `tabindex`), e successivamente gli altri elementi privi di `tabindex` (ad esempio un normale `<input>`).
 
-Elements with matching `tabindex` are switched in the document source order (the default order).
+A parità di `tabindex` andranno spostati nell'ordine del sorgente del documento (l'ordine predefinito).
 
-There are two special values:
+Ci sono due valori speciali:
 
-- `tabindex="0"` puts an element among those without `tabindex`. That is, when we switch elements, elements with `tabindex=0` go after elements with `tabindex ≥ 1`.
+- `tabindex="0"` pone un elemento tra quelli senza `tabindex`. Ossia, quando ci spostiamo tra gli elementi, quelli con `tabindex=0` andranno dopo quelli con `tabindex ≥ 1`.
 
-    Usually it's used to make an element focusable, but keep the default switching order. To make an element a part of the form on par with `<input>`.
+    Solitamente viene usato per permettere il focus su un elemento, ma tenendo conto dell'ordine di cambio predefinito. Per rendere un elemento parte di un form alla pari di`<input>`.
 
-- `tabindex="-1"` allows only programmatic focusing on an element. The `key:Tab` key ignores such elements, but method `elem.focus()` works.
+- `tabindex="-1"` su un elemento, ne permette solamente il focus programmatico. Il tasto `key:Tab` ignora questi elementi, ma il metodo `elem.focus()` funziona.
 
-For instance, here's a list. Click the first item and press `key:Tab`:
+Per esempio, qui abbiamo una lista. Clicca il primo elemento e premi `key:Tab`:
 
 ```html autorun no-beautify
-Click the first item and press Tab. Keep track of the order. Please note that many subsequent Tabs can move the focus out of the iframe in the example.
+Premi il primo elemento e premi Tab. Tieni traccia dell'ordine. Nota bene che  molti Tab consecutivi possono spostare il focus fuori dall'iframe dell'esempio.
 <ul>
-  <li tabindex="1">One</li>
+  <li tabindex="1">Uno</li>
   <li tabindex="0">Zero</li>
-  <li tabindex="2">Two</li>
-  <li tabindex="-1">Minus one</li>
+  <li tabindex="2">Due</li>
+  <li tabindex="-1">Meno uno</li>
 </ul>
 
 <style>
@@ -145,20 +145,20 @@ Click the first item and press Tab. Keep track of the order. Please note that ma
 </style>
 ```
 
-The order is like this: `1 - 2 - 0`. Normally, `<li>` does not support focusing, but `tabindex` full enables it, along with events and styling with `:focus`.
+L'ordine è questo: `1 - 2 - 0`. Normalmente, `<li>` non supporta il focus, ma `tabindex` lo attiva pienamente, rendendolo compatibile con eventi e agli stili di `:focus`.
 
-```smart header="The property `elem.tabIndex` works too"
-We can add `tabindex` from JavaScript by using the `elem.tabIndex` property. That has the same effect.
+```smart header="Funziona anche la proprietà `elem.tabIndex`"
+Possiamo aggiungere `tabindex` da JavaScript usando la proprietà `elem.tabIndex`. La cosa ha lo stesso effetto.
 ```
 
 ## Delegation: focusin/focusout
 
-Events `focus` and `blur` do not bubble.
+Gl eventi `focus` e `blur` non sono soggetti al bubbling.
 
-For instance, we can't put `onfocus` on the `<form>` to highlight it, like this:
+Per esempio, non possiamo mettere `onfocus` sul `<form>` per evidenziarlo, come in questo caso:
 
 ```html autorun height=80
-<!-- on focusing in the form -- add the class -->
+<!-- al focus nel form -- inserisce la classe -->
 <form *!*onfocus="this.className='focused'"*/!*>
   <input type="text" name="name" value="Name">
   <input type="text" name="surname" value="Surname">
@@ -167,13 +167,13 @@ For instance, we can't put `onfocus` on the `<form>` to highlight it, like this:
 <style> .focused { outline: 1px solid red; } </style>
 ```
 
-The example above doesn't work, because when user focuses on an `<input>`, the `focus` event triggers on that input only. It doesn't bubble up. So `form.onfocus` never triggers.
+L'esempio non può funzionare, perché quando un utente pone il focus su un `<input>`, l'evento `focus` viene scatenato solo sull'input. Non va "salendo". Quindi `form.onfocus` non verrà mai generato.
 
-There are two solutions.
+Ci sono due soluzioni.
 
-First, there's a funny historical feature: `focus/blur` do not bubble up, but propagate down on the capturing phase.
+Nella prima soluzione, sfruttiamo una buffa caratteristica storica: `focus/blur` non è soggetta al bubbling, ma propaga in basso nella fase *capturing*.
 
-This will work:
+Questo funziona:
 
 ```html autorun height=80
 <form id="form">
@@ -185,18 +185,18 @@ This will work:
 
 <script>
 *!*
-  // put the handler on capturing phase (last argument true)
+  // pone il gestore nella fase capturing (ultimo argomento impostato a true)
   form.addEventListener("focus", () => form.classList.add('focused'), true);
   form.addEventListener("blur", () => form.classList.remove('focused'), true);
 */!*
 </script>
 ```
 
-Second, there are `focusin` and `focusout` events -- exactly the same as `focus/blur`, but they bubble.
+Per la seconda soluzione, sfruttiamo gli eventi `focusin` e `focusout` -- esattamente lo stesso di `focus/blur`, solo che questi sono soggetti al bubbling.
 
-Note that they must be assigned using `elem.addEventListener`, not `on<event>`.
+Nota bene che devono essere assegnati tramite `elem.addEventListener`, e non con `on<event>`.
 
-So here's another working variant:
+Quindi ecco un'altra variante funzionante:
 
 ```html autorun height=80
 <form id="form">
@@ -214,12 +214,12 @@ So here's another working variant:
 </script>
 ```
 
-## Summary
+## Riepilogo
 
-Events `focus` and `blur` trigger on an element focusing/losing focus.
+Gli eventi `focus` e `blur` vengono generati su un elemento quando si pone/perde il focus su di esso.
 
-Their specials are:
-- They do not bubble. Can use capturing state instead or `focusin/focusout`.
-- Most elements do not support focus by default. Use `tabindex` to make anything focusable.
+Le loro peculiarità sono:
+- Non sono soggetti al bubbling. Si può però ricorrere all'uso dello stato *capturing* oppure di `focusin/focusout`.
+- La maggioranza degli elementi non supporta il focus di default. Si può usare `tabindex` su ogni cosa per attivarne il supporto.
 
-The current focused element is available as `document.activeElement`.
+L'elemento con il focus attualmente attivo è disponibile con `document.activeElement`.
\ No newline at end of file

From b7106d62fe5e5217679d11567062c6a4d41637c4 Mon Sep 17 00:00:00 2001
From: pierangelomiceli <pierangelo.miceli@gmail.com>
Date: Sat, 20 Feb 2021 14:14:17 +0100
Subject: [PATCH 02/18] traduzione task and solutions

---
 .../2-focus-blur/3-editable-div/task.md            |  8 ++++----
 .../2-focus-blur/4-edit-td-click/solution.md       |  8 ++++----
 .../2-focus-blur/4-edit-td-click/task.md           | 14 +++++++-------
 3 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/2-ui/4-forms-controls/2-focus-blur/3-editable-div/task.md b/2-ui/4-forms-controls/2-focus-blur/3-editable-div/task.md
index 8e45bfa86..43e29025c 100644
--- a/2-ui/4-forms-controls/2-focus-blur/3-editable-div/task.md
+++ b/2-ui/4-forms-controls/2-focus-blur/3-editable-div/task.md
@@ -2,12 +2,12 @@ importance: 5
 
 ---
 
-# Editable div
+# Div modificabile
 
-Create a `<div>` that turns into `<textarea>` when clicked.
+Creare un `<div>` che diventa una `<textarea>` al click.
 
-The textarea allows to edit the HTML in the `<div>`.
+La textarea permette di modificare l'HTML nel div `<div>`.
 
-When the user presses `key:Enter` or it loses focus, the `<textarea>` turns back into `<div>`, and its content becomes HTML in `<div>`.
+Quando l'utente preme il tasto `key:Enter` oppure perde il focus, la `<textarea>` ridiventa un `<div>`, ed il suo contenuto diventa un HTML nel `<div>`.
 
 [demo src="solution"]
diff --git a/2-ui/4-forms-controls/2-focus-blur/4-edit-td-click/solution.md b/2-ui/4-forms-controls/2-focus-blur/4-edit-td-click/solution.md
index b5ae45a60..a9ef4258e 100644
--- a/2-ui/4-forms-controls/2-focus-blur/4-edit-td-click/solution.md
+++ b/2-ui/4-forms-controls/2-focus-blur/4-edit-td-click/solution.md
@@ -1,5 +1,5 @@
 
-1. On click -- replace `innerHTML` of the cell by `<textarea>` with same sizes and no border. Can use JavaScript or CSS to set the right size.
-2. Set `textarea.value` to `td.innerHTML`.
-3. Focus on the textarea.
-4. Show buttons OK/CANCEL under the cell, handle clicks on them.
+1. Al click -- sostituire l'`innerHTML` della cella con un `<textarea>` della stessa dimensione e senza bordi. Si può usare JavaScript o i CSS per impostare le dimensioni corrette.
+2. Impostare `textarea.value` con `td.innerHTML`.
+3. Porre il focus nella textarea.
+4. Mostrare i pulsanti OK/CANCEL sotto la cella, e gestire i click su di essi.
diff --git a/2-ui/4-forms-controls/2-focus-blur/4-edit-td-click/task.md b/2-ui/4-forms-controls/2-focus-blur/4-edit-td-click/task.md
index 2cccea020..0365bc1fd 100644
--- a/2-ui/4-forms-controls/2-focus-blur/4-edit-td-click/task.md
+++ b/2-ui/4-forms-controls/2-focus-blur/4-edit-td-click/task.md
@@ -2,15 +2,15 @@ importance: 5
 
 ---
 
-# Edit TD on click
+# Modificare un TD al click
 
-Make table cells editable on click.
+Rendere le celle della tabella modificabili al click.
 
-- On click -- the cell should became "editable" (textarea appears inside), we can change HTML. There should be no resize, all geometry should remain the same.
-- Buttons OK and CANCEL appear below the cell to finish/cancel the editing.
-- Only one cell may be editable at a moment. While a `<td>` is in "edit mode", clicks on other cells are ignored.
-- The table may have many cells. Use event delegation.
+- Al click -- la cella dovrebbe diventare "modificabile" (compare una textarea al suo interno), e possiamo modificarne l'HTML. Non dovrebbe essere possibile il ridimensionamento, tutte le geometria dovrebbero rimanere intatte.
+- I pulsanti OK e CANCEL devono apparire sotto la cella per completare/cancel la modifica.
+- Si può modificare solamente una cella per volta. Mentre un `<td>` è in modalità "edit mode", i click nelle altre celle vengono ignorati.
+- La tabella può avere tante celle. Usare la event delegation.
 
-The demo:
+La demo:
 
 [iframe src="solution" height=400]

From 2e2be581dfd5bd0893b34d34d36a4b267d3c64e5 Mon Sep 17 00:00:00 2001
From: pierangelomiceli <pierangelo.miceli@gmail.com>
Date: Sat, 20 Feb 2021 14:22:02 +0100
Subject: [PATCH 03/18] fine traduzioni task e solutions

---
 .../2-focus-blur/5-keyboard-mouse/solution.md             | 6 +++---
 .../2-focus-blur/5-keyboard-mouse/task.md                 | 8 ++++----
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/2-ui/4-forms-controls/2-focus-blur/5-keyboard-mouse/solution.md b/2-ui/4-forms-controls/2-focus-blur/5-keyboard-mouse/solution.md
index 4d1682176..c318ccefa 100644
--- a/2-ui/4-forms-controls/2-focus-blur/5-keyboard-mouse/solution.md
+++ b/2-ui/4-forms-controls/2-focus-blur/5-keyboard-mouse/solution.md
@@ -1,6 +1,6 @@
 
-We can use `mouse.onclick` to handle the click and make the mouse "moveable" with `position:fixed`, then `mouse.onkeydown` to handle arrow keys.
+Possiamo usare `mouse.onclick` per gestire il click e rendere il mouse "spostabile" con `position:fixed`, quindi `mouse.onkeydown` per gestire i tasti freccia.
 
-The only pitfall is that `keydown` only triggers on elements with focus. So we need to add `tabindex` to the element.  As we're forbidden to change HTML, we can use `mouse.tabIndex` property for that.
+L'unica trappola è che `keydown` viene scaturito solo su elementi con il focus. Quindi dovremmo aggiungere `tabindex`  all'elemento. Visto che ci è vietato modificare l'HTML, possiamo usare la proprietà `mouse.tabIndex` allo scopo.
 
-P.S. We also can replace `mouse.onclick` with `mouse.onfocus`.
+P.S.: Possiamo sostituire `mouse.onclick` con `mouse.onfocus`.
diff --git a/2-ui/4-forms-controls/2-focus-blur/5-keyboard-mouse/task.md b/2-ui/4-forms-controls/2-focus-blur/5-keyboard-mouse/task.md
index fc48c21ff..1886fb3cf 100644
--- a/2-ui/4-forms-controls/2-focus-blur/5-keyboard-mouse/task.md
+++ b/2-ui/4-forms-controls/2-focus-blur/5-keyboard-mouse/task.md
@@ -2,11 +2,11 @@ importance: 4
 
 ---
 
-# Keyboard-driven mouse
+# Mouse guidato dalla tastiera
 
-Focus on the mouse. Then use arrow keys to move it:
+Porre il focus sul puntatore. Quindi usare le frecce per muoverlo:
 
 [demo src="solution"]
 
-P.S. Don't put event handlers anywhere except the `#mouse` element.
-P.P.S. Don't modify HTML/CSS, the approach should be generic and work with any element.
+P.S.: Non mettere i gestori da nessuna parte, tranne che sull'elemento `#mouse`.
+P.P.S.: Nnn fare modifiche su HTML e CSS, l'approccio dovrebbe essere generico e funzionare con qualunque elemento.

From b1e04018c030ccc46c42c432d350d3919a08669c Mon Sep 17 00:00:00 2001
From: pierangelomiceli <pierangelo.miceli@gmail.com>
Date: Sat, 20 Feb 2021 15:22:05 +0100
Subject: [PATCH 04/18] modifica task e solution

---
 .../2-focus-blur/5-keyboard-mouse/solution.md               | 2 +-
 2-ui/4-forms-controls/2-focus-blur/5-keyboard-mouse/task.md | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/2-ui/4-forms-controls/2-focus-blur/5-keyboard-mouse/solution.md b/2-ui/4-forms-controls/2-focus-blur/5-keyboard-mouse/solution.md
index c318ccefa..c010b4fc7 100644
--- a/2-ui/4-forms-controls/2-focus-blur/5-keyboard-mouse/solution.md
+++ b/2-ui/4-forms-controls/2-focus-blur/5-keyboard-mouse/solution.md
@@ -1,5 +1,5 @@
 
-Possiamo usare `mouse.onclick` per gestire il click e rendere il mouse "spostabile" con `position:fixed`, quindi `mouse.onkeydown` per gestire i tasti freccia.
+Possiamo usare `mouse.onclick` per gestire il click e rendere il topo "spostabile" con `position:fixed`, quindi `mouse.onkeydown` per gestire i tasti freccia.
 
 L'unica trappola è che `keydown` viene scaturito solo su elementi con il focus. Quindi dovremmo aggiungere `tabindex`  all'elemento. Visto che ci è vietato modificare l'HTML, possiamo usare la proprietà `mouse.tabIndex` allo scopo.
 
diff --git a/2-ui/4-forms-controls/2-focus-blur/5-keyboard-mouse/task.md b/2-ui/4-forms-controls/2-focus-blur/5-keyboard-mouse/task.md
index 1886fb3cf..310299c5e 100644
--- a/2-ui/4-forms-controls/2-focus-blur/5-keyboard-mouse/task.md
+++ b/2-ui/4-forms-controls/2-focus-blur/5-keyboard-mouse/task.md
@@ -2,11 +2,11 @@ importance: 4
 
 ---
 
-# Mouse guidato dalla tastiera
+# Topo guidato dalla tastiera
 
-Porre il focus sul puntatore. Quindi usare le frecce per muoverlo:
+Porre il focus sul mouse. Quindi usare le frecce per spostarlo:
 
 [demo src="solution"]
 
-P.S.: Non mettere i gestori da nessuna parte, tranne che sull'elemento `#mouse`.
+P.S.: Non mettere i gestori da nessun'altra parte, tranne che sull'elemento `#mouse`.
 P.P.S.: Nnn fare modifiche su HTML e CSS, l'approccio dovrebbe essere generico e funzionare con qualunque elemento.

From 5541bfeb2d35e72c5f5f18cf02ae21a8606e7680 Mon Sep 17 00:00:00 2001
From: pierangelomiceli <pierangelo.miceli@gmail.com>
Date: Sun, 21 Feb 2021 22:32:05 +0100
Subject: [PATCH 05/18] romoso file solution

---
 .../1-form-elements/1-add-select-option/solution.md             | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/2-ui/4-forms-controls/1-form-elements/1-add-select-option/solution.md b/2-ui/4-forms-controls/1-form-elements/1-add-select-option/solution.md
index bc253e8df..80fad3850 100644
--- a/2-ui/4-forms-controls/1-form-elements/1-add-select-option/solution.md
+++ b/2-ui/4-forms-controls/1-form-elements/1-add-select-option/solution.md
@@ -1,4 +1,4 @@
-La soluzione, passo dopo passo:
+The solution, step by step:
 
 ```html run
 <select id="genres">

From 98e6f0e203066d59d1ed1b11dd1433125b59c680 Mon Sep 17 00:00:00 2001
From: pierangelomiceli <pierangelo.miceli@gmail.com>
Date: Sun, 21 Feb 2021 22:33:34 +0100
Subject: [PATCH 06/18] rimosso task.md

---
 .../1-form-elements/1-add-select-option/task.md    | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/2-ui/4-forms-controls/1-form-elements/1-add-select-option/task.md b/2-ui/4-forms-controls/1-form-elements/1-add-select-option/task.md
index ec25033ba..a0e74da57 100644
--- a/2-ui/4-forms-controls/1-form-elements/1-add-select-option/task.md
+++ b/2-ui/4-forms-controls/1-form-elements/1-add-select-option/task.md
@@ -2,9 +2,9 @@ importance: 5
 
 ---
 
-# Aggiungere un elemento option all'elemento select
+# Add an option to select
 
-Abbiamo un `<select>`:
+There's a `<select>`:
 
 ```html
 <select id="genres">
@@ -13,10 +13,10 @@ Abbiamo un `<select>`:
 </select>
 ```
 
-Usare JavaScript per:
+Use JavaScript to:
 
-1. Mostrare il valore ed il testo dell'opzione selezionata.
-2. Aggiungere una option: `<option value="classic">Classic</option>`.
-3. Selezionarla.
+1. Show the value and the text of the selected option.
+2. Add an option: `<option value="classic">Classic</option>`.
+3. Make it selected.
 
-Nota bene, svolgendo il compito correttamente, il tuo alert dovrebbe mostrare `blues`.
+Note, if you've done everything right, your alert should show `blues`.

From bf4e2a62542f61d584027c20ab142371f3474c8e Mon Sep 17 00:00:00 2001
From: pierangelomiceli <pierangelo.miceli@gmail.com>
Date: Sun, 21 Feb 2021 22:41:00 +0100
Subject: [PATCH 07/18] altrofileliminatodallaPR

---
 .../1-form-elements/article.md                | 178 +++++++++---------
 1 file changed, 89 insertions(+), 89 deletions(-)

diff --git a/2-ui/4-forms-controls/1-form-elements/article.md b/2-ui/4-forms-controls/1-form-elements/article.md
index 35c864b70..6c7e18aca 100644
--- a/2-ui/4-forms-controls/1-form-elements/article.md
+++ b/2-ui/4-forms-controls/1-form-elements/article.md
@@ -1,23 +1,23 @@
-# Proprietà dei form e metodi
+# Form properties and methods
 
-I forms e gli elementi control, come `<input>` hanno una serie di eventi e proprietà peculiari.
+Forms and control elements, such as `<input>` have a lot of special properties and events.
 
-Lavorando con i forms sarà molto più comodo quando li avremo imparati.
+Working with forms will be much more convenient when we learn them.
 
-## Navigazione: form and elements
+## Navigation: form and elements
 
-I form del documento sono membri della speciale collezione `document.forms`.
+Document forms are members of the special collection `document.forms`.
 
-Questa è una cosiddetta "named collection": è sia associativa che ordinata. Possiamo usare sia il nome che l'indice nel documento per accedervi.
+That's a so-called "named collection": it's both named and ordered. We can use both the name or the number in the document to get the form.
 
 ```js no-beautify
-document.forms.my - il form con name="my"
-document.forms[0] - il primo form del documento
+document.forms.my - the form with name="my"
+document.forms[0] - the first form in the document
 ```
 
-Quando abbiamo un form, allora qualunque elemento dentro di esso sarà contenuto nella named collection `form.elements`.
+When we have a form, then any element is available in the named collection `form.elements`.
 
-Per esempio:
+For instance:
 
 ```html run height=40
 <form name="my">
@@ -26,19 +26,19 @@ Per esempio:
 </form>
 
 <script>
-  // ottiene il form
+  // get the form
   let form = document.forms.my; // <form name="my"> element
 
-  // ottiene l'elemento
+  // get the element
   let elem = form.elements.one; // <input name="one"> element
 
   alert(elem.value); // 1
 </script>
 ```
 
-Potrebbero esserci elementi multipli con lo stesso nome, ed è una cosa che capita spesso con i radio buttons.
+There may be multiple elements with the same name, that's often the case with radio buttons.
 
-In questo caso `form.elements[name]` sarà una collezione, per esempio:
+In that case `form.elements[name]` is a collection, for instance:
 
 ```html run height=40
 <form>
@@ -57,13 +57,13 @@ alert(ageElems[0]); // [object HTMLInputElement]
 </script>
 ```
 
-Queste proprietà di navigazione non dipendono dalla struttura dei tags. Ogni control element, è irrilevante quanto in profondità sia dentro il form, sarà contenuto ed accessibile da `form.elements`.
+These navigation properties do not depend on the tag structure. All control elements, no matter how deep they are in the form, are available in `form.elements`.
 
 
-````smart header="Fieldsets come \"subforms\""
-Un form può avere uno o più elementi `<fieldset>` all'interno. Questi hanno anche proprietà `elements` che mostrano dei form controls all'interno.
+````smart header="Fieldsets as \"subforms\""
+A form may have one or many `<fieldset>` elements inside it. They also have `elements` property that lists form controls inside them.
 
-Per esempio:
+For instance:
 
 ```html run height=80
 <body>
@@ -81,7 +81,7 @@ Per esempio:
     let fieldset = form.elements.userFields;
     alert(fieldset); // HTMLFieldSetElement
 
-    // possiamo ottenere l'input sia dal nome del form sia dal fieldset
+    // we can get the input by name both from the form and from the fieldset
     alert(fieldset.elements.login == form.elements.login); // true
 */!*
   </script>
@@ -89,14 +89,14 @@ Per esempio:
 ```
 ````
 
-````warn header="Notazione breve: `form.name`"
-C'è una notazione breve: possiamo accedere all'elemento come `form[index/name]`.
+````warn header="Shorter notation: `form.name`"
+There's a shorter notation: we can access the element as `form[index/name]`.
 
-In altre parole, invece di `form.elements.login` possiamo scrivere `form.login`.
+In other words, instead of `form.elements.login` we can write `form.login`.
 
-Funziona ugualmente, ma c'è un piccolo problema: se accediamo a un elemento, e dopo cambia il suo  `name`, allora sarà ancora disponibile attraverso il vecchio nome (ma anche da quello nuovo).
+That also works, but there's a minor issue: if we access an element, and then change its `name`, then it is still available under the old name (as well as under the new one).
 
-È facile capirlo da un esempio:
+That's easy to see in an example:
 
 ```html run height=40
 <form id="form">
@@ -104,34 +104,34 @@ Funziona ugualmente, ma c'è un piccolo problema: se accediamo a un elemento, e
 </form>
 
 <script>
-  alert(form.elements.login == form.login); // true, lo stesso <input>
+  alert(form.elements.login == form.login); // true, the same <input>
 
-  form.login.name = "username"; // cambio del nome dell'input
+  form.login.name = "username"; // change the name of the input
 
-  // form.elements ha aggiornato il nome:
+  // form.elements updated the name:
   alert(form.elements.login); // undefined
   alert(form.elements.username); // input
 
 *!*
-  // form permette entrambi i nomi: sia quello nuovo che quello vecchio
+  // form allows both names: the new one and the old one
   alert(form.username == form.login); // true
 */!*
 </script>
 ```
 
-Solitamente non è un problema, in quanto raramente andiamo a modificare il nome degli elementi dei form.
+That's usually not a problem, because we rarely change names of form elements.
 
 ````
 
 ## Backreference: element.form
 
-Per ogni elemento, il form è disponibile come `element.form`. Quindi un form referenzia tutti gli elementi, e gli elementi referenziano il form.
+For any element, the form is available as `element.form`. So a form references all elements, and elements reference the form.
 
-Ecco un figura:
+Here's the picture:
 
 ![](form-navigation.svg)
 
-Per esempio:
+For instance:
 
 ```html run height=40
 <form id="form">
@@ -149,66 +149,66 @@ Per esempio:
 </script>
 ```
 
-## Elementi del form
+## Form elements
 
-Parliamo un po' dei form controls.
+Let's talk about form controls.
 
-### input e textarea
+### input and textarea
 
-Possiamo accedere ai lori valori tramite `input.value` (string) o `input.checked` (boolean) per i checkbox.
+We can access their value as `input.value` (string) or `input.checked` (boolean) for checkboxes.
 
-Come in questo caso:
+Like this:
 
 ```js
-input.value = "Nuovo valore";
-textarea.value = "Nuovo testo";
+input.value = "New value";
+textarea.value = "New text";
 
-input.checked = true; // for a checkbox o per un radio button
+input.checked = true; // for a checkbox or radio button
 ```
 
-```warn header="Usare `textarea.value`, e non `textarea.innerHTML`"
-Nota bene che sebbene anche `<textarea>...</textarea>` contenga il suo valore come HTML annidato, non dovremmo mai usare `textarea.innerHTML` per accedervi.
+```warn header="Use `textarea.value`, not `textarea.innerHTML`"
+Please note that even though `<textarea>...</textarea>` holds its value as nested HTML, we should never use `textarea.innerHTML` to access it.
 
-Esso conterrà solamente l'HTML che era stato inizialmente impostato nella pagina, e non il valore attuale.
+It stores only the HTML that was initially on the page, not the current value.
 ```
 
-### select ed option
+### select and option
 
-Un elemento `<select>` contiene 3 importanti proprietà:
+A `<select>` element has 3 important properties:
 
-1. `select.options` -- la collezione di sottoelementi `<option>`,
-2. `select.value` -- il *valore* di `<option>` attualmente selezionato,
-3. `select.selectedIndex` -- l'*indice* di `<option>` attualmente selezionato.
+1. `select.options` -- the collection of `<option>` subelements,
+2. `select.value` -- the *value* of the currently selected `<option>`,
+3. `select.selectedIndex` -- the *number* of the currently selected `<option>`.
 
-Forniscono tre modi differenti per impostare un valore per un `<select>`:
+They provide three different ways of setting a value for a `<select>`:
 
-1. Trova il corrispondente elemento `<option>` (ad esempio tra i `select.options`) ed imposta il suo `option.selected` a `true`.
-2. Se conosciamo il nuovo valore: imposta `select.value` al nuovo valore.
-3. Se conosciamo l'indice della nuova opzione: imposta `select.selectedIndex` su quell'indice.
+1. Find the corresponding `<option>` element (e.g. among `select.options`) and set its `option.selected` to `true`.
+2. If we know a new value: set `select.value` to the new value.
+3. If we know the new option number: set `select.selectedIndex` to that number.
 
-Ecco un esempio per tutti e tre i metodi:
+Here is an example of all three methods:
 
 ```html run
 <select id="select">
-  <option value="apple">Mela</option>
-  <option value="pear">Pera</option>
+  <option value="apple">Apple</option>
+  <option value="pear">Pear</option>
   <option value="banana">Banana</option>
 </select>
 
 <script>
-  // tutte e tre le righe di codice fanno la stessa cosa
+  // all three lines do the same thing
   select.options[2].selected = true; 
   select.selectedIndex = 2;
   select.value = 'banana';
-  // nota bene: le options cominciano da indice zero, quindi indice 2 significa la option numero 3.
+  // please note: options start from zero, so index 2 means the 3rd option.
 </script>
 ```
 
-Diversamente da altri controls, `<select>` permette più opzioni alla volta se contiene l'attributo `multiple`. Sebbene questo attributo venga usato raramente.
+Unlike most other controls, `<select>` allows to select multiple options at once if it has `multiple` attribute. This attribute is rarely used though.
 
-Per valori multipli selezionati, usiamo il primo modo per impostare i valori: aggiungere/rimuovere la proprietà `selected` dai sottolementi `<option>`.
+For multiple selected values, use the first way of setting values: add/remove the `selected` property from `<option>` subelements.
 
-Ecco un esempio di come ottenere i valori selezionati da un multi-select:
+Here's an example of how to get selected values from a multi-select:
 
 ```html run
 <select id="select" *!*multiple*/!*>
@@ -218,7 +218,7 @@ Ecco un esempio di come ottenere i valori selezionati da un multi-select:
 </select>
 
 <script>
-  // ottiene tutti i valori selezionati dal multi-select
+  // get all selected values from multi-select
   let selected = Array.from(select.options)
     .filter(option => option.selected)
     .map(option => option.value);
@@ -227,72 +227,72 @@ Ecco un esempio di come ottenere i valori selezionati da un multi-select:
 </script>
 ```
 
-Le specifiche complete dell'elemento `<select>` sono disponibili nelle specifiche <https://html.spec.whatwg.org/multipage/forms.html#the-select-element>.
+The full specification of the `<select>` element is available in the specification <https://html.spec.whatwg.org/multipage/forms.html#the-select-element>.
 
 ### new Option
 
-Nelle specifiche [specification](https://html.spec.whatwg.org/multipage/forms.html#the-option-element) c'è una sintassi breve e carina per creare una elemento  `<option>`:
+In the [specification](https://html.spec.whatwg.org/multipage/forms.html#the-option-element) there's a nice short syntax to create an `<option>` element:
 
 ```js
 option = new Option(text, value, defaultSelected, selected);
 ```
 
-Questa sintassi è opzionale. Possiamo usare `document.createElement('option')` ed impostare gli attributi manualmente. Tuttavia, potrebbe essere breve, quindi ecco i parametri:
+This syntax is optional. We can use `document.createElement('option')` and set attributes manually. Still, it may be shorter, so here are the parameters:
 
-- `text` -- il testo dentro option,
-- `value` -- il valore di option,
-- `defaultSelected` -- se `true`, allora verrà creato l'attributo HTML `selected`,
-- `selected` -- se `true`, allora l'opzione verrà selezionata.
+- `text` -- the text inside the option,
+- `value` -- the option value,
+- `defaultSelected` -- if `true`, then `selected` HTML-attribute is created,
+- `selected` -- if `true`, then the option is selected.
 
-La differenza tra `defaultSelected` e `selected` è che `defaultSelected` imposta l'attributo HTML (che possiamo ottenere usando `option.getAttribute('selected')`, mentre `selected` decide se l'opzione è selezionata o meno.
+The difference between `defaultSelected` and `selected` is that `defaultSelected` sets the HTML-attribute (that we can get using `option.getAttribute('selected')`, while `selected` sets whether the option is selected or not.
 
-In pratica, solitamente possiamo impostare entrambi i valori a `true` o `false` (oppure ometterli, che equivale a `false`).
+In practice, we usually should set both values to `true` or `false` (or omit, that's the same as `false`).
 
-Per esempio, ecco un nuovo elemento option "non selezionato":
+For instance, here's a new "unselected" option:
 
 ```js
-let option = new Option("Testo", "value");
-// crea <option value="value">Testo</option>
+let option = new Option("Text", "value");
+// creates <option value="value">Text</option>
 ```
 
-La stesso elemento option, ma stavolta selezionato:
+The same option, but selected:
 
 ```js
-let option = new Option("Testo", "value", true, true);
+let option = new Option("Text", "value", true, true);
 ```
 
-Gli elementi option hanno delle proprietà:
+Option elements have properties:
 
 `option.selected`
-: Se l'opzione è selezionata.
+: Is the option selected.
 
 `option.index`
-: L'indice dell'opzione in mezzo agli altri elementi option del suo elemento `<select>`.
+: The number of the option among the others in its `<select>`.
 
 `option.text`
-: Il contenuto testuale dell'elemento option (visto dall'utente).
+: Text content of the option (seen by the visitor).
 
-## Riferimenti
+## References
 
 - Specification: <https://html.spec.whatwg.org/multipage/forms.html>.
 
-## Riepilogo
+## Summary
 
-Navigazione dei form:
+Form navigation:
 
 `document.forms`
-: Un form è disponibile come `document.forms[name/index]`.
+: A form is available as `document.forms[name/index]`.
 
 `form.elements`  
-: Gli elementi del form sono disponibili come `form.elements[name/index]`, oppure si può anche solo usare `form[name/index]`. La proprietà `elements` esiste anche per i `<fieldset>`.
+: Form elements are available as `form.elements[name/index]`, or can use just `form[name/index]`. The `elements` property also works for `<fieldset>`.
 
 `element.form`
-: Gli elementi referenziano i loro form nella proprietà `form`.
+: Elements reference their form in the `form` property.
 
-Il valore è disponibile come `input.value`, `textarea.value`, `select.value` etc, o come `input.checked` per i checkbox e radio buttons.
+Value is available as `input.value`, `textarea.value`, `select.value` etc, or `input.checked` for checkboxes and radio buttons.
 
-Per `<select>` possiamo anche ottenere il valore tramite l'indice `select.selectedIndex` o attraverso la collezione di options `select.options`.
+For `<select>` we can also get the value by the index `select.selectedIndex` or through the options collection `select.options`.
 
-Questi sono le basi da cui partire con i form. Incontreremo molti esempi più avanti nel tutorial.
+These are the basics to start working with forms. We'll meet many examples further in the tutorial.
 
-Nel prossimo capitolo affronteremo gli eventi `focus` e `blur` che possono avvenire per qualunque evento, ma sono maggiormente gestiti nei form.
+In the next chapter we'll cover `focus` and `blur` events that may occur on any element, but are mostly handled on forms.

From 7b0106b7e40b0ba9d98756353e07b1cab1dd1e9d Mon Sep 17 00:00:00 2001
From: pierangelomiceli <pierangelo.miceli@gmail.com>
Date: Tue, 23 Feb 2021 21:58:28 +0100
Subject: [PATCH 08/18] Update 2-ui/4-forms-controls/2-focus-blur/article.md

Co-authored-by: Andrea  <45577511+longo-andrea@users.noreply.github.com>
---
 2-ui/4-forms-controls/2-focus-blur/article.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/2-ui/4-forms-controls/2-focus-blur/article.md b/2-ui/4-forms-controls/2-focus-blur/article.md
index 6c331898e..910964f2d 100644
--- a/2-ui/4-forms-controls/2-focus-blur/article.md
+++ b/2-ui/4-forms-controls/2-focus-blur/article.md
@@ -4,7 +4,7 @@ Un elemento riceve il focus sia quando l'utente ci clicca sopra, sia quando usa
 
 Porre il focus su un elemento in genere significa: "preparati ad accettare il dato qui", quindi è questo il momento in cui possiamo eseguire il codice per inizializzare la funzionalità richiesta.
 
-Il momento della perdita del focus ("blur") può essere ancora più importante. Si concretizza quando un utente clicca da qualche altra parte o preme il tasto `key:Tab` per andare al prossimo campo del form, ma ci sono altri modi per farlo.
+Il momento della perdita del focus ("blur") può essere ancora più importante. Si concretizza quando un utente clicca da qualche altra parte o preme il tasto `key:Tab` per spostarsi al prossimo campo del form, ma ci sono altri modi per farlo.
 
 Perdere il focus generalmente significa: "il dato è stato inserito", quindi possiamo eseguire il codice per controllarlo oppure salvarlo sul server e così via.
 
@@ -222,4 +222,4 @@ Le loro peculiarità sono:
 - Non sono soggetti al bubbling. Si può però ricorrere all'uso dello stato *capturing* oppure di `focusin/focusout`.
 - La maggioranza degli elementi non supporta il focus di default. Si può usare `tabindex` su ogni cosa per attivarne il supporto.
 
-L'elemento con il focus attualmente attivo è disponibile con `document.activeElement`.
\ No newline at end of file
+L'elemento con il focus attualmente attivo è disponibile con `document.activeElement`.

From 181f8aff61415b5498a2f11b008874913ff571d5 Mon Sep 17 00:00:00 2001
From: pierangelomiceli <pierangelo.miceli@gmail.com>
Date: Tue, 23 Feb 2021 21:58:38 +0100
Subject: [PATCH 09/18] Update 2-ui/4-forms-controls/2-focus-blur/article.md

Co-authored-by: Andrea  <45577511+longo-andrea@users.noreply.github.com>
---
 2-ui/4-forms-controls/2-focus-blur/article.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/2-ui/4-forms-controls/2-focus-blur/article.md b/2-ui/4-forms-controls/2-focus-blur/article.md
index 910964f2d..26f686281 100644
--- a/2-ui/4-forms-controls/2-focus-blur/article.md
+++ b/2-ui/4-forms-controls/2-focus-blur/article.md
@@ -14,7 +14,7 @@ Ci sono delle peculiarità importanti da considerare quando si lavora con gli ev
 
 L'evento `focus` viene chiamato quando si entra dentro un elemento (focusing), e `blur` -- quando l'elemento perde il focus.
 
-Ora proviamoli per la validazione di un campo di input.
+Proviamo questi due eventi per la validazione di un campo di input.
 
 Nell'esempio seguente:
 

From c24bf0860ed0b5aa5a5faa672687337e819ebcb1 Mon Sep 17 00:00:00 2001
From: pierangelomiceli <pierangelo.miceli@gmail.com>
Date: Tue, 23 Feb 2021 21:58:50 +0100
Subject: [PATCH 10/18] Update 2-ui/4-forms-controls/2-focus-blur/article.md

Co-authored-by: Andrea  <45577511+longo-andrea@users.noreply.github.com>
---
 2-ui/4-forms-controls/2-focus-blur/article.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/2-ui/4-forms-controls/2-focus-blur/article.md b/2-ui/4-forms-controls/2-focus-blur/article.md
index 26f686281..5ae40358b 100644
--- a/2-ui/4-forms-controls/2-focus-blur/article.md
+++ b/2-ui/4-forms-controls/2-focus-blur/article.md
@@ -88,7 +88,7 @@ Funziona su tutti i browser tranne che su Firefox ([bug](https://bugzilla.mozill
 
 Se inseriamo qualcosa nell'input e proviamo ad usare `key:Tab` o cliccare fuori dall'input `<input>`, `onblur` rimette il focus sull'input.
 
-Nota bene che non possiamo "prevenire la perdita del focus" chiamando `event.preventDefault()` su `onblur`, perché `onblur` viene creato *dopo* che l'elemento per il focus.
+Nota bene che non possiamo "prevenire la perdita del focus" chiamando `event.preventDefault()` su `onblur`, poiché `onblur` viene creato *dopo* che l'elemento ha perso il focus.
 
 ```warn header="Perdita del focus creata tramite JavaScript"
 La perdita del focus può avvenire per varie ragioni.

From b1a95b9b09ed9d2c0daddd0fa4d649fce0fe57df Mon Sep 17 00:00:00 2001
From: pierangelomiceli <pierangelo.miceli@gmail.com>
Date: Tue, 23 Feb 2021 21:59:01 +0100
Subject: [PATCH 11/18] Update 2-ui/4-forms-controls/2-focus-blur/article.md

Co-authored-by: Andrea  <45577511+longo-andrea@users.noreply.github.com>
---
 2-ui/4-forms-controls/2-focus-blur/article.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/2-ui/4-forms-controls/2-focus-blur/article.md b/2-ui/4-forms-controls/2-focus-blur/article.md
index 5ae40358b..47cd61805 100644
--- a/2-ui/4-forms-controls/2-focus-blur/article.md
+++ b/2-ui/4-forms-controls/2-focus-blur/article.md
@@ -104,7 +104,7 @@ La pratica migliore è quella di fare attenzione nell'uso di questi eventi. Se v
 ```
 ## Permettere il focus su ogni elemento: tabindex
 
-Di default c'è una varietà di elementi che non supporta il focus.
+Di default ci sono una varietà di elementi che non supportano il focus.
 
 La lista varia leggermente a seconda del browser, ma una cosa è sempre vera: il supporto al `focus/blur` viene garantito per elementi con i quali l'utente può interagire: `<button>`, `<input>`, `<select>`, `<a>` e così via.
 

From 7c97ed6563f32836edf246a179bf78b8b85cfd8e Mon Sep 17 00:00:00 2001
From: pierangelomiceli <pierangelo.miceli@gmail.com>
Date: Tue, 23 Feb 2021 21:59:10 +0100
Subject: [PATCH 12/18] Update 2-ui/4-forms-controls/2-focus-blur/article.md

Co-authored-by: Andrea  <45577511+longo-andrea@users.noreply.github.com>
---
 2-ui/4-forms-controls/2-focus-blur/article.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/2-ui/4-forms-controls/2-focus-blur/article.md b/2-ui/4-forms-controls/2-focus-blur/article.md
index 47cd61805..acb1c4a48 100644
--- a/2-ui/4-forms-controls/2-focus-blur/article.md
+++ b/2-ui/4-forms-controls/2-focus-blur/article.md
@@ -220,6 +220,6 @@ Gli eventi `focus` e `blur` vengono generati su un elemento quando si pone/perde
 
 Le loro peculiarità sono:
 - Non sono soggetti al bubbling. Si può però ricorrere all'uso dello stato *capturing* oppure di `focusin/focusout`.
-- La maggioranza degli elementi non supporta il focus di default. Si può usare `tabindex` su ogni cosa per attivarne il supporto.
+- La maggioranza degli elementi non supporta il focus di default. Si può usare `tabindex` su ogni elemento per attivarne il supporto.
 
 L'elemento con il focus attualmente attivo è disponibile con `document.activeElement`.

From 7a302c6cc61911e36bab93d33d18664e8857e810 Mon Sep 17 00:00:00 2001
From: pierangelomiceli <pierangelo.miceli@gmail.com>
Date: Tue, 23 Feb 2021 21:59:18 +0100
Subject: [PATCH 13/18] Update
 2-ui/4-forms-controls/2-focus-blur/3-editable-div/task.md

Co-authored-by: Andrea  <45577511+longo-andrea@users.noreply.github.com>
---
 2-ui/4-forms-controls/2-focus-blur/3-editable-div/task.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/2-ui/4-forms-controls/2-focus-blur/3-editable-div/task.md b/2-ui/4-forms-controls/2-focus-blur/3-editable-div/task.md
index 43e29025c..7602a6b50 100644
--- a/2-ui/4-forms-controls/2-focus-blur/3-editable-div/task.md
+++ b/2-ui/4-forms-controls/2-focus-blur/3-editable-div/task.md
@@ -8,6 +8,6 @@ Creare un `<div>` che diventa una `<textarea>` al click.
 
 La textarea permette di modificare l'HTML nel div `<div>`.
 
-Quando l'utente preme il tasto `key:Enter` oppure perde il focus, la `<textarea>` ridiventa un `<div>`, ed il suo contenuto diventa un HTML nel `<div>`.
+Quando l'utente preme il tasto `key:Enter` oppure perde il focus, la `<textarea>` ritorna ad essere un `<div>`, ed il suo contenuto diventa un HTML nel `<div>`.
 
 [demo src="solution"]

From c00263ca542548273adde0017547e797a9b5faf0 Mon Sep 17 00:00:00 2001
From: pierangelomiceli <pierangelo.miceli@gmail.com>
Date: Tue, 23 Feb 2021 21:59:26 +0100
Subject: [PATCH 14/18] Update
 2-ui/4-forms-controls/2-focus-blur/4-edit-td-click/task.md

Co-authored-by: Andrea  <45577511+longo-andrea@users.noreply.github.com>
---
 2-ui/4-forms-controls/2-focus-blur/4-edit-td-click/task.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/2-ui/4-forms-controls/2-focus-blur/4-edit-td-click/task.md b/2-ui/4-forms-controls/2-focus-blur/4-edit-td-click/task.md
index 0365bc1fd..2fa28c074 100644
--- a/2-ui/4-forms-controls/2-focus-blur/4-edit-td-click/task.md
+++ b/2-ui/4-forms-controls/2-focus-blur/4-edit-td-click/task.md
@@ -6,7 +6,7 @@ importance: 5
 
 Rendere le celle della tabella modificabili al click.
 
-- Al click -- la cella dovrebbe diventare "modificabile" (compare una textarea al suo interno), e possiamo modificarne l'HTML. Non dovrebbe essere possibile il ridimensionamento, tutte le geometria dovrebbero rimanere intatte.
+- Al click -- la cella dovrebbe diventare "modificabile" (compare una textarea al suo interno), e possiamo modificarne l'HTML. Non dovrebbe essere possibile il ridimensionamento, tutte le geometrie dovrebbero rimanere intatte.
 - I pulsanti OK e CANCEL devono apparire sotto la cella per completare/cancel la modifica.
 - Si può modificare solamente una cella per volta. Mentre un `<td>` è in modalità "edit mode", i click nelle altre celle vengono ignorati.
 - La tabella può avere tante celle. Usare la event delegation.

From f91b43160cf6b37fd37dc862f25e5dff449b6ec0 Mon Sep 17 00:00:00 2001
From: pierangelomiceli <pierangelo.miceli@gmail.com>
Date: Tue, 23 Feb 2021 21:59:33 +0100
Subject: [PATCH 15/18] Update
 2-ui/4-forms-controls/2-focus-blur/5-keyboard-mouse/task.md

Co-authored-by: Andrea  <45577511+longo-andrea@users.noreply.github.com>
---
 2-ui/4-forms-controls/2-focus-blur/5-keyboard-mouse/task.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/2-ui/4-forms-controls/2-focus-blur/5-keyboard-mouse/task.md b/2-ui/4-forms-controls/2-focus-blur/5-keyboard-mouse/task.md
index 310299c5e..e4c22c114 100644
--- a/2-ui/4-forms-controls/2-focus-blur/5-keyboard-mouse/task.md
+++ b/2-ui/4-forms-controls/2-focus-blur/5-keyboard-mouse/task.md
@@ -9,4 +9,4 @@ Porre il focus sul mouse. Quindi usare le frecce per spostarlo:
 [demo src="solution"]
 
 P.S.: Non mettere i gestori da nessun'altra parte, tranne che sull'elemento `#mouse`.
-P.P.S.: Nnn fare modifiche su HTML e CSS, l'approccio dovrebbe essere generico e funzionare con qualunque elemento.
+P.P.S.: Non fare modifiche su HTML e CSS, l'approccio dovrebbe essere generico e funzionare con qualunque elemento.

From 5a51d9c757765d67ee28b6cea97744683851fb21 Mon Sep 17 00:00:00 2001
From: pierangelomiceli <pierangelo.miceli@gmail.com>
Date: Tue, 23 Feb 2021 21:59:45 +0100
Subject: [PATCH 16/18] Update 2-ui/4-forms-controls/2-focus-blur/article.md

Co-authored-by: Andrea  <45577511+longo-andrea@users.noreply.github.com>
---
 2-ui/4-forms-controls/2-focus-blur/article.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/2-ui/4-forms-controls/2-focus-blur/article.md b/2-ui/4-forms-controls/2-focus-blur/article.md
index acb1c4a48..057963167 100644
--- a/2-ui/4-forms-controls/2-focus-blur/article.md
+++ b/2-ui/4-forms-controls/2-focus-blur/article.md
@@ -12,7 +12,7 @@ Ci sono delle peculiarità importanti da considerare quando si lavora con gli ev
 
 ## Gli eventi focus/blur
 
-L'evento `focus` viene chiamato quando si entra dentro un elemento (focusing), e `blur` -- quando l'elemento perde il focus.
+L'evento `focus` viene emesso quando si entra dentro un elemento (focusing), e `blur` -- quando l'elemento perde il focus.
 
 Proviamo questi due eventi per la validazione di un campo di input.
 

From b86107f8d3acea07961a26a336ce0dea1295edae Mon Sep 17 00:00:00 2001
From: pierangelomiceli <pierangelo.miceli@gmail.com>
Date: Tue, 23 Feb 2021 21:59:56 +0100
Subject: [PATCH 17/18] Update 2-ui/4-forms-controls/2-focus-blur/article.md

Co-authored-by: Andrea  <45577511+longo-andrea@users.noreply.github.com>
---
 2-ui/4-forms-controls/2-focus-blur/article.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/2-ui/4-forms-controls/2-focus-blur/article.md b/2-ui/4-forms-controls/2-focus-blur/article.md
index 057963167..901c55aed 100644
--- a/2-ui/4-forms-controls/2-focus-blur/article.md
+++ b/2-ui/4-forms-controls/2-focus-blur/article.md
@@ -96,7 +96,7 @@ La perdita del focus può avvenire per varie ragioni.
 Una di queste è quando il visitatore clicca da qualche altra parte. Ma anche JavaScript stesso può causarlo, per esempio:
 
 - Un `alert` sposta il focus su sé stesso, questo causa la perdita del focus sull'elemento (evento `blur`), e quando l'`alert` viene dismesso, il focus ritorna sull'elemento (evento `focus`).
-- La rimozione di un elemento dal DOM, causa essa stessa la perdita del ficus. Nel caso in cui venga reinserito, ovviamente il focus non ritornerà su di esso.
+- La rimozione di un elemento dal DOM, causa essa stessa la perdita del focus. Nel caso in cui venga reinserito, ovviamente il focus non ritornerà su di esso.
 
 Queste caratteristiche causano, nei gestori `focus/blur`, dei comportamenti inattesi -- a scatenarsi quando non richiesto.
 

From 6bc7ad934ec403b544d43917c25bdbae5acfce78 Mon Sep 17 00:00:00 2001
From: pierangelomiceli <pierangelo.miceli@gmail.com>
Date: Wed, 24 Feb 2021 01:20:53 +0100
Subject: [PATCH 18/18] modifica manuale suggerimenti a.longo

---
 2-ui/4-forms-controls/2-focus-blur/article.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/2-ui/4-forms-controls/2-focus-blur/article.md b/2-ui/4-forms-controls/2-focus-blur/article.md
index 901c55aed..706abc33a 100644
--- a/2-ui/4-forms-controls/2-focus-blur/article.md
+++ b/2-ui/4-forms-controls/2-focus-blur/article.md
@@ -1,6 +1,6 @@
 # Focusing: focus/blur
 
-Un elemento riceve il focus sia quando l'utente ci clicca sopra, sia quando usa il tasto `key:Tab` della tastiera. Esiste anche un attributo HTML `autofocus` che mette il focus dentro un elemento di default al caricamento della pagina ed anche altri modi per ottenere il focus.
+Un elemento riceve il focus sia quando l'utente ci clicca sopra, sia quando usa il tasto `key:Tab` della tastiera. Esiste anche un attributo HTML `autofocus` che imposta il focus in un elemento di default al caricamento della pagina ed anche altri modi per ottenere il focus.
 
 Porre il focus su un elemento in genere significa: "preparati ad accettare il dato qui", quindi è questo il momento in cui possiamo eseguire il codice per inizializzare la funzionalità richiesta.