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.

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

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

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

[@keropiboy]

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

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

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

[@js-javascript1706]

loving the longer project based videos

[@dcode-software]

More to come!!

[@cerealport2726]

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

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

[@mistercoder7411]

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

[@hassaneoutouaya]

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

[@dcode-software]

That's awesome! Thank you

[@circumz]

You are talented and hard working guy. Love you

[@edohadevelops]

DCODE my hero!!!! Respect Gee

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

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

[@sundarmanickam4092]

Thanks for the project... Great Explanation 👏

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

[@firewithcode]

Love this tutorial. Thanks for making this video

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

[@CliveSmart]

Thanks, a great start for my project scheduler application

[@dcode-software]

Awesome to hear

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

[@RianY2K]

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

[@dcode-software]

Awesome

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

[@zayyadmuhammadsani6094]

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

[@ramziaswad3079]

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

[@dcode-software]

No worries! And thank you, interesting topic 👀

[@isos6534]

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

[@nielapp3831]

Thank you so much for this great tutorial 🤩

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

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

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

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

[@mingmeng030]

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

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

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

[@Mohammad-lu1pp]

very cool mate, keep up the hard work

[@dcode-software]

Thank you!

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

[@samsonajulor8689]

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

[@locky916]

thanks for project ✌✌

[@designcoded7585]

awesome really a great tutorial

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

[@aadityagoenka5293]

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

[@kelvincardoso921]

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

[@onelook1870]

Good one

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

[@skl9942]

Thanks!

[@dcode-software]

Thank you for your Super Thanks! 😎

[@karthikpuvvula]

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

[@utshomomen]

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

[@rangabharath4253]

Awesome

[@shubhp2121]

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

[@vinothrenga1]

Thanks

[@dcode-software]

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

[@ojedacortes1]

can i conect that code with an some database ?

[@shubhp2121]

Did you able to connect this code with some database?

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

[@pratikgohil7821]

🙂

[@swoorp]

eyyy, im first

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