https://github.com/andresmpa/todo-app
This is the classic TODO app crafted for browser, with a couple of extra features like, localstorage, drag&drop and themes
https://github.com/andresmpa/todo-app
data-set drag-and-drop html5 javascript localstorage stylus-css stylus-lang
Last synced: 8 months ago
JSON representation
This is the classic TODO app crafted for browser, with a couple of extra features like, localstorage, drag&drop and themes
- Host: GitHub
- URL: https://github.com/andresmpa/todo-app
- Owner: AndresMpa
- License: gpl-3.0
- Created: 2023-09-10T04:46:45.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-09-12T06:35:28.000Z (over 2 years ago)
- Last Synced: 2025-01-26T18:47:27.540Z (over 1 year ago)
- Topics: data-set, drag-and-drop, html5, javascript, localstorage, stylus-css, stylus-lang
- Language: JavaScript
- Homepage: https://andresmpa.github.io/todo-app/
- Size: 1.89 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# T O D O
## Table of contents
- [Overview](#overview)
- [Features](#Features)
- [Screenshot](#screenshot)
- [Links](#links)
- [Construction](#Construction)
- [Built with](#built-with)
- [Useful resources](#useful-resources)
- [Author](#author)
## Overview
### Features
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
- Homepage: [GitHub](https://github.com/AndresMpa/todo-app)
- Live Site: [Last deploy](https://andresmpa.github.io/todo-app/)
## Construction
### Built with
- Semantic HTML5 markup
- [Stylus CSS](https://stylus-lang.com/)
- Flexbox
- Mobile-first workflow
### Useful resources
- [Drag and drop API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API) - Drag and drop (Nothing else to say)
- [MIME_types/Common_types](https://developer.mozilla.org/es/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types) - That was useful to achieve drag and drop feature
- [stylus/discussions/2823](https://github.com/stylus/stylus/discussions/2823) - Useful for dark-white native theme with stylus.
- [How to Center Anything with CSS - Align a Div, Text, and More](https://www.freecodecamp.org/news/how-to-center-anything-with-css-align-a-div-text-and-more/) - Thanks god Krish exists, this blog help a lot.
## Author
- GitHub - [@AndresMpa](https://github.com/AndresMpa)
- Frontend Mentor - [@AndresMpa](https://www.frontendmentor.io/profile/AndresMpa)
- LinkedIn - [Andres M. Prieto](https://www.linkedin.com/in/andresmpa/)