https://github.com/denislavdev/todo-app
A simple, responsive to-do list built with HTML, JavaScript, and TailwindCSS v4. Easily add, complete, and delete tasks with persistent storage via localStorage.
https://github.com/denislavdev/todo-app
css3 html5 javascript tailwindcss-v4 to-do-app to-do-list-javascript
Last synced: 4 months ago
JSON representation
A simple, responsive to-do list built with HTML, JavaScript, and TailwindCSS v4. Easily add, complete, and delete tasks with persistent storage via localStorage.
- Host: GitHub
- URL: https://github.com/denislavdev/todo-app
- Owner: denislavdev
- License: mit
- Created: 2025-04-06T16:35:21.000Z (6 months ago)
- Default Branch: main
- Last Pushed: 2025-04-06T17:03:01.000Z (6 months ago)
- Last Synced: 2025-04-09T21:43:06.696Z (6 months ago)
- Topics: css3, html5, javascript, tailwindcss-v4, to-do-app, to-do-list-javascript
- Language: JavaScript
- Homepage:
- Size: 11.7 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
đź“ť To-Do App
A neat, minimal to-do list built with HTML, JavaScript, and TailwindCSS v4
Preview: todo-app-denislav.vercel.app
---
## Overview đź“‹
This app helps you manage your tasks in a simple and effective way. You can add new tasks, mark them as completed, or delete them as needed. Your tasks are stored in your browser’s **localStorage**, so they remain available even after you close your browser. The interface is straightforward and includes custom checkboxes and a task counter.
---
## Features âś…
- **Add tasks:** Quickly add new tasks to your list.
- **Complete tasks:** Mark tasks as done.
- **Delete tasks:** Remove tasks when they’re no longer needed.
- **Persistent storage:** Tasks are saved in your browser’s localStorage, keeping them available across sessions.
- **Sleek design:** Styled with **TailwindCSS v4** for a smooth and efficient design experience.
---
## Tech Stack đź’»
![]()
![]()
---
## Project Structure đź“‚
Here’s a quick look at the project files:
- **index.html** – Main HTML file.
- **script.js** – JavaScript file that handles task logic.
- **src/input.css** – Source file for TailwindCSS.
- **README.md** – This file.
---
## Getting Started 🚀
### Prerequisites 🔧
Ensure you have the following installed:
- **Node.js** (includes npm) – [Download Node.js](https://nodejs.org/)
- A modern web browser
### Installation 🛠️
1. **Clone the Repository:**
```bash
git clone https://github.com/denislavdev/todo-app.git
cd todo-app
```
2. **Install Dependencies:**
Run the following command to install the necessary dependencies:
```bash
npm install
```
3. **Build TailwindCSS:**
The project uses TailwindCSS. If you’re using the source file, run:
```bash
npx @tailwindcss/cli -i ./src/input.css -o ./src/output.css --watch
```
4. **Run Locally:**
Open the `index.html` file in your browser. For a better development experience with live reload, consider using the [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) extension.
---
---
## Credits 🙏
- Layout inspired by [Adi Purdila](https://www.youtube.com/user/AdiPurdila)
- Developed with care by [Denislav](https://github.com/denislavdev)
---
If you find this project useful, feel free to fork it, star it, or open an issue with any suggestions or feedback!