Michael Czechowski
862d29aa19
- Add HTML mode support with new validation types (element_exists, element_count, attribute_value, element_text, parent_child, sibling) - Create 3 HTML lesson modules: Elements, Forms Basic, Forms Validation - Implement side-by-side preview comparison (Your Output vs Expected) - Add merge animation with "Perfect Match!" overlay on validation success - Render expected output from solutionCode field in lesson JSON - Update schema to support HTML mode and solutionCode - Reorder modules: HTML first, then CSS, then Tailwind - Update tests for new functionality 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
113 lines
9.1 KiB
JSON
113 lines
9.1 KiB
JSON
{
|
|
"$schema": "../schemas/code-crispies-module-schema.json",
|
|
"id": "html-forms-validation",
|
|
"title": "HTML Forms: Validation",
|
|
"description": "Learn HTML5 built-in form validation attributes",
|
|
"mode": "html",
|
|
"difficulty": "intermediate",
|
|
"lessons": [
|
|
{
|
|
"id": "required-fields",
|
|
"title": "Required Fields",
|
|
"description": "The <kbd>required</kbd> attribute prevents form submission if the field is empty.<br><br>Add it to any input that must be filled:<br><kbd><input type=\"text\" required></kbd><br><br>The browser shows a validation message automatically.",
|
|
"task": "Make both the name and email fields required.",
|
|
"previewHTML": "",
|
|
"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } form { max-width: 350px; } .form-group { margin-bottom: 15px; } label { display: block; margin-bottom: 5px; } label .required { color: #d32f2f; } input { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; } input:invalid { border-color: #d32f2f; } button { padding: 10px 20px; background: #1976d2; color: white; border: none; border-radius: 4px; cursor: pointer; }",
|
|
"sandboxCSS": "",
|
|
"initialCode": "<form>\n <div class=\"form-group\">\n <label for=\"name\">Name: <span class=\"required\">*</span></label>\n <input type=\"text\" id=\"name\" name=\"name\">\n </div>\n <div class=\"form-group\">\n <label for=\"email\">Email: <span class=\"required\">*</span></label>\n <input type=\"email\" id=\"email\" name=\"email\">\n </div>\n <button type=\"submit\">Submit</button>\n</form>",
|
|
"solutionCode": "<form>\n <div class=\"form-group\">\n <label for=\"name\">Name: <span class=\"required\">*</span></label>\n <input type=\"text\" id=\"name\" name=\"name\" required>\n </div>\n <div class=\"form-group\">\n <label for=\"email\">Email: <span class=\"required\">*</span></label>\n <input type=\"email\" id=\"email\" name=\"email\" required>\n </div>\n <button type=\"submit\">Submit</button>\n</form>",
|
|
"previewContainer": "preview-area",
|
|
"validations": [
|
|
{
|
|
"type": "attribute_value",
|
|
"value": { "selector": "input[name='name']", "attr": "required", "value": true },
|
|
"message": "Add the 'required' attribute to the name input"
|
|
},
|
|
{
|
|
"type": "attribute_value",
|
|
"value": { "selector": "input[name='email']", "attr": "required", "value": true },
|
|
"message": "Add the 'required' attribute to the email input"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "input-constraints",
|
|
"title": "Input Constraints",
|
|
"description": "Control what users can enter:<br><br><kbd>minlength</kbd> / <kbd>maxlength</kbd> - Text length limits<br><kbd>min</kbd> / <kbd>max</kbd> - Number range<br><kbd>pattern</kbd> - Regex pattern matching<br><kbd>placeholder</kbd> - Hint text (not a label!)",
|
|
"task": "Add validation: password must be 8-20 characters. Add a helpful placeholder.",
|
|
"previewHTML": "",
|
|
"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } form { max-width: 350px; } .form-group { margin-bottom: 15px; } label { display: block; margin-bottom: 5px; } input { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; } input:invalid:not(:placeholder-shown) { border-color: #d32f2f; } .hint { font-size: 12px; color: #666; margin-top: 4px; } button { padding: 10px 20px; background: #1976d2; color: white; border: none; border-radius: 4px; cursor: pointer; }",
|
|
"sandboxCSS": "",
|
|
"initialCode": "<form>\n <div class=\"form-group\">\n <label for=\"password\">Password:</label>\n <input type=\"password\" id=\"password\" name=\"password\" required>\n <div class=\"hint\">Must be 8-20 characters</div>\n </div>\n <button type=\"submit\">Create Account</button>\n</form>",
|
|
"solutionCode": "<form>\n <div class=\"form-group\">\n <label for=\"password\">Password:</label>\n <input type=\"password\" id=\"password\" name=\"password\" required minlength=\"8\" maxlength=\"20\" placeholder=\"Enter password\">\n <div class=\"hint\">Must be 8-20 characters</div>\n </div>\n <button type=\"submit\">Create Account</button>\n</form>",
|
|
"previewContainer": "preview-area",
|
|
"validations": [
|
|
{
|
|
"type": "attribute_value",
|
|
"value": { "selector": "input[type='password']", "attr": "minlength", "value": "8" },
|
|
"message": "Add minlength=\"8\" to the password input"
|
|
},
|
|
{
|
|
"type": "attribute_value",
|
|
"value": { "selector": "input[type='password']", "attr": "maxlength", "value": "20" },
|
|
"message": "Add maxlength=\"20\" to the password input"
|
|
},
|
|
{
|
|
"type": "attribute_value",
|
|
"value": { "selector": "input[type='password']", "attr": "placeholder", "value": null },
|
|
"message": "Add a placeholder to hint what to enter"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "complete-registration",
|
|
"title": "Complete Registration Form",
|
|
"description": "Build a complete registration form with all validation concepts:<br><br>- Required fields marked with *<br>- Email validation (use type=\"email\")<br>- Password with length constraints<br>- Terms checkbox (required)<br>- Submit button",
|
|
"task": "Complete the registration form. Add required attributes, proper input types, and validation constraints.",
|
|
"previewHTML": "",
|
|
"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } form { max-width: 400px; background: #f5f5f5; padding: 25px; border-radius: 8px; } h2 { margin-top: 0; margin-bottom: 20px; } .form-group { margin-bottom: 18px; } label { display: block; margin-bottom: 5px; font-weight: 500; } .required { color: #d32f2f; } input[type='text'], input[type='email'], input[type='password'] { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; font-size: 14px; } input:focus { outline: 2px solid #1976d2; border-color: transparent; } .checkbox-group { display: flex; align-items: flex-start; gap: 8px; } .checkbox-group input { width: auto; margin-top: 3px; } .checkbox-group label { margin: 0; font-weight: normal; } button { width: 100%; padding: 12px; background: #1976d2; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; font-weight: 500; } button:hover { background: #1565c0; }",
|
|
"sandboxCSS": "",
|
|
"initialCode": "<form>\n <h2>Create Account</h2>\n \n <div class=\"form-group\">\n <label for=\"fullname\">Full Name <span class=\"required\">*</span></label>\n <input type=\"text\" id=\"fullname\" name=\"fullname\">\n </div>\n \n <div class=\"form-group\">\n <label for=\"email\">Email <span class=\"required\">*</span></label>\n <input id=\"email\" name=\"email\">\n </div>\n \n <div class=\"form-group\">\n <label for=\"password\">Password <span class=\"required\">*</span></label>\n <input id=\"password\" name=\"password\">\n </div>\n \n <div class=\"form-group checkbox-group\">\n <input type=\"checkbox\" id=\"terms\" name=\"terms\">\n <label for=\"terms\">I agree to the Terms of Service <span class=\"required\">*</span></label>\n </div>\n \n <button type=\"submit\">Register</button>\n</form>",
|
|
"solutionCode": "<form>\n <h2>Create Account</h2>\n \n <div class=\"form-group\">\n <label for=\"fullname\">Full Name <span class=\"required\">*</span></label>\n <input type=\"text\" id=\"fullname\" name=\"fullname\" required>\n </div>\n \n <div class=\"form-group\">\n <label for=\"email\">Email <span class=\"required\">*</span></label>\n <input type=\"email\" id=\"email\" name=\"email\" required>\n </div>\n \n <div class=\"form-group\">\n <label for=\"password\">Password <span class=\"required\">*</span></label>\n <input type=\"password\" id=\"password\" name=\"password\" required minlength=\"8\">\n </div>\n \n <div class=\"form-group checkbox-group\">\n <input type=\"checkbox\" id=\"terms\" name=\"terms\" required>\n <label for=\"terms\">I agree to the Terms of Service <span class=\"required\">*</span></label>\n </div>\n \n <button type=\"submit\">Register</button>\n</form>",
|
|
"previewContainer": "preview-area",
|
|
"validations": [
|
|
{
|
|
"type": "attribute_value",
|
|
"value": { "selector": "#fullname", "attr": "required", "value": true },
|
|
"message": "Make the full name field required"
|
|
},
|
|
{
|
|
"type": "attribute_value",
|
|
"value": { "selector": "#email", "attr": "type", "value": "email" },
|
|
"message": "Set the email input type to 'email'"
|
|
},
|
|
{
|
|
"type": "attribute_value",
|
|
"value": { "selector": "#email", "attr": "required", "value": true },
|
|
"message": "Make the email field required"
|
|
},
|
|
{
|
|
"type": "attribute_value",
|
|
"value": { "selector": "#password", "attr": "type", "value": "password" },
|
|
"message": "Set the password input type to 'password'"
|
|
},
|
|
{
|
|
"type": "attribute_value",
|
|
"value": { "selector": "#password", "attr": "required", "value": true },
|
|
"message": "Make the password field required"
|
|
},
|
|
{
|
|
"type": "attribute_value",
|
|
"value": { "selector": "#password", "attr": "minlength", "value": "8" },
|
|
"message": "Add minlength=\"8\" to password"
|
|
},
|
|
{
|
|
"type": "attribute_value",
|
|
"value": { "selector": "#terms", "attr": "required", "value": true },
|
|
"message": "Make the terms checkbox required"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|