Llista d'exercicis d'interacció amb el DOM

Feu cada exercici en un document HTML nou. Poseu els scripts en el mateix document. Podeu fer-vos un full de CSS per donar estil a tots els exercicis alhora o podeu escriure l'estil en el mateix HTML.

En molts exercicis podreu usar funcions o codi que heu escrit pels exercicis de repàs. Estigueu atents i no escriviu més codi del compte.

• Exercici 1: Fes que un botó et saludi per la consola dient "Hola, Usuari".


• Exercici 2: Fes que un botó agafi el teu nom d'un input de text i et saludi per la consola dient el teu nom.


• Exercici 3: Fes que un botó agafi el teu nom d'un input de text i et saludi escrivint el teu nom al costat del botó (en el HTML).


• Exercici 4: Fes que un botó agafi el teu nom d'un input de text i et saludi escrivint el teu nom al costat del botó (en el HTML) precedit del pronom que hagis escollit en un input radio (selecció única).


• Exercici 5: Fes que un botó agafi el teu nom d'un input de text i et saludi per la consola dient el teu nom amb el color que hagis seleccionat en un input select.


• Exercici 6: Fes que un botó agafi el teu nom d'un input de text i et saludi escrivint el teu nom al costat del botó (en el HTML) amb el color que hagis seleccionat en un input select.


• Exercici 7: Fes que un botó agafi el teu nom d'un input de text i et saludi escrivint el teu nom al costat del botó (en el HTML) amb el color que hagis seleccionat en un input color.


• Exercici 8: Fes que un botó agafi una temperatura en graus Celsius d'un input de text i la converteixi en graus Fahrenheit.


• Exercici 9: Fes un convertidor de graus Fahrenheit, Celsius i Kelvin que agafi la temperatura de un input de text i agafi les unitats originals i de destí de dos inputs select.


• Exercici 10: Calculadora simple. Fes una calculadora que agafi dos números de inputs de text i una operació de imput select i t'escrigui el resultat a l'HTML.


• Exercici 11: Calculadora guai. Fes una calculadora amb botons i pantalla (+, -, x, /, =, C).


• Exercici 11.1: Calculadora super guai. Fes una calculadora amb botons i pantalla que tingui accions secundàries (shift)


• Exercici 12: Llista de la compra simple. Igual que la que funcionava amb prompts però amb imput de text


• Exercici 12.1: Llista de la compra guai. Igual que la que funcionava amb prompts però amb imput de text i botó per ordenar alfabéticament.


• Exercici 12.2: Llista de la compra super guai. Igual que la que funcionava amb prompts però amb imput de text, selecció de secció del supermercat i botó per ordenar alfabéticament.


• Exercici 13: Fes un selector de propietats d'una caixa (nom, material, mida i missatge) amb input text i selects que al clicar un botó escrigui al HTML "Omar ha pedido una caja de sushi tamaño grande (con mucho wasabi)".
• Exercici 14: Carta de presentació interactiva (veure la captura als arxius del Teams).


• Exercici 15: Filtre. Fes un filtre de elements que et mostri els d'un color concret (blau, verd, groc, vermell), tots els elements o cap element afegint o treient la classe "show".


• Exercici 15.1: Filtre guai. Fes un filtre de elements que et mostri els d'un color concret (blau, verd, groc, vermell), tots els elements o cap element amb una animació que faci que els elements que sobren desapareguin d'alguna manera.


• Exercici 16: Selector d'estils CSS. Modifica la pàgina que vam fer amb tres estils diferents perque sigui una SPA (Single Page Application)


• Exercici Lightbox: Creació d'un lighbox


• Exercici amb Countdown: Compte enrere fins al final del curs


• Exercici amb Time: Diferents aplicacions de time