Create A Todo List App in HTML CSS & JavaScript | Todo App in JavaScript
Create A Todo List App in HTML CSS & JavaScript | Todo App with Localhost in JavaScript
In this video, I have shown you how to create a Todo List App with Localhost in JavaScript. In this todo app, you can easily add, edit, or delete your task. There are filters button too that helps you to filter your tasks. The tasks you added on this todo app will be stored in the browser local storage so, it won't be removed on page refresh or tab close.
🗂️ Get Source Code of this Todo List App
➤ buymeacoffee.com/codingnepal/...
🌐 Visit CodingNepal for helpful coding projects
➤ www.codingnepalweb.com
⭐ Hire me on Fiverr
➤ www.fiverr.com/prakashahi
📷 Follow me on Instagram
➤ / coding.np
🤝 Support my work with a coffee
➤ buymeacoffee.com/codingnepal
Timestamps:
0:00 Demo of Todo App
3:24 HTML & CSS Start
18:00 JavaScript Start
18:37 Saving Tasks to Local Storage
22:30 Showing All Task from Local Storage
26:00 Updating Status of a selected Task
33:35 Deleting Selected Task from the List
35:45 Editing Selected Task of the List
40:03 Filtering Task of the List
43:56 Deleting All Tasks from the List
Music Credit:
Ikson - Anywhere [Official]
• #66 Anywhere (Official)
Something 'bout July (Instrumental) by RYYZN
• Something 'bout July (...
Deep Sea by Vendredi
• Deep Sea - Vendredi (N...
Ehrling - You And Me (Vlog No Copyright Music)
• Ehrling - You And Me (...
Jimmy Hardwind - Want Me (feat. Mike Archangelo)
• Jimmy Hardwind - Want ...
Пікірлер: 112
Don't forget to check out the live demo of this Todo App. Link is in the description!
@sekhangati
2 жыл бұрын
Hello CodingNepal. I love your videos. Great stuff with minimal professional designs. I have just a finished JavaScript course and I plan to practice doing small projects for my portfolio. Is it ok if I did code along for some of your projects with probably some tweaks for practice and my portfolio as well? And if it is ok with you, is it ok for my practice or I should build my portfolio with my own codes? Any advice will be appreciated. I wish you had some audio explanations for some things how they work. Keep up the good work. Thank you.
@CodingNepal
2 жыл бұрын
@@sekhangatiI think you should take ideas from the already written codes like how they do to do some things and try to do it yourself for better practice rather than copy-pasting whole codes.
@sekhangati
2 жыл бұрын
@@CodingNepal ok thank you for the advice.
@TecHBanCo
2 жыл бұрын
I want to know what code editor you use and how it preview live please reply
@webylancers5607
2 жыл бұрын
JazakuMullaha Khaira Aameen 🙏 🤲 😍
Bro your just one video on “real-time chat app” made my whole carrier. ❤️ thank you so much .. lots of love and respect from India
@CodingNepal
2 жыл бұрын
Happy to hear that bro.. Keep loving!
@herbeysoft
2 жыл бұрын
Link to the video tutorial please
Honestly the best tutorial I've watched. Thank you
This is the best Todo list tutorial. I would say it's not for beginners, but absolutely worth diving deep into it. Learned a lot about Local Storage. Without is it's much much easier of course.
@CodingNepal
2 жыл бұрын
Awesome, thank you!
Awesome!! You are the best!! Thank you my brother.
Amazing bro, we are appreciating your work, god bless you, please upload more content like this, we are waiting🙏🙏👏👏💓
Great turorilal, that's what i wanted to find. Thanks Coding Nepal!!!
@CodingNepal
2 жыл бұрын
Most welcome!
JazakuMullaha Khaira Aameen 🙏🤲😍
thank you bro thanks to you I understand a little about javascript
I've been working with this your project and improving it a lot. You'd be amazed believe me. Add the filters under an icon. Did a reverse loop so every new to do is stacked on the older one. Also made use of content editable to improve the user experience. Put a plus button at the bottom right for adding new todos. When it is clicked a div with contenteditable set to true slides up and the user types in their to do. The difference between this and the input box you use is that with a text box you can only type in a straight line.
@appleid3223
2 жыл бұрын
Next, I will be working on letting the user create new lists, and possibly add a scheduling feature to the to-do. Thanks so much for this video. With your channel, I am sure I will have good portfolio projects to land my first job as a frontend developer.3
Awesome! Can't wait to make it!
@CodingNepal
2 жыл бұрын
Happy to hear that :)
Awesome tutorial! Thank you for sharing!
@CodingNepal
2 жыл бұрын
You are so welcome!
this video is perfect for a beginner to get Hands on experience on html, css, js. thanks for the putting the effort to made this.
@CodingNepal
2 жыл бұрын
Glad it was helpful!
Amazing work 👍
I love your content thank you
Good to see the second version of the TODO list app And we wanna see videos with your voice
@CodingNepal
2 жыл бұрын
I will try my best
@justChuka
2 жыл бұрын
@@CodingNepal pls dont!
Clear and easy
Good work
Bro, your work is really awesome, dude maza aa gaya
@CodingNepal
Жыл бұрын
Thank you so much 😀
you deserve more
That's so cool and minimal!
@CodingNepal
2 жыл бұрын
Glad you liked it!
Awesome! i am learning to develop some apps like this and to make websites ... and I am form india
@CodingNepal
2 жыл бұрын
Great 👍
great video really helped me a lot.
@CodingNepal
2 жыл бұрын
You're welcome!
thanks a lot.
Thanks🙏😊
Excellent Work
@CodingNepal
2 жыл бұрын
Many many thanks
So amazing, keep up the great work. :) *I did notice a minor issue that if you type a long message into the task field, it does not stay withing the assigned box, and it spreads outside of the box. Apart from that minor issue, amazing job!
@CodingNepal
2 жыл бұрын
Glad you like this! You can solve this issue with CSS: .task label p { word-break: break-all; word-wrap: break-word; }
@renegade1807
2 жыл бұрын
@@CodingNepal Amazing, thanks for the tip. All the best!
Amazing work bro keep it up
@CodingNepal
2 жыл бұрын
Thanks 🔥
Superb Work Sir
@CodingNepal
2 жыл бұрын
My pleasure
Great work man
@CodingNepal
2 жыл бұрын
Appreciate it!
I love this ❤️❤️❤️😍😍😍😍
@CodingNepal
2 жыл бұрын
Happy to hear that
Awesome job
@CodingNepal
Жыл бұрын
Thanks!
Bro The real time chat app u made Is really helping me I already added a user profile For each logged in user Users can view each other's profile But I want to add the option of sending photos and videos in chat And also a posting page Where users can post feeds But it seems hard Can u do a video on that please 🙏🙏🙏🙏🙏
Hi, Your videos are really cool. Sorry for asking this. Can I upload your chat app to my own domain *with some changes*. Is it Ok for you? Finally, a super video.
@CodingNepal
2 жыл бұрын
Yes, it's okay... You can upload.
First comment.... Love from NEPAL 🇳🇵 ✌️
@64_bit_coding
2 жыл бұрын
CN was the first comment
You should create you own inspect menu
Hey Bro Thanks for this videos. But bro agar aap every videos me bg sound ke jgah agar aap code ko explain kro tho or jyada better rahega hmare liye code ko samajna or wo kese work krra hai wo sab dekhna
@CodingNepal
2 жыл бұрын
Okay bro, I'll try my best.
Awesome one. Just one slight bug - When we change from pending to completed or vice versa , the task is not immediately moved , we can see that after we select the respective tab .
@appleid3223
2 жыл бұрын
Did you fix that?
lets discuss the errors and how we got past it here. my p.checked wont strikethrough console gives error on classList as undefined
i want to add count of task left section here how to to do that ??
You can create nodepad online no database with php?
please try to give your voice it will make the video more easy to understand
can you add reminder in todo app and share it, thanks
Which backend is better and which should I learn as I am starting my journey to backend development, plz suggest!!!
@CodingNepal
2 жыл бұрын
It depends on what you want to build
bro can you please create how to build profolio website
GREAT VIDOE just earned a subscriber, i have a question tho, i keep on getting the error "updateStatus is not defined at HTMLInputElement.onclick" how do i fix it?
Can you make a video that how to download image from url using javascript from client side without use server side.....
@CodingNepal
2 жыл бұрын
I don't think it might be possible using client side language but you can google for it. If you want it using backend language then here is the video which is about KZread thumbnail or any image downloader via url - kzread.info/dash/bejne/eKmXsrJ8gKfKYrw.html
Brother how can i convert this web page into android/desktop app.. Pls response!
Could you make video tutorial, how to create weather app
@CodingNepal
2 жыл бұрын
Here is the video - kzread.info/dash/bejne/lWWmj7Cqic6sgMY.html
where did you get the icons
Bro why you .task label input { margin-top :6px;} How can you decide to Its center to .task 🧐🤔
I am getting error for forEach..how to resolve that
Do you have an explanation how to run the website on localhost?? I don't really understand in that part
@CodingNepal
2 жыл бұрын
You've to install live server extension on vs code. Learn more: marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer
Astagfirullah Aameen 🙏🤲😍
Is this for beginners
Great video.Where can I find the source code sir
@CodingNepal
Жыл бұрын
Here is the source codes link: www.codingnepalweb.com/create-todo-list-app-html-javascript/
Please publish the article on the website. ❤️🙏
@CodingNepal
2 жыл бұрын
It has been published - www.codingnepalweb.com/create-todo-list-app-html-javascript/
please make javascript tutorials in simple way
@CodingNepal
2 жыл бұрын
Okay, I'll try my best!
How can we delete all completed task with clear all button and pending task are still exist in local storage ?
@gautampurohit9081
Жыл бұрын
If anyone can do it make a git repo and send link
E-Commerce JavaScript Tutorial give Shopping Cart from Scratch please bro
@CodingNepal
2 жыл бұрын
Ok I'll try bro
Bro make a search box like which is in your website
@CodingNepal
2 жыл бұрын
Okay bro
😁😁
25:20
hey can you make project on larvel 8 versiom....e commerse web app plzz nd share source code
@radhikataldar
2 жыл бұрын
e commerse web app
@CodingNepal
2 жыл бұрын
Okay, I'll think on it!
hi
✅ Promo-SM!!!
please don't insert music anymore, let records and guide us how to code step by step
absolutely not recommended for beginners