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.

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

Screenshot

Links

• Live Site URL: https://clem-coding.github.io/todo-app/

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox & CSS Grid
• Mobile-first workflow
• Vue.js – JavaScript framework
• TypeScript – Type-safe JavaScript

Getting Started

Project Setup

npm install

Compile and Hot-Reload for Development

npm run dev

Type-Check, Compile and Minify for Production

npm run build

Run Unit Tests with Vitest

npm run test:unit

Lint with ESLint

npm run lint