9 Tutorial fix

javascript/JS_Esercizi 09 - Manipolazione Dati/tutorial/index.html

@@ -58,6 +58,11 @@
                 title: "5. Numeri Casuali",
                 description: "Generare numeri random e scalarli.",
                 outputLabel: "Numero casuale:"
+            },
+            {
+                title: "6. Template Literals",
+                description: "Creare stringhe dinamiche con variabili e espressioni.",
+                outputLabel: "Card HTML:"
             }
         ].forEach((step, i) => {
             document.write(`
@@ -72,7 +77,7 @@
             `);
         });
     </script>
-    <script src="tutorial_interattivo.js"></script>
+    <script src="script.js"></script>
     <script>
         document.getElementById('btn-reset').addEventListener('click', () => {
             localStorage.clear();

javascript/JS_Esercizi 09 - Manipolazione Dati/tutorial/script.js

@@ -128,4 +128,37 @@ function eseguiTutorial() {
         scala_100: randomCento.toFixed(2),
         sconto_intero: scontoFinale
     });
+
+
+    /**
+     * ======================================================
+     * LIVELLO 6: Creazione Card Utente (Template Literals)
+     * Crea una card HTML usando i template literals (backticks)
+     * ======================================================
+     */
+    const utente = {
+        nome: "Mario",
+        cognome: "Rossi",
+        email: "mario.rossi@esempio.com",
+        avatar: "https://randomuser.me/api/portraits/men/75.jpg"
+    };
+
+    // TODO: Crea una card HTML usando i dati dell'utente e i template literals
+    // Per fare i backticks usa ALT + 96 sulla tastiera
+    // La card dovrebbe avere questa struttura:
+    /*
+    <div class="user-card">
+        <img src="avatar_url" alt="Avatar" class="user-avatar">
+        <div class="user-info">
+            <h3>Nome Cognome</h3>
+            <p class="user-email">📧 email</p>
+        </div>
+    </div>
+    */
+    let cardHTML = null;
+
+    mostraOutput(6, {});
+    let output = document.getElementById('output-6');
+    output.className = '';
+    output.innerHTML = cardHTML;
 }

javascript/JS_Esercizi 09 - Manipolazione Dati/tutorial/styles.css

@@ -115,4 +115,32 @@ button#btn-reset {
     display: block;
     font-weight: bold;
     letter-spacing: 0.5px;
-}
+}
+
+.user-card {
+    background: #f5f5f5;
+    border-radius: 10px;
+    padding: 15px;
+    display: flex;
+    align-items: center;
+    gap: 15px;
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
+}
+.user-avatar {
+    width: 100px;
+    height: 100px;
+    border-radius: 50%;
+    object-fit: cover;
+}
+.user-info {
+    display: flex;
+    flex-direction: column;
+}
+.user-name {
+    font-weight: bold;
+    color: #333;
+}
+.user-email {
+    font-size: 0.9em;
+    color: #777;
+}