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

[@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 😑

[@leg3ndtariq]

Im a old viwer but new sub.... love for u...

[@samsonajulor8689]

This is a very detailed explanation. It made me subscribe to your channel. Can you please help me with the value for the data you used in the local storage. I dont know how to get it sir.

[@circumz]

I love vanilla js projects. Thanks dude.

[@softwarelivre2389]

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.

[@leg3ndtariq]

thanks man..... for making it clear.

[@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

[@dcode-software]

Appreciate it thanks for watching

[@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!

[@dcode-software]

That's awesome, glad it could help 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...

[@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?

[@dcode-software]

Sorry I'm 3 months late but yes I'm good :) thanks for asking

[@dcode-software]

*MORE JAVASCRIPT PROJECT IDEAS:* kzbin.info/aero/PLVvjrrRCBy2KvTPJ-HLG4PRqYf-MVJ0h7 🏷 *THE ULTIMATE JAVASCRIPT DOM CRASH COURSE* 👇 www.udemy.com/course/the-ultimate-javascript-dom-crash-course/?referralCode=DC343E5C8ED163F337E1

[@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!!!

[@dcode-software]

You're welcome! :)

[@cerealport2726]

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

[@zachfenton608]

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

[@js-javascript1706]

loving the longer project based videos

[@dcode-software]

More to come!!

[@hassaneoutouaya]

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

[@dcode-software]

That's awesome! Thank you

[@mistercoder7411]

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

[@circumz]

You are talented and hard working guy. Love you

[@edohadevelops]

DCODE my hero!!!! Respect Gee

[@sundarmanickam4092]

Thanks for the project... Great Explanation 👏

[@braids1272]

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))

[@skl9942]

Thanks!

[@dcode-software]

Thank you for your Super Thanks! 😎

[@firewithcode]

Love this tutorial. Thanks for making this video

[@CliveSmart]

Thanks, a great start for my project scheduler application

[@dcode-software]

Awesome to hear

[@vinothrenga1]

Thanks

[@dcode-software]

You're welcome. Thank you so much for the donation!!

[@zayyadmuhammadsani6094]

Awesome video. I've really learned a lot. Thanks!

[@sateeshmodukuru2]

Excellent tutorial! Learnt a few good techniques. One piece of feedback: at 27:46 you point out how one item variable is different than the other one. Seeing stuff like this was so confusing when i was a beginner. I would request you to use a slightly different name for the "item" inside the find function (like currentItem or somethign like that), so it is easily understood by the beginners.

[@dcode-software]

Thanks for the feedback :)

[@RianY2K]

Thank you for tutorial, it helps to understand dom manipulation with javascript

[@dcode-software]

Awesome

[@popados12]

Hi I was wondering if you knew why I would be getting a CORS error from this? Do I have to host the application through some sort of server to get to the data correctly? Thanks for the video very informative!

[@nielapp3831]

Thank you so much for this great tutorial 🤩

[@jertfelt]

When I try to do this, I only get "Uncaught SyntaxError: import declarations may only appear at top level of a module" when importing Kanban in main.js

[@bobperson28]

Got to the end, is anyone having an issue when just wanting to drag one item into another column? when I go to drag an item to another column it selects all the other items in that column at the same time not just the specific one I want to move, please help!

[@kelvincardoso921]

Could someone explain to me why the createRange method was used?

[@ramziaswad3079]

Awesome 👏, thank you….we want Gantt schedule tutorial plz😎

[@dcode-software]

No worries! And thank you, interesting topic 👀

[@Mohammad-lu1pp]

very cool mate, keep up the hard work

[@dcode-software]

Thank you!

[@GerardsDevlog]

48:30 i did all as you said on the video and it's not working , what could it be?

[@user-ck3tx6zu3x]

@Gerard's Devlog, did you ever figure this out? I'm stuck at this spot as well. Recheck all my codes w/ the source code up to this point and there doesn't seem to be anything I could have done wrong.

[@GerardsDevlog]

@@user-ck3tx6zu3x in my case I had to change the reference to the KanbanApi script because It was looking to another direction, check the capital letters. If that doesn't work it could be that you are not working on local server, download xampp and watch a tutorial about how to work on local server with xampp. That's what I've done and now it's working.

[@user-ck3tx6zu3x]

@@GerardsDevlog hmm I'll look at it again. The console kept giving me an error when trying to reference the Column.js file and Kanban.js in regards to the .children[0].

[@user-ck3tx6zu3x]

@@GerardsDevlog my error is also stating uncaught type error for the range.createContextualFragment.

[@GerardsDevlog]

@@user-ck3tx6zu3x I just can't help you there right now, if I figure some solution I'll let u know

[@mingmeng030]

I've done everything right. However in chrome, drop event doesn't work at all...

[@isos6534]

Is it okay for learning if i watch this video and then start rewrite your code for vue.js?

[@utsho.sardar]

any idea of how i can put search option in every list?

[@locky916]

thanks for project ✌✌

[@samsonajulor8689]

please how do i get the value you used in the local storage. Thats where I am stuck? Help please

[@blue_mustang_]

I get Uncaught TypeError: (intermediate value)() is undefined in the updateItems function , I even copied the code from the repo , I don't know what's going on

[@leshgabes]

I started doing everything like on video, typing with my own hands, as a result, at one point it began to show only a green rectangle. I dug through all possible errors, but I didn't find them. In the end, I decided to just make a full copy-paste of the code and still only a green rectangle is displayed on the page. How is this possible?

[@ludovicmanga8241]

Amazing !

[@soniamaklouf1178]

hi dom is there any reason for using createcontextualfragment when you can have added this with innerhtml

[@dcode-software]

It depends, I found contextual fragment to be a bit cleaner in this instance

[@designcoded7585]

awesome really a great tutorial

[@nyxandtyr]

Great video, and I'll be taking a look at more of your videos - it's refreshing to see it in vanilla js. I do have a question about saving the cards into a database, for the sake of using this in production, it seems like it would be a lot of db calls. Would it be better to give the user a save button? I don't know a lot about databases.

[@АлинаЛягинскова-ж5э]

Здравствуйте, взяла все ваши коды, просмотрела весь видеоурок с начала до конца, несколько раз, выдает не то что было показано в начале видео, не понимаю в чем проблема, смогли бы подсказать, к сожалению даже не могу предоставить скрин экрана, где бы можно было с вами связаться и обсудить этот момент?

[@infodevbrasil]

great video, it helped me a lot. but I didn't understand where I set the number of columns, can you help me to understand better where I define?

[@aadityagoenka5293]

Can you tell me how to make this scalable and connect it to firebase? Atleast if you can point me to right direction

[@pandasoli6581]

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 🧑‍💻" }]} ]

[@sanjo3108]

Thank you

[@zainfazal3964]

I tried to follow along, then just copy directly, and in both cases all I'm able to get is just the green background with three columns, each with an Add button? Nothing is showing, and the add item button doesn't work

[@zainfazal3964]

Edit: Never mind, it's working all of a sudden, for some weird reason

[@shubhp2121]

How can i connect this code with mysql? Can someone please help me?

[@karthikpuvvula]

Thank you

[@onelook1870]

Good one

[@rangabharath4253]

Awesome

[@ojedacortes1]

can i conect that code with an some database ?

[@shubhp2121]

Did you able to connect this code with some database?

[@biLLie_wiLLie]

I like your vanilla js projects. Probably it might be good to compare your code with frameworks code. I mean you show in the end how many code it takes if you write the same project on react or Vue

[@wednydesigner]

can i build or publish this in a exe?

[@dcode-software]

If you want to get it in an EXE, you could potentially use something like Electron

[@mrrager9224]

Really wish this was java

[@swoorp]

eyyy, im first

[@pratikgohil7821]

🙂