easy-to-read text

docs/extras/glossario.md

@@ -1,5 +1,5 @@
 ---
-sidebar_position: 2
+sidebar_position: 4
 ---
 
 # Glossario

docs/extras/progetto-finale-extra/_category_.json

@@ -0,0 +1,7 @@
+{
+  "label": "Progetto Finale Extra",
+  "position": 1,
+  "link": {
+    "type": "generated-index"
+  }
+}

docs/extras/progetto-finale-extra/example.md

@@ -0,0 +1,13 @@
+---
+sidebar_position: 5
+---
+
+# Esempio
+
+Ecco un esempio di come potrebbe essere sviluppato il progetto finale.
+
+<iframe height="692.8828125" width="100%" scrolling="no" title="Javascript from scratch | Progetto Finale" src="https://codepen.io/ludovicobesana/embed/abarqKP?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
+  See the Pen <a href="https://codepen.io/ludovicobesana/pen/abarqKP">
+  Javascript from scratch | Progetto Finale</a> by Ludovico Besana (<a href="https://codepen.io/ludovicobesana">@ludovicobesana</a>)
+  on <a href="https://codepen.io">CodePen</a>.
+</iframe>

docs/extras/progetto-finale-extra/livepreview.md

@@ -0,0 +1,31 @@
+---
+sidebar_position: 1
+---
+
+# Live Preview
+
+## Installa Live Preview 
+
+**Step 1:** Apri Visual Studio Code sul tuo computer.
+
+**Step 2:** Nella barra laterale sinistra, trova l'icona delle estensioni (simbolo a forma di quadratino con degli angoli arrotondati) e fai clic su di essa.
+
+**Step 3:** Nella barra di ricerca in alto, digita "Live Preview" e premi il tasto Invio. Dovrebbe apparirti il plugin "Live Preview" tra i risultati di ricerca.
+
+**Step 4:** Clicca sul pulsante "Install" accanto al plugin "Live Preview". Visual Studio Code inizierà a scaricare e installare il plugin.
+
+![Live Preview Extension](./img/live-preview.png)
+
+**Step 5:** Dopo aver completato l'installazione, Visual Studio Code ti chiederà di riavviare il programma. Fai clic su "Restart" per riavviare Visual Studio Code.
+
+**Step 6:** Dopo il riavvio di Visual Studio Code, apri il file HTML che desideri visualizzare in anteprima in tempo reale. Fai clic con il pulsante destro del mouse sul file HTML e seleziona "Open with Live Preview". Dovrebbe aprirsi una finestra con la visualizzazione in anteprima del tuo file HTML.
+
+![Live Preview](./img/livepreview-installed.png)
+
+
+**Ben fatto! 🎉** 
+
+Ora puoi visualizzare in tempo reale le modifiche apportate ai tuoi file HTML senza dover salvare e ricaricare continuamente la pagina.
+
+
+

docs/intro.md

@@ -8,11 +8,10 @@ Benvenut* al nostro corso pratico su **JavaScript**!
 
 In questo bootcamp, imparerai a programmare in JavaScript e ad utilizzarlo per creare applicazioni web dinamiche.
 
-Questo bootcamp di un giorno è stato progettato per **aiutare le donne a conoscere il mondo di JavaScript**, il linguaggio di programmazione più utilizzato al mondo. Imparerai le basi della programmazione e avrai un'introduzione alla tecnologia JavaScript attuale. Costruirai un'interfaccia web interattiva utilizzando JavaScript, HTML e CSS. 
+Questo bootcamp di un giorno è stato progettato per aiutare donne (e non solo) a **conoscere il mondo di JavaScript**, il linguaggio di programmazione più utilizzato al mondo. Imparerai le basi della programmazione e avrai un'introduzione alla tecnologia JavaScript attuale. Costruirai un'interfaccia web interattiva utilizzando JavaScript, HTML e CSS.
 
-Durante il bootcamp potrai anche conoscere nuove persone ed essere supportato da mentor esperti che ti guideranno durante tutta la giornata! Completamente gratuito e aperto a tutte le persone, inoltre **non è richiesta** alcuna conoscenza pregressa di programmazione.
+Durante il bootcamp potrai anche conoscere nuove persone ed essere supportat* da mentor espert* che ti guideranno durante tutta la giornata! Completamente gratuito e aperto a tutte le persone, inoltre **non è richiesta** alcuna conoscenza pregressa di programmazione.
 
-L'agenda include un'introduzione a JavaScript, elementi di base di JavaScript, condizioni e cicli, funzioni, oggetti e un progetto finale. 
-**Il bootcamp si concluderà con la presentazione dei progetti finali.**
+L'agenda include un'introduzione a JavaScript, elementi di base di JavaScript, condizioni e cicli, funzioni, oggetti e un progetto finale. **Il bootcamp si concluderà con la presentazione dei progetti finali.**
 
 Unisciti a noi e inizia il tuo viaggio nel mondo entusiasmante della programmazione JavaScript!

docs/javascript-i/elementi-di-base.mdx

@@ -7,11 +7,18 @@ sidebar_position: 2
 Argomenti: DOM, Variabili e Operatori
 
 ## Intro
-JavaScript è un linguaggio a tipizzazione dinamica, il che significa che non è necessario specificare il tipo di dato quando si dichiara una variabile. Ciò lo rende molto flessibile e facile da usare per i programmatori.
+JavaScript è un linguaggio che ti permette di dare istruzioni al tuo browser web. Con queste istruzioni, puoi far fare al browser un sacco di cose interessanti, come:
 
-## DOM
+**Modificare il contenuto di una pagina web**: puoi cambiare il testo, le immagini e altri elementi che vedi su una pagina.
 
-Il **Document Object Model**, o DOM, è un insieme di oggetti creati dal browser web quando viene caricata una pagina HTML. Il DOM rappresenta la struttura della pagina HTML come un albero gerarchico di oggetti, che possono essere manipolati tramite l'utilizzo del codice JavaScript.
+**Aggiungere interattività**: puoi creare pulsanti, menu e altri elementi che rispondono al clic del mouse o al tocco dello schermo.
+
+**Creare animazioni**: puoi far muovere gli elementi sulla pagina e creare effetti visivi accattivanti.
+Per fare tutto questo, JavaScript utilizza dei "mattoni" fondamentali, che sono:
+
+## DOM (Document Object Model)
+
+Immagina il DOM come una rappresentazione digitale della pagina web che stai visualizzando. È come un albero con rami e foglie: ogni elemento della pagina è rappresentato da un nodo nell'albero, e le relazioni tra gli elementi sono rappresentate dai rami. Usando il DOM, puoi selezionare e modificare qualsiasi parte della pagina.
 
 ![DOM](./img/pic_htmltree.gif)
 
@@ -25,6 +32,19 @@ Utilizzando il DOM, gli sviluppatori possono manipolare il contenuto della pagin
 
 Il metodo prende un parametro, ovvero l'ID dell'elemento da cercare, e restituisce l'elemento corrispondente. Ad esempio, supponiamo che tu abbia un elemento div con l'ID "mioDiv" nella tua pagina HTML. Puoi utilizzare il metodo document.getElementById() per recuperare l'elemento e poi utilizzarlo per modificarne il contenuto o le proprietà, come ad esempio lo stile CSS.
 
+*Prova a comprenderlo più a fondo visualizzando il DOM (Document Object Model) come la struttura di una pagina web. Ogni elemento della pagina, come un paragrafo, un'immagine o un pulsante, è come un mattone di questa struttura. A ciascun mattone viene assegnato un ID univoco, come un numero di serie, per identificarlo.*
+
+Il metodo document.getElementById() è come un detective che può trovare un elemento specifico nella pagina web conoscendo il suo ID. Funziona così:
+
+1)Gli dai l'ID da cercare: Pensi all'ID come al nome del mattone che stai cercando.
+
+2)Lui cerca il mattone: Il detective document.getElementById() sfoglia la struttura del DOM, controllando ogni elemento e il suo ID, finché non trova quello che corrisponde all'ID che gli hai dato.
+
+3)Ti restituisce il mattone: Una volta trovato l'elemento, il detective te lo consegna. Ora puoi fare quello che vuoi con quel mattone, ad esempio:
+* Cambiare il suo contenuto: Se il mattone è un paragrafo, puoi modificarne il testo.
+* Cambiare il suo aspetto: Puoi modificare il colore, la dimensione o lo stile del mattone.
+* Nascondere o mostrare il mattone: Puoi decidere se il mattone deve essere visibile o meno sulla pagina.
+
 Ecco un esempio:
 
 ```html
@@ -56,6 +76,13 @@ document.getElementById() restituisce solo il primo elemento con l'ID specificat
 
 **btn.addEventListener()** è un metodo che viene utilizzato per ascoltare gli eventi che avvengono su un elemento del DOM, ad esempio un pulsante. Il metodo prende due argomenti: il primo è il tipo di evento che si desidera ascoltare (ad esempio "click", "mouseover", "keydown", ecc.), e il secondo è la funzione che deve essere eseguita quando l'evento si verifica. La funzione viene eseguita solo quando l'evento si verifica.
 
+Immagina di avere un pulsante sulla tua pagina web. Quando clicchi su quel pulsante, vuoi che accada qualcosa, ad esempio cambiare il colore di un paragrafo o mostrare una finestra pop-up. Ecco dove entra in gioco btn.addEventListener().
+
+Pensa a btn.addEventListener() come a un vero e proprio sistema di allarme per il tuo pulsante. Funziona così:
+1) *Scegli l'evento da ascoltare*: Decidi quale azione vuoi che attivi l'allarme, ad esempio un clic, un passaggio del mouse o la pressione di un tasto.
+2) *Imposta l'azione da eseguire*: Decidi cosa vuoi che accada quando l'allarme suona. Potrebbe essere cambiare il colore di un paragrafo, mostrare una finestra pop-up o eseguire un'altra azione.
+3) *Attiva il sistema di allarme*: Usa btn.addEventListener() per collegare l'evento scelto all'azione che vuoi eseguire. In questo modo, quando si verifica l'evento, l'azione verrà eseguita automaticamente.
+
 > [Scopri di più](https://www.w3schools.com/js/js_htmldom_eventlistener.asp)
 
 Ad esempio, se si vuole ascoltare il click su un pulsante con id "myButton", si potrebbe utilizzare il seguente codice:
@@ -90,16 +117,23 @@ L'utilizzo di innerHTML può essere pericoloso se il contenuto è fornito dall'u
 :::
 
 ## Variabili
-In JavaScript, le variabili vengono dichiarate utilizzando la parola chiave **"var"**, **"let"** o **"const"**. 
+Le variabili sono come dei contenitori per memorizzare informazioni. Puoi darle un nome e usarle per conservare dati come numeri, testo o persino altri oggetti. 
+
+*Immagina le variabili come dei scatoloni che puoi usare per conservare le cose. Ogni scatolone ha un'etichetta che gli dai un nome, così puoi facilmente trovare quello che ti serve. Dentro gli scatoloni puoi mettere diversi tipi di cose, come numeri, parole o anche altri scatoloni.*
 
-**Una variabile è un'area di memoria in cui è possibile archiviare un valore.** Il valore di una variabile può essere modificato durante l'esecuzione del programma.
+Le variabili sono fondamentali per tenere in ordine il tuo codice e renderlo più efficiente. Invece di dover scrivere sempre lo stesso valore più e più volte, puoi metterlo in una variabile e usarla quando ne hai bisogno.
+
+**Come creare una variabile in JavaScript**:
+
+Per creare una variabile in JavaScript, devi usare una delle parole chiave speciali: **var**, **let** o **const**.
+Dopo la parola chiave, devi scrivere il nome della tua variabile e poi un segno di uguale (=) e il valore che vuoi memorizzare.
 
 La parola chiave "var" è stata usata in precedenza per dichiarare variabili in JavaScript, ma è stata sostituita da "let" e "const". La parola chiave "let" viene utilizzata per dichiarare una variabile il cui valore può essere modificato durante l'esecuzione del programma. La parola chiave "const" viene utilizzata per dichiarare una costante, il cui valore non può essere modificato.
 
 Ad esempio:
 
 ```jsx
-let nome = "Mario";
+let nome = "Mario"; //prima avremmo potuto scrivere var nome = "Mario";
 let eta = 30;
 const PI_GRECO = 3.14;
 ```
@@ -116,6 +150,8 @@ JavaScript è case-sensitive, quindi i nomi banana, Banana, BaNaNa sono tre vari
 
 ## Operatori
 
+Gli operatori sono una sorta di aiutanti del tuo codice. Ti permettono di fare calcoli, confrontare valori e combinare dati in modi diversi. Esistono molti tipi di operatori, come quelli matematici (+, -, *, /), logici (&&, ||, !) e di confronto (==, !=, <, >).
+
 JavaScript supporta anche molti operatori, come ad esempio l'operatore di assegnazione "=", l'operatore di addizione "+", l'operatore di sottrazione "-", l'operatore di moltiplicazione "*", l'operatore di divisione "/", l'operatore di resto "%" e l'operatore di concatenazione "+". Ecco alcuni esempi:
 
 ```jsx
@@ -184,4 +220,4 @@ In RunJS dichiara due variabili. Utilizzando gli operatori aritmetici, scrivi un
 
 **Congratulazioni! 🎉** 
 
-Ora hai appreso i concetti di base di JavaScript e sei pronto per imparare di più su come utilizzarli per creare script funzionanti.
+Ora hai appreso i concetti di base di JavaScript e sei pronto per imparare di più su come utilizzarli per creare script funzionanti.

docs/progetto-finale/example.md

@@ -6,8 +6,8 @@ sidebar_position: 5
 
 Ecco un esempio di come potrebbe essere sviluppato il progetto finale.
 
-<iframe height="692.8828125" width="100%" scrolling="no" title="Javascript from scratch | Progetto Finale" src="https://codepen.io/ludovicobesana/embed/abarqKP?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
-  See the Pen <a href="https://codepen.io/ludovicobesana/pen/abarqKP">
+<iframe height="692.8828125" width="100%" scrolling="no" title="Javascript from scratch | Progetto Finale" src="https://codepen.io/ludovicobesana/embed/gOEXgaQ?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
+  See the Pen <a href="https://codepen.io/ludovicobesana/pen/gOEXgaQ">
   Javascript from scratch | Progetto Finale</a> by Ludovico Besana (<a href="https://codepen.io/ludovicobesana">@ludovicobesana</a>)
   on <a href="https://codepen.io">CodePen</a>.
 </iframe>