Create to do list page component - Vanilla.js

[blackgirlbytes]

Create Todo List page component - Vanilla

🚀 Goal

Create a Todo List page component in Vanilla that allows users to manage their tasks within our Decentralized Web App (DWA) starter, utilizing the Decentralized Web Node (DWN) for data storage and retrieval.

🤔 Background

We need to implement the Todo List page for our Vanilla.js DWA starter, mirroring the functionality of the existing React implementation. This page should include task management features and integrate with the TodoDwnRepository for DWN operations.

This is part of our larger project to create a Vanilla.js DWA starter. See our main issue here for the full context and list of all related tasks.

Important: For reference, please see the DWA React Vite starter app. While the implementation details will differ for Vanilla, this example provides a good overview of the structure and functionalities of a DWA.

🔑 Tasks and Acceptance Criteria

• Create a TodoListPage.vanilla component
• Implement a TodoList.vanilla component with the following features:
  • Display a list of tasks
  • Add new tasks
  • Edit existing tasks
  • Delete tasks
  • Mark tasks as completed/uncompleted
• Create a TaskItem.vanilla component for individual task display and actions
• Create a TaskForm.vanilla component for adding/editing tasks
• Implement TodoDwnRepository class for DWN operations:
  • listTasks()
  • createTask(task)
  • updateTask(task)
  • deleteTask(recordId)
  • findTaskRecord(recordId)
  • listTasksRecords()
• Integrate Web5 functionality for DWN operations
• Implement error handling and loading states
• Style the components using plain CSS to match the existing design
• Ensure the layout is responsive and looks good on various screen sizes

🌟 Resources

• Vanilla JS Documentation
• Plain CSS Documentation
• Web5 JS SDK Documentation
• DWA React Vite Starter App (for reference)

Getting Started

1. Comment ".take" on this issue to get assigned
2. Fork the repository and create a new branch for this task
3. Follow the tasks outlined above
4. Submit a pull request with your changes
5. Respond to any feedback during the review process

Questions?

If you have any questions or need clarification, please comment on this issue or join our Discord community.

Happy coding! 🎉

[29deepanshutyagi]

.take

[github-actions]

Thanks for taking this issue! Let us know if you have any questions!

[VANSH3104]

.take

[github-actions]

The issue you are trying to assign to yourself is already assigned.

[blackgirlbytes]

Hey @VANSH3104 if the issue is assigned, you cant take the issue. Please look for an unassigned issue and complete one of them. We have tons. I've seen you do this a few times. If you need help with finding one, reach out in the Discord.

You can actually lose points from taking an already assigned ticket. Cc: @taniashiba

[taniashiba]

@VANSH3104 - You can view all available project hubs here: https://github.com/orgs/TBD54566975/projects/44 there are tons of issues like Rizel mentioned. We take user experience seriously and want to make sure everyone has a fair chance to contribute, please keep this in mind.

[naaa760]

.take

[github-actions]

The issue you are trying to assign to yourself is already assigned.