Todo App Main from Front End Mentor

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

• Todo App Main from Front End Mentor
  • Table of contents
  • Overview
    • The challenge
    • Links
    • Clone this repository
  • My process
    • Built with
    • 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
• Bonus: Drag and drop to reorder items on the list
• Bonus: Store the data in local storage that when I refresh the page I can still see my progress

Links

• Demo : https://todo-app-tks.netlify.app/

Clone this repository

# Clone this repository
$ git clone https://github.com/TKadyear/Todo-app-main.git

# Go into the repository
$ cd Todo-app-main

# Install dependencies
$ npm install

# Run the local server
$ npm run dev

If you want the production server do:

#For prepare the documents for production:
$ npm run build

#Run the preview of production server

$ npm run preview

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• Javascript native
• Drag and Drop API

Useful resources

• CreateRange - This helped me for using the template like another document. I really liked for create HTML in Javascript native.
• Drag and Drop Example - This article helped me to understand DragAndDrop API. I'd recommend it to anyone who wants understand how works the Drag event.

Author

• Github - Tamara Kadyear | TKadyear
• Frontend Mentor - Tamara Kadyearr | TKadyear