Lesson #7 - DOM Project - To Do App using DOM - Play with DOM - Explained in Bangla

In previous 6 lessons, I have explained detail about theoretical and practical concept of DOM, talked about DOM traversal, manipulation, dealing with hierarchy and DOM events. In this tutorial, I have shown a complete project where I have made a "To Do App" using all the knowledge we got from previous lessons. If you follow this video, you will get a clear confidence on how to use DOM in practical projects.
Project Github Link - github.com/lea...
Complete Playlist Link: • Lesson #1 - What is DO...
কোন প্রশ্ন থাকলে comment section এ comment করতে পারেন। সেই সাথে আমাদের একটি Facebook Group আছে। সেখানেও আপনার প্রশ্ন করতে পারেন। সব প্রয়োজনীয় link নিচে দেয়া হলো -
👍 Facebook Group - / learnwithsumit
👍 Like our Facebook Page - / letslearnwithsumit
👍 Follow us at Instagram - / learnwithsumit
👍 Follow me at - / sumit.analyzen
#javascript #dom #bangla_programming_tutorial

[@saifurrahman7893]

আলহামদু লিল্লাহ, আপনার ডম প্লে লিস্ট টা শেষ করলাম। প্রজেক্ট টা একবার ভিডিও দেখে করেছি আরেকবার না দেখে করেছি। অনেক কিছু শিখতে পারলাম। শুক্রিয়া ভাইজান। জাযাকাল্লাহ। ❤️❤️

[@mahmudhasan7584]

Javascript DOM এর অনেক tutorial দেখেছি। article ও পড়েছি। তবে আপনার এই সিরিজটা দেখে যতটা ক্রিয়ার হয়েছি। এতটা clear আগে হই নাই। আর এই প্রোজেক্ট টি করাতে আরো বেশী ক্লিয়ার হয়ে গেলাম। আপনার বুঝানোর প্রক্রিয়াটাই অন্যরকম। বুঝতে কোন সমস্যাই হয় না। Love You bro...

[@dev_solutions007]

অল্প অল্প করে আউটপুট দেখালে খুবি ভালো হত দাদা

[@marziulhoque8562]

এক কথায় অসাধারণ হয়েছে। তবে যদি অল্প অল্প করে কাজ করে করে আউটপুট করে দেখাতেন তাহলে নতুনদের বুঝতে অনেক বেশি সুবিধা হতো। তারপরেও এতো সুন্দর করে শেখানোর জন্য ধন্যাবাদ

[@details4333]

অনেক বেশি হয়রানির শিকার হয়লাম শুধুমাত্র শেষের ভিডিওতে । আমার মাথায় ফাংশনে ফাংশনে গিট্টু লেগে গেছে । ❤❤❤

[@fjsripon7935]

এখানে একটা জিনিস এর উপর পূর্ণাঙ্গ ভিডিও দিতেন,,,মানে add task এর ফাংশন লেখার পর সেটার কাজ তারপর অন্যান্য ফাংশন লেখার পর সেটার কাজ, মোট কথা একটা একটা করে ক্লিয়ার করলে অনেক উপকৃত হইতাম,,, অনেক হেল্পফুল হবে,,,

[@md.mahedihasan9525]

Agreed

[@ibnumahtabhussain8172]

সুমিত ভাই! আপনি comment লিখে সম্ভবত Tab প্রেস করলেন, আর সাথে সাথে ঐ একটা টেমপ্লেট চলে আসলো! এটা কীভাবে করতে হয় ভাই?

[@LearnwithSumit]

Eta visual studio code user snippets. eta niye amar ei video te detail paben - lwsbd.link/envsetup

[@BrightSkills]

ভিডিওটা সুন্দর কিন্ত একবারে সব আউটপুট দেখানোর জন্য মাথার উপর থেকে গেল অনেক কিছু..

[@learnwithmehady4040]

please make it clear very easy for the beginner one. cause call-back function is not easy for the beginner sir. thank you so much.

[@aiscreation]

comment এর শর্টকাটটা কিভাবে এনেছেন?

[@ibnumahtabhussain8172]

আমার বড়ই আশ্চর্য লাগে, আপনার ভিডিওগুলোতে Unlike আসে কীভাবে!? এরকম অসাধারণ কন্টেন্ট আর টিউটোরিয়াল কি হয়? এত সুন্দর আলোচনা, এক্সপ্লেনেশন, স্টাইল! অসাধারণ সুমিত ভাই!

[@LearnwithSumit]

অনেক ভালবাসা ভাই। unlike matter করেনা কারণ এরকম ভালবাসা থাকে।

[@mdmahmud538]

Sumit Dada, apner kace akti request. ai video ta olpo olpo output dhekhiye ki kora jabe.....? amr moto bigginer er jonno subidha hoto...... jodi korten onek baditho thaktam.....

[@Md.MujahidulIslam-uk3dq]

Thank you so much for this playlist. Really appreciate. Hope will get something new in the next. Praying for you.

[@tanvir4748]

কেউ লুপের ব্যাপারটা একটু ক্লিয়ার করবেন প্লিজ? third element এর জন্য ডিলিট বা চেক ক্লিক করলে ৩টা element ই একসাথে incomplete থেকে কমপ্লিটে বা ডিলিট হয়ে যায় না কেন?

[@masudparvaz8706]

ভাইয়া, bindInCompleteItems এর taskItem, checkBoxClick প্যারামিটার নেওয়া হয়েছে এগুলো ক্লিয়ার হয় নাই, এবং এই ফাংশন টাই যদি একটু ক্লিয়ার করে বুঝিয়ে দিতেন ভালো হতো।

[@moazzemhossainbappi1723]

Mobile Notification এ Lesson#7 দেখে ভয় পেয়ে গিয়েছিলাম। ভাবলাম ভাইয়ের এতগুলো ভিডিও আমি দেখি নাই এখনো। পরে Playlist এ ঢুকে কেখলাম সব আজকে আপলোড দিয়েছেন। আপনার নতুন ভিডিও পেলে অন্যরকম আনন্দ লাগে। ধন্যবাদ দিয়ে ছোট করবনা। ভাল থাকবেন।

[@LearnwithSumit]

❤️❤️❤️suggestion thakbe porpor dekhar jonno. thanks for all the love

[@bakhtiarhossain5467]

সুমিত দাদা , সালাম নিবেন । এই এপসটাকে যদি আমার দৈনন্দিন জীবনের নোট লিখার অংশ হিসেবে নেই, তবে সেক্ষেত্রে কিছু ত্রুটি আছে । ইউজার যদি ইনপুট বক্সে কোন কিছু না লিখে ও Add Task বাটনে ক্লিক করে , তবে সেটা শুধুমাত্র একটা চেকবক্স সহ এন্ট্রি নিচ্ছে । আচ্ছা , জিনিসটা যদি এমন করলে কেমন হয় যে , ইউজার কোন কিছু না লিখে ইনপুট দিতে চাইলে সেটা একটা এলার্ট শো করবে ইউজার কে !!

[@shekhabusufianshoron]

Thank you sir

[@sumonbarai178]

comment ta ki kore korlen .......... ata ki kore vs code set korbo

[@kawsarahmed7045]

অটো কমেন্ট স্ট্রাকচার আনলেন কিভাবে?

[@shohagkhan5046]

project ta beginner der jonno hard hoye gese......

[@MdMehediHasan-ld7wt]

apner java script basic ta sesh kore dom ta dekhlam onek kichu bujlam , janlam ,kichu jaygay kasto hoche kinto onek valo laglo ,,,, apner theke sikhte pere onek valo lagteche

[@MA-np7if]

javascript localstorage এর উপর যদি একটা টিউটোরিয়াল দিতেন খুব ভালো হত। বাংলায় এ নিয়ে একটাও কন্টেন্ট পাইনি, যারা বিষয়টি বুঝাতে পারে।

[@MehediHasan-qr7ut]

javascript er video prai sobguli dekhechi kintu sob videor che ei video ti bohu pachal ei video ti dekhe bujte matha awlaya jai jodio video ti valo vabe bujle callback clear hoy jabe

[@maruf7956]

browser refresh dile shob mucche jai

[@arafatislamkhairul4439]

bhi comment tag ar jonno kon extension use korchen?

[@noname32400]

মাথার দুই হাত উপ্রে দিয়া গেলো

[@programming-dude]

thanks vai, but my project is not working first time

[@mdrejaurrahman3829]

comment type korle je section ta ashe oita kivabe ana jay

[@dustochele4943]

If you can please make a full series of React JS

[@mdsa-ad]

ভাইয়া, একটা জায়গায় আমার একটু অস্পষ্টতা রয়ে গেছে। কোনও ইনকমপ্লিট টাস্ক আইটেমের চেকবক্সে ক্লিক করলে ওই আইটেমটা কমপ্লিটেড টাস্ক লিস্টে ঢুকছে ঠিকাছে, বাট একি সাথে সেটা ইনকমপ্লিট টাস্ক লিস্ট থেকে রিমুভ হচ্ছে কিভাবে? এটার জন্য তো আলাদা কোনও ফাংশন ইউজ করেন নি। নাকি কমপ্লিট টাস্ক এর ইউএল যখন সেই আইটেম টাকে এপেন্ড করছে তখনি ইনকমপ্লিট লিস্ট থেকেও সেই আইটেমটা অটো রিমুভ হয়ে যাচ্ছে?

[@LearnwithSumit]

ভাল করে দেখুন। ভিডিও তে বলেছি। অটো কিছুই হচ্ছেনা। আরেকবার দেখুন। একটা ইভেন্ট রেজিসটার করেছিলাম।

[@raihanmahmud4017]

এতসুন্দর ভা‌বে উপস্থাপন করে‌ছেন । স‌ত্যি অসাধারন😍😍❤

[@dev_shaiful]

অসাধারণ❣️❣️❣️

[@mdridoy9896]

Take love vai. Thanks a lot

[@Rabbi_Rahman1]

My best teacher ❤❤

[@tusharimran8057]

💞💞💞💞

[@jawad_youtube]

Thanks a lot, Bhai❤

[@iamtheasad]

Thank you vai ❤❤❤

[@udemybd5576]

i Did the project in my way. I am giving a pull request in GitHub of those changes

[@LearnwithSumit]

amazing. well done.

[@tayefahmad911]

Thank you so much

[@tanvirrobi]

Love you vaiya

[@kazimdminhajulhaider3709]

The playlist is amazing, However with due respect I would like to say that, the thought process of this project is not beginner friendly. You could go forward step by step. Also if you could avoid callback function it would have been good for beginners as well. Rest of the part of this project is great. Take love

[@gantabyaprottoy]

Thanks a lot

[@mehrabhasantanim338]

Alhamdulillah notun kichu sikhlam. Community te apnar moto manusher boroi ovab. U deserve lot more, Sir..Thanks for the all sacrifice..

[@ZST1997]

Very helpful

[@stone-mind]

অনেক অনেক ধন্যবাদ ভাই, এতদিন জাভাস্ক্রিপ্ট পারতাম তবে তা নিয়ে কাজ করতে পারতাম না কারণ কনসেপ্ট ক্লিয়ার ছিল না। তবে এখন মনে হচ্ছে জাভাস্ক্রিপ্ট পারি আর নাই পারি,জাভাস্ক্রিপ্ট নিয়ে কাজ করতে পারবো। কারণ জাভাস্কিপ্ট কি ভাবে কাজ করে তার কনসেপ্ট ক্লিয়ার এখন আমার কাছে। আর বাকি ইনস্ট্যান্ট সমস্যার জন্য তো গুগল মামা, ইসবুক গ্রূপ আর তাতেও কাজ না হলে আপনি আছেন ই।

[@abualmaruf8901]

many many tnx

[@roothossen]

Done 💜

[@rezwanislam1681]

Dom onek easy hoye gase thanks sir😍😍😍😍

[@saidurrahmanrafi4189]

Thank you

[@mdjuelshikder4748]

Thanks Vai

[@FahimMahmudChisti]

আপনার প্রত্যেক ভিডিও আমার কাছে অনেক ভাল লেগেছে যে আমি আপনাকে বলে বোঝাতে পারবো না। আপনার অসাধারণ বোঝানোর স্টাইল অবশ্যই প্রশংসনীয় । আপনার কাছে আমি একটা অনুরোধ করবো যদি সম্ভব হয় তাহলে আমার অনুরোধ রাখবেন । জাভাস্ক্রিপ্টে - DOMAttrModified DOMAttributeNameChanged DOMCharacterDataModified DOMElementNameChanged DOMNodeInserted DOMNodeInsertedIntoDocument DOMNodeRemoved DOMNodeRemovedFromDocument DOMSubtreeModified এগুলি নিয়ে যদি আপনি একটি ভিডিও বানান তাহলে আমি অনেক উপকৃত হব 🙂 আপনাকে অগ্রিম ধন্যবাদ আপনার দীর্ঘায়ু কামনা করি।

[@nullcodeer]

thanks

[@shofiqueshahariar3068]

wow

[@solaymankhan4496]

This is the second JS course I am watching and within the first 30 minutes feels like I didn't learn much through the first course. Thank you for such a detailed comprehensive course.

[@LearnwithSumit]

You are welcome and best wishes brother

[@sumaya-kabir]

playlist done by practicing the To-Do-App project. Thanks Sumit vai.

[@AnikBiswas-gk9lv]

Vaia khub e helpful akta video hoyese

[@frontend_fundamentals]

dada dom niye ki ar kono video ashbe

[@LearnwithSumit]

na ei playlist complete. tobe amar running Javascript beginner series e DOM beginner der jonno tutorial ashbe

[@hotnspicebyemti]

Thank You dada, just completed this series Alhamdulillah. next series will be your Modern JS series. wish me luck

[@mr.chowdhury2737]

This content is really helpful. Need more JS content.

[@saminyasar004]

pura playlist shesh korlam. onek shundor vabe bujano hoyeche. recommended.

[@LearnwithSumit]

thanks

[@abu-musa]

পুরো প্লে-লিস্টটা দেখলাম। DOM নিয়ে অনেক কিছু জানতে পেরেছি। অনেক কিছু শিখেছি। আপনাকে অসংখ্য ধন্যবাদ।

[@LearnwithSumit]

তোমার জন্য শুভকামনা। আশা করি subscribe করে পাশে থাকবা।

[@mehrabhasantanim338]

U are my real life idol, take love and respect..

[@codemiz]

complete task কে কি দিয়ে কল করা হয়েছে। এবং taskItem কোন জায়গা থেকে আসছে?

[@mahmudulhasanmunna2871]

taskItem ta কোথা থেকে আসলো আমিও খুজতেছি

[@zamearii]

very nice project.I have learnt a lot about thinking every part of the project as function. Thank you very much.

[@samiulislamshibly6520]

ভাইয়া, আমি শুরুতেই DOM দেখলাম। আমার জাভাস্ক্রিপ্টের হালকা নলেজ আছে। এজন্য শেষ প্রজেক্টটা বুঝতে একটু অস্পষ্টতা রয়ে গেছে। এজন্য কি শুরুতে আমার Think in a JS way এই সিরিজটা দেখা উচিত?

[@LearnwithSumit]

না ভাই। যেহেতু DOM এই problem হচ্ছে তারমানে basic gap আছে। তুমি এই path টা follow করো - lwsbd.link/jspath মানে তোমাকে w3schools এর JS series টা দেখতে হবে। তাহলে বুঝে যাবা। যদি ভাল লাগে তাহলে আমার channel টা subscribe করার অনুরোধ থাকলো।

[@farabisajib9769]

We are lucky with your tutorial. I appreciate you. By the way Thanks a lot bhaiya

[@jahidulsaeid]

Thanks a lot ... ভাইয়া আপনার ভিডিও গুলো এতো গুছানো হয় যে কোনো প্রশ্ন করার জায়গা থাকে না থাঙ্কস এ লট। জাস্ট একটা ছোট জিনিস ভিডিওএর ফার্স্ট এ যে কমেন্ট করার (title, description, etc ) এইটা কি কোনো এক্সটেনশন নাকি কাস্টম কোনো কিছু করা প্লিজ জানাবেন।

[@azashik5678]

ata vs code ar snippet option ta ..apni chaile apner iccha moto snippet baniye nite paren

[@rupomraz6475]

ভাই ফুল প্রজেক্টটা করলাম কিন্তু প্রবলেমটা হচ্ছে যখন আমি add new task এ একটা ট্যাস্ক enter করি তখন সেটা ইনকমপ্লিট বক্স এ আসে কিন্তু যখন checkbox এ ক্লিক করি টাস্কটা আর কমপ্লিট বক্স এ আসে না error (Uncaught TypeError: Cannot read property 'appendChild' of undefined at HTMLInputElement.completeTask )

[@LearnwithSumit]

Source code github link is shared in the video description. Please check the source code. You might have a typo or missing lines.

[@mdbicky530]

thanks for this beautiful series on js dom. I truly appreciate it thanks buddy keep it up

[@mohammadnaim9226]

best tutorial.......dada

[@showvike]

11:08 to 11:18 ami vabsi amar net chole gese or video pause hoye gese.. full of silence.. -_-

[@LearnwithSumit]

sorry for that. That was a video editing issue.

[@fojlarabbi972]

best teacher for javascript

[@MA-np7if]

এক কথায় সেরা হয়েছে👌👌

[@imranahmad4205]

ভাইয়া querySelector এ কখন ( # আর কখন . ডট ব্যবহার করতে হয়? একটু বিস্তারিত বললে ভালো হয়)

[@LearnwithSumit]

ভাই, querySelector এ id হলে # এবং class হলে . ব্যবহার করতে হয়।

[@imranahmad4205]

@@LearnwithSumit ধন্যবাদ ভাই।

[@sumonje]

Very nicely explained.

[@naimshaikder750]

Project er video ta part part kora dakale onk vlo kora buja jai to

[@LearnwithSumit]

Thanks for the suggestion. Thanks. Please subscribe to my channel and stay tuned.

[@ashikghosh6166]

ধন্যবাদ দাদা!

[@rumpapakrashi3785]

vaia ami ekhne let er jaygay var use krte prbo?

[@LearnwithSumit]

jokhon jeta proyojon tokhon seta use korba. konta kokhon seta bujhte ei video ta dekhte paro. clear hoye jabe - lwsbd.link/lvc

[@smakbor2758]

very helpfull

[@sarwarputul9533]

Thanks a lot brother to make me understand DOM. You are awesome. I am just grateful to you. Lots of love for you.

[@LearnwithSumit]

take love

[@mdtanimhossain4602]

Thanks vai.

[@priyaakter7746]

Thanks for great teaching. Sir please create a vue js series

[@LearnwithSumit]

vue ja will come after react.

[@emonibnsalim8253]

vaia ai project a git hub link deya jabe? practise ar jonno

[@LearnwithSumit]

github link is already mentioned in the video description

[@emonibnsalim8253]

@@LearnwithSumit thanks vaia

[@saifuddin6359]

Bhaiya akta question silo .. Jokhn Checkbox a click event golto, tokhn list modify kre incomplete task theke complete task a pathanor por, incomplete task theke list ta kivave remove hole.

[@LearnwithSumit]

jokhon task complete korar jonno incomplete list er kono item er checkbox e click kora hocche tokhon completeTask() function ta call hocche. oi function er vitore dekho last e "bindCompleteItems(listItem, deleteTask)" ei function ta call kora hoyeche ebong "deleteTask" function ta pass kore deya hoyeche. "bindCompleteItems()" function er moddhe last e checkBox er onchange e checkboxClick mane deleteTask() function ta call kora hoyeche jeta incomplete items theke item ta remove kore dicche. ebar bujha geche?

[@saifuddin6359]

bindCompleteItems()" function er moddhe deleteButton e onclick a deleteTask() function call hoyeche jeta complete items theke item ta remove kore dicche. kintu amr quetion ta silo incomplete items theke item ta kivave remove holo. Oita ki jokhn completeTask() a completeUl.appendChild(listItem) kra holo tokhoni incomplete items theke remove hoye galo.

[@LearnwithSumit]

@@saifuddin6359 deleteTask() function ta ekta common function jetake je element call korbe tar parent node delete hoye jabe. ei function take complete list and incomplete list dui jayga tei kaje lagano hoyeche. incomplete list er protita checkbox e ei delete task function take bind kora hoyeche. Initial 3 ta incomplete task er jonno nicher diker first for loop tar maddhome and dynamically created task gulor jonno completeTask function er seshe. tarmane protita incomplete list item er checkbox er onclick e deleteTask() function ta bind hoye thakche. jar karone jokhoni checkbox e click kora hocche parent node mane corresponding list item ta delete hoye jacche. asha kori bujhate parchi

[@saifuddin6359]

@@LearnwithSumit Thanks bhai, akhn bujtte parsi.

[@tanmoyerasdairy4393]

Hello Brother! Thanks for these fantastic tutorials with a plain and simple explanation so that a beginner can grasp all of it. A thank you would be significantly less for the effort you gave to make this happen. I would like to know one thing what vscode extension do you use to search any specific in the code window. Thanks once again.

[@LearnwithSumit]

Thanks. Which search you are talking about. Not sure. Please elaborate

[@tanmoyerasdairy4393]

@@LearnwithSumit Thanks a lot for writing in Sumit dada! Suppose you're searching a class in your HTML file. For an instance, in this playlist you are searching a class name called item(li tag) here. If the html or js file is bigger then the searching ability would be very helpful. Is there any extension or any default keys in vscode which can do this? Brother hopefully you understand now!

[@LearnwithSumit]

vs code has its own search. press ctrl + f and search

[@mehedihassan5184]

❤️

[@jesminkawser3696]

sir..are there any videos for DOM??

[@LearnwithSumit]

ki bolchen! dom er video tei to comment korechen. dom niye ektu age ami 7 part er ekta playlist add korechi. apni 7 number tay comment korechen. part 1 theke dekha shuru korte paren.

[@jesminkawser3696]

😄😄😄 akno suru kori nai. korbo.. eksate etu gula video upload dilen..tay bollam r kono video baki ace naki dom playlist er..??

[@LearnwithSumit]

oh accha. apatoto 7 ta video e ache. ei 7 ta dekhle apnar foudation toiri hoye jabe. tobe serial by dekhben.

[@jesminkawser3696]

ok sir..! lots o thanks.. and bless from my heart, and pary that you can give us many more such kind of video..