Details

1. Name: Om Buddhadev
2. Enrollment Number: IFI2022018
3. WhatsApp: +91 97237 90910
4. Preferred Bucket: Backend
5. All the Completed tasks have been mentioned below for reference
6. I've also added a short textual go-through of my website at the end. Kindly have a look through it.

Starters (Completed Tasks)

1. Create a private repository named WebD-Selection-Task-1 on GitHub.
2. Write your Name, Enrollment Number, WhatsApp number, and preferred bucket (Frontend/Backend) in the README.md file of your repo.
3. Add the following GitHub profiles as collaborators to the repository:
   • atharva-gadekar
   • BuddyLongLegs
   • GammaMicrowave
   • Manas2403
4. Clone the WebD-Selection-Task-1 repository to your local system.
5. Fill this Google Form for becoming a part of selection process.
6. Add the provided boilerplate code files to your codebase (Optional).

Main Course - DSA GeekSheet (Completed tasks)

All tasks here are compulsory.

1. Fetch the questions along with their category titles from the API Link given below.
2. Display the questions in an accordion format.
3. Use the category title as the accordion heading, and the questions should expand on clicking the title.
4. Ensure your website is responsive for a larger dataset. We will change the amount of questions and topics in the API during testing.

Dessert (Completed Tasks)

You will earn Bonus Points if you complete any or all of the following tasks:

1. Add a checkbox before each question. When a question is marked, change its background color to green. (10 points)
2. Implement a dark mode toggle button to enhance the user experience. (20 points)
3. Add keyboard shortcuts to navigate through questions easily (e.g., arrow keys). (20 points)
4. Include a search bar that allows users to search for specific questions by keywords or category titles. (20 points)
5. Create a progress bar that tracks the user's completion rate of answered questions. (30 points)
6. Allow users to create a new category and add a question under any category. Ensure this information is stored in the browser. (70 points)

Textual go through

1. Search bar: When input is typed through searchbar, all relevant searches will be highlighted in yellow.
2. FORM FOR ADDING NEW QUESTIONS IN A CATEGORY: In category number, add the number precedding the category name. For eg, if I want to add a question in '1. Learn The Basics", I would add 1 in category number. Add the respective details below it.
3. FORM FOR ADDING NEW CATEGORY: Add category name in the input, and that category will be created in a new accordion.
4. DARK MODE TOGGLE: A dark mode to light mode (and vice versa) button has been added at the top.
5. PROGRESS BAR: It displays no. of questions solved along with percentage.
6. KEYBOARD SHORTCUTS: Navigate next question by pressing 'n' and previous question by pressing 'p'.
7. MARK QUESTION AS COMPLETED: Touch anywhere in the question area to mark it as completed. Completed questions will be highlighted in green.
8. RESPONSIVE: The website has been made responsive by media queries