https://github.com/dalascript/drag-and-drop
ZTM JS Web Projects Course | Drag and Drop | Project 16/20
https://github.com/dalascript/drag-and-drop
css drag-and-drop html javascript zerotomastery
Last synced: 6 months ago
JSON representation
ZTM JS Web Projects Course | Drag and Drop | Project 16/20
- Host: GitHub
- URL: https://github.com/dalascript/drag-and-drop
- Owner: DalaScript
- Created: 2025-08-24T14:50:12.000Z (6 months ago)
- Default Branch: main
- Last Pushed: 2025-09-03T22:30:53.000Z (6 months ago)
- Last Synced: 2025-09-04T00:21:16.594Z (6 months ago)
- Topics: css, drag-and-drop, html, javascript, zerotomastery
- Language: JavaScript
- Homepage: https://dalascript.github.io/drag-and-drop/
- Size: 3.13 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Drag and Drop | ZTM JS Web Projects Course
**Project 16/20**
A fully interactive **Kanban Board** with drag-and-drop functionality that lets you organize tasks across different columns: *Backlog*, *Progress*, *Complete*, and *On Hold*. Tasks are saved to **localStorage**, so your board state is preserved even after refreshing the page.
---
## 📚 Table of Contents
- [🔎 Overview](#-overview)
- [📸 Screenshot](#-screenshot)
- [🔗 Links](#-links)
- [📌 Features](#-features)
- [🛠️ Built with](#️-built-with)
- [🧠 My process](#-my-process)
- [🗃️ Useful resources](#️-useful-resources)
- [🔙 Previous Project](#-previous-project)
- [🔜 Next Project](#-next-project)
- [👤 Author](#-author)
- [🌐 Connect with Me](#-connect-with-me)
- [💻 Coding Profiles](#-coding-profiles)
---
## 🔎 Overview
### 📸 Screenshot
### 🔗 Links
- [🔴 Live Demo](https://dalascript.github.io/drag-and-drop/)
- [🗂️ GitHub Repository](https://github.com/DalaScript/drag-and-drop)
### 📌 Features
- ✅ Drag-and-drop tasks between columns
- ✅ Editable tasks directly inside the board
- ✅ Add new tasks dynamically with inline input fields
- ✅ Delete tasks by clearing their text
- ✅ State persistence using `localStorage`
- ✅ Responsive design for desktop and mobile
- ✅ Smooth user experience with custom scrollbar and animations
### 🛠️ Built with
- HTML5
- CSS3
- JavaScript
---
## 🧠 My Process
### 🗃️ Useful resources
- [CSS-Tricks – Styling Scrollbars](https://css-tricks.com/the-current-state-of-styling-scrollbars-in-css/)
- [W3Schools – HTML5 Drag & Drop](https://www.w3schools.com/html/html5_draganddrop.asp)
- [W3Schools – ondragenter Event](https://www.w3schools.com/tags/att_ondragenter.asp)
- [MDN – Array.push()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push)
- [MDN – contenteditable](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/contenteditable)
- [MDN – focusout Event](https://developer.mozilla.org/en-US/docs/Web/API/Element/focusout_event)
- [MDN – Array.filter()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter)
- [StackOverflow – map/reduce vs for loops](https://stackoverflow.com/questions/29640254/when-why-to-use-map-reduce-over-for-loops)
### 🔙 Previous Project
- Math Sprint Game | *Project 15/20* → [View Repository](https://github.com/DalaScript/math-sprint-game)
### 🔜 Next Project
- Calculator | *Project 17/20* → [View Repository](https://github.com/DalaScript/calculator)
---
## 👤 Author
### 🌐 Connect with Me
- [Instagram](https://www.instagram.com/DalaScript)
- [YouTube](https://www.youtube.com/@DalaScript)
### 💻 Coding Profiles
- [freeCodeCamp](https://www.freecodecamp.org/DalaScript)
- [FrontendMentor](https://www.frontendmentor.io/profile/DalaScript)
- [GitHub](https://github.com/DalaScript)
*🙌 Thanks for checking out my project! More coming soon. Stay tuned 🚀*