Challenges Browse page

[Laharivanja]

✨ Feature: Complete Challenges Page Implementation

Closes: #5

This PR implements the complete Challenges Browse Page as described in issue #5:

• ✅ Grid layout for challenge cards
• 🔍 Search bar for real-time filtering
• 🧩 Category dropdown filter
• 📊 Difficulty level indicators (Easy, Medium, Hard)
• 🧠 Language tag (e.g., JavaScript, Python)
• ✅ Completion status (toggleable)
• ♿ ARIA attributes for accessibility
• 🌓 Dark/light theme toggle
• 💻 Fully responsive design

---

📸 Screenshot

---

🛠️ Built With

• HTML5
• Vanilla CSS
• Vanilla JavaScript
• No external frameworks

[greptile-apps]

Greptile Summary

This PR implements a comprehensive challenges page for the CodeClip platform, addressing issue #5. The changes introduce a complete challenge browsing interface with grid layout, real-time search functionality, category and difficulty filtering, and responsive design. The implementation includes:

• A new challenges page (pages/challenges.html) with structured HTML for challenge cards displaying difficulty levels, language tags, and completion status
• Inline JavaScript filtering logic that handles search input, difficulty selection, and category filtering in real-time
• CSS path updates from absolute to relative paths (../styles/challenges.css) to work properly with the repository structure
• Integration with the existing theme system for dark/light mode support
• ARIA attributes for accessibility compliance
• Updates to the main navigation in index.html to properly link to the new challenges page

The challenges page follows the existing CodeClip architecture by using vanilla HTML/CSS/JavaScript without external frameworks, maintaining consistency with the rest of the application. The filtering system allows users to search challenges by name, filter by difficulty (Easy, Medium, Hard), and browse by category, enhancing the user experience for finding relevant coding challenges.

Confidence score: 1/5

• This PR has critical HTML structural issues that will break the page layout and cause accessibility violations
• The score is low due to duplicate HTML elements, invalid tag nesting, mismatched closing tags, and DOM element mismatches in JavaScript
• Both index.html and pages/challenges.html need significant attention before merging

_{2 files reviewed, 4 comments}

_{Edit Code Review Bot Settings | Greptile}

[greptile-apps]

style: Empty filter group div serves no purpose and should be removed

[greptile-apps]

logic: Duplicate CSS links and extra </head> tag - these exact same stylesheets are already included above

[greptile-apps]

style: Inconsistent difficulty formatting - should be 'EASY' to match other cards

[greptile-apps]

logic: Extra closing </div> tags don't match any opening tags and will break HTML structure

Suggested change

	</div>
	</div>
	<hr />
	<p class="footerNote text-center mb-0">
	&copy; CodeClip | Open Source Project 2025
	</p>
	</div>
	</footer>
	<!-- ================================ Footer Section End Here ================================ -->
	<!--add scroll to top button -->
	<a href="#top" class="scroll_to_top" aria-label="Scroll to top"><i class="fas fa-arrow-up"></i></a>
	<!-- ================ Vendor JS ================ -->
	<script src="scripts/jquery.min.js"></script>
	<script src="scripts/owl.carousel.min.js"></script>
	<script src="scripts/bootstrap.bundle.min.js"></script>
	<!-- ================ Custom JS ================ -->
	<script src="scripts/main.js"></script>
	</body>
	</html>
	</div>
	</div>
	<hr />
	<p class="footerNote text-center mb-0">
	&copy; CodeClip | Open Source Project 2025
	</p>

[Laharivanja]

Hey @adityai0 👋

I’ve completed the implementation as described in the issue:

• Grid layout ✅
• Search bar ✅
• Category filter ✅
• Difficulty levels ✅
• Language display ✅
• Completion status ✅ (with toggle/localStorage)

Let me know if any changes are needed!