Simple todo list using vuejs, tailwind

Lets create simple todo list using vuejs and tailwind.

Goal was to create a very simple todo list app.

Preview Image

Technologies used:

1. Vuejs 🍃 for functionality: 2.6.11
2. Tailwind Css 💨 for styling: 2.2.19

Working Codepen link:

[embed]

App Layout

• App title on top
• Tap title bar to create new list
• Progress is shown below title
• Shows total lists and completed tasks/total tasks
• ul is used to render single list
• Single list component
• List title on top
• Add new task button
• Delete list button
• List items rendered using ul
• List item is made up of two elements
• First is round svg button to toggle complete state
• Second element is text content
• Double tap on task, opens dialog to edit its content

App Logic

• All data is inside a 2D array. 📦
• tasks array contains array of tasks. 📚
• First element of list contains name of the list. 😀
• To keep it simple, “#” is added to a completed task.📝

Next?

• To keep data persistent, local storage can be used.