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 😑
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.
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.
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
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!
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!! :)
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!!!
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?
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))
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
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.
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!
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
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!
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
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?
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.
Здравствуйте, взяла все ваши коды, просмотрела весь видеоурок с начала до конца, несколько раз, выдает не то что было показано в начале видео, не понимаю в чем проблема, смогли бы подсказать, к сожалению даже не могу предоставить скрин экрана, где бы можно было с вами связаться и обсудить этот момент?
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
@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.
@@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.
@@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].
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
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 😑
Im a old viwer but new sub.... love for u...
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.
I love vanilla js projects. Thanks dude.
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.
thanks man..... for making it clear.
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
Appreciate it thanks for watching
I really love this, i have learned more by looking at this video than by reading a dozen articles...
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!
That's awesome, glad it could help you!
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!! :)
loving the longer project based videos
More to come!!
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!!!
You're welcome! :)
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?
Sorry I'm 3 months late but yes I'm good :) thanks for asking
I like these examples a lot. So many useful techniques that can be applied to other projects!
Thank you Mr. Dom
I really like the accessibility of the app. it's totally smooth !
That's awesome! Thank you
DCODE my hero!!!! Respect Gee
this would be great with import/export function! Great job man!
You are talented and hard working guy. Love you
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))
Thanks for the project... Great Explanation 👏
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
Love this tutorial. Thanks for making this video
Thanks, a great start for my project scheduler application
Awesome to hear
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.
Thanks for the feedback :)
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 🧑💻" }]}
]
Thank you
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!
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
Thank you for tutorial, it helps to understand dom manipulation with javascript
Awesome
Awesome video. I've really learned a lot. Thanks!
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!
*MORE JAVASCRIPT PROJECT IDEAS:*
ruclips.net/p/PLVvjrrRCBy2KvTPJ-HLG4PRqYf-MVJ0h7
🏷 *THE ULTIMATE JAVASCRIPT DOM CRASH COURSE* 👇
www.udemy.com/course/the-ultimate-javascript-dom-crash-course/?referralCode=DC343E5C8ED163F337E1
Could someone explain to me why the createRange method was used?
Awesome 👏, thank you….we want Gantt schedule tutorial plz😎
No worries! And thank you, interesting topic 👀
I've done everything right. However in chrome, drop event doesn't work at all...
Thank you so much for this great tutorial 🤩
Is it okay for learning if i watch this video and then start rewrite your code for vue.js?
very cool mate, keep up the hard work
Thank you!
any idea of how i can put search option in every list?
thanks for project ✌✌
hi dom
is there any reason for using createcontextualfragment when you can have added this with innerhtml
It depends, I found contextual fragment to be a bit cleaner in this instance
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
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?
Amazing !
please how do i get the value you used in the local storage. Thats where I am stuck? Help please
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.
Здравствуйте, взяла все ваши коды, просмотрела весь видеоурок с начала до конца, несколько раз, выдает не то что было показано в начале видео, не понимаю в чем проблема, смогли бы подсказать, к сожалению даже не могу предоставить скрин экрана, где бы можно было с вами связаться и обсудить этот момент?
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?
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
Edit: Never mind, it's working all of a sudden, for some weird reason
awesome really a great tutorial
Thank you
Can you tell me how to make this scalable and connect it to firebase? Atleast if you can point me to right direction
48:30 i did all as you said on the video and it's not working , what could it be?
@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.
@@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.
@@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].
@@GerardsDevlog my error is also stating uncaught type error for the range.createContextualFragment.
@@user-ck3tx6zu3x I just can't help you there right now, if I figure some solution I'll let u know
Thanks!
Thank you for your Super Thanks! 😎
How can i connect this code with mysql? Can someone please help me?
Thanks
You're welcome. Thank you so much for the donation!!
Good one
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
Awesome
can i conect that code with an some database ?
Did you able to connect this code with some database?
can i build or publish this in a exe?
If you want to get it in an EXE, you could potentially use something like Electron
Really wish this was java
🙂
eyyy, im first