To Do App Using HTML, CSS and JavaScript (Drag & Drop)|Project #10/100

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

Source Code:

Create Modal Tutorial:

LIKE AND SUBSCRIBE :D

#todo #WebDevelopment #WebDesign

[dominicschneider]

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

[tomasgonzalez]

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

[rockypointapp]

Do you think you can make a tutorial on how the data is saved on the board? please

[pantaleogerminario]

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?

[amelselimovic]

Awasome. Amazing tutorial and greate learning skils. Greetins my friend

[pratibhayadav]

Sir what changes we need to do for adding description of task

[smo]

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?

[onganimagwala]

my drag and drop drags all the items in the list at once.do you know what might be the problem?

[rishavpapaji]

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

[Ghost-oyvt]

could you please tell me how i could make the todo editable ?

[deegas]

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

[ichinisanshigoz]

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.

[joshuawinter]

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.

[panchanandeka]

Thnks a lot brother ❤ it is life changing for me... Again thanks a lot❤

[mohammadkhavari]

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.

[letsdoeverythinginoneweek]

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

[mdsabbirahmed]

Will you Please show me a way to save this data in the database?

[alicoskun]

Please can you explain how to stop having "buy pizza" every time the page is refreshed...

[TheCodeApprentice]

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.