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
  • Useful resources
• Author

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

Extra 🎯💡🧐

• Data are store in browser localStorage
• Light and dark mode will save in localStorage when toggle
• Mark todos as urgent task
• Show alert message when adding empty todo and clearing all completed todo
• Click on the task description to show the full description and edit todo

Screenshot

Mobile view

Desktop view

Vue-todo-app.overview.mp4

Links:

• Solution URL: Github
• Live site URL: Live demo
• Short video demo: Youtube

My process

Built with:

• Vue3 - JS framework
• SASS / SCSS
• Local Storage
• Desktop-first workflow

What I learned:

1. The basics of Vue.js:

• Two-way data binding
• Template syntax and expressions
• Vue directives, loops and conditional rendering
• Handling user Inputs
• Handling Events
• Vue.js Methods and Computed Properties
• Attribute Bindings and dynamic classes

2. CSS - Remove autocomplete style:

  &:-webkit-autofill,
  &:-webkit-autofill:hover,
  &:-webkit-autofill:focus,
  &:-webkit-autofill:active {
      -webkit-box-shadow: 0 0 0 1000px #fff inset !important;
  }

3. JS - Change the layout using event listener:

  window.addEventListener("resize", this.myEventHandler);

  myEventHandler(e) {
    let width =  e.target.innerWidth
    this.windowWidth = width
  }

  displayDesktop(media = this.windowWidth){...}
  displayMobile(media = this.windowWidth){...}

Useful resources

• Vue School.io - This is an official website for Vue.js, it helps me to understand how we can structure the files when building more component in a particular project.

Author

• Github - Eric Choo
• Frontend Mentor - @ericcst197