Michael Czechowski
1a5c09b750
Synchronizes 72 lesson files across 5 languages (de, pl, es, ar, uk) to match the English source. This ensures code, solutions, and validations are identical while only title, description, task, and message fields are translated. Changes include: - Box model lessons (01-box-model.json) - Units and variables (05-units-variables.json) - Transitions and animations (06-transitions-animations.json) - Responsive design (08-responsive.json) - HTML elements (20-html-elements.json) - HTML forms basic and validation (21, 22) - HTML details/summary, progress/meter (23, 24) - HTML datalist, dialog, fieldset (25, 27, 28) - HTML tables and SVG (30, 32) - HTML marquee (31) - Welcome module (00-welcome.json) Fixes validation inconsistencies and removes extra content that exceeded English source. German translations were largely correct; Polish, Spanish, Arabic, and Ukrainian required full translations.
79 lines
4.4 KiB
JSON
79 lines
4.4 KiB
JSON
{
|
|
"$schema": "../../schemas/code-crispies-module-schema.json",
|
|
"id": "html-datalist",
|
|
"title": "Datalist",
|
|
"description": "Proporciona sugerencias para campos de texto sin JavaScript",
|
|
"mode": "html",
|
|
"difficulty": "beginner",
|
|
"lessons": [
|
|
{
|
|
"id": "datalist-basic",
|
|
"title": "Campo con sugerencias",
|
|
"description": "El elemento <kbd><datalist></kbd> proporciona sugerencias de autocompletado para campos. Conéctalo usando el atributo <kbd>list</kbd> en el input que coincida con el <kbd>id</kbd> del datalist.<br><br>Los usuarios pueden escribir libremente - ¡las sugerencias son solo ayudas!",
|
|
"task": "Crea un selector de navegador:<br>1. Añade un <kbd><label></kbd> que diga <code>Navegador:</code><br>2. Añade un <kbd><input></kbd> con <kbd>list=\"browsers\"</kbd><br>3. Añade un <kbd><datalist id=\"browsers\"></kbd> con opciones para Chrome, Firefox y Safari",
|
|
"previewHTML": "",
|
|
"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } label { display: block; margin-bottom: 8px; font-weight: 500; } input { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 6px; font-size: 16px; } input:focus { outline: 2px solid #1976d2; border-color: transparent; }",
|
|
"sandboxCSS": "",
|
|
"initialCode": "",
|
|
"solution": "<label for=\"browser\">Browser:</label>\n<input type=\"text\" id=\"browser\" list=\"browsers\">\n<datalist id=\"browsers\">\n <option value=\"Chrome\">\n <option value=\"Firefox\">\n <option value=\"Safari\">\n</datalist>",
|
|
"previewContainer": "preview-area",
|
|
"validations": [
|
|
{
|
|
"type": "element_exists",
|
|
"value": "datalist",
|
|
"message": "Añade un elemento <kbd><datalist></kbd>"
|
|
},
|
|
{
|
|
"type": "attribute_value",
|
|
"value": { "selector": "input", "attr": "list", "value": "browsers" },
|
|
"message": "Conecta el input al datalist usando <kbd>list=</kbd>\"browsers\""
|
|
},
|
|
{
|
|
"type": "element_count",
|
|
"value": { "selector": "option", "min": 3 },
|
|
"message": "Añade al menos 3 elementos <kbd><option></kbd> dentro de <kbd><datalist></kbd>"
|
|
},
|
|
{
|
|
"type": "element_exists",
|
|
"value": "label",
|
|
"message": "Añade un <kbd><label></kbd> para el campo"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "datalist-countries",
|
|
"title": "Selector de países",
|
|
"description": "Los datalist funcionan genial para listas largas como países. Los usuarios pueden escribir para filtrar sugerencias al instante.<br><br>El atributo <kbd>value</kbd> es lo que se ingresa, y puedes añadir texto de visualización después.",
|
|
"task": "Crea un campo de país:<br>1. Añade un <kbd><label></kbd> que diga <code>País:</code><br>2. Añade un <kbd><input></kbd> con <kbd>list=\"countries\"</kbd><br>3. Añade un <kbd><datalist id=\"countries\"></kbd> con al menos 4 opciones de países",
|
|
"previewHTML": "",
|
|
"previewBaseCSS": "body { font-family: system-ui; padding: 30px; background: linear-gradient(135deg, #e0f7fa 0%, #b2ebf2 100%); min-height: 100vh; margin: 0; box-sizing: border-box; } label { display: block; margin-bottom: 10px; font-weight: 600; color: #00695c; } input { width: 100%; padding: 12px 15px; border: 2px solid #26a69a; border-radius: 8px; font-size: 16px; background: white; } input:focus { outline: none; border-color: #00695c; box-shadow: 0 0 0 3px rgba(38,166,154,0.2); }",
|
|
"sandboxCSS": "",
|
|
"initialCode": "",
|
|
"solution": "<label for=\"country\">Country:</label>\n<input type=\"text\" id=\"country\" list=\"countries\" placeholder=\"Start typing...\">\n<datalist id=\"countries\">\n <option value=\"Germany\">\n <option value=\"France\">\n <option value=\"Spain\">\n <option value=\"Italy\">\n</datalist>",
|
|
"previewContainer": "preview-area",
|
|
"validations": [
|
|
{
|
|
"type": "element_exists",
|
|
"value": "datalist",
|
|
"message": "Añade un elemento <kbd><datalist></kbd>"
|
|
},
|
|
{
|
|
"type": "attribute_value",
|
|
"value": { "selector": "datalist", "attr": "id", "value": "countries" },
|
|
"message": "Establece <kbd>id=</kbd>\"countries\" en el datalist"
|
|
},
|
|
{
|
|
"type": "attribute_value",
|
|
"value": { "selector": "input", "attr": "list", "value": "countries" },
|
|
"message": "Conecta el input usando <kbd>list=</kbd>\"countries\""
|
|
},
|
|
{
|
|
"type": "element_count",
|
|
"value": { "selector": "option", "min": 4 },
|
|
"message": "Añade al menos 4 opciones de países"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|