Merge pull request #301 from longo-andrea/review/browser-events

longo-andrea · web-flow · commit 5b9ffea7faf3 · 2021-04-23T20:56:45.000+02:00
Review Introduction to browser events
diff --git a/2-ui/2-events/01-introduction-browser-events/01-hide-other/solution.view/index.html b/2-ui/2-events/01-introduction-browser-events/01-hide-other/solution.view/index.html
@@ -12,8 +12,8 @@
   <div id="text">Text</div>
 
   <script>
-    // Here it doesn't matter how we hide the text,
-    // could also use style.display:
+    // In questo caso non ha importanza come nascondiamo il testo,
+    // potremmo anche usare style.display:
     document.getElementById('hider').onclick = function() {
       document.getElementById('text').hidden = true;
     }
diff --git a/2-ui/2-events/01-introduction-browser-events/02-hide-self-onclick/solution.md b/2-ui/2-events/01-introduction-browser-events/02-hide-self-onclick/solution.md
@@ -1,4 +1,4 @@
-Qui possiamo usare `this` nel gestore per fare riferimento all'"elemento stesso":
+Qui potete usare `this` nel gestore per fare riferimento all'"elemento stesso":
 
 ```html run height=50
 <input type="button" onclick="this.hidden=true" value="Clicca per nascondere">
diff --git a/2-ui/2-events/01-introduction-browser-events/02-hide-self-onclick/task.md b/2-ui/2-events/01-introduction-browser-events/02-hide-self-onclick/task.md
@@ -4,7 +4,7 @@ importance: 5
 
 # Nascondere sé stesso
 
-Creare un pulsante che nasconde sé stesso al click.
+Create un pulsante che nasconde sé stesso al click.
 
 ```online
 Come questo:
diff --git a/2-ui/2-events/01-introduction-browser-events/04-move-ball-field/solution.view/index.html b/2-ui/2-events/01-introduction-browser-events/04-move-ball-field/solution.view/index.html
@@ -39,29 +39,29 @@
   <script>
     field.onclick = function(event) {
 
-      // window-relative field coordinates
+      // coordinate del campo relative alla finestra
       let fieldCoords = this.getBoundingClientRect();
 
-      // the ball has position:absolute, the field: position:relative
-      // so ball coordinates are relative to the field inner left-upper corner
+      // la palla ha come position:absolute, il campo: position:relative
+      // quindi le coordinate della palla sono relative all'angolo in alto a sinistra del campo
       let ballCoords = {
         top: event.clientY - fieldCoords.top - field.clientTop - ball.clientHeight / 2,
         left: event.clientX - fieldCoords.left - field.clientLeft - ball.clientWidth / 2
       };
 
-      // prevent crossing the top field boundary
+      // preveniamo il superamento del limite superiore del campo
       if (ballCoords.top < 0) ballCoords.top = 0;
 
-      // prevent crossing the left field boundary
+      // preveniamo il superamento del limite sinistro del campo
       if (ballCoords.left < 0) ballCoords.left = 0;
 
 
-      // // prevent crossing the right field boundary
+      // preveniamo il superamento del limite destro del campo
       if (ballCoords.left + ball.clientWidth > field.clientWidth) {
         ballCoords.left = field.clientWidth - ball.clientWidth;
       }
 
-      // prevent crossing the bottom field boundary
+      // preveniamo il superamento del limite inferiore del campo
       if (ballCoords.top + ball.clientHeight > field.clientHeight) {
         ballCoords.top = field.clientHeight - ball.clientHeight;
       }
diff --git a/2-ui/2-events/01-introduction-browser-events/06-hide-message/solution.view/index.html b/2-ui/2-events/01-introduction-browser-events/06-hide-message/solution.view/index.html
@@ -30,7 +30,7 @@ <h3>Cat</h3>
 
     for(let pane of panes) {
       pane.insertAdjacentHTML("afterbegin", '<button class="remove-button">[x]</button>');
-      // button becomes the first child of pane
+      // il bottone diventa il primo figlio di pane
       pane.firstChild.onclick = () => pane.remove();
     }
   </script>
diff --git a/2-ui/2-events/01-introduction-browser-events/06-hide-message/task.md b/2-ui/2-events/01-introduction-browser-events/06-hide-message/task.md
@@ -2,9 +2,9 @@ importance: 5
 
 ---
 
-# Aggiungere un pulsante di chiusura
+# Aggiungete un pulsante di chiusura
 
-Abbiamo una lista di messaggi.
+Avete una lista di messaggi.
 
 Aggiungete tramite JavaScript un pulsante di chiusura nell'angolo in alto a destra di ogni messaggio.
 
diff --git a/2-ui/2-events/01-introduction-browser-events/07-carousel/source.view/index.html b/2-ui/2-events/01-introduction-browser-events/07-carousel/source.view/index.html
@@ -7,7 +7,7 @@
 
 <body>
 
-  <!-- create your markup and styles -->
+  <!-- definite il markup e lo stile -->
 
   <button class="arrow">⇦</button>
   <button class="arrow">⇨</button>
@@ -28,16 +28,16 @@
 
 
   <script>
-    // label the images to visually track them, just for convenience,
-    // this code can be removed
+    // etichettiamo le immagini per poterle tracciare visualmente, per comodità,
+    // questo codice può essere rimosso
     let i = 1;
     for(let li of carousel.querySelectorAll('li')) {
       li.style.position = 'relative';
       li.insertAdjacentHTML('beforeend', `<span style="position:absolute;left:0;top:0">${i}</span>`);
       i++;
     }
 
-    // ...your code to make carousel alive!
+    // ...il vostro codice per rendere vivo il carosello!
   </script>
 
 </body>

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		-Qui possiamo usare `this` nel gestore per fare riferimento all'"elemento stesso":
	`1`	+Qui potete usare `this` nel gestore per fare riferimento all'"elemento stesso":
`2`	`2`
`3`	`3`	```html run height=50
`4`	`4`	`<input type="button" onclick="this.hidden=true" value="Clicca per nascondere">`
Original file line number	Diff line number	Diff line change
`@@ -30,7 +30,7 @@ <h3>Cat</h3>`
`30`	`30`
`31`	`31`	`for(let pane of panes) {`
`32`	`32`	`pane.insertAdjacentHTML("afterbegin", '<button class="remove-button">[x]</button>');`
`33`		`- // button becomes the first child of pane`
	`33`	`+ // il bottone diventa il primo figlio di pane`
`34`	`34`	`pane.firstChild.onclick = () => pane.remove();`
`35`	`35`	`}`
`36`	`36`	`</script>`