How to Build a Kanban Board with JavaScript (No Frameworks)

View the Code and GitHub Repository:

In today's video we'll be building a Kanban Board from scratch using HTML, CSS and JavaScript. This doesn't require any external frameworks or libraries such as React, Vue, jQuery etc.

JavaScript/CSS APIs and features covered in this video include:
- Import/Export Syntax with Modules
- Arrow Functions
- Template Strings
- Class List
- Block Element Modifier
- Local Storage

Chapters:
0:00 Intro & Overview
3:46 HTML
7:22 CSS
13:40 API & Local Storage Access
38:00 User Interface
1:04:24 Drag and Drop
1:25:05 Outro

If this video helped you out and you'd like to see more, make sure to leave a like and subscribe to dcode!

#dcode #javascript

[dcode-software]

Hey guys!

Hope you learnt something from today's video. Comment down below if you have any other project ideas or requests 🔽

If you enjoyed remember to LIKE and SUBSCRIBE for more JavaScript projects and Web Dev Tutorials like this! 🔥

Sorry for the poor audio quality in this one... I'm getting a new microphone this week 😑

[CimotaPosi]

Hello Dom, Thanks for the project, I know it must be hard making these tutorials but keep them coming. you are by far one of the best Coding content creators out there. God Bless

[softwarelivre]

4:00 one detail is to always put your JS files in the head tag for organization purposes and for faster loading times. If you add the *defer* attribute, it will only run once the whole HTML page gets rendered, but it will already be downloaded. And if you use ES6 script type="module" as you did, then you don't even need to put the *defer* attribute because it will be defered automatically.

[blwatson]

This was incredibly helpful. I have never used JavaScript for anything beyond simple things. Learned a ton and built something with what I learned from you. Thank you!

[aprilucid]

Hi, Dom! I'm building it with your lecture, thanks for sharing this nice tutorial. Just drag and drop part is left now, I'll go for it tmw or so soon. Your video has nice quality of information and it is comprehensive and concise. Stay safe!! :)

[keropiboy]

I really love this, i have learned more by looking at this video than by reading a dozen articles...

[dcode-software]

*MORE JAVASCRIPT PROJECT IDEAS:*

🏷 *THE ULTIMATE JAVASCRIPT DOM CRASH COURSE* 👇

[barcellos-pedro]

Thank you so much for your time and sharing your knowledge with us.
I really enjoyed building this app and it was really fun to see it working. You're the best!!! <3

[cerealport]

I like these examples a lot. So many useful techniques that can be applied to other projects!

[abubalo]

I searched for Trello-like tutorial two days ago but I couldn't find the right tutorial. Thank you Dom for this awesome tutorial. It's been a while since you last uploaded, hope you are good?

[js-javascript]

loving the longer project based videos

[pandasoli]

His localStorage data:

[
{"id": 1, "items": [{"id": 72714, "content": "Edit Video 🎨" }]},
{"id": 2, "items": [{"id": 23844, "content": "Record Video!!! 📹" }]},
{"id": 3, "items": [{"id": 61584, "content": "Planing 👔" }, {"id": 9019, "content": "Coding 🧑‍💻" }]}
]

[hassaneoutouaya]

Thank you Mr. Dom
I really like the accessibility of the app. it's totally smooth !

[mistercoder]

this would be great with import/export function! Great job man!

[circumz]

You are talented and hard working guy. Love you

[sundarmanickam]

Thanks for the project... Great Explanation 👏

[firewithcode]

Love this tutorial. Thanks for making this video

[braids]

Did anyone get this error in the updateItem function?
I'm so lost to why it "column" is undefined
Uncaught TypeError: undefined is not iterable (cannot read property Symbol(Symbol.iterator))

[zachfenton]

very interesting but I cannot seem to get the default array at 19:39 to show default key value pairs for the local storage in the empty items array in the console. I typed the code exactly as shown, but for some reason it is not console logging it back out. Thank you

[CliveSmart]

Thanks, a great start for my project scheduler application