This is a Todo List application built with HTML5, Tailwindcss, and JavaScript. It allows users to add tasks, mark them as completed, delete them, and edit them. It also includes a filtering feature to filter tasks by their completion status and a light/dark mode switch.
You can access the live version of TaskCascade by visiting: TaskCascade Live
- Add new tasks by typing them into the input field and pressing enter.
- Mark tasks as completed by clicking the circle next to them.
- Delete tasks by clicking the x icon next to them.
- Edit tasks by double-clicking on the task label.
- Filter tasks by their completion status using the filter buttons at the bottom of the list.
- Switch between light and dark mode using the color-mode toggle button.
- HTML5
- Tailwind
- Vanilla JavaScript
- Vite: Used for development and bundling of the application.
- PostCSS: Used for autoprefixing the CSS code and Tailwind integration.
- ESLint: Used with the AirBNB standards to maintain code quality.
- Prettier: Used as a code formatter to ensure consistent code style.
- JSDoc: Used for generating documentation for the codebase.
- GitHub Pages: Used for hosting the TaskCascade application.
- GitHub Actions: Utilized as a simple CI/CD pipeline for automated deployments.
No external APIs were used building this project. Whole app relys on localStorage browser API.
To run the TaskCascade application locally, follow these steps:
- Clone this repository:
git clone https://github.com/splawskip/TaskCascade.git. - Navigate to the project directory:
cd TaskCascade. - Install the dependencies:
npm install. - Build the application:
npm run buildor usenpm run devto start Vite server. - Open the
index.htmlfile in your preferred web browser or open url generated by Vite.
The codebase of TaskCascade is very well documented using JSDoc comments. If you would like to generate documentation, you can do so by running the following command after installing the project: npm run jsdoc.
This project is licensed under the MIT License. See the LICENSE file for more information.
- Przemysław Spławski 👉 @splawskip
For any inquiries or support, please contact me by choosing some possible contact option available on my profile.