public/code-crispies
2
1
Fork 0
Code Issues 7 Pull Requests Actions Activity

auto-claude: 5.3 - Add explanations to details/summary, progress/mete

Browse Source
This commit is contained in:
Michael Czechowski
2026-01-11 14:55:43 +01:00
parent 85f2aa47fe
commit 386109733b
10 changed files with 108 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
lessons/25-html-datalist.json
View File

@@ -17,6 +17,10 @@
"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",
"concept": {
"explanation": "Datalist provides native autocomplete without requiring JavaScript—the browser handles all the filtering, dropdown rendering, and selection logic. When users type, the browser automatically shows matching options using substring matching (typing \"fir\" shows \"Firefox\"). Unlike a select element that restricts users to predefined choices, datalist is advisory-only: users can ignore all suggestions and enter custom text, making it perfect for \"common values but allow anything\" scenarios. The dropdown styling is platform-native and keyboard-accessible (arrow keys to navigate, Enter to select), with full screen reader support announcing \"combobox with X suggestions\".",
"diagram": "Datalist vs Select\n\nDatalist (Flexible):\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n<input list=\"browsers\">\n<datalist id=\"browsers\">\n <option value=\"Chrome\">\n <option value=\"Firefox\">\n</datalist>\n\n┌─────────────────────────────┐\n│ Fir_ │ ← User types\n├─────────────────────────────┤\n│ ▾ Suggestions: │\n│ Firefox │ ← Filtered\n└─────────────────────────────┘\n✓ Can type \"Brave\" (not listed)\n✓ Suggestions are optional\n\nSelect (Restricted):\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n<select>\n <option>Chrome</option>\n <option>Firefox</option>\n</select>\n\n┌─────────────────────────────┐\n│ Chrome ▾ │\n├─────────────────────────────┤\n│ Chrome │\n│ Firefox │\n└─────────────────────────────┘\n✗ Can't type custom value\n✗ Must pick from list\n\nBrowser Handles:\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n✓ Substring filtering\n✓ Dropdown rendering\n✓ Keyboard navigation\n✓ Screen reader announcements"
},
"validations": [
{
"type": "element_exists",
@@ -51,6 +55,10 @@
"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",
"concept": {
"explanation": "Datalists scale exceptionally well for long lists because filtering happens client-side without network requests—the browser holds all options in memory and filters instantly as the user types. This makes it ideal for common datasets like countries, states, or product names where you have hundreds of options but don't want to overwhelm users with a massive dropdown. Unlike select elements that require scrolling through all options, datalist progressively narrows results: typing \"ger\" in a 200-country list instantly shows only \"Germany\", \"Algeria\", and \"Niger\". This progressive disclosure pattern improves usability while maintaining full keyboard and screen reader accessibility.",
"diagram": "Progressive Filtering\n\nInitial State:\n┌─────────────────────────────┐\n│ Country: _ │\n└─────────────────────────────┘\n(No dropdown shown)\n\nUser types \"G\":\n┌─────────────────────────────┐\n│ Country: G_ │\n├─────────────────────────────┤\n│ ▾ Suggestions: │\n│ Germany │\n│ Georgia │\n│ Ghana │\n│ Greece │\n└─────────────────────────────┘\n\nUser types \"Ge\":\n┌─────────────────────────────┐\n│ Country: Ge_ │\n├─────────────────────────────┤\n│ ▾ Suggestions: │\n│ Germany │ ← Narrowed to 2\n│ Georgia │\n└─────────────────────────────┘\n\nUser types \"Ger\":\n┌─────────────────────────────┐\n│ Country: Ger_ │\n├─────────────────────────────┤\n│ ▾ Suggestions: │\n│ Germany │ ← Only 1 match\n└─────────────────────────────┘\n\nPerformance:\n✓ No network requests\n✓ Instant client-side filtering\n✓ Scales to hundreds of options\n✓ No JavaScript required"
},
"validations": [
{
"type": "element_exists",