To Do App Using HTML, CSS and JavaScript (Drag & Drop)|Project #10/100
Vložit
- čas přidán 26. 08. 2024
- Welcome to the 10th project of 100 Web Projects Series.
In this video we're going to create a draggable to do app using HTML, CSS & JavaScript. In addition, you will learn how to work with drag and drop API of JavaScript and how to do some basic DOM manipulation.
If you liked it don't forget to smash that like button and hit the subscribe button.
▶ Follow & Subscribe
/ python_bootcamp
/ basirpayenda
Source Code:
bit.ly/3rj2hYP
Create Modal Tutorial:
• How To Create & Open M...
LIKE AND SUBSCRIBE :D
#todo #WebDevelopment #WebDesign
THANK YOUUU😭😭
I had the problem that I cant drag and drop new created items and for days no solution in the internet worked.
BUT YOU ARE DID IT WITHIN SECONDS😭😭
I LOVE YOU AND I'M GLAD YOU DID THIS VIDEO
Do you think you can make a tutorial on how the data is saved on the board? please
First of all: Great content! I don't know if you said it, but if I add a submit button on the main page, how can I have the information about what boxes are under each column?
Awesome video! Great stuff! Now to the elephant in the room... How to _save_ the changes for later use?! I would love to see a json option 🙏 Regardless, this video was really well-done!!!
please!!! is there a way to implement mysql to save changes?
Sorry for drowsy voice, I was sick.
This is EXACTLY what I needed to learn!!! Thank you soooo much. I got it working on the PC. Is there some tweak needed to make it work on the phone and tablet? I'm using @media to auto adjust the adaptive layout. I can't seem to move the todo's on a phone or tablet but it works perfectly on a PC! Great video. You gained a subscriber!
Hi Basir (or anyone else that reads this)... I got all of this working and created a Stackoverflow with Snippet. If you know how to align the touch commands for mobile to the drag commands, can you comment on the stackoverflow? "Drag and Drop - Works on PC but not mobile. Trying to modify mobile code unsuccessfully" Thanks again!!!
Thnks a lot brother ❤ it is life changing for me... Again thanks a lot❤
Awasome. Amazing tutorial and greate learning skils. Greetins my friend
Thank you! Cheers!
Sir what changes we need to do for adding description of task
Good morning Basir! Could you not help us by showing how to save the data in LocalStorage? I've tried in several ways but without success! Hugs from Brazil
Great content
Thank You 🙂
this code has a lot of problems such as if I submit a empty string is stills submits it and if i change the size of screen headed shows weird issues the round corner of modal also have issues refreshing the page will remove all the entries and many more
Is it possible to have several todo-containers on a single page and each has a unique id and the dragging would only be within each uniquely id'd container? Can the existing functions be modified to accommodate this or is a different approach needed?
my drag and drop drags all the items in the list at once.do you know what might be the problem?
could you please tell me how i could make the todo editable ?
This is ace! Thanks man.
I'm still new to this. Followed the tutorial with no problem.
Does anyone knows if it's possible to limit the draggabletodo for each class status.
like for example i can only drag 3 todo in each status if more than 3, it disables the drop function.
super !
Wonderful, great! Thanks a lot...
Thank you too!
Muito bom dragdrop
Cool todo app, but there is a bug. It is not possible to place the item from the bottom to the top but from top to bottom is possible please give the solution to how to do it.
Wow, Amazing 💜💜💜💜💜💜💜
Thank You 😃
Thanks very much Basir for this awesome app. Please can you add code to allow the list to remain in place even after closing the browser window or refreshing the page. Thanks.
Thank you, for that we need to either integrate it to a database like PostgreSQL using node, Django or store it locally using local storage. I note it, maybe in future.
@@basirpayenda Thanks very much.
@@basirpayenda Thank you , do it , sir :)
Great tutorial. Do you know how you could save the to do list when refreshed? I was thinking using a database by using php, mysql to log the data on there, but I am having troubles connecting the javascript with php.
Hi if its not for production you can use the local storage if you dont wanna mess with databases , or you can use nodejs as back end and use javascript to enter stuff in database and probably mongodb would be easier to use with node
@@The_Auslander Is there a php, javascript way to hand off the data to mysql?
Did you figure a solution out? I also want to pass the data to php to input into MySQL. What solution did you find?
Will you Please show me a way to save this data in the database?
There're plenty of options when it comes to storing the data and it varies depending what backend language do you use, but the concept is the same\ You simply create a table or model to store todos and add fields to it then connect them to front-end.
@@basirpayenda What about storing the status updates from the dragging in php to mysql?
Please can you explain how to stop having "buy pizza" every time the page is refreshed...
bro can u clear my one doubt
how you use
#no_status id in javascript
you not call this id in javascript file
but it works
how????
This's new in JavaScript, you can access HTML elements with `id` attribute in JavaScript through value of its `id` and you don't have to do something like `document.getElementById('idHere')`, but unfortunately it isn't supported across all major browsers.
For instance:
In HTML:
Test Text
then in JS:
test.style.backgroundColor = 'red';
No need to do `document.getElementById('test')`
🥺❤️👊🏾
Js tutorial please sir
I am working on 100 Projects, so far uploaded 19 projects. Check them out