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

  • @CodingNepal
    @CodingNepal2 жыл бұрын

    Don't forget to check out the live demo of this Todo App. Link is in the description!

  • @sekhangati

    @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

    @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

    @sekhangati

    2 жыл бұрын

    @@CodingNepal ok thank you for the advice.

  • @TecHBanCo

    @TecHBanCo

    2 жыл бұрын

    I want to know what code editor you use and how it preview live please reply

  • @webylancers5607

    @webylancers5607

    2 жыл бұрын

    JazakuMullaha Khaira Aameen 🙏 🤲 😍

  • @shabankhan4383
    @shabankhan43832 жыл бұрын

    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

    @CodingNepal

    2 жыл бұрын

    Happy to hear that bro.. Keep loving!

  • @herbeysoft

    @herbeysoft

    2 жыл бұрын

    Link to the video tutorial please

  • @pelonomifinger4482
    @pelonomifinger4482 Жыл бұрын

    Honestly the best tutorial I've watched. Thank you

  • @ZoyaLoenko
    @ZoyaLoenko2 жыл бұрын

    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

    @CodingNepal

    2 жыл бұрын

    Awesome, thank you!

  • @franciscojunior8066
    @franciscojunior80662 жыл бұрын

    Awesome!! You are the best!! Thank you my brother.

  • @mariskitchen7802
    @mariskitchen78022 жыл бұрын

    Amazing bro, we are appreciating your work, god bless you, please upload more content like this, we are waiting🙏🙏👏👏💓

  • @user-hw5qt7vf2p
    @user-hw5qt7vf2p2 жыл бұрын

    Great turorilal, that's what i wanted to find. Thanks Coding Nepal!!!

  • @CodingNepal

    @CodingNepal

    2 жыл бұрын

    Most welcome!

  • @webylancers5607
    @webylancers56072 жыл бұрын

    JazakuMullaha Khaira Aameen 🙏🤲😍

  • @achmadfikri-bg9wv
    @achmadfikri-bg9wv3 ай бұрын

    thank you bro thanks to you I understand a little about javascript

  • @appleid3223
    @appleid32232 жыл бұрын

    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

    @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

  • @64_bit_coding
    @64_bit_coding2 жыл бұрын

    Awesome! Can't wait to make it!

  • @CodingNepal

    @CodingNepal

    2 жыл бұрын

    Happy to hear that :)

  • @wakweikafelix
    @wakweikafelix2 жыл бұрын

    Awesome tutorial! Thank you for sharing!

  • @CodingNepal

    @CodingNepal

    2 жыл бұрын

    You are so welcome!

  • @IAmWaterr
    @IAmWaterr2 жыл бұрын

    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

    @CodingNepal

    2 жыл бұрын

    Glad it was helpful!

  • @wajihulhassan712
    @wajihulhassan712 Жыл бұрын

    Amazing work 👍

  • @mrmusiclover2866
    @mrmusiclover2866 Жыл бұрын

    I love your content thank you

  • @AnjuGupta-jy6lj
    @AnjuGupta-jy6lj2 жыл бұрын

    Good to see the second version of the TODO list app And we wanna see videos with your voice

  • @CodingNepal

    @CodingNepal

    2 жыл бұрын

    I will try my best

  • @justChuka

    @justChuka

    2 жыл бұрын

    @@CodingNepal pls dont!

  • @podiac
    @podiac2 жыл бұрын

    Clear and easy

  • @CodingCreative.
    @CodingCreative. Жыл бұрын

    Good work

  • @nerdy.guy_yt
    @nerdy.guy_yt Жыл бұрын

    Bro, your work is really awesome, dude maza aa gaya

  • @CodingNepal

    @CodingNepal

    Жыл бұрын

    Thank you so much 😀

  • @shayanmahmood7480
    @shayanmahmood7480 Жыл бұрын

    you deserve more

  • @shaderone07
    @shaderone072 жыл бұрын

    That's so cool and minimal!

  • @CodingNepal

    @CodingNepal

    2 жыл бұрын

    Glad you liked it!

  • @galattabroz1917
    @galattabroz19172 жыл бұрын

    Awesome! i am learning to develop some apps like this and to make websites ... and I am form india

  • @CodingNepal

    @CodingNepal

    2 жыл бұрын

    Great 👍

  • @ganesan.r5430
    @ganesan.r54302 жыл бұрын

    great video really helped me a lot.

  • @CodingNepal

    @CodingNepal

    2 жыл бұрын

    You're welcome!

  • @ELECTROMIST
    @ELECTROMIST Жыл бұрын

    thanks a lot.

  • @zaurmammadov4521
    @zaurmammadov45212 жыл бұрын

    Thanks🙏😊

  • @nehanshpatil6699
    @nehanshpatil66992 жыл бұрын

    Excellent Work

  • @CodingNepal

    @CodingNepal

    2 жыл бұрын

    Many many thanks

  • @renegade1807
    @renegade18072 жыл бұрын

    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

    @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

    @renegade1807

    2 жыл бұрын

    @@CodingNepal Amazing, thanks for the tip. All the best!

  • @magiccode3396
    @magiccode33962 жыл бұрын

    Amazing work bro keep it up

  • @CodingNepal

    @CodingNepal

    2 жыл бұрын

    Thanks 🔥

  • @CreativeTutorialsWeb
    @CreativeTutorialsWeb2 жыл бұрын

    Superb Work Sir

  • @CodingNepal

    @CodingNepal

    2 жыл бұрын

    My pleasure

  • @webcoding8333
    @webcoding83332 жыл бұрын

    Great work man

  • @CodingNepal

    @CodingNepal

    2 жыл бұрын

    Appreciate it!

  • @amritpandey3537
    @amritpandey35372 жыл бұрын

    I love this ❤️❤️❤️😍😍😍😍

  • @CodingNepal

    @CodingNepal

    2 жыл бұрын

    Happy to hear that

  • @rapidloop
    @rapidloop Жыл бұрын

    Awesome job

  • @CodingNepal

    @CodingNepal

    Жыл бұрын

    Thanks!

  • @chikeziechinonso4671
    @chikeziechinonso46712 жыл бұрын

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

  • @nadevnimnath7021
    @nadevnimnath70212 жыл бұрын

    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

    @CodingNepal

    2 жыл бұрын

    Yes, it's okay... You can upload.

  • @yubiroaster6285
    @yubiroaster62852 жыл бұрын

    First comment.... Love from NEPAL 🇳🇵 ✌️

  • @64_bit_coding

    @64_bit_coding

    2 жыл бұрын

    CN was the first comment

  • @64_bit_coding
    @64_bit_coding2 жыл бұрын

    You should create you own inspect menu

  • @vikrantmulankar4742
    @vikrantmulankar47422 жыл бұрын

    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

    @CodingNepal

    2 жыл бұрын

    Okay bro, I'll try my best.

  • @surajkumarpradhan667
    @surajkumarpradhan6672 жыл бұрын

    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

    @appleid3223

    2 жыл бұрын

    Did you fix that?

  • @justChuka
    @justChuka2 жыл бұрын

    lets discuss the errors and how we got past it here. my p.checked wont strikethrough console gives error on classList as undefined

  • @mastlonda21
    @mastlonda21 Жыл бұрын

    i want to add count of task left section here how to to do that ??

  • @SunliteIV
    @SunliteIV2 жыл бұрын

    You can create nodepad online no database with php?

  • @hasanimruz5195
    @hasanimruz5195 Жыл бұрын

    please try to give your voice it will make the video more easy to understand

  • @commonman8540
    @commonman8540 Жыл бұрын

    can you add reminder in todo app and share it, thanks

  • @nitujha4884
    @nitujha48842 жыл бұрын

    Which backend is better and which should I learn as I am starting my journey to backend development, plz suggest!!!

  • @CodingNepal

    @CodingNepal

    2 жыл бұрын

    It depends on what you want to build

  • @sonusingh-kc1yv
    @sonusingh-kc1yv Жыл бұрын

    bro can you please create how to build profolio website

  • @diabymohammedibrahim295
    @diabymohammedibrahim295 Жыл бұрын

    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?

  • @nayannandi3596
    @nayannandi35962 жыл бұрын

    Can you make a video that how to download image from url using javascript from client side without use server side.....

  • @CodingNepal

    @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

  • @iftybabu
    @iftybabu2 жыл бұрын

    Brother how can i convert this web page into android/desktop app.. Pls response!

  • @_chill_relax_calm4647
    @_chill_relax_calm46472 жыл бұрын

    Could you make video tutorial, how to create weather app

  • @CodingNepal

    @CodingNepal

    2 жыл бұрын

    Here is the video - kzread.info/dash/bejne/lWWmj7Cqic6sgMY.html

  • @bashiwarsame3151
    @bashiwarsame3151 Жыл бұрын

    where did you get the icons

  • @CuriosityBoy-fo9sc
    @CuriosityBoy-fo9sc21 күн бұрын

    Bro why you .task label input { margin-top :6px;} How can you decide to Its center to .task 🧐🤔

  • @dhwaniprajapati6397
    @dhwaniprajapati6397 Жыл бұрын

    I am getting error for forEach..how to resolve that

  • @muhamadfadillahhidayat2230
    @muhamadfadillahhidayat22302 жыл бұрын

    Do you have an explanation how to run the website on localhost?? I don't really understand in that part

  • @CodingNepal

    @CodingNepal

    2 жыл бұрын

    You've to install live server extension on vs code. Learn more: marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

  • @webylancers5607
    @webylancers56072 жыл бұрын

    Astagfirullah Aameen 🙏🤲😍

  • @indian00021
    @indian00021 Жыл бұрын

    Is this for beginners

  • @sammiekihara2824
    @sammiekihara2824 Жыл бұрын

    Great video.Where can I find the source code sir

  • @CodingNepal

    @CodingNepal

    Жыл бұрын

    Here is the source codes link: www.codingnepalweb.com/create-todo-list-app-html-javascript/

  • @romitsu
    @romitsu2 жыл бұрын

    Please publish the article on the website. ❤️🙏

  • @CodingNepal

    @CodingNepal

    2 жыл бұрын

    It has been published - www.codingnepalweb.com/create-todo-list-app-html-javascript/

  • @dileepmeghwal7243
    @dileepmeghwal72432 жыл бұрын

    please make javascript tutorials in simple way

  • @CodingNepal

    @CodingNepal

    2 жыл бұрын

    Okay, I'll try my best!

  • @gautampurohit9081
    @gautampurohit9081 Жыл бұрын

    How can we delete all completed task with clear all button and pending task are still exist in local storage ?

  • @gautampurohit9081

    @gautampurohit9081

    Жыл бұрын

    If anyone can do it make a git repo and send link

  • @omorfaruk6986
    @omorfaruk69862 жыл бұрын

    E-Commerce JavaScript Tutorial give Shopping Cart from Scratch please bro

  • @CodingNepal

    @CodingNepal

    2 жыл бұрын

    Ok I'll try bro

  • @codebula2421
    @codebula24212 жыл бұрын

    Bro make a search box like which is in your website

  • @CodingNepal

    @CodingNepal

    2 жыл бұрын

    Okay bro

  • @giftnsonga1356
    @giftnsonga1356 Жыл бұрын

    😁😁

  • @mrmusiclover2866
    @mrmusiclover2866 Жыл бұрын

    25:20

  • @radhikataldar
    @radhikataldar2 жыл бұрын

    hey can you make project on larvel 8 versiom....e commerse web app plzz nd share source code

  • @radhikataldar

    @radhikataldar

    2 жыл бұрын

    e commerse web app

  • @CodingNepal

    @CodingNepal

    2 жыл бұрын

    Okay, I'll think on it!

  • @gamepakclone
    @gamepakclone Жыл бұрын

    hi

  • @jacka2307
    @jacka23072 жыл бұрын

    ✅ Promo-SM!!!

  • @thanhha5919
    @thanhha59192 жыл бұрын

    please don't insert music anymore, let records and guide us how to code step by step

  • @sahilmaharjan3955
    @sahilmaharjan39552 жыл бұрын

    absolutely not recommended for beginners