javascript-tutorial · longo-andrea · Feb 28, 2021 · Feb 20, 2021 · Feb 20, 2021 · Feb 20, 2021
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
@@ -1,4 +1,4 @@
-La soluzione, passo dopo passo:
+The solution, step by step:
 
 ```html run
 <select id="genres">

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
@@ -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`.
diff --git 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, questi saranno molto comodi quando li avremo imparati.
 
 ## Navigazione: form e 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 tutti gli elementi saranno contenuti nella 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>
@@ -92,46 +92,46 @@ Per esempio:
 ````warn header="Notazione breve: `form.name`"
 Esiste una notazione breve: possiamo accedere all'elemento come `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, che in successivamente cambia il suo `name`, questo sarà ancora accessibile sia attraverso il vecchio nome, ma anche tramite quello nuovo.
 
-È facile capirlo da un esempio:
+That's easy to see in an example:
 
 ```html run height=40
 <form id="form">
   <input name="login">
 </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.
 
 Come possiamo vedere in figura:
 
 ![](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; // per una checkbox o un radio button
 ```
 
 ```warn header="Usare `textarea.value`, e non `textarea.innerHTML`"
 Nota bene che, nonostante anche `<textarea>...</textarea>` contenga il suo valore come HTML annidato, non dovremmo mai usare `textarea.innerHTML` per accedervi.
 
-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 sottoelementi `<option>`.
 
-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,7 +227,7 @@ 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
 
@@ -237,62 +237,64 @@ Nelle specifiche [specification](https://html.spec.whatwg.org/multipage/forms.ht
 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` definisce lo stato della selezione (se è selezionata o meno).
 
-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, più semplicemente con `form[name/index]`. La proprietà `elements` esiste anche per i `<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`.
 
 Queste sono le basi da cui partire con i form. Incontreremo molti esempi più avanti nel 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.
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
@@ -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>` ritorna ad essere 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
@@ -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.