Added Challenge Creation Form with Validation and Markdown Preview #21
Conversation
There was a problem hiding this comment.
Pull Request Overview
This PR adds a complete challenge creation form to enable users to submit new coding challenges with validation and markdown preview functionality. The implementation includes form validation, JSON format checking for test cases, and real-time markdown preview for descriptions.
Key changes:
- Added a comprehensive form with all required fields for challenge creation
- Implemented client-side validation and markdown-to-HTML conversion
- Added CSS styling for improved user experience
Reviewed Changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 4 comments.
| File | Description |
|---|---|
| scripts/app.js | Implements form validation, markdown preview functionality, and form submission handling |
| index.html | Adds the challenge creation form structure with embedded CSS styling |
Comments suppressed due to low confidence (1)
scripts/app.js:28
- The solution field is collected but not validated. Consider adding validation to ensure the solution field is not empty since it's marked as required in the HTML.
solution: document.getElementById('solution').value.trim()
| .replace(/\*(.*?)\*/gim, '<i>$1</i>') | ||
| .replace(/\n$/gim, '<br />'); | ||
|
|
||
| preview.innerHTML = formatted; |
There was a problem hiding this comment.
Directly setting innerHTML with user input creates an XSS vulnerability. Use textContent or a proper sanitization library to prevent script injection attacks.
|
@Aditya-githubbb provide screenshot and video of work and resolve merge conflicts. |
Co-authored-by: Copilot <[email protected]>
Co-authored-by: Copilot <[email protected]>
Co-authored-by: Copilot <[email protected]>
|
resolved merge conflicts @adityai0 |
|
|
which issue it closes? @Aditya-githubbb |
2 participants
Built a form to allow users to submit new coding challenges, including the following fields:
1] Challenge Title
2] Description (supports basic Markdown formatting and shows a live preview)
3] Difficulty Level (Easy, Medium, Hard)
4] Test Cases (entered in JSON format)
Features included:
✅ Field validation for required inputs
✅ JSON format checking for test cases
✅ Real-time preview for the description section
✅ Fully implemented using plain HTML, CSS, and JavaScript