2f:T426,

Hola, ${nom2}! ${emojiColor(color2)}

El teu color preferit és ${color2}.
Sabies que el teu color diu molt de tu?

${missatgePersonalitzat (color2)}

30:[] 2d:{"title":"Dia 2 — Introducció a HTML, CSS i JS","cells":[{"id":0,"value":"# Dia 2 — Introducció a HTML, CSS i JS","pinned":false,"hidden":false,"mode":"md"},{"id":106,"value":"## 🎯 Objectiu de la sessió\nAprendre a utilitzar HTML, CSS i JavaScript dins de notebooks d’Observable. Entendre com estructurar una petita targeta visual utilitzant codi HTML, com afegir estils amb CSS i com incorporar interacció i lògica amb JavaScript.","pinned":false,"hidden":false,"mode":"md"},{"id":109,"value":"
","pinned":false,"hidden":false,"mode":"html"},{"id":111,"value":"### 🧱 HTML — Estructura\nHTML és el llenguatge que defineix l’estructura del contingut.\nFunciona amb etiquetes com `

` (títol), `
` (paràgraf), `
` (contenidor) o `` (text inline).\nCada etiqueta pot tenir atributs, com per exemple style=\"\" per afegir estil directament.\n\nEtiquetes bàsiques HTML","pinned":false,"hidden":false,"mode":"md"},{"id":41,"value":"
Titol 1
\n
Titol 2
\n
Titol 3
\n\n
\n Contenidor per agrupar elements\n
\n

\n
Paràgraf de text.
\n
L'etiqueta span serveix per modificar petits trossos de text
\n","pinned":true,"hidden":false,"mode":"html"},{"id":117,"value":"Exemple bàsic","pinned":false,"hidden":false,"mode":"md"},{"id":119,"value":"
Hola, món!
\n
Aquest és el meu primer text en HTML.
\n","pinned":false,"hidden":false,"mode":"html"},{"id":121,"value":"
","pinned":false,"hidden":false,"mode":"html"},{"id":124,"value":"### 🎨 CSS — Estil\nCSS ens permet donar color, forma i estil al nostre contingut HTML. A Observable, podem escriure les propietats CSS directament dins del style=\"\".\n\nPropietats bàsiques de CSS","pinned":false,"hidden":false,"mode":"md"},{"id":52,"value":"
Hola!
","pinned":false,"hidden":false,"mode":"html"},{"id":203,"value":"
Hola!
","pinned":false,"hidden":false,"mode":"html"},{"id":206,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":128,"value":"
","pinned":false,"hidden":false,"mode":"html"},{"id":130,"value":"### 🧠 JavaScript — Lògica\nJavaScript ens permet controlar el contingut.\nPodem definir variables, escriure funcions i modificar elements en funció del que passa al notebook.\n\nSintaxis bàsica de Javascript","pinned":false,"hidden":false,"mode":"md"},{"id":61,"value":"function saluda(nom) {\n return `Bon dia, ${nom}!`;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":63,"value":"saluda(\"noies\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":67,"value":"També podem fer operacions amb variables:\n","pinned":false,"hidden":false,"mode":"md"},{"id":69,"value":"name = \"Laia\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":71,"value":"missatge = `El meu nom és ${name}!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":133,"value":"
","pinned":false,"hidden":false,"mode":"html"},{"id":81,"value":"## EXERCICI\n🎯 Objectiu: Crear una petita targeta amb el teu nom i color preferit, utilitzant HTML, CSS i JS.\n\n\nPAS 1 — Crea una variables amb el teu nom i un input per capturar el teu color preferit:\n\n","pinned":false,"hidden":false,"mode":"md"},{"id":84,"value":"nom = \"Alumna\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":86,"value":"viewof color = Inputs.color({\n label: \"Tria el teu color preferit\",\n value: \"#ec8383\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":90,"value":"PAS 2 — Mostra una targeta HTML amb el teu nom i posa el color de fons amb el color triat\n","pinned":false,"hidden":false,"mode":"md"},{"id":92,"value":"
\n
Hola, ${nom}!
\n
","pinned":true,"hidden":false,"mode":"html"},{"id":96,"value":"PAS 3 — Crea una funció que mostri el color i posa'l a la targeta:\n","pinned":false,"hidden":false,"mode":"md"},{"id":221,"value":"function missatgeColor(color) {\n return `El teu color preferit és ${color}`;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":228,"value":"missatgeColor(color)","pinned":true,"hidden":false,"mode":"ojs"},{"id":231,"value":"
\n
Hola, ${nom}!
\n
${missatgeColor(color)}
\n
","pinned":true,"hidden":false,"mode":"html"},{"id":153,"value":"Porta a un nivell extrem la targeta, let's get creative;)
\n(Optional per fer a casa) \n","pinned":false,"hidden":false,"mode":"md"},{"id":237,"value":"viewof nom2 = Inputs.text({\n label: \"Posa el teu nom\",\n placeholder: \"Entra el teu nom\",\n value: \"Alumna\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":241,"value":"viewof color2 = Inputs.color({\n label: \"Tria el teu color preferit\",\n value: \"#ec8383\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":99,"value":"function missatgePersonalitzat(color) {\n return color === \"#ffffff\" || color === '#000000'\n ? \"T'agraden els extrems;)\"\n : \"Una elecció amb estil! 😊\";\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":102,"value":"missatgePersonalitzat(color2)","pinned":true,"hidden":false,"mode":"ojs"},{"id":171,"value":"function textColorPerFons(hex) {\n const r = parseInt(hex.slice(1, 3), 16);\n const g = parseInt(hex.slice(3, 5), 16);\n const b = parseInt(hex.slice(5, 7), 16);\n\n const brightness = (r * 299 + g * 587 + b * 114) / 1000;\n\n return brightness < 128 ? \"#ffffff\" : \"#000000\";\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":165,"value":"function emojiColor(hex) {\n const r = parseInt(hex.slice(1, 3), 16);\n const g = parseInt(hex.slice(3, 5), 16);\n const b = parseInt(hex.slice(5, 7), 16);\n\n // Obtenir color dominant\n if (r > g && r > b) return \"🔥\"; // vermellós\n if (g > r && g > b) return \"🌿\"; // verdós\n if (b > r && b > g) return \"💧\"; // blavós\n\n // Si són iguals o semblants\n if (r === g && g === b) return \"⚪\"; // gris/neutre\n return \"✨\"; // per qualsevol altre cas\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":155,"value":"$2f","pinned":false,"hidden":false,"mode":"html"}],"files":"$W30","stdlib":"1","titling":"auto"}