Frontend Mentor - Todo app solution

This is a solution to the Todo app challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author
• Acknowledgments

Overview

The challenge

Users should be able to:

• View the optimal layout for the app depending on their device's screen size
• See hover states for all interactive elements on the page
• Add new todos to the list
• Mark todos as complete
• Delete todos from the list
• Filter by all/active/complete todos
• Clear all completed todos
• Toggle light and dark mode
• Bonus: Drag and drop to reorder items on the list

Screenshot

Links

• Solution URL: https://github.com/jclong98/todo-vue
• Live Site URL: https://gleaming-alpaca-bd8b47.netlify.app/

My process

1. make a useTodo composable to handle all of the todo logic
2. create most of the functionality in the App.vue file
3. separate pieces logically as they appear, like the Todo component, Header component, and AddTodoForm component
4. make sure the MVP is working
5. style it by creating the main.css file to contain general classes/variables and do more specific styling within each component

Built with

• Vite
• Vue 3
• VueUse
• Unocss Style Reset
• Vue Draggable
• Deployed with Netlify

What I learned

While working on this project I got a chance to really practice my Vue 3 skills. Most of the work that I've done with vue in the past was with Vue 2 and some plugins to make it more similar to vue 3, but this project was natively written with Vue 3. This comes with some benefits like speed and built in composition api, but I had to learn about some of the caveats like the new way to two-way bind props with v-model.

However, the new way to v-model is pretty good once you learn how to use it because it allows for modeling of multiple props on one component. I haven't done that in this project, but i thought it was neat 🙂

Continued development

After this project, I will return to writing the exact same project, but in react.

Useful resources

• Vueuse Docs - very intuitive composables to use in any project, great docs too
• Vue Draggable Examples - a great resource to check out all the ways you can use vue draggable with examples

Author

• Website - Jacob Long
• Frontend Mentor - @jclong98