[Features] Add Input and Output sections to challenge descriptions

[VaibhavSingh2006]

📝 Summary
Add Input and Output fields to each coding challenge for better clarity and user experience.

💡 Motivation
Currently, the challenges in CodeClip only show the problem description. Without sample input and output, users may find it difficult to understand the expectations or test their solutions effectively. Adding clearly defined input/output sections will:

Improve readability of challenges

Help users verify their code behavior

Provide a standard structure similar to popular platforms (e.g., LeetCode, HackerRank)

✅ Possible Solution
Modify the challenge data structure in challenges.js to include two new fields: input and expectedOutput.

Update the challenge display in challenges.html to render these fields under the problem description.

Use semantic HTML and proper styling (components.css) for consistent UI/UX.

Format inputs/outputs using

 or  blocks for readability.

Ensure both light and dark themes display these sections clearly.
Example display:
html
Two Sum
Input: nums = [2,7,11,15], target = 9
Output: [0,1]
📎 Additional Context

This improvement would especially help new users and beginners, allowing them to better understand the expected functionality of a challenge without relying on assumptions. It also opens up possibilities for future auto-testing features based on these inputs/outputs.
so, please assign this issue to me!