Learn CRUD Operations in JavaScript by building TODO APP || JS
Вставка
- Опубліковано 6 лип 2024
- Today we're gonna look at how a CRUD Application works. At the same time, we will build 2 apps, a basic social media app and a TODO App, so that we can fully understand how the CRUD Principles work in JavaScript.
GitHub : github.com/JoyShaheb/CRUD-App...
Live Demo : crud-application-delta.vercel...
Time Stamps -
0:00 - Intro
3:09 - Social Media Project Setup
15:11 - social media app JavaScript Part
49:22 - TODO App Project Setup
1:19:10 - TODO App JavaScript
1:59:03 - Local Storage
My Academy - www.academy.poshpixel.studio/
Learn CSS Position Property with examples
• Learn CSS Position Pro...
CSS Box Model -
• Learn CSS Box model wi...
CSS Media Queries -
• Learn CSS Media Query ...
Have a Question or Project idea? Let me know about it in the comment box down below. 👇
Both Suggestions & Criticisms are Highly Appreciated ❤️
Follow me on:
👉 LinkedIn : / joyshaheb
👉 Twitter : / joyshaheb
👉 Instagram : / joyshaheb
👉 Github : github.com/JoyShaheb
Queries Solved -
1) HOW A crud application works in JavaScript
2) What is a CRUD Application
3) How to build a Todo app using javascript
#JavaScript #WebDev #Frontend
For mentorship visit : www.academy.poshpixel.studio/
Sir class gulo banglay hole khub valo hoy
I noticed one thing. Whenever I edit a task, it always puts it on the bottom automatically. It'd be nice if it could either go back in the right order, or else arrange the order of tasks by the date. I don't think I'm savvy enough to figure it out on my own though lol
@@jonathonkiner7415 there’s a array method called sort, you can use that to sort the order
@joyShaheb, that was a very good tutorial. in fact, you are the best teacher I ever met. One thing I noticed about the app though, is that, assuming you click to edit a task and the popup form comes up. if you close the popup form without editing the information, the information gets removed from the local storage.
@@jonathonkiner7415 for that you can use array data structure and then You'll have two methods indexOf and another one Splice just google and learn
As a beginner, this is the top-level content on UA-cam I've ever come across. For months and months I was looking for tutorials that would help me learn javascript i swear I couldn't find any tutorial that would guide and explain as you did, I couldn't even complete a single project without getting stuck in the middle of the tutorial, and even sometimes Google was not able to answer the bugs. thank you so much joy for creating such quality content
You are the best tech teacher I found on UA-cam. You don't even skip little things to explain. I have learnt many things from your tutorials that I haven't learnt from the professional courses I bought. I had become the fan of your method of teaching after completing your Shopping Cart tutorial. Now I am watching this and then after I will see the Async/await tutorial of your. Thanks a million bro for providing such quality content.
True.
I agree with you Mustafa.
i think thats true
amazing grace, I found the JOY !!!,
after 2 yrs of learning I got JOY, and JOY is a great teacher. I am not good at English, but JOY's English feels like JOY speaks in my native (Hindi). Amazing !!!!, by the way, I typed this by Grammarly like JOY teaching.
Thank you for the well wishes my friend 🤲🤲
Love your videos bro, You're such a good teacher, I'm pretty sure that your channel is gonna grow because the effort that you put making your videos is incredible. Hopefully more people are gonna see that and watch them all.
You're one of the best teachers out there, if not the best. You deserve millions of subscribers. I'm with you man!
Thank you, Joy! I just started learning programming, and CRUD is made more understandable with your video!
Thanks once again!
WOW !!! just in time I just started learning CRUD before moving onto react crud and this came up THANKS
thankksssss,auto subscribe! indirectly you create something very, very useful that is not in other tutorials
honestly you are far more exciting to watch and learn the way you explain is in very detailed manner, i must said i learn from you rather than my instructor here.... thank you so much i understand more!
Ive been stuck on this for so long!!! You literally walked over the same issue I was encountering the prevent default issue
Thank you and please more projects like this!
The way he explains JS is insane!
Needed this , got it at the perfect time. Thanks
this is the best lesson about crud in JavaScript , on youtube.
Congratulation Joy!
wached from brasil
You're not bad teacher... You're great! :)
this is the best tutorial I have seen. Thank you so much for explaining so well.
you are the best teacher in the world hands down even homeless people and college dropout are learning from you, you are changing peoples life just wondering we just did Shopping Cart Tutorial if we master your Shopping Cart Tutorial and this one can we call us self web developer
Hi Joy Shaheb, I wanted to express my sincere appreciation for your excellent teaching skills. Your tutorial is not only comprehensive but also presented in a way that is easy to understand, especially for a beginner like myself. Thank you for your dedication and commitment to helping others succeed.
He is back.
Super amazing content. I learned so much from this tutorial. I was able to reproduce the app as well as implement my own modifications. Thank you so much.
What a perfect timing for this! Am always excited for your detailed videos Joy ..I love your teaching style > thanks Joy
his gifted
Joy is a great teacher.
love from India for your teaching style.
Hi Joy I saw your videos on freecodecamp chanel and liked it. It is very instructive when you do visual narration. It will be very good if you explain other difficult js topics as in your async video.
Thank you so much . I used to struggle to understand crud but you made it so easy❤
What an excellent video, very well planned, explained and delivered. Perfect timing for me in my Javascript training. It brought a lot of individual concepts into one central point. If you have time in the future, could you do a video on javascript API CRUD? all-in-all, Well Done, keep them coming.
you are the best teacher I have ever seen. thank you so much sir
want more projects like these plz upload your videos helped me a lot not only me but many so plz continue...
Excellent Video..I watched your async/await video too it was too excellent..please make more such videos on project based learning.
Superb ❤️❤️❤️ I learn lot ❤❤.like localstorage , map , function , dom ... Thankyou sir
You make everything so simple
You're a wonderful teacher
I really hope to see project based playlist on fundamental to intermediate level React JS very soon.
God bless you, Joy.
Much appreciation and blessings from Nepal.
You are the best tutor I have seen so far. Please, which other platform can I find you?
Wow, this is a very great tutorial. To be honest, I learned a lot, continue empowering and inspiring more people to code and design more
you explained the project flow-chart like so butter smooth , so detailed i had never experienced, all things are clear. Btw some times situation comes when i use submit btn outside the form tag so want more detail about it what are issue or what to do if such situations come.(like in bootstrap modal)
Joy,
Thank you so much for all that you've taught me!
You are a wonderful teacher, I truly appreciate all the effort you put into this!
I look forward to continuing to learn from you in the future :)
Be well,
- Frank
love your videos joy . your explaination is very good .keep making these usefull contents .😊
My favorite teacher on UA-cam✌️ thanks a lot bro
Joy my bhai you need to make more of these kind of practical and logics videos
Please make full course for JavaScript. The way of teaching is amazing 👏👏 .
i love the way you teach man
Amazing explanation
bro keep making videos you'll blow soon . You are amazing
Really usefull for beginers, thank you so much. Please make more videos 👏👏👏
Brother,you're the besttt!
Great video, thank you!
Thank you very much Brother you helped me a lot for my project🙏
Hello Joy, am Shahrokh, the reason for this comment is to thank you. I learned CSS grid from FCC website. Where you demonstrated and explained it very well, I understood it properly. I don't have a Twitter account so, that's why I thought to thank you through the youtube comment box. So, thank you and FCC very much.
Most welcome 🌹
this is great video man thanks for the upload
You are awesome. Can you please come up with more applications? Your teaching method helps a lot...
Very good teaching style. Thanks!
perfectly explained, this video helped me to escape from TutorialHell. Keep making more videos :) .
Thanks a lot. I feel surprised why you have few subscriber. You deserve millions subcribers bro
Love your videos
Great teacher!
Great tutorial my friend!
Thank you very much.
Bro aapke lectures bhut mst hote hai pls ek request hai backend keliye scratch se ek course ya ek single video bnado pls mujhe backende sikhna hai aapse
you are not a bad teacher ✅
JOY IS A GOOD TEACHER🥰
Sir thanks your teaching ability is great, please make more tutorial like this
Joy, you got me over a major coding hump with this video. Just want to express my sincerest thanks to you 🙏 I’m now prototyping a product that’s been brewing in my head for years and it feels great!
One thing I added that others might want to is injecting a unique ID into each task so that you can target and truly edit vs delete and replace
@@personnumber42 best of luck with the prototype 🌹
@@JoyShaheb Thank you!
Joy is a good teacher :)
thanks again for this video man
very much understandable lecture
You are simply the best honestly😭😭😭🥰🥰 I have been struggling doing this and you patiently and happily explained every bits of this project. Thank you so much.
thanks a lot Prof! You rule!
Your 3 project enough to learn full HTML CSS JavaScript ...
what are you doing! keep going as you always said so far so good best teacher ever
Very nice 👍
Thanks Bro 🙏😊
Joyyyyyyy Thanks a lotttttt
favourite teacher
hi joy sent you a message about the tutorial ..😥 don't know if you've already chosen the 3 student, really interested .. will mean everything
you are a super star
Awesome,,,May be this video is going to be uploaded at freeCodeCamp as well.
U r amazing 🤩
Excellent vidéo, thanks for your amazing work.
Besides that, which add on do you have on visual studio ? Your writing is so smooth
thanks
You deserve Nobel prize 🎉
Can you please make more javascript video💙
great
Good
Hello thanks for the guide , i got a question if i do multiple todoapp next each other how can i assign the createTasks to them as well?
Updates are not modifying items its adding new item and deleting old one.
Please do it with tailwind also :)
hey Joy - awesome name btw.
Struggling to learn JS for a quite now.
After the learning 'basic' of JS, what do you suggest to learn i.e. how to implement those 'basic' stuff.
CRUD is also very important concept of programming.
If you're willing you can make a series of basic to advanced series in JS and React.
have a good one
Sure, more videos are incoming, stay tuned.
I would suggest you to learn how to do the CRUD operations using the fetch API. Next up, make something practical out of this project so that you can show it off to your recruiters.
The one you did in this video is done using the local storage and everything
For more suggestions you can always email me
I had to use: let data = ""; to get the social media app to work on inputing data. Furthermore, isn't using JS inside the HTML bad practice? Like when you put the onClick method in the "i" element? Still an awesome tutorial, so far. Tim
so far so good 😂
me encantaria que hiciera un tutorial en
React con redux thunk en axios consumiendo una api
Seems like there is a bug when you edit an existing todo... but click "Close" instead of "Add". Nice and clean, regardless.
Is there other way to reach the specific parent element? because I do not see to use .parentelement.parentelement as a good practice
i give u like
Please make some project in React Js
Joy my bro i am new to html css and javascript my question is are there more methods like CRUD or is CRUD the only one methode or are there more
i found problem when i add 3rd task content get overflow outside the box can you help me that it will be very helpful
Excelent tutorial!!!One little thing,how can we do when edit data to juat replace it,that data stayed in input,not to delete at all?
did you found answer for that, i am also trying to figure this out
Thank you for this wonderful tutorial.
I have to do this with an API for class; however, it did not work when it did, I could never connect the api right. If you have any ideas of how to do this, let me know.
Hello Joy, Thank you for this tutorial. Kindly tell me, are you using any database as backend to store the to do list data.Where are you storing this data?
Local storage