Skip to content

Review Introduction to browser events #301

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
longo-andrea merged 2 commits into from
Apr 23, 2021
Merged

Review Introduction to browser events #301

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7e7d81e
Review Introduction to browser events
Apr 19, 2021
7e923a2
Update index.html
longo-andrea Apr 23, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions 2-ui/2-events/01-introduction-browser-events/01-hide-other/solution.view/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down
2 changes: 1 addition & 1 deletion 2-ui/2-events/01-introduction-browser-events/02-hide-self-onclick/solution.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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">
Expand Down
2 changes: 1 addition & 1 deletion 2-ui/2-events/01-introduction-browser-events/02-hide-self-onclick/task.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand Down
14 changes: 7 additions & 7 deletions 2-ui/2-events/01-introduction-browser-events/04-move-ball-field/solution.view/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down
2 changes: 1 addition & 1 deletion 2-ui/2-events/01-introduction-browser-events/06-hide-message/solution.view/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
4 changes: 2 additions & 2 deletions 2-ui/2-events/01-introduction-browser-events/06-hide-message/task.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.

Expand Down
8 changes: 4 additions & 4 deletions 2-ui/2-events/01-introduction-browser-events/07-carousel/source.view/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@

<body>

<!-- create your markup and styles -->
<!-- definite il markup e lo stile -->

<button class="arrow">⇦</button>
<button class="arrow">⇨</button>
Expand All @@ -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>
Expand Down