https://github.com/dawidkuczma-dev/todoapp
Zaawansowana aplikacja typu ToDo z obsługą drag-and-drop, filtrowaniem i zapisem do LocalStorage. Stworzona w czystym JavaScript bez frameworków.
https://github.com/dawidkuczma-dev/todoapp
dark-mode drag-and-drop frontend html javascript localstorage project responsive scss todo todo-app vanilla-js web-app
Last synced: about 2 months ago
JSON representation
Zaawansowana aplikacja typu ToDo z obsługą drag-and-drop, filtrowaniem i zapisem do LocalStorage. Stworzona w czystym JavaScript bez frameworków.
- Host: GitHub
- URL: https://github.com/dawidkuczma-dev/todoapp
- Owner: DawidKuczma-dev
- Created: 2025-06-03T09:49:17.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-06-21T16:31:36.000Z (about 1 year ago)
- Last Synced: 2025-06-21T16:37:18.025Z (about 1 year ago)
- Topics: dark-mode, drag-and-drop, frontend, html, javascript, localstorage, project, responsive, scss, todo, todo-app, vanilla-js, web-app
- Language: SCSS
- Homepage: https://dawidkuczma-dev.github.io/ToDoApp/
- Size: 99.6 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# ✅ TodoApp
Zaawansowana aplikacja typu ToDo do zarządzania zadaniami, umożliwiająca dodawanie, filtrowanie, przeciąganie i organizowanie zadań. Projekt stworzony w czystym JavaScript, HTML i SCSS – z myślą o rozwijaniu umiejętności frontendowych i pracy z danymi lokalnymi.
## 🔗 Demo
👉 [Zobacz na żywo](https://dawidkuczma-dev.github.io/ToDoApp/)
## 📸 Zrzuty ekranu
## ⚙️ Technologie
- HTML5
- SCSS (Sass)
- JavaScript (Vanilla)
- LocalStorage (do trwałego zapisu zadań w przeglądarce)
## 📁 Struktura folderów
```bash
📁 ToDoApp
├── 📁 assets
│ └── 📁 images
│ ├── bg-desktop-dark.png
│ ├── bg-desktop-light.png
│ └── ...
├── 📁 css
│ └── main.css
├── 📁 js
│ └── script.js
├── 📁 scss
│ ├── _base.scss
│ ├── _footer.scss
│ └── ...
├── index.html
└── README.md
📁 assets/images – zawiera zrzuty ekranu, tła i ikony
📁 js – skrypty odpowiedzialne za motyw, obsługę tasków oraz localStorage
📁 scss – pliki źródłowe stylów (moduły SCSS)
📁 css – skompilowany plik stylów dla strony
```
## 📦 Funkcje
- ➕ Dodawanie nowych zadań
- ✅ Oznaczanie zadań jako ukończone
- 🖱️ Przeciąganie i zmiana kolejności zadań (Drag & Drop)
- 🔄 Filtrowanie zadań:
- Wszystkie
- Aktywne
- Ukończone
- 🗑️ Usuwanie zadań
- 🧹 Przycisk do usuwania wszystkich ukończonych zadań
- 💾 Zapisywanie zadań w LocalStorage
- 🌓 Tryb ciemny i jasny (Dark/Light Mode)
- 📱 Responsywny wygląd (mobile & desktop)
## 🧠 Czego się nauczyłem
- Zaawansowana praca z DOM w czystym JS
- Implementacja drag-and-drop bez bibliotek
- Obsługa LocalStorage do przechowywania danych
- Tworzenie dynamicznych elementów na stronie
- Obsługa trybu ciemnego i jasnego (z zachowaniem preferencji użytkownika)
- Budowanie filtrowanych widoków
## 🚀 Uruchomienie lokalne
1. Sklonuj repozytorium
```bash
git clone https://github.com/DawidKuczma-dev/ToDoApp.git
```
2. Otwórz plik `index.html` w przeglądarce lub uruchom lokalny serwer (np. Live Server)
## 📇 Autor
Dawid Kuczma
[LinkedIn](https://www.linkedin.com/in/dawid-kuczma-a60836369/) • [GitHub](https://github.com/DawidKuczma-dev)
## 📝 Licencja
Ten projekt jest dostępny na zasadach licencji MIT.