Solucions Exercicis de la UT04 - Estructures definides per l'usuari en JavaScript

Exercici 1: Array de números - Suma total

HTML

<div class="container">
    <header>
        <h1>Exercici 1: Array de números - Suma total</h1>
        <p class="description">Crea un array amb 5 números. Escriu una funció que calculi la suma total.</p>
    </header>

    <section class="output">
        <h2>Resultat:</h2>
        <div id="result"></div>
    </section>

    <section class="code">
        <h2>Codi:</h2>
        <pre><code id="codeDisplay"></code></pre>
    </section>
</div>

JavaScript

const numeros = [10, 20, 15, 30, 25];

function calcularSuma(array) {
    let suma = 0;
    for (let i = 0; i < array.length; i++) {
        suma += array[i];
    }
    return suma;
}

const resultElement = document.getElementById('result');
resultElement.innerHTML = `<p>Array: [${numeros.join(', ')}]</p><p>Suma total: ${calcularSuma(numeros)}</p>`;

document.getElementById('codeDisplay').textContent = `const numeros = [10, 20, 15, 30, 25];

function calcularSuma(array) {
    let suma = 0;
    for (let i = 0; i < array.length; i++) {
        suma += array[i];
    }
    return suma;
}

console.log(calcularSuma(numeros)); // 100`;

---

Exercici 2: Buscar element duplicat

HTML

<div class="container">
    <header>
        <h1>Exercici 2: Buscar element duplicat</h1>
        <p class="description">Crea una funció que retorni true si hi ha duplicats.</p>
    </header>
    <section class="output">
        <h2>Resultat:</h2>
        <div id="result"></div>
    </section>
    <section class="code">
        <h2>Codi:</h2>
        <pre><code id="codeDisplay"></code></pre>
    </section>
</div>

JavaScript

const array1 = [1, 2, 3, 4, 3, 5];
const array2 = [1, 2, 3, 4, 5];

function teDuplicats(array) {
    for (let i = 0; i < array.length; i++) {
        for (let j = i + 1; j < array.length; j++) {
            if (array[i] === array[j]) {
                return true;
            }
        }
    }
    return false;
}

const resultElement = document.getElementById('result');
resultElement.innerHTML = `
    <p>Array 1: [${array1.join(', ')}]</p>
    <p>Té duplicats: ${teDuplicats(array1)}</p>
    <p>Array 2: [${array2.join(', ')}]</p>
    <p>Té duplicats: ${teDuplicats(array2)}</p>
`;

document.getElementById('codeDisplay').textContent = `function teDuplicats(array) {
    for (let i = 0; i < array.length; i++) {
        for (let j = i + 1; j < array.length; j++) {
            if (array[i] === array[j]) {
                return true;
            }
        }
    }
    return false;
}`;

---

Exercici 3: Invertir array

HTML

<div class="container">
    <header>
        <h1>Exercici 3: Invertir array</h1>
        <p class="description">Inverteix l'ordre dels elements sense usar .reverse()</p>
    </header>
    <section class="output">
        <h2>Resultat:</h2>
        <div id="result"></div>
    </section>
    <section class="code">
        <h2>Codi:</h2>
        <pre><code id="codeDisplay"></code></pre>
    </section>
</div>

JavaScript

const original = [1, 2, 3, 4, 5];

function invertirArray(array) {
    const invertit = [];
    for (let i = array.length - 1; i >= 0; i--) {
        invertit.push(array[i]);
    }
    return invertit;
}

const resultElement = document.getElementById('result');
const resultat = invertirArray(original);
resultElement.innerHTML = `
    <p>Array original: [${original.join(', ')}]</p>
    <p>Array invertit: [${resultat.join(', ')}]</p>
`;

document.getElementById('codeDisplay').textContent = `function invertirArray(array) {
    const invertit = [];
    for (let i = array.length - 1; i >= 0; i--) {
        invertit.push(array[i]);
    }
    return invertit;
}`;

---

Exercici 4: Filtrar números pars

HTML

<div class="container">
    <header>
        <h1>Exercici 4: Filtrar números pars</h1>
        <p class="description">Retorna un array amb només els números pars.</p>
    </header>
    <section class="output">
        <h2>Resultat:</h2>
        <div id="result"></div>
    </section>
    <section class="code">
        <h2>Codi:</h2>
        <pre><code id="codeDisplay"></code></pre>
    </section>
</div>

JavaScript

const numeros = [1, 2, 3, 4, 5, 6, 7, 8];

function filtrarPars(array) {
    const pars = [];
    for (let i = 0; i < array.length; i++) {
        if (array[i] % 2 === 0) {
            pars.push(array[i]);
        }
    }
    return pars;
}

const resultElement = document.getElementById('result');
const resultat = filtrarPars(numeros);
resultElement.innerHTML = `
    <p>Array original: [${numeros.join(', ')}]</p>
    <p>Números pars: [${resultat.join(', ')}]</p>
`;

document.getElementById('codeDisplay').textContent = `function filtrarPars(array) {
    const pars = [];
    for (let i = 0; i < array.length; i++) {
        if (array[i] % 2 === 0) {
            pars.push(array[i]);
        }
    }
    return pars;
}`;

---

Exercici 5: Contar ocurrències

HTML

<div class="container">
    <header>
        <h1>Exercici 5: Contar ocurrències</h1>
        <p class="description">Conta quantes vegades apareix un element dins d'un array.</p>
    </header>
    <section class="output">
        <h2>Resultat:</h2>
        <div id="result"></div>
    </section>
    <section class="code">
        <h2>Codi:</h2>
        <pre><code id="codeDisplay"></code></pre>
    </section>
</div>

JavaScript

const animals = ["gat", "gos", "gat", "ocell", "gat"];

function contarOcurrencies(array, element) {
    let contador = 0;
    for (let i = 0; i < array.length; i++) {
        if (array[i] === element) {
            contador++;
        }
    }
    return contador;
}

const resultElement = document.getElementById('result');
const buscar = "gat";
const vegades = contarOcurrencies(animals, buscar);
resultElement.innerHTML = `
    <p>Array: [${animals.join(', ')}]</p>
    <p>Buscant: "${buscar}"</p>
    <p>Ocurrències: ${vegades}</p>
`;

document.getElementById('codeDisplay').textContent = `function contarOcurrencies(array, element) {
    let contador = 0;
    for (let i = 0; i < array.length; i++) {
        if (array[i] === element) {
            contador++;
        }
    }
    return contador;
}`;

---

Exercici 6: Trobar el número més gran

HTML

<div class="container">
    <header>
        <h1>Exercici 6: Trobar el número més gran</h1>
        <p class="description">Trova el número més gran sense usar Math.max()</p>
    </header>
    <section class="output">
        <h2>Resultat:</h2>
        <div id="result"></div>
    </section>
    <section class="code">
        <h2>Codi:</h2>
        <pre><code id="codeDisplay"></code></pre>
    </section>
</div>

JavaScript

const numeros = [15, 42, 8, 99, 23, 67];

function trobarMesGran(array) {
    let major = array[0];
    for (let i = 1; i < array.length; i++) {
        if (array[i] > major) {
            major = array[i];
        }
    }
    return major;
}

const resultElement = document.getElementById('result');
resultElement.innerHTML = `
    <p>Array: [${numeros.join(', ')}]</p>
    <p>Número més gran: ${trobarMesGran(numeros)}</p>
`;

document.getElementById('codeDisplay').textContent = `function trobarMesGran(array) {
    let major = array[0];
    for (let i = 1; i < array.length; i++) {
        if (array[i] > major) {
            major = array[i];
        }
    }
    return major;
}`;

---

Exercici 7: Combinar dos arrays

HTML

<div class="container">
    <header>
        <h1>Exercici 7: Combinar dos arrays</h1>
        <p class="description">Combina dos arrays en un de sol sense .concat()</p>
    </header>
    <section class="output">
        <h2>Resultat:</h2>
        <div id="result"></div>
    </section>
    <section class="code">
        <h2>Codi:</h2>
        <pre><code id="codeDisplay"></code></pre>
    </section>
</div>

JavaScript

const array1 = [1, 2, 3];
const array2 = [4, 5, 6];

function combinarArrays(arr1, arr2) {
    const combinat = [];
    for (let i = 0; i < arr1.length; i++) {
        combinat.push(arr1[i]);
    }
    for (let i = 0; i < arr2.length; i++) {
        combinat.push(arr2[i]);
    }
    return combinat;
}

const resultElement = document.getElementById('result');
const resultat = combinarArrays(array1, array2);
resultElement.innerHTML = `
    <p>Array 1: [${array1.join(', ')}]</p>
    <p>Array 2: [${array2.join(', ')}]</p>
    <p>Combinat: [${resultat.join(', ')}]</p>
`;

document.getElementById('codeDisplay').textContent = `function combinarArrays(arr1, arr2) {
    const combinat = [];
    for (let i = 0; i < arr1.length; i++) {
        combinat.push(arr1[i]);
    }
    for (let i = 0; i < arr2.length; i++) {
        combinat.push(arr2[i]);
    }
    return combinat;
}`;

---

Exercici 8: Eliminar duplicats

HTML

<div class="container">
    <header>
        <h1>Exercici 8: Eliminar duplicats</h1>
        <p class="description">Retorna un array sense elements duplicats.</p>
    </header>
    <section class="output">
        <h2>Resultat:</h2>
        <div id="result"></div>
    </section>
    <section class="code">
        <h2>Codi:</h2>
        <pre><code id="codeDisplay"></code></pre>
    </section>
</div>

JavaScript

const numeros = [1, 2, 2, 3, 3, 3, 4, 5, 5];

function eliminarDuplicats(array) {
    const unics = [];
    for (let i = 0; i < array.length; i++) {
        if (!unics.includes(array[i])) {
            unics.push(array[i]);
        }
    }
    return unics;
}

const resultElement = document.getElementById('result');
const resultat = eliminarDuplicats(numeros);
resultElement.innerHTML = `
    <p>Array original: [${numeros.join(', ')}]</p>
    <p>Sense duplicats: [${resultat.join(', ')}]</p>
`;

document.getElementById('codeDisplay').textContent = `function eliminarDuplicats(array) {
    const unics = [];
    for (let i = 0; i < array.length; i++) {
        if (!unics.includes(array[i])) {
            unics.push(array[i]);
        }
    }
    return unics;
}`;

---

Exercici 9: Dividir array en chunks

HTML

<div class="container">
    <header>
        <h1>Exercici 9: Dividir array en chunks</h1>
        <p class="description">Divideix un array en subarrays més petits.</p>
    </header>
    <section class="output">
        <h2>Resultat:</h2>
        <div id="result"></div>
    </section>
    <section class="code">
        <h2>Codi:</h2>
        <pre><code id="codeDisplay"></code></pre>
    </section>
</div>

JavaScript

const numeros = [1, 2, 3, 4, 5, 6, 7, 8, 9];
const mida = 3;

function dividirEnChunks(array, mida) {
    const chunks = [];
    for (let i = 0; i < array.length; i += mida) {
        chunks.push(array.slice(i, i + mida));
    }
    return chunks;
}

const resultElement = document.getElementById('result');
const resultat = dividirEnChunks(numeros, mida);
let resultatText = `<p>Array: [${numeros.join(', ')}]</p><p>Mida dels chunks: ${mida}</p><p>Resultat:</p>`;
for (let chunk of resultat) {
    resultatText += `<p>[${chunk.join(', ')}]</p>`;
}
resultElement.innerHTML = resultatText;

document.getElementById('codeDisplay').textContent = `function dividirEnChunks(array, mida) {
    const chunks = [];
    for (let i = 0; i < array.length; i += mida) {
        chunks.push(array.slice(i, i + mida));
    }
    return chunks;
}`;

---

Exercici 10: Crear un objecte estudiants

HTML

<div class="container">
    <header>
        <h1>Exercici 10: Objecte estudiants</h1>
        <p class="description">Crea un objecte amb mètode haAprovat()</p>
    </header>
    <section class="output">
        <h2>Resultat:</h2>
        <div id="result"></div>
    </section>
    <section class="code">
        <h2>Codi:</h2>
        <pre><code id="codeDisplay"></code></pre>
    </section>
</div>

JavaScript

const estudiant = {
    nom: "Maria",
    nota: 7.5,
    assignatura: "JavaScript",
    haAprovat: function() {
        return this.nota >= 5;
    }
};

const resultElement = document.getElementById('result');
resultElement.innerHTML = `
    <p>Nom: ${estudiant.nom}</p>
    <p>Nota: ${estudiant.nota}</p>
    <p>Assignatura: ${estudiant.assignatura}</p>
    <p>Ha aprovat: ${estudiant.haAprovat() ? 'Sí' : 'No'}</p>
`;

document.getElementById('codeDisplay').textContent = `const estudiant = {
    nom: "Maria",
    nota: 7.5,
    assignatura: "JavaScript",
    haAprovat: function() {
        return this.nota >= 5;
    }
};`;

---

Exercici 11: Array de contactes

HTML

<div class="container">
    <header>
        <h1>Exercici 11: Array de contactes</h1>
        <p class="description">Cerca un contacte per nom en un array d'objectes.</p>
    </header>
    <section class="output">
        <h2>Resultat:</h2>
        <div id="result"></div>
    </section>
    <section class="code">
        <h2>Codi:</h2>
        <pre><code id="codeDisplay"></code></pre>
    </section>
</div>

JavaScript

const contactes = [
    { nom: "Joan", telefon: "123456789" },
    { nom: "Maria", telefon: "987654321" },
    { nom: "Pere", telefon: "555555555" }
];

function cercarContacte(array, nom) {
    for (let i = 0; i < array.length; i++) {
        if (array[i].nom === nom) {
            return array[i];
        }
    }
    return null;
}

const resultElement = document.getElementById('result');
const contacte1 = cercarContacte(contactes, "Maria");
const contacte2 = cercarContacte(contactes, "Luis");

resultElement.innerHTML = `
    <p>Buscant "Maria": ${contacte1 ? `${contacte1.nom} - ${contacte1.telefon}` : 'No trobat'}</p>
    <p>Buscant "Luis": ${contacte2 ? `${contacte2.nom} - ${contacte2.telefon}` : 'No trobat'}</p>
`;

document.getElementById('codeDisplay').textContent = `function cercarContacte(array, nom) {
    for (let i = 0; i < array.length; i++) {
        if (array[i].nom === nom) {
            return array[i];
        }
    }
    return null;
}`;

---

Exercici 12: Calcular mitjana de notes

HTML

<div class="container">
    <header>
        <h1>Exercici 12: Calcular mitjana de notes</h1>
        <p class="description">Calcula la nota mitjana d'un array d'estudiants.</p>
    </header>
    <section class="output">
        <h2>Resultat:</h2>
        <div id="result"></div>
    </section>
    <section class="code">
        <h2>Codi:</h2>
        <pre><code id="codeDisplay"></code></pre>
    </section>
</div>

JavaScript

const estudiants = [
    { nom: "Joan", nota: 8 },
    { nom: "Anna", nota: 6 },
    { nom: "Pere", nota: 9 }
];

function calcularMitjana(array) {
    let suma = 0;
    for (let i = 0; i < array.length; i++) {
        suma += array[i].nota;
    }
    return suma / array.length;
}

const resultElement = document.getElementById('result');
const mitjana = calcularMitjana(estudiants);

let resultatText = "<p>Estudiants:</p>";
for (let est of estudiants) {
    resultatText += `<p>${est.nom}: ${est.nota}</p>`;
}
resultatText += `<p><strong>Mitjana: ${mitjana.toFixed(2)}</strong></p>`;

resultElement.innerHTML = resultatText;

document.getElementById('codeDisplay').textContent = `function calcularMitjana(array) {
    let suma = 0;
    for (let i = 0; i < array.length; i++) {
        suma += array[i].nota;
    }
    return suma / array.length;
}`;

---

Exercici 13: Ordenar array de números

HTML

<div class="container">
    <header>
        <h1>Exercici 13: Ordenar array de números</h1>
        <p class="description">Ordena un array de números en forma ascendent sense .sort()</p>
    </header>
    <section class="output">
        <h2>Resultat:</h2>
        <div id="result"></div>
    </section>
    <section class="code">
        <h2>Codi:</h2>
        <pre><code id="codeDisplay"></code></pre>
    </section>
</div>

JavaScript

const numeros = [45, 12, 89, 23, 56, 34];

function ordenarAscendent(array) {
    const copiat = [...array];
    for (let i = 0; i < copiat.length; i++) {
        for (let j = i + 1; j < copiat.length; j++) {
            if (copiat[i] > copiat[j]) {
                let temp = copiat[i];
                copiat[i] = copiat[j];
                copiat[j] = temp;
            }
        }
    }
    return copiat;
}

const resultElement = document.getElementById('result');
const ordenat = ordenarAscendent(numeros);
resultElement.innerHTML = `
    <p>Array original: [${numeros.join(', ')}]</p>
    <p>Array ordenat: [${ordenat.join(', ')}]</p>
`;

document.getElementById('codeDisplay').textContent = `function ordenarAscendent(array) {
    const copiat = [...array];
    for (let i = 0; i < copiat.length; i++) {
        for (let j = i + 1; j < copiat.length; j++) {
            if (copiat[i] > copiat[j]) {
                let temp = copiat[i];
                copiat[i] = copiat[j];
                copiat[j] = temp;
            }
        }
    }
    return copiat;
}`;

---

Exercici 14: Crear taula de multiplicar

HTML

<div class="container">
    <header>
        <h1>Exercici 14: Crear taula de multiplicar</h1>
        <p class="description">Genera la taula de multiplicar d'un número (1 fins a 10)</p>
    </header>
    <section class="output">
        <h2>Resultat:</h2>
        <div id="result"></div>
    </section>
    <section class="code">
        <h2>Codi:</h2>
        <pre><code id="codeDisplay"></code></pre>
    </section>
</div>

JavaScript

function taulaMultiplicar(numero) {
    const resultat = [];
    for (let i = 1; i <= 10; i++) {
        resultat.push(numero * i);
    }
    return resultat;
}

const resultElement = document.getElementById('result');
const numero = 5;
const taula = taulaMultiplicar(numero);

let resultatText = `<p>Taula del ${numero}:</p><p>`;
for (let i = 0; i < taula.length; i++) {
    resultatText += `${numero} × ${i + 1} = ${taula[i]}<br>`;
}
resultatText += `</p><p>Array: [${taula.join(', ')}]</p>`;

resultElement.innerHTML = resultatText;

document.getElementById('codeDisplay').textContent = `function taulaMultiplicar(numero) {
    const resultat = [];
    for (let i = 1; i <= 10; i++) {
        resultat.push(numero * i);
    }
    return resultat;
}`;

---

Exercici 15: Filtrar per propietat d'objecte

HTML

<div class="container">
    <header>
        <h1>Exercici 15: Filtrar per propietat d'objecte</h1>
        <p class="description">Filtra els productes que estan disponibles.</p>
    </header>
    <section class="output">
        <h2>Resultat:</h2>
        <div id="result"></div>
    </section>
    <section class="code">
        <h2>Codi:</h2>
        <pre><code id="codeDisplay"></code></pre>
    </section>
</div>

JavaScript

const productes = [
    { nom: "Laptop", preu: 800, disponible: true },
    { nom: "Ratolí", preu: 25, disponible: false },
    { nom: "Teclat", preu: 60, disponible: true },
    { nom: "Monitor", preu: 250, disponible: true }
];

function filtrarDisponibles(array) {
    const disponibles = [];
    for (let i = 0; i < array.length; i++) {
        if (array[i].disponible) {
            disponibles.push(array[i]);
        }
    }
    return disponibles;
}

const resultElement = document.getElementById('result');
const disponibles = filtrarDisponibles(productes);

let resultatText = "<p>Productes disponibles:</p>";
for (let prod of disponibles) {
    resultatText += `<p>${prod.nom} - €${prod.preu}</p>`;
}

resultElement.innerHTML = resultatText;

document.getElementById('codeDisplay').textContent = `function filtrarDisponibles(array) {
    const disponibles = [];
    for (let i = 0; i < array.length; i++) {
        if (array[i].disponible) {
            disponibles.push(array[i]);
        }
    }
    return disponibles;
}`;

---

Exercici 16: Concatenar strings d'un array

HTML

<div class="container">
    <header>
        <h1>Exercici 16: Concatenar strings d'un array</h1>
        <p class="description">Uneix els strings d'un array separats per comes i espai.</p>
    </header>
    <section class="output">
        <h2>Resultat:</h2>
        <div id="result"></div>
    </section>
    <section class="code">
        <h2>Codi:</h2>
        <pre><code id="codeDisplay"></code></pre>
    </section>
</div>

JavaScript

const tecnologies = ["JavaScript", "HTML", "CSS", "React"];

function concatenarStrings(array) {
    let resultat = "";
    for (let i = 0; i < array.length; i++) {
        if (i < array.length - 1) {
            resultat += array[i] + ", ";
        } else {
            resultat += array[i];
        }
    }
    return resultat;
}

const resultElement = document.getElementById('result');
const concatenat = concatenarStrings(tecnologies);

resultElement.innerHTML = `
    <p>Array: [${tecnologies.join(', ')}]</p>
    <p>Concatenat: "${concatenat}"</p>
`;

document.getElementById('codeDisplay').textContent = `function concatenarStrings(array) {
    let resultat = "";
    for (let i = 0; i < array.length; i++) {
        if (i < array.length - 1) {
            resultat += array[i] + ", ";
        } else {
            resultat += array[i];
        }
    }
    return resultat;
}`;

---

Exercici 17: Crear objecte calculadora amb historial

HTML

<div class="container">
    <header>
        <h1>Exercici 17: Calculadora amb historial</h1>
        <p class="description">Crea una calculadora que guarda l'historial.</p>
    </header>
    <section class="output">
        <h2>Resultat:</h2>
        <div id="result"></div>
    </section>
    <section class="code">
        <h2>Codi:</h2>
        <pre><code id="codeDisplay"></code></pre>
    </section>
</div>

JavaScript

const calculadora = {
    historial: [],

    sumar: function(a, b) {
        const resultat = a + b;
        this.historial.push(`${a} + ${b} = ${resultat}`);
        return resultat;
    },

    restar: function(a, b) {
        const resultat = a - b;
        this.historial.push(`${a} - ${b} = ${resultat}`);
        return resultat;
    },

    multiplicar: function(a, b) {
        const resultat = a * b;
        this.historial.push(`${a} × ${b} = ${resultat}`);
        return resultat;
    },

    mostrarHistorial: function() {
        return this.historial;
    }
};

calculadora.sumar(10, 5);
calculadora.restar(20, 3);
calculadora.multiplicar(4, 6);

const resultElement = document.getElementById('result');
let resultatText = "<p>Historial:</p>";
for (let op of calculadora.mostrarHistorial()) {
    resultatText += `<p>${op}</p>`;
}
resultElement.innerHTML = resultatText;

document.getElementById('codeDisplay').textContent = `const calculadora = {
    historial: [],
    sumar: function(a, b) {
        const resultat = a + b;
        this.historial.push(\`\${a} + \${b} = \${resultat}\`);
        return resultat;
    },
    restar: function(a, b) {
        const resultat = a - b;
        this.historial.push(\`\${a} - \${b} = \${resultat}\`);
        return resultat;
    },
    multiplicar: function(a, b) {
        const resultat = a * b;
        this.historial.push(\`\${a} × \${b} = \${resultat}\`);
        return resultat;
    },
    mostrarHistorial: function() {
        return this.historial;
    }
};`;

---

Exercici 18: Validar format email

HTML

<div class="container">
    <header>
        <h1>Exercici 18: Validar format email</h1>
        <p class="description">Valida si un string és un email vàlid.</p>
    </header>
    <section class="output">
        <h2>Resultat:</h2>
        <div id="result"></div>
    </section>
    <section class="code">
        <h2>Codi:</h2>
        <pre><code id="codeDisplay"></code></pre>
    </section>
</div>

JavaScript

function validarEmail(email) {
    const posicioArroba = email.indexOf('@');
    const posicioPunt = email.indexOf('.');

    return posicioArroba !== -1 && posicioPunt !== -1 && posicioPunt > posicioArroba;
}

const resultElement = document.getElementById('result');

const email1 = "usuario@ejemplo.com";
const email2 = "usuarioexemple.com";
const email3 = "usuario@ejemplocom";

resultElement.innerHTML = `
    <p>"${email1}": ${validarEmail(email1) ? 'Vàlid ✓' : 'No vàlid ✗'}</p>
    <p>"${email2}": ${validarEmail(email2) ? 'Vàlid ✓' : 'No vàlid ✗'}</p>
    <p>"${email3}": ${validarEmail(email3) ? 'Vàlid ✓' : 'No vàlid ✗'}</p>
`;

document.getElementById('codeDisplay').textContent = `function validarEmail(email) {
    const posicioArroba = email.indexOf('@');
    const posicioPunt = email.indexOf('.');

    return posicioArroba !== -1 && posicioPunt !== -1 && posicioPunt > posicioArroba;
}`;

---

Exercici 19: Trobar números primers

HTML

<div class="container">
    <header>
        <h1>Exercici 19: Trobar números primers</h1>
        <p class="description">Retorna un array amb només els números primers.</p>
    </header>
    <section class="output">
        <h2>Resultat:</h2>
        <div id="result"></div>
    </section>
    <section class="code">
        <h2>Codi:</h2>
        <pre><code id="codeDisplay"></code></pre>
    </section>
</div>

JavaScript

function esNumeroPrimer(numero) {
    if (numero <= 1) return false;
    for (let i = 2; i < numero; i++) {
        if (numero % i === 0) return false;
    }
    return true;
}

function filtrarPrimers(array) {
    const primers = [];
    for (let i = 0; i < array.length; i++) {
        if (esNumeroPrimer(array[i])) {
            primers.push(array[i]);
        }
    }
    return primers;
}

const resultElement = document.getElementById('result');
const numeros = [2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
const primers = filtrarPrimers(numeros);

resultElement.innerHTML = `
    <p>Array original: [${numeros.join(', ')}]</p>
    <p>Números primers: [${primers.join(', ')}]</p>
`;

document.getElementById('codeDisplay').textContent = `function esNumeroPrimer(numero) {
    if (numero <= 1) return false;
    for (let i = 2; i < numero; i++) {
        if (numero % i === 0) return false;
    }
    return true;
}

function filtrarPrimers(array) {
    const primers = [];
    for (let i = 0; i < array.length; i++) {
        if (esNumeroPrimer(array[i])) {
            primers.push(array[i]);
        }
    }
    return primers;
}`;

---

Exercici 20: Crear agenda de cites

HTML

<div class="container">
    <header>
        <h1>Exercici 20: Agenda de cites</h1>
        <p class="description">Gestiona una agenda de cites amb afegir, eliminar i cercar.</p>
    </header>
    <section class="output">
        <h2>Resultat:</h2>
        <div id="result"></div>
    </section>
    <section class="code">
        <h2>Codi:</h2>
        <pre><code id="codeDisplay"></code></pre>
    </section>
</div>

JavaScript

const agenda = {
    cites: [],

    afegirCita: function(data, hora, descripcio) {
        this.cites.push({ data: data, hora: hora, descripcio: descripcio });
    },

    eliminarCita: function(data) {
        for (let i = 0; i < this.cites.length; i++) {
            if (this.cites[i].data === data) {
                this.cites.splice(i, 1);
                return true;
            }
        }
        return false;
    },

    cercarCita: function(data) {
        for (let i = 0; i < this.cites.length; i++) {
            if (this.cites[i].data === data) {
                return this.cites[i];
            }
        }
        return null;
    },

    llistarCites: function() {
        return this.cites;
    }
};

agenda.afegirCita("2025-11-15", "10:00", "Reunió amb client");
agenda.afegirCita("2025-11-16", "14:30", "Visita mèdica");
agenda.afegirCita("2025-11-17", "09:00", "Entrega projecte");

const resultElement = document.getElementById('result');
let resultatText = "<p>Cites agendades:</p>";
for (let cita of agenda.llistarCites()) {
    resultatText += `<p>${cita.data} - ${cita.hora}: ${cita.descripcio}</p>`;
}

resultElement.innerHTML = resultatText;

document.getElementById('codeDisplay').textContent = `const agenda = {
    cites: [],

    afegirCita: function(data, hora, descripcio) {
        this.cites.push({ data: data, hora: hora, descripcio: descripcio });
    },

    eliminarCita: function(data) {
        for (let i = 0; i < this.cites.length; i++) {
            if (this.cites[i].data === data) {
                this.cites.splice(i, 1);
                return true;
            }
        }
        return false;
    },

    cercarCita: function(data) {
        for (let i = 0; i < this.cites.length; i++) {
            if (this.cites[i].data === data) {
                return this.cites[i];
            }
        }
        return null;
    },

    llistarCites: function() {
        return this.cites;
    }
};`;