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.
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.
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
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!! :)
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!
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?
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!!!
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
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))
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!
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.
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 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?
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 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
@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 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
![Build a TikTok Clone in React Native and AWS Backend [Tutorial for Beginners] 🔴](/img/n.gif)
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.
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.
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
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!! :)
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!
I really love this, i have learned more by looking at this video than by reading a dozen articles...
DCODE my hero!!!! Respect Gee
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
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
I like these examples a lot. So many useful techniques that can be applied to other projects!
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! :)
You are talented and hard working guy. Love you
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
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))
Thank you Mr. Dom
I really like the accessibility of the app. it's totally smooth !
That's awesome! Thank you
this would be great with import/export function! Great job man!
Thanks for the project... Great Explanation 👏
Love this tutorial. Thanks for making this video
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!
Awesome video. I've really learned a lot. Thanks!
Thanks, a great start for my project scheduler application
Awesome to hear
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 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?
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!
Thank you for tutorial, it helps to understand dom manipulation with javascript
Awesome
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 :)
very cool mate, keep up the hard work
Thank you!
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've done everything right. However in chrome, drop event doesn't work at all...
awesome really a great tutorial
Awesome 👏, thank you….we want Gantt schedule tutorial plz😎
No worries! And thank you, interesting topic 👀
Amazing !
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?
Could someone explain to me why the createRange method was used?
please how do i get the value you used in the local storage. Thats where I am stuck? Help please
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?
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
any idea of how i can put search option in every list?
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
Can you tell me how to make this scalable and connect it to firebase? Atleast if you can point me to right direction
thanks for project ✌✌
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
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
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
How can i connect this code with mysql? Can someone please help me?
Good one
Thank you
Awesome
Thanks!
Thank you for your Super Thanks! 😎
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
*MORE JAVASCRIPT PROJECT IDEAS:*
ua-cam.com/play/PLVvjrrRCBy2KvTPJ-HLG4PRqYf-MVJ0h7.html
🏷 *THE ULTIMATE JAVASCRIPT DOM CRASH COURSE* 👇
www.udemy.com/course/the-ultimate-javascript-dom-crash-course/?referralCode=DC343E5C8ED163F337E1
Thanks
You're welcome. Thank you so much for the donation!!
Really wish this was java
🙂
eyyy, im first