https://github.com/jstanoeva/kanban-task-tracker

Kanban Task Tracker with JavaScript, HTML, and CSS (vanilla + Tainwind CSS).
https://github.com/jstanoeva/kanban-task-tracker

css3 front-end-development html5 javascript project tailwind-css task-tracker web-design web-development website

Last synced: 7 months ago
JSON representation

Kanban Task Tracker with JavaScript, HTML, and CSS (vanilla + Tainwind CSS).

• Host: GitHub
• URL: https://github.com/jstanoeva/kanban-task-tracker
• Owner: JStanoeva
• Created: 2025-05-17T18:54:29.000Z (9 months ago)
• Default Branch: main
• Last Pushed: 2025-05-31T16:03:33.000Z (9 months ago)
• Last Synced: 2025-06-08T07:07:18.059Z (8 months ago)
• Topics: css3, front-end-development, html5, javascript, project, tailwind-css, task-tracker, web-design, web-development, website
• Language: JavaScript
• Homepage: https://jstanoeva.github.io/kanban-task-tracker/
• Size: 73.2 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# 👑 Royal Kanban Task Tracker 👑

Welcome to the Royal Kanban Task Tracker, a delightful and visually pleasing application designed to help you manage your noble quests, grand projects, and perhaps even your cheese-tasting schedule! Built with HTML, Tailwind CSS, and a sprinkle of JavaScript magic, this Kanban board is not only functional but also celebrates your achievements with a burst of confetti!

## ✨ Features

- **Classic Kanban Columns:** Organize your tasks into "To Do 📝", "In Progress 🏃‍♀️💨", and "Done 🎉" columns.

- **Intuitive Drag & Drop:** Easily move tasks between columns by simply dragging and dropping them.

- **Add New Tasks:** Quickly add new tasks to your "To Do" list via a simple input form.

- **🎉 Confetti Celebration!** Experience a joyful explosion of confetti every time a task is moved to the "Done" column. Because every completed quest deserves a party!

- **Responsive Design:** Whether you're on your royal desktop or your noble tablet, the board adapts to your screen size.

- **Stylishly Themed:** Adorned with a regal purple and rose-gold accented theme, fit for royalty (and cheese lovers!).

- **Lightweight & Fast:** Pure HTML, CSS, and JavaScript means no heavy frameworks, just smooth performance.

## 🛠️ Tech Stack

- **HTML5:** For the basic structure of the application.

- **Tailwind CSS:** For utility-first styling, making it look fabulous with ease.

- **JavaScript (Vanilla):** For all the interactive magic, including drag & drop and the delightful confetti.

- **Canvas Confetti:** A lightweight library for the celebratory confetti effect.

## 🚀 How to Use

1.  Clone this repository or download the files.

2.  Open the `index.html` file in your favorite web browser.

3.  Start organizing your tasks like the true monarch you are!

    - Type a task in the input field and click "Add Task" or press Enter.

    - Drag tasks from one column to another.

    - Watch the confetti fly when you complete a task!

## 💖 Contributing

Got ideas to make this even more majestic? Contributions, issues, and feature requests are welcome! Feel free to fork the repository and submit a pull request.

---

May your tasks be manageable and your confetti plentiful! ✨🧀

---