https://github.com/programmerstevie/petite-vue-todo
TODO app made with Petite Vue. Deployed at https://programmerstevie.github.io/petite-vue-todo/
https://github.com/programmerstevie/petite-vue-todo
Last synced: 7 months ago
JSON representation
TODO app made with Petite Vue. Deployed at https://programmerstevie.github.io/petite-vue-todo/
- Host: GitHub
- URL: https://github.com/programmerstevie/petite-vue-todo
- Owner: programmerstevie
- Created: 2024-10-05T03:06:29.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-10-09T03:53:31.000Z (about 1 year ago)
- Last Synced: 2025-03-26T20:56:38.833Z (7 months ago)
- Language: HTML
- Homepage: https://programmerstevie.github.io/petite-vue-todo/
- Size: 36.1 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Steven's TODO App
A simple task management application built using **Petite-Vue**, **Tailwind CSS**, **DaisyUI**, and **Material Icons**. It allows users to add, mark as complete, and delete tasks, with a clean and responsive design.
## Features
- **Add tasks**: Users can add new tasks using the input form.
- **Mark tasks as completed**: Click on a task to mark it as complete, which moves the task to the end of the list and visually strikes it through.
- **Delete tasks**: Users can delete completed tasks using the delete button.
- **Dark/Light Mode Toggle**: Toggle between light and dark modes using the theme switcher in the header.
## Technologies Used
- **Petite-Vue**: Lightweight reactivity library used to manage interactivity.
- **Tailwind CSS**: For responsive and utility-first CSS styling.
- **DaisyUI**: A set of UI components built on top of Tailwind CSS.
- **Material Icons**: Icon set used for UI elements such as the theme toggle and delete button.
## Setup
To run this project locally, follow these steps:
1. Clone the repository:
```bash
git clone https://github.com/programmerstevie/petite-vue-todo.git
```
2. Navigate to the project directory:
```bash
cd petite-vue-todo
```
3. Open the `index.html` file in your browser to use the TODO app.
Alternatively, you can use [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) in VS Code for live reloading.
## How to Use
1. Open the app in your browser.
2. Add a new task by typing into the input box and clicking **Add Task**.
3. Mark a task as completed by clicking on the task. This will move it to the bottom of the list and strike through the text.
4. Delete a task by clicking on the red delete button, but only after it has been marked as completed.
5. Toggle between light and dark mode using the sun/moon button in the header.
## Acknowledgements
- **Petite-Vue**: A lightweight alternative to Vue for handling reactivity.
- **Tailwind CSS** and **DaisyUI**: For providing a flexible and modern CSS framework.
- **Google Material Icons**: For the icons used in the UI.