Primer commit

2022-02-16 16:13:08 +01:00 · 2022-02-16 16:13:08 +01:00 · e664e8a95d
commit e664e8a95d
82 changed files with 45993 additions and 0 deletions
--- a/Solucions-20211107.zip
+++ b/Solucions-20211107.zip
--- a/Solucions-20211107/ex01_taulaMult.html
+++ b/Solucions-20211107/ex01_taulaMult.html
@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Taula Multiplicar</title>
+
+</head>
+<body>
+    
+    <script>
+        var nbr = parseInt(prompt("Please enter a number", 0));
+
+        for (var i = 0; i < 10; i++) {
+            document.write(nbr + " * " + i + " = " + nbr * i + "<br>");
+        }
+    </script>
+</body>
+</html>
--- a/Solucions-20211107/ex02_fibonacci.html
+++ b/Solucions-20211107/ex02_fibonacci.html
@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Fibonacci</title>
+</head>
+<body>
+
+    <script>
+        /* Calcular els primers 20 números de la sèrie de Fibonacci,
+           tenint present que a1=1, a2=1 y que an=an-1+an-2.
+        */
+
+        var nbr = parseInt(prompt("Number: ", 20));
+        var an1 = 1;
+        var an2 = 1;
+
+        document.write("i = 1, an = " + an1 + "<br>");
+        document.write("i = 2, an = " + an2 + "<br>");
+
+        for (var i = 3; i <= nbr; i++) {
+            var an = an1 + an2;
+            document.write("i = " + i + ", an = " + an + "<br>");
+            an2 = an1;
+            an1 = an;
+        }
+
+    </script>
+
+</body>
+</html>
--- a/Solucions-20211107/ex03_potencia.html
+++ b/Solucions-20211107/ex03_potencia.html
@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Potencia</title>
+</head>
+<body>
+
+    <script>
+
+		var base=parseInt(prompt("Base:"));
+		var exponente=parseInt(prompt("Exponente: "));
+
+		var res = base;
+        for (var i = 1; i < exponente; i++) {
+            res *=base;
+		}
+
+        alert(res);
+
+		// Mas facil
+		// alert(base ** exponente);
+
+    </script>
+
+</body>
+</html>
--- a/Solucions-20211107/ex04_mitjana.html
+++ b/Solucions-20211107/ex04_mitjana.html
@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+    <script>
+        
+        /* Fes un programa que demani tres números a l’usuari i mostri la mitjana, el major i el menor.*/
+
+        n1 = parseInt(prompt("Primer numero: "));
+        n2 = parseInt(prompt("Segundo numero: "));
+        n3 = parseInt(prompt("Tercer numero: "));
+        console.log(n1+","+n2+","+n3);
+
+        media = (n1 + n2 + n3) / 3;
+
+        mayor = n1;
+        if (n2 > mayor) mayor = n2;
+        if (n3 > mayor) mayor = n3;
+
+        menor = n1;
+        if (n2 < menor) menor = n2;
+        if (n3 < menor) menor = n3;
+
+        document.write("media = "+media);
+        document.write("<br>mayor = "+mayor);
+        document.write("<br>menor = "+menor);
+
+    </script>
+</body>
+</html>
--- a/Solucions-20211107/ex05_aprop100.html
+++ b/Solucions-20211107/ex05_aprop100.html
@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+    <script>
+        
+        /* Demanar a l’usuari 2 números i mostrar quin és el més proper a 100.*/
+
+        n1 = parseInt(prompt("Primer numero: "));
+        n2 = parseInt(prompt("Segundo numero: "));
+
+        console.log(n1+","+n2);
+
+        if (n1 < 100) d1 = 100 - n1;
+        else d1 = n1 - 100;
+
+        if (n2 < 100) d2 = 100 - n2;
+        else d2 = n2 - 100;
+
+        console.log(d1+","+d2);
+
+        if ( d1 > d2)
+        {
+            document.write(n2+ " es mas cercano a 100 que "+n1);
+        } else {
+            document.write(n1+ " es mas cercano a 100 que "+n2);
+        }
+
+    </script>
+</body>
+</html>
--- a/Solucions-20211107/ex06_horaMinutSg.html
+++ b/Solucions-20211107/ex06_horaMinutSg.html
@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+    <script>
+        
+        /* Demanar a l’usuari 3 números corresponents cadascun a una hora, un minut i un segon.
+           Mostrar la hora corresponent a un segon més tard a la introduïda. */
+
+        var hora = parseInt(prompt("Hora : ","Valor de 0 a 23"));
+        var minut = parseInt(prompt("Minut : ", "Valor de 0 a 59"));
+        var segon = parseInt(prompt("Segon : ", "Valor de 0 a 59"));
+
+        console.log(hora+","+minut+","+segon);
+
+        segon++;
+
+        if (segon == 60){
+            segon = 0;
+            minut++;
+            if (minut == 60){
+                minut = 0;
+                hora++;
+                if (hora == 24) hora = 0;
+            }
+        }
+
+        document.write(hora+":"+minut+":"+segon);
+
+    </script>
+</body>
+</html>
--- a/Solucions-20211107/ex07_dies_a_data.html
+++ b/Solucions-20211107/ex07_dies_a_data.html
@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Dies a data</title>
+
+</head>
+<body>
+    <script>
+
+        /* Demanar un número a l’usuari que indicarà un nombre de dies. 
+           Mostrar per pantalla la conversió d’aquest número a anys, mesos i dies (no cal tenir presents 
+           els anys de traspàs). Podeu suposar que tots els mesos tenen 30 dies.*/
+
+        var dies = parseInt(prompt("Nombre de dies: "));
+
+        var anys = parseInt (dies / 360); // Com els mesos son de 30 dies, suposem que els anys son de 30*12 = 360
+        var r1 = dies % 360; 
+
+        console.log(anys+","+r1);
+
+        mesos = parseInt(r1 / 30);
+
+        dies = r1 % 30;
+
+        document.write("anys = "+anys+", mesos = "+mesos+", dies = "+dies);
+    
+    </script>    
+</body>
+</html>
--- a/Solucions-20211107/ex08_validaData.html
+++ b/Solucions-20211107/ex08_validaData.html
@ -0,0 +1,84 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Validar Data</title>
+
+</head>
+<body>
+
+    <script>
+
+        /****************/
+        /* FUNCTIONS    */
+        /****************/
+        function checkDate(year, month, day) {
+
+            year = parseInt(year);
+            month = parseInt(month);
+            day = parseInt(day);
+
+            console.log(year + "," + month + "," + day);
+
+            // check year
+            if (isNaN(year)) {
+                return "Year invalid. Year has to be an integer";
+            }
+
+            // check month
+            if (isNaN(month) || month < 1 || month > 12) {
+                return "Month invalid. It has to be 1 to 12";
+            }
+
+            // check day
+            if (isNaN(day) || day < 1 || day > 31) {
+                return "Day invalid. It has to be 1 to 31";
+            }
+
+            // Here day is lesser or equal than 31
+            if (month == 4 || month == 6 || month == 9 || month == 11) { // these months have 30 days
+                if (day == 31) {
+                    return "Month " + month + " has 30 days";
+                }
+            }
+
+            if (month == 2) { // this month have either 28 or 29 days
+                if (isLeap(year) ){
+                    if (day > 29){
+                        return "Month " + month + " has 29 days";
+                    }
+                } else {
+                    if (day > 28){
+                        return "Month " + month + " has 28 days";
+                    }
+                }
+            }
+
+            return "Valid date: " + day + "/" + month + "/" + year;
+        }
+
+        function isLeap(year) {
+
+            if (year % 400 == 0){
+                return true;
+            } else {
+                if ((year % 4 == 0) && (year % 100 != 0)){
+                    return true;
+                } 
+            }
+            return false;
+        }
+
+        /****************/
+        /* MAIN PROGRAM */
+        /****************/
+        let year = prompt("Please enter year", 2020);
+        let month = prompt("Please enter month", 1);
+        let day = prompt("Please enter day", 1);
+
+        alert(checkDate(year, month, day));
+
+    </script>
+</body>
+</html>
--- a/Solucions-20211107/ex09_convCelsius.html
+++ b/Solucions-20211107/ex09_convCelsius.html
@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Conv Celsius Farenheit</title>
+
+</head>
+<body>
+    <script>
+
+        /* Crear una aplicació que permeti realitzar la conversió entre temperatures de  ºC a ºF  i de ºF a ºC, 
+           d’acord amb la següent fórmula: 
+             ºF = (9.0/5.0)* (ºC)+32. 
+           El programa ha de demanar a l’usuari quina conversió ha de fer i la temperatura  a convertir. */
+
+        var conv = parseInt(prompt("Per convertir de Celsius a Farenheit escriu 1, per convertir de Farenheit a Celsius escriu 2", 1));
+        var degrees = parseInt(prompt("Escriu els graus", "100"));
+
+
+        if (conv == 1) {
+            var far = (9.0 / 5.0) * degrees + 32;
+            document.write("Graus Farenheit = " + far);
+
+        } else {
+            var cel = 5.0 * (degrees - 32) / 9.0;
+            document.write("Graus Celsius = " + cel);
+        }
+
+    </script>
+</body>
+</html>
--- a/Solucions-20211107/ex10_conversions.html
+++ b/Solucions-20211107/ex10_conversions.html
@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Conversions decimal a binario, ...</title>
+
+</head>
+<body>
+    <script>
+
+        /* Demanar a l’usuari un número i mostrar el resultat de convertir-lo a binari, a octal i a hexadecimal. 
+        Cal que implementis el codi sencer utilitzant només bucles, condicionals, divisions i residus de divisió. */
+
+        function invCadena(cad) {
+            var cad_inv = "";
+
+            for (var i = 0; i < cad.length; i++) {
+                cad_inv += cad[cad.length - 1 - i];
+            }
+
+            return cad_inv;
+        }
+
+        function convHexa(val) {
+            switch (val) {
+                case 10:
+                    return "A";
+                    break;
+                case 11:
+                    return "B";
+                    break;
+                case 12:
+                    return "C";
+                    break;
+                case 13:
+                    return "D";
+                    break;
+                case 14:
+                    return "E";
+                    break;
+                case 15:
+                    return "F";
+                    break;
+                default:
+                    return val;
+            }
+        }
+
+        var num10 = parseInt(prompt("Escriu un numero", "120"));
+
+        var cad_2 = "";
+        var resto_2;
+        var coc_2 = num10;
+
+        while (coc_2 != 0) {
+            resto_2 = coc_2 % 2; // resto
+            coc_2 = parseInt(coc_2 / 2); // cociente
+            cad_2 += resto_2;
+        }
+
+        document.write("num2 = " + invCadena(cad_2));
+
+        var cad_8 = "";
+        var resto_8;
+        var coc_8 = num10;
+
+        while (coc_8 != 0) {
+            resto_8 = coc_8 % 8; // resto
+            coc_8 = parseInt(coc_8 / 8); // cociente
+            cad_8 += resto_8;
+        }
+
+        document.write("<br>num8 = " + invCadena(cad_8));
+
+        var cad_16 = "";
+        var resto_16;
+        var coc_16 = num10;
+
+        while (coc_16 != 0) {
+            resto_16 = coc_16 % 16; // resto
+            coc_16 = parseInt(coc_16 / 16); // cociente
+            cad_16 += convHexa(resto_16);
+        }
+        document.write("<br>num16 = " + invCadena(cad_16));
+
+
+    </script>
+</body>
+</html>
--- a/Solucions-20211106.zip
+++ b/Solucions-20211106.zip
--- a/Solucions-20211106/ex01.fileExt.html
+++ b/Solucions-20211106/ex01.fileExt.html
@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Split extensio</title>
+
+</head>
+<body>
+
+    <script>
+
+        let nom = prompt("Nom d'arxiu", "arxiu.txt");
+
+        let tokens = nom.split(".");
+
+        document.write("La extensio es: " + tokens[1]);
+
+    </script>
+
+</body>
+</html>
--- a/Solucions-20211106/ex02.countab.html
+++ b/Solucions-20211106/ex02.countab.html
@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+    <script>
+        let text = prompt("Introduce un texto","Este texto es de pruebaaa");
+
+        // Primera opcion: 2 contadores
+        let count_a = 0, count_b = 0;
+        for (let i = 0; i < text.length; i++){
+            if (text.charAt(i) == "a"){
+                count_a ++;
+            }
+            if (text.charAt(i) == "b"){
+                count_b ++;
+            }
+        }
+        console.log(count_a+", "+count_b);
+        if (count_a == count_b){
+            alert("Hay el mismo numero de a que de b");
+        } else {
+            alert("Hay diferente numero de a que de b");
+        }
+
+    </script>
+</body>
+</html>
--- a/Solucions-20211106/ex03.findChar.html
+++ b/Solucions-20211106/ex03.findChar.html
@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+    <script>
+        let text = prompt("Introduce un texto","Este texto es de pruebaaa");
+        let char = prompt("Introduce un caracter","a");
+
+        let count_char = 0;
+        for (let i = 0; i < text.length; i++){
+            if (text.charAt(i) == char){
+                count_char ++;
+            }
+        }
+        console.log(count_char);
+        if (count_char >= 2 && count_char <= 4 ){
+            alert("El caracter aparece entre 2 y 4 veces en el texto");
+        } else {
+            alert("El caracter no aparece entre 2 y 4 veces en el texto");
+        }
+
+    </script>
+</body>
+</html>
--- a/Solucions-20211106/ex04.removeChar.html
+++ b/Solucions-20211106/ex04.removeChar.html
@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+    <script>
+
+        let text = prompt("Introduce un texto", "Este texto es de pruebaaa");
+        let char = prompt("Introduce un caracter", "a");
+
+        let text_rem = "";
+        for(let i = 0; i < text.length; i++){
+            if (text[i] != char){
+                text_rem += text[i];
+            }
+        }
+
+        alert(text_rem);
+
+    </script>
+</body>
+</html>
--- a/Solucions-20211106/ex05.textFade.html
+++ b/Solucions-20211106/ex05.textFade.html
@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+    <script>
+        let text = prompt("Introdueix un text: ", "Text de prova");
+
+        document.write("Text en majuscules: " + text.toUpperCase());
+        document.write("<br>Text en minuscules: " + text.toLowerCase());
+        document.write("<br>Longitud del text: " + text.length);
+        document.write("<br>Nombre de paraules: " + text.split(" ").length);
+        document.write("<br>Nombre de vocals: " + text.match(/[aeiouàèéíòóúïü]/gi).length);
+
+        for (let i = 0; i < text.length; i++) {
+            document.write("<br>" + text.substring(i, text.length));
+        }
+
+    </script>
+</body>
+</html>
--- a/Solucions-20211106/ex06.userName.html
+++ b/Solucions-20211106/ex06.userName.html
@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+    <script>
+
+        let name = prompt("Introduce tu nombre y apellidos: ", "Juan Hernandez Martin");
+        document.write("Longitud nombre y apellidos sin espacios: "+ name.replaceAll(" ","").length);
+        document.write("<br>Nombre en minusculas: "+ name.toLowerCase());
+        document.write("<br>Nombre en mayusculas: "+ name.toUpperCase());
+        let name_tokens = name.split(" ");
+        document.write("<br>Nombre: " + name_tokens[0] + "<br>Apellido 1: "+ name_tokens[1] + "<br>Apellido 2: "+ name_tokens[2]);
+        let username1 = (name_tokens[0][0] + name_tokens[1] + name_tokens[2][0]).toLowerCase();
+        document.write("<br>Nombre de usuario1: "+ username1);
+        let username2 = (name_tokens[0].slice(0,3) + name_tokens[1].slice(0,3) + name_tokens[2].slice(0,3)).toLowerCase();
+        document.write("<br>Nombre de usuario2: "+ username2);
+
+    </script>
+</body>
+</html>
--- a/Solucions-20211106/objects.ex08.trimestre.html
+++ b/Solucions-20211106/objects.ex08.trimestre.html
@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+    <script>
+        let dt = new Date();
+
+        let qt = parseInt((dt.getMonth() ) / 3 ) + 1;
+
+        alert ("quatrimestre = "+qt);
+    </script>
+</body>
+</html>
--- a/Solucions-20211106/objects.ex09.formatDate.html
+++ b/Solucions-20211106/objects.ex09.formatDate.html
@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+    <script>
+
+        function capitalize(string) {
+            return string.charAt(0).toUpperCase() + string.slice(1);
+        }
+
+        let dt = new Date();
+
+        let dow = capitalize(Intl.DateTimeFormat('es-ES', { weekday: 'long' }).format(dt));
+        let month = capitalize(Intl.DateTimeFormat('es-ES', { month: 'long' }).format(dt));
+
+        alert("Hoy es " + dow + " " + dt.getDate() + " de " + month + " de " + dt.getFullYear());
+
+    </script>
+</body>
+</html>
--- a/Solucions-20211106/objects.ex10.dimecres.html
+++ b/Solucions-20211106/objects.ex10.dimecres.html
@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+    <script>
+
+        var year1 = prompt("Escriu un any");
+        var year2 = prompt("Escriu un altre any");
+
+        var found = false;
+
+        while (!found && year1 < year2) {
+            var date = new Date(year1, 0, 1);
+            if (date.getDay() == 3) {
+                found = true;
+            } else {
+                year1++;
+            }
+        }
+
+        if (found) {
+            document.write("El dia " + date.getDate() + " del " + (date.getMonth() + 1) + " de " + date.getFullYear() + " va ser dimecres");
+        } else {
+            document.write("No hi ha cap any en aquest rang en que l'un de gener fos dimecres");
+        }
+
+    </script>
+</body>
+</html>
--- a/Solucions-20211106/objects.ex11.dateTime.html
+++ b/Solucions-20211106/objects.ex11.dateTime.html
@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+    <script>
+
+        const oneDayMillis = 24 * 60 * 60 * 1000;
+
+        let now = new Date();
+
+        let firstDayYear = new Date(now.getFullYear(), 0, 1);
+
+        let nbrDays = parseInt((now.getTime() - firstDayYear.getTime()) / oneDayMillis);
+
+        let percDaysYear = ((nbrDays / 365) * 100).toFixed(1);
+
+        let startOfToday = new Date(now.getFullYear(), now.getMonth(), now.getDate()); // start of today
+
+        let percDayToday = ((now.getTime() - startOfToday.getTime()) * 100 / oneDayMillis).toFixed(1);
+
+        document.write("Avui és " + now.getDate() + " del " + (now.getMonth() + 1) + " de " + now.getFullYear());
+        document.write("<br>Nombre de setmanas que han passat de l'any = " + parseInt(nbrDays / 7));
+        document.write("<br>Percentatge de dies transcorreguts de l’any = " + percDaysYear + "%");
+        document.write("<br>Nombre de dies que resten d’any = " + (365 - nbrDays));
+        document.write("<br>Ara són les " + now.getHours() + ":" + now.getMinutes() + ":" + now.getSeconds());
+        document.write("<br>Percentatge de dia transcorregut = " + percDayToday + "%");
+        document.write("<br>Percentatge de dia que queda = " + ((100 - percDayToday)).toFixed(1) + "%");
+
+    </script>
+</body>
+</html>
--- a/Solucions-20211106/objects.ex17.guessNbr.html
+++ b/Solucions-20211106/objects.ex17.guessNbr.html
@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Guess number</title>
+
+</head>
+<body>
+
+    <script>
+        var rnd = Math.floor(Math.random() * 100) + 1;
+        console.log("rnd = " + rnd);
+
+        var found = false;
+        var intents = 0;
+        while (!found) {
+
+            num = parseInt(prompt("Endevina el numero de 1 a 100 que he pensat: "));
+            console.log("num = " + num);
+
+            if (!isNaN(num) && num >= 0 && num <= 100) {
+
+                if (num == 0) {
+                    break;
+                }
+
+                if (num > rnd) {
+                    console.log("Mes petit")
+                    alert("No, es mes petit que " + num);
+                } else if (num < rnd) {
+                    console.log("Mes gran")
+                    alert("No, es mes gran que " + num);
+                } else { // num == rnd
+                    found = true;
+                }
+            }
+
+            intents++;
+        }
+
+        if (found) {
+            alert("Exacte, ho has encertat en " + intents + " intents, era el numero " + rnd);
+        } else {
+            alert("GAME IS OVER");
+        }
+
+    </script>
+
+</body>
+</html>
--- a/Solucions-20211106/objects.ex18.window.html
+++ b/Solucions-20211106/objects.ex18.window.html
@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+
+    <h1>Metodes de l'objecte finestra</h1>
+    <button onclick="newWindow()">New window</button>
+    <button onclick="closeWindow()">Close window</button>
+    <button onclick="resizeWindow()">Resize window</button>
+    <button onclick="moveWindow()">Move window</button>
+    <button onclick="focusWindow()">Focus window</button>
+    <button onclick="printWindow()">Print window</button>
+
+    <script>
+        function newWindow() {
+            myWindow = window.open("", "", "width=300,height=500");
+            myWindow.document.write("<h1>Finestra nova</h1>");
+        }
+
+        function closeWindow() {
+            myWindow.close();
+        }
+
+        function resizeWindow() {
+            myWindow.resizeBy(20, 15);
+        }
+
+        function moveWindow() {
+            myWindow.moveBy(15, 20);
+        }
+        function focusWindow() {
+            myWindow.focus();
+        }
+
+        function printWindow() {
+            myWindow.print();
+        }
+
+        let myWindow;
+
+    </script>
+</body>
+</html>
--- a/Solucions-20211106/objects.ex19.setInterval.html
+++ b/Solucions-20211106/objects.ex19.setInterval.html
@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+
+    <p id="clock"></p>
+    <button onclick="stopClock()">Atura rellotge</button>
+
+    <script>
+        function stopClock() {
+            clearInterval(timer);
+        }
+
+        function runClock() {
+            let dt = new Date();
+            document.getElementById("clock").innerHTML = dt.toLocaleTimeString();
+        }
+
+        let timer = setInterval(runClock, 1000);
+
+
+    </script>
+</body>
+</html>
--- a/uf01/cookies/pisarra_01.html
+++ b/uf01/cookies/pisarra_01.html
@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html>
+<head>
+<script>
+function setCookie(cname,cvalue,exdays) {
+  const d = new Date();
+  d.setTime(d.getTime() + (exdays*24*60*60*1000));
+  let expires = "expires=" + d.toGMTString();
+  document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
+}
+
+function getCookie(cname) {
+  let name = cname + "=";
+  let decodedCookie = decodeURIComponent(document.cookie);
+  let ca = decodedCookie.split(';');
+  for(let i = 0; i < ca.length; i++) {
+    let c = ca[i];
+    while (c.charAt(0) == ' ') {
+      c = c.substring(1);
+    }
+    if (c.indexOf(name) == 0) {
+      return c.substring(name.length, c.length);
+    }
+  }
+  return "";
+}
+
+function checkCookie() {
+  let user = getCookie("username");
+  if (user != "") {
+    alert("Welcome again " + user);
+  } else {
+     user = prompt("Please enter your name:","");
+     if (user != "" && user != null) {
+       setCookie("username", user, 30);
+     }
+  }
+}
+</script>
+</head>
+
+<body onload="checkCookie()"></body>
+
+</html>
--- a/uf01/examen_jan_maroto.zip
+++ b/uf01/examen_jan_maroto.zip
--- a/uf01/examen_jan_maroto/exercici_01.html
+++ b/uf01/examen_jan_maroto/exercici_01.html
@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Problema primer encriptació</title>
+
+</head>
+<body>
+    <p id="ex01"></p>
+    
+    <script>
+        
+        var str = prompt("Input the encoded string");
+        var modChar = prompt("Input the character to decode the string");
+
+        // Decoded string
+        var decStr="";
+        
+
+        for (var i=0; i<str.length; i++) {
+            if (str[i]==modChar) {
+                decStr+=str[i+1];
+            }
+        }
+        document.getElementById("ex01").innerHTML = decStr;
+    </script>
+</body>
+</html>
--- a/uf01/examen_jan_maroto/exercici_03.html
+++ b/uf01/examen_jan_maroto/exercici_03.html
@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Problema tercer conmpte enrrere</title>
+
+</head>
+<body>
+    <p id="ex03"></p>
+    <p id="ex03-2"></p>
+
+    <button onclick="startTimer()">Inicia rellotge</button>
+    <button onclick="stopTimer()">Atura rellotge</button>
+
+    
+    <script>
+        
+
+        function stopTimer() {
+            clearInterval(timer);
+        }
+
+        function printTimer() {
+            let newDate = new Date();
+            let nowDate = Date.parse(newDate);
+            let laterDate = newDate.setHours(23, 59, 59);
+            let timeRemaining = laterDate-nowDate;
+
+            //Mha faltat temps per a formatigar els milisegons de la variable anterior
+            let outputTime = ""
+            document.getElementById("ex03").innerHTML = timeRemaining ;
+        }
+
+        function startTimer() {
+            timer = setInterval(printTimer, 5000);
+        }
+        let timer = setInterval(printTimer, 5000);
+        
+    </script>
+</body>
+</html>
--- a/uf01/exercici_janmaroto/exercici_01.html
+++ b/uf01/exercici_janmaroto/exercici_01.html
@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Palíndroms i nombres capicua</title>
+
+</head>
+<body>
+    <p id="ex01"></p>
+    
+    <script>
+        
+        var userInput = prompt("Enter a string to check", "Tramaran anar a Mart");
+
+        document.getElementById("ex01").innerHTML = returnMessage(inputToCheck);
+
+        function returnMessage(inputToCheck) {
+            if (inputToCheck.isEmpty()){
+                return "L\'entrdada no és ni un palíndrom, ni un nombre capicua.";
+            } else if (!isNaN(userInput)) { 
+                if (checkUserInput(inputToCheck)) {
+                    return "L\'entrada és un palíndrom.";
+                }
+            } else {
+                if (checkUserInput(inputToCheck)){
+                    return "L\'entrada és un nombre capicua.";
+                }
+            }
+            return "L\'entrdada no és ni un palíndrom, ni un nombre capicua.";
+        }
+       
+
+        function checkUserInput (numToCheck) {
+            var returnVar = true;
+            for (var i=0; i<(((numToCheck.length%2)==0) ? (parseInt(numToCheck.length/2)-1) : parseInt(numToCheck.length/2)); i++){
+                if (!(numToCheck[i]==numToCheck[numToCheck.length -1 - i])) {
+                    returnVar = false;
+                    break;
+                }
+            }
+            return returnVar;
+
+        }
+    </script>
+</body>
+</html>
--- a/uf01/exercicis_uf01_01/ex08_validaData.html
+++ b/uf01/exercicis_uf01_01/ex08_validaData.html
@ -0,0 +1,84 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Validar Data</title>
+
+</head>
+<body>
+
+    <script>
+
+        /****************/
+        /* FUNCTIONS    */
+        /****************/
+        function checkDate(year, month, day) {
+
+            year = parseInt(year);
+            month = parseInt(month);
+            day = parseInt(day);
+
+            console.log(year + "," + month + "," + day);
+
+            // check year
+            if (isNaN(year)) {
+                return "Year invalid. Year has to be an integer";
+            }
+
+            // check month
+            if (isNaN(month) || month < 1 || month > 12) {
+                return "Month invalid. It has to be 1 to 12";
+            }
+
+            // check day
+            if (isNaN(day) || day < 1 || day > 31) {
+                return "Day invalid. It has to be 1 to 31";
+            }
+
+            // Here day is lesser or equal than 31
+            if (month == 4 || month == 6 || month == 9 || month == 11) { // these months have 30 days
+                if (day == 31) {
+                    return "Month " + month + " has 30 days";
+                }
+            }
+
+            if (month == 2) { // this month have either 28 or 29 days
+                if (isLeap(year) ){
+                    if (day > 29){
+                        return "Month " + month + " has 29 days";
+                    }
+                } else {
+                    if (day > 28){
+                        return "Month " + month + " has 28 days";
+                    }
+                }
+            }
+
+            return "Valid date: " + day + "/" + month + "/" + year;
+        }
+
+        function isLeap(year) {
+
+            if (year % 400 == 0){
+                return true;
+            } else {
+                if ((year % 4 == 0) && (year % 100 != 0)){
+                    return true;
+                } 
+            }
+            return false;
+        }
+
+        /****************/
+        /* MAIN PROGRAM */
+        /****************/
+        let year = prompt("Please enter year", 2020);
+        let month = prompt("Please enter month", 1);
+        let day = prompt("Please enter day", 1);
+
+        alert(checkDate(year, month, day));
+
+    </script>
+</body>
+</html>
--- a/uf01/exercicis_uf01_01/exercic_06.html
+++ b/uf01/exercicis_uf01_01/exercic_06.html
@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+<body>
+
+<h2>JavaScript Functions</h2>
+
+<p>This example calls a function which performs a calculation, and returns the result:</p>
+
+<p id="demo"></p>
+
+<script>
+    num1 = parseInt(prompt("Primer nombre: "));
+    num2 = parseInt(prompt("Segon nombre: "));
+    num3 = parseInt(prompt("Tercer nombre: "));
+
+    total = (num1*3600) + (num2*60) + num3 + 1;
+
+    hora = total%3600;
+    alert(hora);
+
+    minut = (total-(hora*3600))%60;
+    
+
+    segon = (total-(hora*3600)-(minut*60));
+
+    alert(hora + ":" + minut + ":" + segon)
+
+
+</script>
+
+</body>
+</html>
--- a/uf01/exercicis_uf01_01/exercic_08.html
+++ b/uf01/exercicis_uf01_01/exercic_08.html
@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+<body>
+
+<h2>JavaScript Functions</h2>
+
+<p>This example calls a function which performs a calculation, and returns the result:</p>
+
+<p id="demo"></p>
+
+<script>
+    format = parseInt(prompt("Introdueïx el sistema origen (c/f)"));
+    value = parseInt(prompt("Introdueïx el valor"));
+    num3 = parseInt(prompt("Tercer nombre: "));
+
+    total = (num1*3600) + (num2*60) + num3 + 1;
+
+    hora = total%3600;
+    alert(hora);
+
+    minut = (total-(hora*3600))%60;
+    
+
+    segon = (total-(hora*3600)-(minut*60));
+
+    alert(hora + ":" + minut + ":" + segon)
+
+
+</script>
+
+</body>
+</html>
--- a/uf01/exercicis_uf01_01/proves.html
+++ b/uf01/exercicis_uf01_01/proves.html
@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+<body>
+
+<h2>JavaScript Functions</h2>
+
+<p>This example calls a function which performs a calculation, and returns the result:</p>
+
+<p id="demo"></p>
+
+<script>
+    num1 = parseInt(prompt("Primer nombre: "));
+    num2 = parseInt(prompt("Segon nombre: "));
+    num3 = parseInt(prompt("Tercer nombre: "));
+
+    total = ($num1*3600) + ($num2*60) + $num3 + 1;
+
+    hora = $total%3600;
+
+    minut = ($total-($hora*3600))%60;
+
+    segon = ($total-($hora*3600)-($minut*60));
+
+    alert($hora + ":" + $minut + ":" + $segon)
+
+
+</script>
+
+</body>
+</html>
--- a/uf01/exercicis_uf01_02/exercic_01.html
+++ b/uf01/exercicis_uf01_02/exercic_01.html
@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<body>
+
+<h2>Exercicis JavaScript UF01 2</h2>
+
+<p>Jan Maroto</p>
+
+<script>
+    input = prompt("Introdueïx el nom d'un fitxers");
+
+    char = input.charAt(input.lenght-1);
+
+    output = 'no extension';
+
+    for (i = input.lenght-1; char != '.'; i--){
+        char = input.charAt(i);
+        output += char;
+    }
+
+    echo(output);
+
+
+</script>
+
+</body>
+</html>
--- a/uf01/exercicis_uf01_02/exercic_02.html
+++ b/uf01/exercicis_uf01_02/exercic_02.html
@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html>
+<body>
+
+<h2>Exercicis JavaScript UF01 2</h2>
+
+<h3>Jan Maroto</h3>
+<h4 id="demo"></h4>
+
+<script>
+    input = prompt("Introdueïx qualsevol cosa");
+
+    nCharA = 0;
+    nCharB = 0;
+
+    [...input].forEach(firstFunction);
+
+    if (nCharA == nCharB) {
+        text = "Hi han el mateix nombre de as que de bs";
+    } else {
+        text = "No hi han el mateix nombre de as que de bs";
+    }
+
+    function firstFunction(char) {
+        if (char == 'a') {
+            ++nCharA;
+        } else if (char == 'b') {
+            ++nCharB;
+        }
+    }
+
+    document.getElementById("demo").innerHTML = text;
+    
+
+
+
+</script>
+
+</body>
+</html>
--- a/uf01/exercicis_uf01_02/exercic_06.html
+++ b/uf01/exercicis_uf01_02/exercic_06.html
@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+<body>
+
+<h2>Exercicis JavaScript UF01 2</h2>
+
+<h3>Jan Maroto</h3>
+<h4 id="demo"></h4>
+
+<script>
+    fname = prompt("Introdueïx el teu nom");
+    mname = prompt("Introdueïx el teu cognom");
+    lname = prompt("Introdueïx el teu segon cognom");
+
+    nCharA = 0;
+    nCharB = 0;
+
+    [...input].forEach(firstFunction);
+
+    if (nCharA == nCharB) {
+        text = "Hi han el mateix nombre de as que de bs";
+    } else {
+        text = "No hi han el mateix nombre de as que de bs";
+    }
+
+    function firstFunction(char) {
+        if (char == 'a') {
+            ++nCharA;
+        } else if (char == 'b') {
+            ++nCharB;
+        }
+    }
+
+    document.getElementById("demo").innerHTML = text;
+    
+
+
+
+</script>
+
+</body>
+</html>
--- a/uf01/exercicis_uf01_02/exercic_11.html
+++ b/uf01/exercicis_uf01_02/exercic_11.html
@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+<body>
+
+<h2>Exercicis JavaScript UF01 2</h2>
+
+<h3>Jan Maroto</h3>
+<h4 id="demo"></h4>
+
+<script>
+    fname = prompt("Introdueïx el teu nom");
+    mname = prompt("Introdueïx el teu cognom");
+    lname = prompt("Introdueïx el teu segon cognom");
+
+    nCharA = 0;
+    nCharB = 0;
+
+    [...input].forEach(firstFunction);
+
+    if (nCharA == nCharB) {
+        text = "Hi han el mateix nombre de as que de bs";
+    } else {
+        text = "No hi han el mateix nombre de as que de bs";
+    }
+
+    function firstFunction(char) {
+        if (char == 'a') {
+            ++nCharA;
+        } else if (char == 'b') {
+            ++nCharB;
+        }
+    }
+
+    document.getElementById("demo").innerHTML = text;
+    
+
+
+
+</script>
+
+</body>
+</html>
--- a/uf01/exercicis_uf01_02/exercic_17.html
+++ b/uf01/exercicis_uf01_02/exercic_17.html
@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+<body>
+
+<h2>Exercicis JavaScript UF01 2</h2>
+
+<h3>Jan Maroto</h3>
+<h4 id="demo"></h4>
+
+<script>
+    function rand(min, max){
+        return Math.floor(Math.random() * (max - min + 1)) + min;
+    }
+
+    while(true)
+    userNumber = prompt("Introdueïx el teu nom");
+    machineNumber = rand(1, 100);
+
+    nCharA = 0;
+    nCharB = 0;
+
+    [...input].forEach(firstFunction);
+
+    if (nCharA == nCharB) {
+        text = "Hi han el mateix nombre de as que de bs";
+    } else {
+        text = "No hi han el mateix nombre de as que de bs";
+    }
+
+    function firstFunction(char) {
+        if (char == 'a') {
+            ++nCharA;
+        } else if (char == 'b') {
+            ++nCharB;
+        }
+    }
+
+    document.getElementById("demo").innerHTML = text;
+    
+
+
+
+</script>
+
+</body>
+</html>
--- a/uf02/examen/index
+++ b/uf02/examen/index
@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
+    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
+
+    <title>Jan Maroto</title>
+</head>
+<body>
+    <button class="w3-button w3-dark-gray w3-margin" onclick="printList('a')">Order &#8673;</button>
+    <button class="w3-button w3-dark-gray w3-margin" onclick="printList('d')">Order &#8675;</button>
+    <div class="w3-container">
+        <input type="text" placeholder="Search By House.. " class="form-control" id="search-bar-1" onkeydown="printList('fh')">
+        <input type="text" placeholder="Filter By Year Before.. " class="form-control" id="search-bar-2" onkeydown="printList('fy')">
+    </div>
+    <br>   
+
+    <div style="overflow-y:auto; max-height:500px" class="w3-container">
+        <table class="w3-table-all w3-hoverable">
+            <thead style="position:sticky; top:0;">
+                <tr class="w3-dark-gray">
+                    <th>Name</th>
+                    <th>Actor</th>
+                    <th>House</th>
+                    <th>Birth Year</th>
+                    <th>Eye Colour</th>
+                    <th>Hair Color</th>
+                </tr>
+            </thead>
+            <thead id="contentTable"></thead>
+        </table>
+    </div>
+    <script src="script.js"></script>
+
+</body>
+</html>
--- a/uf02/examen/script.js
+++ b/uf02/examen/script.js
@ -0,0 +1,99 @@
+
+var characters = [
+    {name: "Harry Potter", actor: "Daniel Radcliffe", house: "Gryffindor", yearOfBirth: "1980", eyeColour: "green", hairColour: "black"},
+    {name: "Hermione Granger", actor: "Emma Watson", house: "Gryffindor", yearOfBirth: "1979", eyeColour: "brown", hairColour: "brown"},
+    {name: "Ron Weasley", actor: "Rupert Grint", house: "Gryffindor", yearOfBirth: "1980", eyeColour: "blue", hairColour: "red"},
+    {name: "Draco Malfoy", actor: "Tom Felton", house: "Slytherin", yearOfBirth: "1980", eyeColour: "grey", hairColour: "blonde"},
+    {name: "Minerva McGonagall", actor: "Dame Maggie Smith", house: "Gryffindor", yearOfBirth: "1925", eyeColour: "", hairColour: "black"},
+    {name: "Cedric Diggory", actor: "Robert Pattinson", house: "Hufflepuff", yearOfBirth: "1977", eyeColour: "grey", hairColour: "brown"},
+    {name: "Cho Chang", actor: "Katie Leung", house: "Ravenclaw", yearOfBirth: "", eyeColour: "brown", hairColour: "black"},
+    {name: "Severus Snape", actor: "Alan Rickman", house: "Slytherin", yearOfBirth: "1960", eyeColour: "black", hairColour: "black"},
+    {name: "Rubeus Hagrid", actor: "Robbie Coltrane", house: "Gryffindor", yearOfBirth: "1928", eyeColour: "black", hairColour: "black"},
+    {name: "Neville Longbottom", actor: "Matthew Lewis", house: "Gryffindor", yearOfBirth: "1980", eyeColour: "", hairColour: "blonde"},
+    {name: "Luna Lovegood", actor: "Evanna Lynch", house: "Ravenclaw", yearOfBirth: "1981", eyeColour: "grey", hairColour: "blonde"},
+    {name: "Ginny Weasley", actor: "Bonnie Wright", house: "Gryffindor", yearOfBirth: "1981", eyeColour: "brown", hairColour: "red"},
+    {name: "Sirius Black", actor: "Gary Oldman", house: "Gryffindor", yearOfBirth: "1959", eyeColour: "grey", hairColour: "black"},
+    {name: "Remus Lupin", actor: "David Thewlis", house: "Gryffindor", yearOfBirth: "1960", eyeColour: "green", hairColour: "brown"},
+    {name: "Arthur Weasley", actor: "Mark Williams", house: "Gryffindor", yearOfBirth: "1950", eyeColour: "blue", hairColour: "red"},
+    {name: "Bellatrix Lestrange", actor: "Helena Bonham Carter", house: "Slytherin", yearOfBirth: "1951", eyeColour: "brown", hairColour: "black"},
+    {name: "Lord Voldemort", actor: "Ralph Fiennes", house: "Slytherin", yearOfBirth: "1926", eyeColour: "red", hairColour: "bald"}
+];
+function printList(task) {
+	// document.getElementById("contentItems").innerHTML = "";
+	switch (task) {
+		case 'a': 
+			returnVar = orderList('a', characters);
+			break;
+		case 'd':
+			returnVar = orderList('d', characters);
+			break;
+		case 'fh':
+			returnVar = filterHouse(document.getElementById("search-bar-1").value, characters);
+			break;
+        case 'fy':
+			returnVar = filterYear(document.getElementById("search-bar-2").value, characters);
+			break;
+		case 'n':
+			returnVar = characters;
+			break;
+		case 'r':
+			location.reload();
+			return;
+		default:
+			break;
+	}
+    showTable(returnVar);
+}
+
+function filterHouse(inputVar, finalData) {
+	var obj = new Array();
+	for(var i = 0; i < finalData.length; i++){
+		if (finalData[i].house.indexOf(inputVar) != -1) {
+			obj.push(finalData[i]);
+		}
+	}
+	return obj;
+}
+function filterYear(inputVar, finalData) {
+	var obj = new Array();
+	for(var i = 0; i < finalData.length; i++){
+		if (finalData[i].yearOfBirth < inputVar) {
+			obj.push(finalData[i]);
+		}
+	}
+	return obj;
+}
+function orderList(order, finalData) {
+	var obj = finalData.sort(function compare( a, b ) {
+		if ( a.house < b.house ){
+		  return -1;
+		}
+		if ( a.house > b.house ){
+		  return 1;
+		}
+		return 0;
+	  });
+    if (order=='d') return obj.reverse();
+    if (document.getElementById("search-bar-1").value == null || username == "")
+    return obj;
+
+		
+}
+function showTable(finalData) {
+    document.getElementById("contentTable").innerHTML = null;
+    for (let i=0; i<finalData.length; i++) {
+        document.getElementById("contentTable").innerHTML += 
+        `<tr>
+            <td>` + finalData[i]["name"] + `</td>
+            <td>` + finalData[i]["actor"] + `</td>
+            <td>` + finalData[i]["house"] + `</td>
+            <td>` + finalData[i]["yearOfBirth"] + `</td>
+            <td>` + finalData[i]["eyeColour"] + `</td>
+            <td>` + finalData[i]["hairColour"] + `</td>
+        </tr>`
+    }
+}
+
+
+
+showTable(characters);
--- a/uf02/examen_jan_maroto.zip
+++ b/uf02/examen_jan_maroto.zip
--- a/uf02/exercici_json/index.html
+++ b/uf02/exercici_json/index.html
@ -0,0 +1,81 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>M6 UF2</title>
+
+	<!-- w3.css -->
+	<link rel="stylesheet" href="style/w3.css">
+
+	<!-- BootStrap -->
+	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
+	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
+
+	<!-- jQuery -->
+	<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
+
+	<!-- Custom -->
+	<script src="js/functions.js"></script>
+
+</head>
+<body>
+	<div class="w3-container">
+		<div class="w3-container w3-center" style="width: 100%;">
+			<h2 onclick="printList('r')">Movie Colection</h2>
+			<div class="w3-row w3-padding">
+				<button id="debugTag" class="btn btn-dark w3-margin" onclick="printList('r')">Reset &#10226;</button>
+				<button class="btn btn-dark w3-margin" onclick="printList('a')">Order &#8673;</button>
+				<button class="btn btn-dark w3-margin" onclick="printList('d')">Order &#8675;</button>
+				<button class="btn btn-dark w3-margin" onclick="calcMitjana()">Average &#9711;</button>
+					<div class="form-group">
+					  <input type="text" placeholder="Search.. " class="form-control" id="search-bar" onkeydown="search()">
+					</div>
+				</form>
+				<h2 id="calcMitjana"></h2>
+			</div>
+		</div>
+		
+		<div class="w3-container w3-center">
+			<table class="table" id="contentTable" style="display:none">
+			<thead class="thead-dark">
+				<tr>
+				<th scope="col">#</th>
+				<th scope="col">Image</th>
+				<th scope="col">Title</th>
+				<th scope="col">Year</th>
+				<th scope="col">Rating</th>
+				<th scope="col">Details</th>
+				</tr>
+			</thead>
+			<tbody id="contentItems">
+			</tbody>
+			</table>
+		</div>
+	</div>
+	<div class="modal fade" id="myModal" role="dialog">
+		<div class="modal-dialog">
+		
+		  <!-- Modal content-->
+		  <div class="modal-content">
+			<div class="modal-header">
+
+			<img src="" id="modalMovieImage" style="width:100%; max-width: 75px">
+			<h3 class="modal-title" id="modalMovieTitle" style="font-weight: bold;"></h3>
+			</div>
+			<div class="modal-body">
+			  <h5 id="modalMovieYear"></h5>
+			  <h5 id="modalMovieRating"></h5>
+			  <h5 id="modalMovieCountry"></h5>
+			  <p id="modalMoviePlot"></p>
+			</div>
+			<div class="modal-footer">
+			  <button type="button" class="btn btn-default" data-dismiss="modal" onclick="$('#myModal').modal('hide')">Close</button>
+			</div>
+		  </div>
+		  
+		</div>
+	  </div>
+</body>
+</html>
--- a/uf02/exercici_json/js/data/movies.json
+++ b/uf02/exercici_json/js/data/movies.json
--- a/uf02/exercici_json/js/data/municipis.json
+++ b/uf02/exercici_json/js/data/municipis.json
--- a/uf02/exercici_json/js/data/pokemon.json
+++ b/uf02/exercici_json/js/data/pokemon.json
--- a/uf02/exercici_json/js/functions.js
+++ b/uf02/exercici_json/js/functions.js
@ -0,0 +1,113 @@
+var movies;
+$( document ).ready(function() {
+
+	var urlMovies = "js/data/movies.json";
+	$.ajax({					
+		async: true,
+		url: urlMovies
+	})
+	.done(function( data ) {
+		movies = data.movies;
+		
+		printList('n');	
+	});
+	
+});
+function printList(task) {
+	document.getElementById("contentItems").innerHTML = "";
+	switch (task) {
+		case 'a': 
+			returnVar = orderList('a');
+			break;
+		case 'd':
+			returnVar = orderList('d');
+			break;
+		case 'f':
+			returnVar = filterList(document.getElementById("search-bar").value);
+			break;
+		case 'n':
+			returnVar = movies;
+			break;
+		case 'r':
+			location.reload();
+			return;
+		default:
+			break;
+	}
+	for(var i = 0; i < returnVar.length; i++){
+		document.getElementById("contentItems").innerHTML += 
+		`<tr>` + 
+			`<td scope="row">` + i + `</td>` + 
+			`<td scope="row">` + returnVar[i].title + `</td>` + 
+			`<td scope="row">` + returnVar[i].year + `</td>` + 
+			`<td><img src="` + returnVar[i].url + `" style="width:100%; max-width: 75px"></td>` +
+			`<td scope="row">` + returnVar[i].rating + `</td>` +
+			`<td scope="row"><button class="btn btn-dark w3-margin" onclick="openModal(` +
+				`'` + returnVar[i].url + `', ` +
+				`'` + returnVar[i].title + `', ` +
+				`'` + returnVar[i].year + `', ` +
+				`'` + returnVar[i].rating + `', ` +
+				`'` + returnVar[i].countries[0] + `', ` +
+				`returnVar[` + i + `].plot` +
+			`)">Details &#9432;</button></td>` + 
+		`</tr>`;
+	}
+
+	document.getElementById("contentTable").style.display='block';
+}
+
+function openModal(image, title, year, rating, country, plot) {
+	document.getElementById("modalMovieImage").src = image;
+	document.getElementById("modalMovieTitle").innerHTML = title;
+	document.getElementById("modalMovieYear").innerHTML = "Year: "  + year;
+	document.getElementById("modalMovieRating").innerHTML = "Rating: "  + rating;
+	document.getElementById("modalMovieCountry").innerHTML = "Country: "  + country;
+	document.getElementById("modalMoviePlot").innerHTML = "Plot: "  + plot;
+	
+	$('#myModal').modal('show')
+}
+
+
+function calcMitjana() {
+	var ratinTotal = 0;
+	for(var i = 0; i < movies.length; i++){
+		ratinTotal += parseInt(movies[i].rating);
+	}
+	document.getElementById("calcMitjana").innerHTML = "Average Rating: " + (ratinTotal/movies.length).toFixed(2);
+}
+
+function search() {
+	if(event.key === 'Enter') {
+		printList('f');	
+    }
+}
+
+function filterList(inputVar) {
+	var obj;
+
+	for(var i = 0; i < movies.length; i++){
+		if (movies[i].title.indexOf(inputVar) != -1) {
+
+			console.log(movies[i]);
+			// obj.push(movies[i]);
+		}
+	}
+	return obj;
+}
+
+function orderList(order) {
+	var obj = movies.sort(function compare( a, b ) {
+		if ( a.title < b.title ){
+		  return -1;
+		}
+		if ( a.title > b.title ){
+		  return 1;
+		}
+		return 0;
+	  });
+    if (order=='d') return obj.reverse();
+		
+    return obj;
+}
+
+
--- a/uf02/exercici_json/readme.md
+++ b/uf02/exercici_json/readme.md
@ -0,0 +1,3 @@
+Per algun motiu, al treure les imatges de cop, en el Firefox la pàgina triga molt a carregar i pot arribar a congelar-se. En canvi, en el Chrome o derivats carrega correctament.
+No he pogut treure per pantalla el filtratge, hi ha quelcom del push de la funció filterList(), que no li agrada, és per això que està comentat. En canvi, he deixat un console.log, perquè venguis que si que filtra les pel·lícules.
+També hi ha errors d'algunes imatges que no existeixen.
--- a/uf02/exercici_json/style/w3.css
+++ b/uf02/exercici_json/style/w3.css
@ -0,0 +1,235 @@
+/* W3.CSS 4.15 December 2020 by Jan Egil and Borge Refsnes */
+html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}
+/* Extract from normalize.css by Nicolas Gallagher and Jonathan Neal git.io/normalize */
+html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}
+article,aside,details,figcaption,figure,footer,header,main,menu,nav,section{display:block}summary{display:list-item}
+audio,canvas,progress,video{display:inline-block}progress{vertical-align:baseline}
+audio:not([controls]){display:none;height:0}[hidden],template{display:none}
+a{background-color:transparent}a:active,a:hover{outline-width:0}
+abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}
+b,strong{font-weight:bolder}dfn{font-style:italic}mark{background:#ff0;color:#000}
+small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
+sub{bottom:-0.25em}sup{top:-0.5em}figure{margin:1em 40px}img{border-style:none}
+code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}hr{box-sizing:content-box;height:0;overflow:visible}
+button,input,select,textarea,optgroup{font:inherit;margin:0}optgroup{font-weight:bold}
+button,input{overflow:visible}button,select{text-transform:none}
+button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}
+button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}
+button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}
+fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:.35em .625em .75em}
+legend{color:inherit;display:table;max-width:100%;padding:0;white-space:normal}textarea{overflow:auto}
+[type=checkbox],[type=radio]{padding:0}
+[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}
+[type=search]{-webkit-appearance:textfield;outline-offset:-2px}
+[type=search]::-webkit-search-decoration{-webkit-appearance:none}
+::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}
+/* End extract */
+html,body{font-family:Verdana,sans-serif;font-size:15px;line-height:1.5}html{overflow-x:hidden}
+h1{font-size:36px}h2{font-size:30px}h3{font-size:24px}h4{font-size:20px}h5{font-size:18px}h6{font-size:16px}
+.w3-serif{font-family:serif}.w3-sans-serif{font-family:sans-serif}.w3-cursive{font-family:cursive}.w3-monospace{font-family:monospace}
+h1,h2,h3,h4,h5,h6{font-family:"Segoe UI",Arial,sans-serif;font-weight:400;margin:10px 0}.w3-wide{letter-spacing:4px}
+hr{border:0;border-top:1px solid #eee;margin:20px 0}
+.w3-image{max-width:100%;height:auto}img{vertical-align:middle}a{color:inherit}
+.w3-table,.w3-table-all{border-collapse:collapse;border-spacing:0;width:100%;display:table}.w3-table-all{border:1px solid #ccc}
+.w3-bordered tr,.w3-table-all tr{border-bottom:1px solid #ddd}.w3-striped tbody tr:nth-child(even){background-color:#f1f1f1}
+.w3-table-all tr:nth-child(odd){background-color:#fff}.w3-table-all tr:nth-child(even){background-color:#f1f1f1}
+.w3-hoverable tbody tr:hover,.w3-ul.w3-hoverable li:hover{background-color:#ccc}.w3-centered tr th,.w3-centered tr td{text-align:center}
+.w3-table td,.w3-table th,.w3-table-all td,.w3-table-all th{padding:8px 8px;display:table-cell;text-align:left;vertical-align:top}
+.w3-table th:first-child,.w3-table td:first-child,.w3-table-all th:first-child,.w3-table-all td:first-child{padding-left:16px}
+.w3-btn,.w3-button{border:none;display:inline-block;padding:8px 16px;vertical-align:middle;overflow:hidden;text-decoration:none;color:inherit;background-color:inherit;text-align:center;cursor:pointer;white-space:nowrap}
+.w3-btn:hover{box-shadow:0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)}
+.w3-btn,.w3-button{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}   
+.w3-disabled,.w3-btn:disabled,.w3-button:disabled{cursor:not-allowed;opacity:0.3}.w3-disabled *,:disabled *{pointer-events:none}
+.w3-btn.w3-disabled:hover,.w3-btn:disabled:hover{box-shadow:none}
+.w3-badge,.w3-tag{background-color:#000;color:#fff;display:inline-block;padding-left:8px;padding-right:8px;text-align:center}.w3-badge{border-radius:50%}
+.w3-ul{list-style-type:none;padding:0;margin:0}.w3-ul li{padding:8px 16px;border-bottom:1px solid #ddd}.w3-ul li:last-child{border-bottom:none}
+.w3-tooltip,.w3-display-container{position:relative}.w3-tooltip .w3-text{display:none}.w3-tooltip:hover .w3-text{display:inline-block}
+.w3-ripple:active{opacity:0.5}.w3-ripple{transition:opacity 0s}
+.w3-input{padding:8px;display:block;border:none;border-bottom:1px solid #ccc;width:100%}
+.w3-select{padding:9px 0;width:100%;border:none;border-bottom:1px solid #ccc}
+.w3-dropdown-click,.w3-dropdown-hover{position:relative;display:inline-block;cursor:pointer}
+.w3-dropdown-hover:hover .w3-dropdown-content{display:block}
+.w3-dropdown-hover:first-child,.w3-dropdown-click:hover{background-color:#ccc;color:#000}
+.w3-dropdown-hover:hover > .w3-button:first-child,.w3-dropdown-click:hover > .w3-button:first-child{background-color:#ccc;color:#000}
+.w3-dropdown-content{cursor:auto;color:#000;background-color:#fff;display:none;position:absolute;min-width:160px;margin:0;padding:0;z-index:1}
+.w3-check,.w3-radio{width:24px;height:24px;position:relative;top:6px}
+.w3-sidebar{height:100%;width:200px;background-color:#fff;position:fixed!important;z-index:1;overflow:auto}
+.w3-bar-block .w3-dropdown-hover,.w3-bar-block .w3-dropdown-click{width:100%}
+.w3-bar-block .w3-dropdown-hover .w3-dropdown-content,.w3-bar-block .w3-dropdown-click .w3-dropdown-content{min-width:100%}
+.w3-bar-block .w3-dropdown-hover .w3-button,.w3-bar-block .w3-dropdown-click .w3-button{width:100%;text-align:left;padding:8px 16px}
+.w3-main,#main{transition:margin-left .4s}
+.w3-modal{z-index:3;display:none;padding-top:100px;position:fixed;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:rgb(0,0,0);background-color:rgba(0,0,0,0.4)}
+.w3-modal-content{margin:auto;background-color:#fff;position:relative;padding:0;outline:0;width:600px}
+.w3-bar{width:100%;overflow:hidden}.w3-center .w3-bar{display:inline-block;width:auto}
+.w3-bar .w3-bar-item{padding:8px 16px;float:left;width:auto;border:none;display:block;outline:0}
+.w3-bar .w3-dropdown-hover,.w3-bar .w3-dropdown-click{position:static;float:left}
+.w3-bar .w3-button{white-space:normal}
+.w3-bar-block .w3-bar-item{width:100%;display:block;padding:8px 16px;text-align:left;border:none;white-space:normal;float:none;outline:0}
+.w3-bar-block.w3-center .w3-bar-item{text-align:center}.w3-block{display:block;width:100%}
+.w3-responsive{display:block;overflow-x:auto}
+.w3-container:after,.w3-container:before,.w3-panel:after,.w3-panel:before,.w3-row:after,.w3-row:before,.w3-row-padding:after,.w3-row-padding:before,
+.w3-cell-row:before,.w3-cell-row:after,.w3-clear:after,.w3-clear:before,.w3-bar:before,.w3-bar:after{content:"";display:table;clear:both}
+.w3-col,.w3-half,.w3-third,.w3-twothird,.w3-threequarter,.w3-quarter{float:left;width:100%}
+.w3-col.s1{width:8.33333%}.w3-col.s2{width:16.66666%}.w3-col.s3{width:24.99999%}.w3-col.s4{width:33.33333%}
+.w3-col.s5{width:41.66666%}.w3-col.s6{width:49.99999%}.w3-col.s7{width:58.33333%}.w3-col.s8{width:66.66666%}
+.w3-col.s9{width:74.99999%}.w3-col.s10{width:83.33333%}.w3-col.s11{width:91.66666%}.w3-col.s12{width:99.99999%}
+@media (min-width:601px){.w3-col.m1{width:8.33333%}.w3-col.m2{width:16.66666%}.w3-col.m3,.w3-quarter{width:24.99999%}.w3-col.m4,.w3-third{width:33.33333%}
+.w3-col.m5{width:41.66666%}.w3-col.m6,.w3-half{width:49.99999%}.w3-col.m7{width:58.33333%}.w3-col.m8,.w3-twothird{width:66.66666%}
+.w3-col.m9,.w3-threequarter{width:74.99999%}.w3-col.m10{width:83.33333%}.w3-col.m11{width:91.66666%}.w3-col.m12{width:99.99999%}}
+@media (min-width:993px){.w3-col.l1{width:8.33333%}.w3-col.l2{width:16.66666%}.w3-col.l3{width:24.99999%}.w3-col.l4{width:33.33333%}
+.w3-col.l5{width:41.66666%}.w3-col.l6{width:49.99999%}.w3-col.l7{width:58.33333%}.w3-col.l8{width:66.66666%}
+.w3-col.l9{width:74.99999%}.w3-col.l10{width:83.33333%}.w3-col.l11{width:91.66666%}.w3-col.l12{width:99.99999%}}
+.w3-rest{overflow:hidden}.w3-stretch{margin-left:-16px;margin-right:-16px}
+.w3-content,.w3-auto{margin-left:auto;margin-right:auto}.w3-content{max-width:980px}.w3-auto{max-width:1140px}
+.w3-cell-row{display:table;width:100%}.w3-cell{display:table-cell}
+.w3-cell-top{vertical-align:top}.w3-cell-middle{vertical-align:middle}.w3-cell-bottom{vertical-align:bottom}
+.w3-hide{display:none!important}.w3-show-block,.w3-show{display:block!important}.w3-show-inline-block{display:inline-block!important}
+@media (max-width:1205px){.w3-auto{max-width:95%}}
+@media (max-width:600px){.w3-modal-content{margin:0 10px;width:auto!important}.w3-modal{padding-top:30px}
+.w3-dropdown-hover.w3-mobile .w3-dropdown-content,.w3-dropdown-click.w3-mobile .w3-dropdown-content{position:relative}	
+.w3-hide-small{display:none!important}.w3-mobile{display:block;width:100%!important}.w3-bar-item.w3-mobile,.w3-dropdown-hover.w3-mobile,.w3-dropdown-click.w3-mobile{text-align:center}
+.w3-dropdown-hover.w3-mobile,.w3-dropdown-hover.w3-mobile .w3-btn,.w3-dropdown-hover.w3-mobile .w3-button,.w3-dropdown-click.w3-mobile,.w3-dropdown-click.w3-mobile .w3-btn,.w3-dropdown-click.w3-mobile .w3-button{width:100%}}
+@media (max-width:768px){.w3-modal-content{width:500px}.w3-modal{padding-top:50px}}
+@media (min-width:993px){.w3-modal-content{width:900px}.w3-hide-large{display:none!important}.w3-sidebar.w3-collapse{display:block!important}}
+@media (max-width:992px) and (min-width:601px){.w3-hide-medium{display:none!important}}
+@media (max-width:992px){.w3-sidebar.w3-collapse{display:none}.w3-main{margin-left:0!important;margin-right:0!important}.w3-auto{max-width:100%}}
+.w3-top,.w3-bottom{position:fixed;width:100%;z-index:1}.w3-top{top:0}.w3-bottom{bottom:0}
+.w3-overlay{position:fixed;display:none;width:100%;height:100%;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,0.5);z-index:2}
+.w3-display-topleft{position:absolute;left:0;top:0}.w3-display-topright{position:absolute;right:0;top:0}
+.w3-display-bottomleft{position:absolute;left:0;bottom:0}.w3-display-bottomright{position:absolute;right:0;bottom:0}
+.w3-display-middle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%)}
+.w3-display-left{position:absolute;top:50%;left:0%;transform:translate(0%,-50%);-ms-transform:translate(-0%,-50%)}
+.w3-display-right{position:absolute;top:50%;right:0%;transform:translate(0%,-50%);-ms-transform:translate(0%,-50%)}
+.w3-display-topmiddle{position:absolute;left:50%;top:0;transform:translate(-50%,0%);-ms-transform:translate(-50%,0%)}
+.w3-display-bottommiddle{position:absolute;left:50%;bottom:0;transform:translate(-50%,0%);-ms-transform:translate(-50%,0%)}
+.w3-display-container:hover .w3-display-hover{display:block}.w3-display-container:hover span.w3-display-hover{display:inline-block}.w3-display-hover{display:none}
+.w3-display-position{position:absolute}
+.w3-circle{border-radius:50%}
+.w3-round-small{border-radius:2px}.w3-round,.w3-round-medium{border-radius:4px}.w3-round-large{border-radius:8px}.w3-round-xlarge{border-radius:16px}.w3-round-xxlarge{border-radius:32px}
+.w3-row-padding,.w3-row-padding>.w3-half,.w3-row-padding>.w3-third,.w3-row-padding>.w3-twothird,.w3-row-padding>.w3-threequarter,.w3-row-padding>.w3-quarter,.w3-row-padding>.w3-col{padding:0 8px}
+.w3-container,.w3-panel{padding:0.01em 16px}.w3-panel{margin-top:16px;margin-bottom:16px}
+.w3-code,.w3-codespan{font-family:Consolas,"courier new";font-size:16px}
+.w3-code{width:auto;background-color:#fff;padding:8px 12px;border-left:4px solid #4CAF50;word-wrap:break-word}
+.w3-codespan{color:crimson;background-color:#f1f1f1;padding-left:4px;padding-right:4px;font-size:110%}
+.w3-card,.w3-card-2{box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)}
+.w3-card-4,.w3-hover-shadow:hover{box-shadow:0 4px 10px 0 rgba(0,0,0,0.2),0 4px 20px 0 rgba(0,0,0,0.19)}
+.w3-spin{animation:w3-spin 2s infinite linear}@keyframes w3-spin{0%{transform:rotate(0deg)}100%{transform:rotate(359deg)}}
+.w3-animate-fading{animation:fading 10s infinite}@keyframes fading{0%{opacity:0}50%{opacity:1}100%{opacity:0}}
+.w3-animate-opacity{animation:opac 0.8s}@keyframes opac{from{opacity:0} to{opacity:1}}
+.w3-animate-top{position:relative;animation:animatetop 0.4s}@keyframes animatetop{from{top:-300px;opacity:0} to{top:0;opacity:1}}
+.w3-animate-left{position:relative;animation:animateleft 0.4s}@keyframes animateleft{from{left:-300px;opacity:0} to{left:0;opacity:1}}
+.w3-animate-right{position:relative;animation:animateright 0.4s}@keyframes animateright{from{right:-300px;opacity:0} to{right:0;opacity:1}}
+.w3-animate-bottom{position:relative;animation:animatebottom 0.4s}@keyframes animatebottom{from{bottom:-300px;opacity:0} to{bottom:0;opacity:1}}
+.w3-animate-zoom {animation:animatezoom 0.6s}@keyframes animatezoom{from{transform:scale(0)} to{transform:scale(1)}}
+.w3-animate-input{transition:width 0.4s ease-in-out}.w3-animate-input:focus{width:100%!important}
+.w3-opacity,.w3-hover-opacity:hover{opacity:0.60}.w3-opacity-off,.w3-hover-opacity-off:hover{opacity:1}
+.w3-opacity-max{opacity:0.25}.w3-opacity-min{opacity:0.75}
+.w3-greyscale-max,.w3-grayscale-max,.w3-hover-greyscale:hover,.w3-hover-grayscale:hover{filter:grayscale(100%)}
+.w3-greyscale,.w3-grayscale{filter:grayscale(75%)}.w3-greyscale-min,.w3-grayscale-min{filter:grayscale(50%)}
+.w3-sepia{filter:sepia(75%)}.w3-sepia-max,.w3-hover-sepia:hover{filter:sepia(100%)}.w3-sepia-min{filter:sepia(50%)}
+.w3-tiny{font-size:10px!important}.w3-small{font-size:12px!important}.w3-medium{font-size:15px!important}.w3-large{font-size:18px!important}
+.w3-xlarge{font-size:24px!important}.w3-xxlarge{font-size:36px!important}.w3-xxxlarge{font-size:48px!important}.w3-jumbo{font-size:64px!important}
+.w3-left-align{text-align:left!important}.w3-right-align{text-align:right!important}.w3-justify{text-align:justify!important}.w3-center{text-align:center!important}
+.w3-border-0{border:0!important}.w3-border{border:1px solid #ccc!important}
+.w3-border-top{border-top:1px solid #ccc!important}.w3-border-bottom{border-bottom:1px solid #ccc!important}
+.w3-border-left{border-left:1px solid #ccc!important}.w3-border-right{border-right:1px solid #ccc!important}
+.w3-topbar{border-top:6px solid #ccc!important}.w3-bottombar{border-bottom:6px solid #ccc!important}
+.w3-leftbar{border-left:6px solid #ccc!important}.w3-rightbar{border-right:6px solid #ccc!important}
+.w3-section,.w3-code{margin-top:16px!important;margin-bottom:16px!important}
+.w3-margin{margin:16px!important}.w3-margin-top{margin-top:16px!important}.w3-margin-bottom{margin-bottom:16px!important}
+.w3-margin-left{margin-left:16px!important}.w3-margin-right{margin-right:16px!important}
+.w3-padding-small{padding:4px 8px!important}.w3-padding{padding:8px 16px!important}.w3-padding-large{padding:12px 24px!important}
+.w3-padding-16{padding-top:16px!important;padding-bottom:16px!important}.w3-padding-24{padding-top:24px!important;padding-bottom:24px!important}
+.w3-padding-32{padding-top:32px!important;padding-bottom:32px!important}.w3-padding-48{padding-top:48px!important;padding-bottom:48px!important}
+.w3-padding-64{padding-top:64px!important;padding-bottom:64px!important}
+.w3-padding-top-64{padding-top:64px!important}.w3-padding-top-48{padding-top:48px!important}
+.w3-padding-top-32{padding-top:32px!important}.w3-padding-top-24{padding-top:24px!important}
+.w3-left{float:left!important}.w3-right{float:right!important}
+.w3-button:hover{color:#000!important;background-color:#ccc!important}
+.w3-transparent,.w3-hover-none:hover{background-color:transparent!important}
+.w3-hover-none:hover{box-shadow:none!important}
+/* Colors */
+.w3-amber,.w3-hover-amber:hover{color:#000!important;background-color:#ffc107!important}
+.w3-aqua,.w3-hover-aqua:hover{color:#000!important;background-color:#00ffff!important}
+.w3-blue,.w3-hover-blue:hover{color:#fff!important;background-color:#2196F3!important}
+.w3-light-blue,.w3-hover-light-blue:hover{color:#000!important;background-color:#87CEEB!important}
+.w3-brown,.w3-hover-brown:hover{color:#fff!important;background-color:#795548!important}
+.w3-cyan,.w3-hover-cyan:hover{color:#000!important;background-color:#00bcd4!important}
+.w3-blue-grey,.w3-hover-blue-grey:hover,.w3-blue-gray,.w3-hover-blue-gray:hover{color:#fff!important;background-color:#607d8b!important}
+.w3-green,.w3-hover-green:hover{color:#fff!important;background-color:#4CAF50!important}
+.w3-light-green,.w3-hover-light-green:hover{color:#000!important;background-color:#8bc34a!important}
+.w3-indigo,.w3-hover-indigo:hover{color:#fff!important;background-color:#3f51b5!important}
+.w3-khaki,.w3-hover-khaki:hover{color:#000!important;background-color:#f0e68c!important}
+.w3-lime,.w3-hover-lime:hover{color:#000!important;background-color:#cddc39!important}
+.w3-orange,.w3-hover-orange:hover{color:#000!important;background-color:#ff9800!important}
+.w3-deep-orange,.w3-hover-deep-orange:hover{color:#fff!important;background-color:#ff5722!important}
+.w3-pink,.w3-hover-pink:hover{color:#fff!important;background-color:#e91e63!important}
+.w3-purple,.w3-hover-purple:hover{color:#fff!important;background-color:#9c27b0!important}
+.w3-deep-purple,.w3-hover-deep-purple:hover{color:#fff!important;background-color:#673ab7!important}
+.w3-red,.w3-hover-red:hover{color:#fff!important;background-color:#f44336!important}
+.w3-sand,.w3-hover-sand:hover{color:#000!important;background-color:#fdf5e6!important}
+.w3-teal,.w3-hover-teal:hover{color:#fff!important;background-color:#009688!important}
+.w3-yellow,.w3-hover-yellow:hover{color:#000!important;background-color:#ffeb3b!important}
+.w3-white,.w3-hover-white:hover{color:#000!important;background-color:#fff!important}
+.w3-black,.w3-hover-black:hover{color:#fff!important;background-color:#000!important}
+.w3-grey,.w3-hover-grey:hover,.w3-gray,.w3-hover-gray:hover{color:#000!important;background-color:#9e9e9e!important}
+.w3-light-grey,.w3-hover-light-grey:hover,.w3-light-gray,.w3-hover-light-gray:hover{color:#000!important;background-color:#f1f1f1!important}
+.w3-dark-grey,.w3-hover-dark-grey:hover,.w3-dark-gray,.w3-hover-dark-gray:hover{color:#fff!important;background-color:#616161!important}
+.w3-pale-red,.w3-hover-pale-red:hover{color:#000!important;background-color:#ffdddd!important}
+.w3-pale-green,.w3-hover-pale-green:hover{color:#000!important;background-color:#ddffdd!important}
+.w3-pale-yellow,.w3-hover-pale-yellow:hover{color:#000!important;background-color:#ffffcc!important}
+.w3-pale-blue,.w3-hover-pale-blue:hover{color:#000!important;background-color:#ddffff!important}
+.w3-text-amber,.w3-hover-text-amber:hover{color:#ffc107!important}
+.w3-text-aqua,.w3-hover-text-aqua:hover{color:#00ffff!important}
+.w3-text-blue,.w3-hover-text-blue:hover{color:#2196F3!important}
+.w3-text-light-blue,.w3-hover-text-light-blue:hover{color:#87CEEB!important}
+.w3-text-brown,.w3-hover-text-brown:hover{color:#795548!important}
+.w3-text-cyan,.w3-hover-text-cyan:hover{color:#00bcd4!important}
+.w3-text-blue-grey,.w3-hover-text-blue-grey:hover,.w3-text-blue-gray,.w3-hover-text-blue-gray:hover{color:#607d8b!important}
+.w3-text-green,.w3-hover-text-green:hover{color:#4CAF50!important}
+.w3-text-light-green,.w3-hover-text-light-green:hover{color:#8bc34a!important}
+.w3-text-indigo,.w3-hover-text-indigo:hover{color:#3f51b5!important}
+.w3-text-khaki,.w3-hover-text-khaki:hover{color:#b4aa50!important}
+.w3-text-lime,.w3-hover-text-lime:hover{color:#cddc39!important}
+.w3-text-orange,.w3-hover-text-orange:hover{color:#ff9800!important}
+.w3-text-deep-orange,.w3-hover-text-deep-orange:hover{color:#ff5722!important}
+.w3-text-pink,.w3-hover-text-pink:hover{color:#e91e63!important}
+.w3-text-purple,.w3-hover-text-purple:hover{color:#9c27b0!important}
+.w3-text-deep-purple,.w3-hover-text-deep-purple:hover{color:#673ab7!important}
+.w3-text-red,.w3-hover-text-red:hover{color:#f44336!important}
+.w3-text-sand,.w3-hover-text-sand:hover{color:#fdf5e6!important}
+.w3-text-teal,.w3-hover-text-teal:hover{color:#009688!important}
+.w3-text-yellow,.w3-hover-text-yellow:hover{color:#d2be0e!important}
+.w3-text-white,.w3-hover-text-white:hover{color:#fff!important}
+.w3-text-black,.w3-hover-text-black:hover{color:#000!important}
+.w3-text-grey,.w3-hover-text-grey:hover,.w3-text-gray,.w3-hover-text-gray:hover{color:#757575!important}
+.w3-text-light-grey,.w3-hover-text-light-grey:hover,.w3-text-light-gray,.w3-hover-text-light-gray:hover{color:#f1f1f1!important}
+.w3-text-dark-grey,.w3-hover-text-dark-grey:hover,.w3-text-dark-gray,.w3-hover-text-dark-gray:hover{color:#3a3a3a!important}
+.w3-border-amber,.w3-hover-border-amber:hover{border-color:#ffc107!important}
+.w3-border-aqua,.w3-hover-border-aqua:hover{border-color:#00ffff!important}
+.w3-border-blue,.w3-hover-border-blue:hover{border-color:#2196F3!important}
+.w3-border-light-blue,.w3-hover-border-light-blue:hover{border-color:#87CEEB!important}
+.w3-border-brown,.w3-hover-border-brown:hover{border-color:#795548!important}
+.w3-border-cyan,.w3-hover-border-cyan:hover{border-color:#00bcd4!important}
+.w3-border-blue-grey,.w3-hover-border-blue-grey:hover,.w3-border-blue-gray,.w3-hover-border-blue-gray:hover{border-color:#607d8b!important}
+.w3-border-green,.w3-hover-border-green:hover{border-color:#4CAF50!important}
+.w3-border-light-green,.w3-hover-border-light-green:hover{border-color:#8bc34a!important}
+.w3-border-indigo,.w3-hover-border-indigo:hover{border-color:#3f51b5!important}
+.w3-border-khaki,.w3-hover-border-khaki:hover{border-color:#f0e68c!important}
+.w3-border-lime,.w3-hover-border-lime:hover{border-color:#cddc39!important}
+.w3-border-orange,.w3-hover-border-orange:hover{border-color:#ff9800!important}
+.w3-border-deep-orange,.w3-hover-border-deep-orange:hover{border-color:#ff5722!important}
+.w3-border-pink,.w3-hover-border-pink:hover{border-color:#e91e63!important}
+.w3-border-purple,.w3-hover-border-purple:hover{border-color:#9c27b0!important}
+.w3-border-deep-purple,.w3-hover-border-deep-purple:hover{border-color:#673ab7!important}
+.w3-border-red,.w3-hover-border-red:hover{border-color:#f44336!important}
+.w3-border-sand,.w3-hover-border-sand:hover{border-color:#fdf5e6!important}
+.w3-border-teal,.w3-hover-border-teal:hover{border-color:#009688!important}
+.w3-border-yellow,.w3-hover-border-yellow:hover{border-color:#ffeb3b!important}
+.w3-border-white,.w3-hover-border-white:hover{border-color:#fff!important}
+.w3-border-black,.w3-hover-border-black:hover{border-color:#000!important}
+.w3-border-grey,.w3-hover-border-grey:hover,.w3-border-gray,.w3-hover-border-gray:hover{border-color:#9e9e9e!important}
+.w3-border-light-grey,.w3-hover-border-light-grey:hover,.w3-border-light-gray,.w3-hover-border-light-gray:hover{border-color:#f1f1f1!important}
+.w3-border-dark-grey,.w3-hover-border-dark-grey:hover,.w3-border-dark-gray,.w3-hover-border-dark-gray:hover{border-color:#616161!important}
+.w3-border-pale-red,.w3-hover-border-pale-red:hover{border-color:#ffe7e7!important}.w3-border-pale-green,.w3-hover-border-pale-green:hover{border-color:#e7ffe7!important}
+.w3-border-pale-yellow,.w3-hover-border-pale-yellow:hover{border-color:#ffffcc!important}.w3-border-pale-blue,.w3-hover-border-pale-blue:hover{border-color:#e7ffff!important}
--- a/uf02/exercici_json_JanMaroto.zip
+++ b/uf02/exercici_json_JanMaroto.zip
--- a/uf02/exercici_json_no_jquery/js/data/movies.json
+++ b/uf02/exercici_json_no_jquery/js/data/movies.json
--- a/uf02/exercici_json_no_jquery/js/data/municipis.json
+++ b/uf02/exercici_json_no_jquery/js/data/municipis.json
--- a/uf02/exercici_json_no_jquery/js/data/pokemon.json
+++ b/uf02/exercici_json_no_jquery/js/data/pokemon.json
--- a/uf02/exercici_json_no_jquery/js/functions.js
+++ b/uf02/exercici_json_no_jquery/js/functions.js
@ -0,0 +1,19 @@
+let urlMovies = "js/data/movies.json";
+
+const loadMovies = async() => {
+	try {
+		const response = await fetch(urlMovies);
+		console.log(response);
+
+		const movData = await response.json();
+		console.log(movData);
+	} catch(error) {
+		console.log(error);
+	}
+}
+
+loadMovies();
+function orderList(object, order) {
+	if (order='asc') return object.sort();
+	return object.sort().reverse();
+}
--- a/uf02/exercici_json_no_jquery/js/tests.js
+++ b/uf02/exercici_json_no_jquery/js/tests.js
@ -0,0 +1,19 @@
+let urlMovies = "js/data/movies.json";
+
+const loadMovies = async() => {
+	try {
+		const response = await fetch(urlMovies);
+		console.log(response);
+
+		const movData = await response.json();
+		console.log(movData);
+	} catch(error) {
+		console.log(error);
+	}
+}
+
+loadMovies();
+function orderList(object, order) {
+	if (order='asc') return object.sort();
+	return object.sort().reverse();
+}
--- a/uf02/exercici_json_no_jquery/notindex.html
+++ b/uf02/exercici_json_no_jquery/notindex.html
@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<title>M6 UF2</title>
+
+</head>
+<body>
+	<h2>this is a title</h2>
+	<p id="demo"></p>
+</body>
+</html>
+<script src="js/functions.js"></script>
--- a/uf02/exercici_nasa/Pràctica
+++ b/uf02/exercici_nasa/Pràctica
--- a/uf02/exercici_nasa/amCharts/amCharts.html
+++ b/uf02/exercici_nasa/amCharts/amCharts.html
@ -0,0 +1,56 @@
+<script src="//cdn.amcharts.com/lib/4/core.js"></script>
+<script src="//cdn.amcharts.com/lib/4/charts.js"></script>
+
+<div id="chartdiv" style="width: 900px; height: 800px;"></div>
+
+<script>
+// Create chart instance in one go
+var chart = am4core.createFromConfig({
+  // Create pie series
+  "series": [{
+    "type": "PieSeries",
+    "dataFields": {
+      "value": "litres",
+      "category": "country"
+    }
+  }],
+
+  // Add data
+  "data": [{
+    "country": "Lithuania",
+    "litres": 501.9
+  }, {
+    "country": "Czech Republic",
+    "litres": 301.9
+  }, {
+    "country": "Ireland",
+    "litres": 201.1
+  }, {
+    "country": "Germany",
+    "litres": 165.8
+  }, {
+    "country": "Australia",
+    "litres": 139.9
+  }, {
+    "country": "Austria",
+    "litres": 128.3
+  }, {
+    "country": "UK",
+    "litres": 99
+  }, {
+    "country": "Belgium",
+    "litres": 60
+  }, {
+    "country": "The Netherlands",
+    "litres": 50
+  }],
+
+  for (var i = 0; i < data.length; i++)){
+
+  }
+
+  // And, for a good measure, let's add a legend
+  "legend": {}
+
+}, "chartdiv", am4charts.PieChart);
+</script>
--- a/uf02/exercici_nasa/amCharts/amCharts.js
+++ b/uf02/exercici_nasa/amCharts/amCharts.js
--- a/uf02/exercici_nasa/index.html
+++ b/uf02/exercici_nasa/index.html
@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+<title>W3.CSS</title>
+<head>
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
+<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
+<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
+integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
+crossorigin=""/>
+<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
+integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
+crossorigin=""></script>
+<script src="https://unpkg.com/esri-leaflet@2.5.3/dist/esri-leaflet.js" 
+    integrity="sha512-K0Vddb4QdnVOAuPJBHkgrua+/A9Moyv8AQEWi0xndQ+fqbRfAFd47z4A9u1AW/spLO0gEaiE1z98PK1gl5mC5Q==" crossorigin=""></script>
+<script src="script.js"></script>
+
+</head>
+<body>
+    <div style="height: 600px; width: 1800px; margin: 25px auto 0;" id="map"></div>
+    <div style="margin: auto;">
+        <p>&lt=1000g  <p style="color: green;">&#9673;</p></p> 
+        <p>&gt1000g && &lt=100000g  <p style="color: yellow;">&#9673;</p></p>
+        <p>&gt100000g  <p style="color: red;">&#9673;</p></p>
+        <p>Undefined  <p style="color: blue;">&#9673;</p></p>
+    </div>
+    <div class="w3-container" id="infoBar"></div>
+    <div style="overflow-y:auto; max-height:600px;" id="tableDiv" class="w3-container">
+        <table id="contentTable" class="w3-table-all w3-hoverable">
+            <thead style="position:sticky; top:0;">
+                <tr class="w3-dark-gray">
+                    <th>#</th>
+                    <th>Name</th>
+                    <th>Class</th>
+                    <th>Mass(g)</th>
+                    <th>Year</th>
+                    <th>Location</th>
+                </tr>
+            </thead>
+        </table>
+    </div>
+</body>
+</html> 
--- a/uf02/exercici_nasa/leafletMap.html
+++ b/uf02/exercici_nasa/leafletMap.html
@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+
+    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="  crossorigin=""/>
+    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" 
+    integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="  crossorigin=""></script>
+    <script src="https://unpkg.com/esri-leaflet@2.5.3/dist/esri-leaflet.js" 
+    integrity="sha512-K0Vddb4QdnVOAuPJBHkgrua+/A9Moyv8AQEWi0xndQ+fqbRfAFd47z4A9u1AW/spLO0gEaiE1z98PK1gl5mC5Q==" crossorigin=""></script>
+    
+    <style>
+        #map {
+	        width: 600px;
+	        height: 400px;
+        }
+
+    </style>
+</head>
+<body>
+    <div id="map">
+    </div>
+    
+    <script>
+        var map = L.map('map').setView([41.388, 2.159], 12);
+        L.esri.basemapLayer('Topographic').addTo(map);
+
+        var marker = L.marker([41.41727206818063, 2.1993105855207733]).addTo(map);
+
+        marker.bindPopup("<b>Hello world!</b><br>I am a popup.");    
+
+marker.on('click', () => {
+     marker.openPopup();
+ });
+
+    </script>
+</body>
+</html>
--- a/uf02/exercici_nasa/script.js
+++ b/uf02/exercici_nasa/script.js
@ -0,0 +1,77 @@
+$.ajax({
+    url: "https://data.nasa.gov/resource/gh4g-9sfh.json",
+    type: "GET",
+    data: {
+      "$limit" : 500,
+      "$$app_token" : "VLkZXiizqqIPBNNauahdq1mdq"
+    }
+}).done(function(data) {
+  
+  document.getElementById("infoBar").innerHTML += "<h5>Mostrant " + data.length + " resultats</h5>";
+  // document.getElementById("infoBar").innerHTML += "<h5>Massa total " + massAdd()[1]  + "(kg) / Massa mitjana " + massAdd()[0] + "(g)</h5>";
+  console.log(data);
+
+  var map = L.map('map').setView([35, 0], 2.35);
+  
+  // L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
+  //     attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
+  //     maxZoom: 18,
+  //     id: 'mapbox/streets-v11',
+  //     tileSize: 512,
+  //     zoomOffset: -1,
+  //     accessToken: 'pk.eyJ1Ijoicm9nZXJwYjk4IiwiYSI6ImNreTh6Y3VqODAxZGwydXA0dDA5emM1MngifQ.mzj9oEzGlCAcKTS5vKJi0w'
+  // }).addTo(map);
+  L.esri.basemapLayer('Topographic').addTo(map);
+
+
+  // showMarkers(data);
+
+  showTable(data);
+  
+
+  
+  // showMap();
+});
+function showMarkers(data) {
+  for (let i=0; i<data.length; i++) {
+    let lon =(typeof data[i]["geolocation"]["longitude"] !== "undefined" ? data[i]["geolocation"]["longitude"].substring(0, 5) : "N/A");
+    let lat =(typeof data[i]["geolocation"]["latitude"] !== "undefined" ? data[i]["geolocation"]["latitude"].substring(0, 5)  : "N/A");
+    let markerColor = (typeof data[i]["mass"] == "undefined)" ? 'blue' : (data[i]["mass"] <=1000 ? 'green' : (data[i]["mass"] > 1000 && data[i]["mass"] <= 100000 ? 'yellow' : 'red')));
+
+    var circle = L.circle([lon, lat], {
+      color: markerColor,
+      radius: 50000
+    }).addTo(map);
+    circle.bindPopup(
+      "Name: " + data[i]["name"]  + "<br>" +  
+      "Class: " + (typeof data[i]["recclass"] !== "undefined" ? data[i]["recclass"] : "N/A") + "<br>" + 
+      "Mass: " + (typeof data[i]["mass"] !== "undefined" ? data[i]["mass"] : "N/A") + "<br>" + 
+      "Year: " + (typeof data[i]["year"] !== "undefined" ? data[i]["year"].substring(0, 4) : "N/A") + "<br>" + 
+      "Georication: " + lon + " / " + lat
+    );
+
+  }
+}
+
+function showTable(data) {
+  for (let i=0; i<data.length; i++) {
+      document.getElementById("contentTable").innerHTML += 
+      `<tr>
+          <td>` + data[i]["id"] + `</td>
+          <td>` + data[i]["name"] + `</td>
+          <td>` + (typeof data[i]["recclass"] !== "undefined" ? data[i]["recclass"] : "N/A") + `</td>
+          <td>` + (typeof data[i]["mass"] !== "undefined" ? data[i]["mass"] : "N/A") + `</td>
+          <td>` + (typeof data[i]["year"] !== "undefined" ? data[i]["year"].substring(0, 4): "N/A") + `</td>
+          <td>` + (typeof data[i]["geolocation"]["latitude"] !== "undefined" || data[i]["geolocation"]["longitude"] !== "undefined" ? data[i]["geolocation"]["latitude"] + " / " + data[i]["geolocation"]["longitude"] : "N/A") + `</td>
+      </tr>`
+  }
+}
+function massAdd() {
+    var rs = new Array(2);
+    for (let i=0; i<data.length; i++) {
+        rs[0] += (!isNaN(parseInt(data[i]["mass"]))) ? parseInt(data[i]["mass"]) : 0;
+    }
+    rs[1] = rs[0]/1000;
+  return rs;
+
+}
--- a/uf02/exercici_nasa_jan_maroto.zip
+++ b/uf02/exercici_nasa_jan_maroto.zip
--- a/uf02/exercicis_pisarra/exercici_07.html
+++ b/uf02/exercicis_pisarra/exercici_07.html
@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title></title>
+
+</head>
+<body>
+    <h2>Exercici 07</h2> 
+    
+    <p>Resultat:</p>
+
+    <p id="resultSet01"></p>
+    <p id="resultSet02"></p>
+
+
+    <script>
+        let activitats = [
+            ['Treball', 8],
+            ['Menjar', 1],
+            ['Desplaçaments', 1],
+            ['Jugar', 1],
+            ['Dormir', 8]
+        ];
+
+        // SortOrder, asc(default) / desc
+        function sortArray(inputArray, sortOrder) {
+            if (sortOrder=="desc") {
+                return inputArray.sort().reverse();
+            } else {
+                return inputArray.sort();
+            }
+        }
+        // filterOption, any string you want to filter by
+        function filterArray(inputArray, filterOption) {
+            let outputArray = [];
+            inputArray.forEach(element => {
+                if (filterOption.indexOf(element[0]) != -1) {
+                    outputArray.push(element);
+                }
+            });
+            return outputArray;
+        }
+
+
+        document.getElementById("resultSet01").innerHTML = sortArray(activitats, "desc");
+        document.getElementById("resultSet02").innerHTML = filterArray(activitats, "D");
+
+    </script>
+</body>
+</html>
--- a/uf02/funcions_objectes/exercici_01.html
+++ b/uf02/funcions_objectes/exercici_01.html
@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title></title>
+
+</head>
+<body>
+    <h2>Exercici 01</h2> 
+    
+    <p>Resultat:</p>
+
+    <p id="resultSet01"></p>
+    <p id="resultSet02"></p>
+
+
+    <script>
+        let usuaris = {
+            noms : [
+                "joan maria"
+            ]
+            ['Treball', 8],
+            ['Menjar', 1],
+            ['Desplaçaments', 1],
+            ['Jugar', 1],
+            ['Dormir', 8]
+        };
+
+        // SortOrder, asc(default) / desc
+        function sortArray(inputArray, sortOrder) {
+            if (sortOrder=="desc") {
+                return inputArray.sort().reverse();
+            } else {
+                return inputArray.sort();
+            }
+        }
+        // filterOption, any string you want to filter by
+        function filterArray(inputArray, filterOption) {
+            let outputArray = [];
+            inputArray.forEach(element => {
+                if (filterOption.indexOf(element[0]) != -1) {
+                    outputArray.push(element);
+                }
+            });
+            return outputArray;
+        }
+
+
+        document.getElementById("resultSet01").innerHTML = sortArray(activitats, "desc");
+        document.getElementById("resultSet02").innerHTML = filterArray(activitats, "D");
+
+    </script>
+</body>
+</html>
--- a/uf02/funcions_objectes/exercici_02.html
+++ b/uf02/funcions_objectes/exercici_02.html
@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title></title>
+
+</head>
+<body>
+    <h2>Exercici 07</h2> 
+    
+    <p>Resultat:</p>
+
+    <p id="resultSet01"></p>
+    <p id="resultSet02"></p>
+
+
+    <script>
+        let activitats = [
+            ['Treball', 8],
+            ['Menjar', 1],
+            ['Desplaçaments', 1],
+            ['Jugar', 1],
+            ['Dormir', 8]
+        ];
+
+        // SortOrder, asc(default) / desc
+        function sortArray(inputArray, sortOrder) {
+            if (sortOrder=="desc") {
+                return inputArray.sort().reverse();
+            } else {
+                return inputArray.sort();
+            }
+        }
+        // filterOption, any string you want to filter by
+        function filterArray(inputArray, filterOption) {
+            let outputArray = [];
+            inputArray.forEach(element => {
+                if (filterOption.indexOf(element[0]) != -1) {
+                    outputArray.push(element);
+                }
+            });
+            return outputArray;
+        }
+
+
+        document.getElementById("resultSet01").innerHTML = sortArray(activitats, "desc");
+        document.getElementById("resultSet02").innerHTML = filterArray(activitats, "D");
+
+    </script>
+</body>
+</html>
--- a/uf02/funcions_objectes/exercici_03.html
+++ b/uf02/funcions_objectes/exercici_03.html
@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title></title>
+
+</head>
+<body>
+    <h2>Exercici 07</h2> 
+    
+    <p>Resultat:</p>
+
+    <p id="resultSet01"></p>
+    <p id="resultSet02"></p>
+
+
+    <script>
+        let activitats = [
+            ['Treball', 8],
+            ['Menjar', 1],
+            ['Desplaçaments', 1],
+            ['Jugar', 1],
+            ['Dormir', 8]
+        ];
+
+        // SortOrder, asc(default) / desc
+        function sortArray(inputArray, sortOrder) {
+            if (sortOrder=="desc") {
+                return inputArray.sort().reverse();
+            } else {
+                return inputArray.sort();
+            }
+        }
+        // filterOption, any string you want to filter by
+        function filterArray(inputArray, filterOption) {
+            let outputArray = [];
+            inputArray.forEach(element => {
+                if (filterOption.indexOf(element[0]) != -1) {
+                    outputArray.push(element);
+                }
+            });
+            return outputArray;
+        }
+
+
+        document.getElementById("resultSet01").innerHTML = sortArray(activitats, "desc");
+        document.getElementById("resultSet02").innerHTML = filterArray(activitats, "D");
+
+    </script>
+</body>
+</html>
--- a/uf02/funcions_objectes/exercici_04.html
+++ b/uf02/funcions_objectes/exercici_04.html
@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title></title>
+
+</head>
+<body>
+    <h2>Exercici 07</h2> 
+    
+    <p>Resultat:</p>
+
+    <p id="resultSet01"></p>
+    <p id="resultSet02"></p>
+
+
+    <script>
+        let activitats = [
+            ['Treball', 8],
+            ['Menjar', 1],
+            ['Desplaçaments', 1],
+            ['Jugar', 1],
+            ['Dormir', 8]
+        ];
+
+        // SortOrder, asc(default) / desc
+        function sortArray(inputArray, sortOrder) {
+            if (sortOrder=="desc") {
+                return inputArray.sort().reverse();
+            } else {
+                return inputArray.sort();
+            }
+        }
+        // filterOption, any string you want to filter by
+        function filterArray(inputArray, filterOption) {
+            let outputArray = [];
+            inputArray.forEach(element => {
+                if (filterOption.indexOf(element[0]) != -1) {
+                    outputArray.push(element);
+                }
+            });
+            return outputArray;
+        }
+
+
+        document.getElementById("resultSet01").innerHTML = sortArray(activitats, "desc");
+        document.getElementById("resultSet02").innerHTML = filterArray(activitats, "D");
+
+    </script>
+</body>
+</html>
--- a/uf02/m6uf2_ini-20211220T160155Z-001.zip
+++ b/uf02/m6uf2_ini-20211220T160155Z-001.zip
--- a/uf03/dom/exemples/Dom01_Selectores.html
+++ b/uf03/dom/exemples/Dom01_Selectores.html
@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+
+    <style>
+        .miClase{
+            color: red;
+        }
+    </style>
+
+    <script>
+        window.addEventListener("load", main);
+
+        function main(){
+            document.getElementById("cambiarTextos").addEventListener("click", cambiarTextos);
+            document.getElementById("cambiarClases").addEventListener("click", cambiarClases);
+            document.getElementById("quitarClases").addEventListener("click", quitarClases);
+        }
+
+        function cambiarTextos(){
+            document.getElementById("parrafo1").innerHTML = "Primer parrafo cambiado";
+            let parrafos = document.getElementsByTagName("p");
+            for(let i=0; i < parrafos.length; i++){
+                parrafos[i].innerHTML = "Parrafo cambiado tag";
+            }
+            document.getElementsByClassName("miClase")[0].innerHTML = "Tercer parrafo cambiado";
+        }
+
+        function cambiarClases(){
+            document.getElementById("parrafo1").setAttribute("class","miClase");
+            document.getElementById("parrafo2").className = "miClase";
+        }
+
+        function quitarClases(){
+
+            let parrafos = document.getElementsByTagName("p");
+            for(let i=0; i < parrafos.length; i++){
+                parrafos[i].className = "";
+            }
+
+        }
+    </script>
+</head>
+<body>
+    <div>
+        <p id="parrafo1">Este es el primer parrafo</p>
+        <p id="parrafo2">Este es el segundo parrafo</p>
+        <p id="parrafo3" class="miClase">Este es el tercer parrafo</p>
+    </div>
+    <button id="cambiarTextos">Cambiar texto parrafos</button>
+    <button id="cambiarClases">Cambiar clases parrafos</button>
+    <button id="quitarClases">Quitar clases parrafos</button>
+
+</body>
+</html>
--- a/uf03/dom/exemples/Dom02_Elementos.html
+++ b/uf03/dom/exemples/Dom02_Elementos.html
@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+
+    <script>
+        window.onload = main;
+
+        function main(){
+            document.getElementById("crearParrafo").addEventListener("click", crearParrafo);
+            document.getElementById("crearImagen").addEventListener("click", crearImagen);
+            document.getElementById("borrarUltimo").addEventListener("click", borrarUltimo);
+            document.getElementById("borrarPrimero").addEventListener("click", borrarPrimero);
+            document.getElementById("sustituirPrimeroVacio").addEventListener("click", sustituirPrimeroVacio);
+        }
+
+        function crearParrafo(){
+            let parrafo = document.createElement("p");
+
+            let texto = document.getElementById("texto").value;
+            let textNode = document.createTextNode(texto);
+            parrafo.appendChild(textNode);
+
+            let div1 = document.getElementById("div1");
+            div1.appendChild(parrafo);
+        }
+
+        function crearImagen (){
+
+            let imagen = document.createElement("img");
+            imagen.setAttribute("src", prompt("Introduce ruta imagen: "));
+            imagen.setAttribute("alt", prompt("Introduce teto alternativo: "));
+
+            let div1 = document.getElementById("div1");
+            div1.appendChild(imagen);
+
+        }
+
+        function borrarUltimo(){
+
+            let div1 = document.getElementById("div1");
+            div1.removeChild(div1.lastChild);
+
+        }
+
+        function borrarPrimero(){
+
+            let div1 = document.getElementById("div1");
+            div1.removeChild(div1.firstChild);
+
+        }
+
+        function sustituirPrimeroVacio(){
+            let parrafo = document.createElement("p").appendChild(document.createTextNode("Vacio"));
+            let div1 = document.getElementById("div1");
+            div1.replaceChild(parrafo,div1.firstChild);
+
+        }
+    </script>
+</head>
+<body>
+    <div id="div1"></div>
+    <br/>
+    <textarea id="texto"></textarea>
+    <br/>
+    <button id="crearParrafo">Crear parrafo</button>
+    <button id="crearImagen">Crear imagen</button>
+    <button id="borrarUltimo">Borrar ultimo</button>
+    <button id="borrarPrimero">Borrar primero</button>
+    <button id="sustituirPrimeroVacio">Sustituir primer párrafo por vacío</button>
+</body>
+</html>
--- a/uf03/dom/exemples/Dom03_ElementosAddTask.html
+++ b/uf03/dom/exemples/Dom03_ElementosAddTask.html
@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>ToDo List</title>
+  
+    <script>
+
+        window.addEventListener("load", main);
+
+        const tasks = ['Anar a comprar', 'Preparar el sopar', 'Reportar hores al sBid'];
+        var todoList;
+
+        function main() {
+
+			todoList = document.getElementById("todo_list");
+
+            tasks.forEach( task => {
+                addTask(todoList, task);
+            })
+
+            document.getElementById('taskButton').addEventListener('click', onClick);
+        }
+
+        function onClick() {
+            taskText = document.getElementById("taskText").value;
+            if (taskText) {
+                addTask(todoList, taskText);
+            } else {
+                alert('Has de introduir un valor')
+            }
+        }
+
+        function addTask(todoList, taskText) {
+            var itemLi = document.createElement("li");
+			itemLi.appendChild(document.createTextNode(taskText));
+            //itemLi.innerText = taskText;
+            todoList.appendChild(itemLi);
+        }
+
+    </script>
+
+</head>
+
+<body>
+    <input type="text" name="task" id="taskText">
+    <input type="button" value="Crea tasca" id="taskButton">
+    <ul id="todo_list">
+    </ul>
+
+</body>
+
+</html>
--- a/uf03/dom/exemples/exercici_pissarra_01.html
+++ b/uf03/dom/exemples/exercici_pissarra_01.html
@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>ToDo List</title>
+  
+    <script>
+
+        window.addEventListener("load", main);
+
+        function main() {
+            document.getElementsByTagName("div")[0].addEventListener("click", onClick('g'));
+        }
+
+        function onClick(reg) {
+            if (reg = 'g') {
+                document.getElementsByTagName("div")[0].appendChild(document.createElement("p"))
+
+            }
+        }
+
+    </script>
+
+</head>
+
+<body>
+    <div>
+        <h3>Galicia</h3>
+    </div>
+    <div>
+        <h3>Canarias</h3>
+    </div>
+
+</body>
+
+</html>
--- a/uf03/dom/exercici01.html
+++ b/uf03/dom/exercici01.html
@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+<title>Exercici 01</title>
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
+<head>
+<script>
+    window.addEventListener("load", main);
+    function main() {
+        document.getElementById("webs").addEventListener("change", function(){
+            window.open(this.value);
+            // alert(this.value);
+            // alert("holaa");
+        })
+    }
+    
+</script>
+</head>
+<body>
+
+<div class="w3-container">
+  <h1>Exercici 01</h1>
+</div>
+
+<div class="w3-container">
+    <select name="webs" id="webs">
+        <option value="https://hetzner.com" class="w3-button w3-black">Hetzner</option>
+        <option value="https://512kb.club" class="w3-button w3-black">512KB Club</option>
+        <option value="https://w3schools.com" class="w3-button w3-black">W3 Schools</option>
+    </select>
+</div>
+
+</body>
+</html> 
--- a/uf03/dom/exercici02.html
+++ b/uf03/dom/exercici02.html
@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+<title>Exercici 02</title>
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
+<head>
+<script>
+    window.addEventListener("load", main);
+    function main() {
+        document.getElementById("webs").addEventListener("mouseover", function(){
+            this.setAttribute("src", "http://www.tranevietnam.com/uploads/files/Apply/RTWS.PNG")
+        })
+        document.getElementById("webs").addEventListener("mouseout", function(){
+            this.setAttribute("src", "http://s3-eu-west-1.amazonaws.com/ebayproductphotos/si/gfx1263.jpg")
+        })
+    }
+    
+</script>
+</head>
+<body>
+
+<div class="w3-container">
+  <h1>Exercici 02</h1>
+</div>
+
+<div class="w3-container">
+    <img id="webs" src="http://s3-eu-west-1.amazonaws.com/ebayproductphotos/si/gfx1263.jpg" alt="">
+</div>
+
+</body>
+</html> 
--- a/uf03/dom/exercici03.html
+++ b/uf03/dom/exercici03.html
@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html>
+<title>Exercici 03</title>
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
+<head>
+<script>
+    window.addEventListener("load", main);
+    function main() {
+        ass=document.getElementsByTagName("a")
+        for(let i=0; i<ass.length; i++) {
+            ass[i].addEventListener("click", function(){
+                if (ass[i].previousElementSibling.style.display!="none") {
+                    ass[i].previousElementSibling.style.display="none"
+                    ass[i].innerHTML="Mostrar"
+                } else {
+                    ass[i].previousElementSibling.style.display="block"
+                    ass[i].innerHTML="Ocultar contenidos"
+                }
+
+            })
+        };
+        
+    }
+    
+</script>
+</head>
+<body>
+
+<div class="w3-container">
+  <h1>Exercici 03</h1>
+</div>
+
+<div class="w3-container">
+    <p id="contenidos_1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed mattis enim vitae orci. Phasellus
+        libero. Maecenas nisl arcu, consequat congue, commodo nec, commodo ultricies, turpis. Quisque sapien nunc,
+        posuere vitae, rutrum et, luctus at, pede. Pellentesque massa ante, ornare id, aliquam vitae, ultrices
+        porttitor, pede. Nullam sit amet nisl elementum elit convallis malesuada. Phasellus magna sem, semper quis,
+        faucibus ut, rhoncus non, mi. Duis pellentesque, felis eu adipiscing ullamcorper, odio urna consequat arcu, at
+        posuere ante quam non dolor. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis scelerisque.</p>
+    <a id="enlace_1" href="#">Ocultar contenidos</a>
+    <br />
+
+    <p id="contenidos_2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed mattis enim vitae orci. Phasellus
+        libero. Maecenas nisl arcu, consequat congue, commodo nec, commodo ultricies, turpis. Quisque sapien nunc,
+        posuere vitae, rutrum et, luctus at, pede. Pellentesque massa ante, ornare id, aliquam vitae, ultrices
+        porttitor, pede. Nullam sit amet nisl elementum elit convallis malesuada. Phasellus magna sem, semper quis,
+        faucibus ut, rhoncus non, mi. Duis pellentesque, felis eu adipiscing ullamcorper, odio urna consequat arcu, at
+        posuere ante quam non dolor. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis scelerisque.</p>
+    <a id="enlace_2" href="#">Ocultar contenidos</a>
+    <br />
+
+    <p id="contenidos_3">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed mattis enim vitae orci. Phasellus
+        libero. Maecenas nisl arcu, consequat congue, commodo nec, commodo ultricies, turpis. Quisque sapien nunc,
+        posuere vitae, rutrum et, luctus at, pede. Pellentesque massa ante, ornare id, aliquam vitae, ultrices
+        porttitor, pede. Nullam sit amet nisl elementum elit convallis malesuada. Phasellus magna sem, semper quis,
+        faucibus ut, rhoncus non, mi. Duis pellentesque, felis eu adipiscing ullamcorper, odio urna consequat arcu, at
+        posuere ante quam non dolor. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis scelerisque.</p>
+    <a id="enlace_3" href="#">Ocultar contenidos</a>
+</div>
+
+</body>
+</html> 
--- a/uf03/dom/exercici04.html
+++ b/uf03/dom/exercici04.html
@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<title>Exercici 04</title>
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
+<head>
+<script>
+    window.addEventListener("load", main);
+    function main() {
+        document.addEventListener("click", function(e){
+          document.getElementById("test").innerHTML+="<p>Coordenades: " + e.clientX  + " / " + e.clientY + "</p>"
+        })
+    }
+    
+</script>
+</head>
+<body>
+
+<div class="w3-container">
+  <h1>Exercici 04</h1>
+</div>
+
+<div id="test" class="w3-container">
+</div>
+
+</body>
+</html> 
--- a/uf03/dom/exercici05.html
+++ b/uf03/dom/exercici05.html
--- a/uf03/dom/exercici06.html
+++ b/uf03/dom/exercici06.html
--- a/uf03/dom/formulari/form.html
+++ b/uf03/dom/formulari/form.html
@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta charset="UTF-8">
+
+	<title></title>
+
+    <!-- Bootstrap CSS -->
+	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
+
+    <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
+    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>
+
+	<link rel="stylesheet" href="style.css">
+	<script src="script.js"></script>
+</head>
+
+<body>
+	<div class="container pt-5">
+		<h4>Formulari de registre d'usuaris</h4>
+		<form id="form-user-register" action="userRegister.php" method="post">
+			<div class="form-row mt-5 mb-4">
+				<div class="col-4">
+					<label for="nom">Nom*</label>
+					<input type="text" class="form-control" id="nom" value="" name="nom">
+					<div class="invalid-feedback"></div>
+				</div>
+
+				<div class="col-4">
+					<label for="cognoms">Cognoms*</label>
+					<input type="text" class="form-control" id="cognoms" value="" name="cognoms">
+					<div class="invalid-feedback"></div>
+				</div>
+
+				<div class="col-4">
+					<label for="DNI">DNI*</label>
+					<input type="text" class="form-control" id="dni" value="" name="DNI">
+					<div class="invalid-feedback"></div>
+				</div>
+			</div>
+			
+			<div class="form-row mb-4">
+				<div class="col-4">
+					<label for="username">Username*</label>
+					<div class="input-group">
+						<div class="input-group-prepend" id="btnUsername">
+							<span class="input-group-text">@</span>
+						</div>
+						<input type="text" class="form-control" id="username">
+						<div class="invalid-feedback"></div>
+					</div>
+				</div>
+
+				<div class="col-4">
+					<label for="email">Email*</label>
+					<input type="email" class="form-control" id="email">
+					<div class="invalid-feedback"></div>
+				</div>
+
+				<div class="col-4">
+					<label for="telefon">Telèfon*</label>
+					<input type="text" class="form-control" id="telefon">
+					<div class="invalid-feedback"></div>
+				</div>
+			</div>
+			
+			<button id="submit" class="btn btn-primary" type="submit">Registrar</button>
+		</form>
+	</div>
+
+</body>
+</html>
--- a/uf03/dom/formulari/script.js
+++ b/uf03/dom/formulari/script.js
@ -0,0 +1,39 @@
+window.onload = main
+
+function main(){
+    document.getElementById("submit").addEventListener("click", validate);
+
+    
+
+    function validatePhone() {
+        let inputPhone = document.getElementById("telefon");
+        if (!inputPhone.value || isNaN(inputPhone.value)) {
+            alert("The phone filed must be a 9 digit number");
+            return false;
+        }
+        return true;
+    }
+
+    function validateName() {
+        let inputName = document.getElementById("nom").value;
+        for (char of inputName){
+            if (!(/[A-z]/).test(char)){
+                alert("The name can only contain letters");
+                return false;
+            }
+        }
+        console.log(inputName);
+        return true;
+        
+    }
+    function validate(e){
+        if (!validateName() || !validatePhone()) {
+            console.log("auth failed");
+            e.preventDefault();
+            return false;
+        }
+        console.log("auth successful");
+        return false;
+        
+    }
+}
--- a/uf03/dom/formulari/style.css
+++ b/uf03/dom/formulari/style.css