This is the main thing (challenges and small project) make to you a great UA-cam teacher. This is very helpful for me nd others. I really appreciate your hard work. Keep it up sir. ❣❣❣
You are really amazing. I am watching this react series from 1 and now reached at 44.. each video is awesome and detailed described. Very soon trying to finish it and then I will move on your node js series. Thank you so much. Much Love. Stay happy stay safe and achieve too much success and fulfill your dream.
Mene ye kai videos dekhe he sir Par samaj nahi aa raha thaaa Aapke video me sab clear ho jayega pakka Dekha nahi par yakin he mujhe Awesome sir😍 greate
recently I've bought one course that is paid one. I didn't understand some of the concepts but when I came here to this channel I understood everything.Thank u i hope you will have more subscribers in future.
There is many UA-cam channel who made tutorial on ToDo List App project but no one has explained like you've. I really appreciate your effort to clear each and every line of codes. Thank you Vinod Ji.
hello brother, actually its a req. to you that if possible then please add css code link, it actually saves a lot of time and we can directly concentrate on the logical part of our project.
no need to create another component you can do this in same file with this code const deleteTodo =(id) => { let filterData = todo.filter((_,val)=> val !== id); setTodo(filterData) } { todo.map((value,index)=>{ return (
there is bug in this todolist. if you haven't typed any item and click add button it will add empty item :" const add = () =>{ if(list != "") { setl((old)=>{ return [...old, list] }); seti(""); } }
Very Good Tutorials.... You are really talented person ....... We can see add and delete functionality works well and specially we like that it changes immediately. so my question is same add and delete immediate changes can we perform while fetching data from NodeJs/Mongo and add also ? I mean to say when we are dealing with dynamic database like mongodb ....
mera ek sawal hai, Jab hum button click karte hai then jo map new task show karta hai toh vo phr se sarey elements shuru s render kar rha hai ya sirf naya vala jo add hua hai array mai ? Like agar maanlo array m 3 tasks hai, mene ek aur banadia toh map dobara 4 k 4 ko render karega ya sirf ek last valey ko hi ?
Simpler way of writing delete function with the slice method const deleteItem=(id)=>{ console.log(id); const updatedElements = [...elements.slice(0, id), ...elements.slice(id+1)] setElements(updatedElements); }
Aap bhaut acche ho...thank u nd luv bro...itna badhiyan bataye but mujhe kaise patta chalega ki yaha ye sab sare function use karni h.. please aap suggest kro. Iska koi documentation de do please
@@manilavaswani154 onSelect was custom attribute. Not to confuse it with onSelect event handler in HTML. Though that was what creating too much confusion here in the video
I would like to tell ki jo app tumne banayi hai usme agar me text box me kuch nahi likhu aur sirf add button pe click karu toh bhi item add ho raha hai array me
Sir!!When i start my react js app it display my home page content properly but when i click other sub pages like about, contact its doesn't display anything olny showing navbar and updated filepath in browser how can i solve this ? Pls help how can i display other subpages content in my browser
hello sir agar hum aise hi koi small project bana rahe he or aapne jese ek park ka alag component create kiya wo kese pata chale k hame konsa part ka alag component banana hai ....plz sir iske par 1 video banaiye
Guys, our Reactjs project is finally here. I really hope you all gonna love this.✅ Plz share with your friends too on all social networking sites 🙏
Sir create course on DS with javascript
Sir source code kaha se lena hoga
Baba you are awesome
where to find the css source code??
sir i tried to add an alert option if nothing is written in the text box, but a error occurs please reply.
This is the main thing (challenges and small project) make to you a great UA-cam teacher. This is very helpful for me nd others. I really appreciate your hard work. Keep it up sir. ❣❣❣
Sir Apko to Har cheez Bahut Awesome Dikhai De raha hai aur yahan ham logon ka sir ghoom raha hai....
You are really amazing. I am watching this react series from 1 and now reached at 44.. each video is awesome and detailed described. Very soon trying to finish it and then I will move on your node js series. Thank you so much. Much Love. Stay happy stay safe and achieve too much success and fulfill your dream.
very important topic for every developer thank you so much .🙏 my best UA-cam teacher !!
Mene ye kai videos dekhe he sir
Par samaj nahi aa raha thaaa
Aapke video me sab clear ho jayega pakka
Dekha nahi par yakin he mujhe
Awesome sir😍 greate
I really hope ☺️
Sir ji, aag laga di aapne. Mai Canada mei student hu and jo apni bhasha mei samaj aata hai vo kisi aur bhasha mei nahi aata. bhot bhot thank you
Hello bro
Hello
recently I've bought one course that is paid one. I didn't understand some of the concepts but when I came here to this channel I understood everything.Thank u i hope you will have more subscribers in future.
Welcome brother : )
@@ThapaTechnical pls provide source code
There is many UA-cam channel who made tutorial on ToDo List App project but no one has explained like you've. I really appreciate your effort to clear each and every line of codes. Thank you Vinod Ji.
ua-cam.com/video/kMKzzBMEqh8/v-deo.html Check this if you're interested in HapiJS
boom guyze with great knowledge project
Mst hai bhaiya ji filter wala part gjb laga
: )
Hats off thapa sir, you really explain every nook and corner in a very lucid way.
hello brother, actually its a req. to you that if possible then please add css code link, it actually saves a lot of time and we can directly concentrate on the logical part of our project.
Informative video , from your video i am learning css , AdvJavascript with React . thanks bro , good bless you
This vedio is very conceptual and easy to understand .Thank u sir
Superb Bahot Hard kya Bahot Hard Kadak.
maja aagya baney mein first time, i can think how system will work, thanks @thapa bro
YOU ARE A GENIUS BHAI!!!!!
Thank you sir for this videos from Nepal🙏🙏🙏
you are a hidden gem bro
Learned a lot from this video!!
you are just Awesome.....nothing else
no need to create another component you can do this in same file with this code
const deleteTodo =(id) => {
let filterData = todo.filter((_,val)=> val !== id);
setTodo(filterData)
}
{
todo.map((value,index)=>{
return (
{value} deleteTodo(index)}>❌
)
})
}
easy with less lines of code
Hi bro can you help me regarding React form
Thapa bhai ap smjhate badhiya ho baki bana kr sb dikha dete h YT pr but smjha nhi pate sb
boom gys its work😍😍🥰🥰🥰🥰🥰🥰
your teaching is awesome
way of teaching is amazing...keep it up.
thank u bhaiaaa.. love from bangladesh ... please make more projects with mid nd advance functionality
sir you are my favourite teacher love u sir
Awesome Awesome Awesome Awesome Awesome Awesome Awesome Awesome........ Thank you thapa sir for this project...
Sir i learned many languages from ur video only but this is the most confusing :(
ua-cam.com/video/kMKzzBMEqh8/v-deo.html Check this if you're interested in HapiJS
yes u are right but u need more and more prectice then u will better understand
Watch again and again what you don't underestimate
ghajab va va maja agaya
sayad jab maine pure javascript me todo-list banaya tha vo easy laga tha ab iss prakar se banakar dekhta hu 🤔🤔🤔
Vinod Sir you are a great teacher.
*{margin:0;padding:0;box-sizing:border-box;}
*{
box-sizing:border-box;
padding: 0;
margin:0;
font-family:"josefin Sans","Arial Narrow",Arial,sans-serif;
}
.main_div{
width :100%;
height:100vh;
background:#6983aa;
display:flex;
flex-direction:row;
justify-content:center;
align-items:center;
text-align: center;
}
.center_div{
width:25%;
height:80vh;
background-color: #f4f4f4;
box-shadow:5px 5px 25px -5px rgba(0,0,0,0.5);
border-radius:15px;
}
h1{
color:white;
background:transparent;
background-color: #8566aa;
padding:6px 0 2px 0;
margin-bottom:10px;
box-shadow:5px 5px 15px -5px rgba(0,0,0,0.3);
}
input{
text-align:center;
height:30px;
top:10px;
border:none;
background:transparent;
font-size:20px;
font-weight:500;
width:60%;
border-bottom:2px solid #8566aa;
outline:none;
}
button{
min-height:40px;
width:40px;
border-radius:50%;
border-color: transparent;
background-color:#8566aa;
color:#fff;
font-size:40px;
border:none;
outline:none;
margin-left:10px;
box-shadow:5px 5px 15px -5px rgba(0,0,0,0.3);
}
button:hover{
background-color: #20bf6b;
}
ol{
margin-top:30px;
}
ol li{
padding-left:0px;
text-align:left;
font-size:20px;
font-weight:500;
min-height:40px;
display:flex;
align-items:center;
color:#8566aa;
text-transform: capitalize;
}
.todo_style {
display:flex;
flex-direction:row;
justify-content:left;
align-items:center;
}
.todo_style .fa-times{
width:20px;
height:20px;
display:flex;
justify-content:center;
align-items:center;
background-color: #8566aa;
border-radius:50%;
margin:0 15px 0 35px;
color:aliceblue;
box-shadow: 5px 5px 15px -5px rgba(0,0,0,0.3);
}
.todo_style .fa-times:hover{
background-color: crimson;
}
.todo_style .fa-times:hover .list_style{
color:crimson;
}
@media (max-width:768px)
{
.center_div{
width:55%;
}
}
.todo_style .fa-times{
margin:0 15px 0 15px;
display:flex;
justify-content:center;
align-items:center;
}
button {
margin-left:5px;
min-height:40px;
width: 40px;
color:#fff;
font-size:30px;
}
🎉😊
thank uh brother
thank you bro🥰
thankyou bro
bhaiyya source code upload karo plzzzz........waise aapke videos sach me awesoommeee and boommm h .... :) thankusomuch
I have created todolist 👍👍 source code are uploaded in my github id
ua-cam.com/video/kMKzzBMEqh8/v-deo.html Check this if you're interested in HapiJS. Full code given
@@ZahiidKhan262 give me the link
i learned a lot from this video.
Bhai shandar video hai yar
Bhai very helpful series. Thank you so much for making this series with projects.
Boohat hi kamal ki video
there is bug in this todolist. if you haven't typed any item and click add button it will add empty item :"
const add = () =>{
if(list != "")
{
setl((old)=>{
return [...old, list]
});
seti("");
}
}
just write if(item)
setItemList
@@ishrarchowdhury4850 😀thanks
onclick and onslect use karke aapne jo del action perform kiya he using props sir smagh me ni aaya
can any one please explain
what a teaching brother super.
thnx thapa love from bangladesh
so good presentation this video is so helpfull to me
Broo🔥you are awesome 🔥
thank you sir,
sir last wala section smjh nhi aaya apne jo link add kia wo kha se kia?? cross button add krne k liy ?
sir!! 23:04 why are we returning , why cant we do just [...oldItems, inputValue]
You are amazing better than udemy
aray bai kya hee bat ha ❤❤❤❤❤❤😘
You are very very great videos
Bhai editing k liye kya use krte ho. I m inspired from you
Your videos are amazing 👌 Can you please share the CSS file for this tutorial in the comment section
Hi Vinod, tag is not working,I am not able to put elements in new line.can you please suggest
Sir I find your every video interesting and I am from nepal.
Thanks, I made it!
Very Good Tutorials.... You are really talented person ....... We can see add and delete functionality works well and specially we like that it changes immediately. so my question is same add and delete immediate changes can we perform while fetching data from NodeJs/Mongo and add also ? I mean to say when we are dealing with dynamic database like mongodb ....
awesome sir ,nice video
kaint a bai ji sirra
Thapa sir is the best
One of the best
Hi thapa sir
Agher component na bnou tu sara kam ak he component ky ander karo tu item delete nahi huraha kindly guide me
great explaination sir
Thapa Ji Brilliant... Outstanding. Love to watch your videos and really inspiring me lots.
Content is very clear till mid and little confusing at the end 👍👎
line 37,38 --> { Item.map((itemval) = () => {
return ; })}
itemval is not defined ..how u got output ?
What u have done , have u got ur output
mera ek sawal hai,
Jab hum button click karte hai then jo map new task show karta hai toh vo phr se sarey elements shuru s render kar rha hai ya sirf naya vala jo add hua hai array mai ?
Like agar maanlo array m 3 tasks hai, mene ek aur banadia toh map dobara 4 k 4 ko render karega ya sirf ek last valey ko hi ?
when we return values in java script react then do the values automatically get display ! dont we need to write anything
aabe kitne perfect perfect bolte ho
Simpler way of writing delete function with the slice method
const deleteItem=(id)=>{
console.log(id);
const updatedElements = [...elements.slice(0, id), ...elements.slice(id+1)]
setElements(updatedElements);
}
Omagu turu lob 💞☺️☺️☺️👍👍👍
Can we use replace method for delete ?
Aap bhaut acche ho...thank u nd luv bro...itna badhiyan bataye but mujhe kaise patta chalega ki yaha ye sab sare function use karni h.. please aap suggest kro. Iska koi documentation de do please
Awsome, subbed.
can you make a number guessing game in React js as well? with reset, clear and submit button, or how many attempts are left?
great video ! Thanks,
Why do you use onselect() with deleteitems().? this is confusing. Can we do same thing with only deleteitem()?
Exactly, I also want to know.
I guess because deleteitems() value stored in onSelect() hope it will help.🙏
ua-cam.com/video/kMKzzBMEqh8/v-deo.html Check this if you're interested in HapiJS. Full code given
Onselect is not a method it is just an attribute, that is holding function.
@@manilavaswani154 onSelect was custom attribute. Not to confuse it with onSelect event handler in HTML. Though that was what creating too much confusion here in the video
Your videos are very helpful brother, Keep up the good work :)
yeah it was really a nice lecture but at last for deletion part i wasnt able to understand.
Can you tell us about Redux !!
const handleSubmit=()=>{
const combData = [...data, input]
setData(combData)
setInput('')
}
i think this is more simple for listOfItems code
ab aap programing ki job krte ho?
you r from virtual university of pakistan?
Thank you so much sir..
Awesomeee 👍
A great video to learn new things. Please make new awesome projects like this.
Excellent,
I want to add focus on input field after click on Add button, please let me know
bro your video is amazing. you don't share CSS file source code. can you share it? love from pakistan
I would like to tell ki jo app tumne banayi hai usme agar me text box me kuch nahi likhu aur sirf add button pe click karu toh bhi item add ho raha hai array me
AND BOOM GUYZ🧨🔥
Sir 27 minutes pe ... jab hum button pe click kr rhy hen to sath numbers b show horhy hen k kitni baar click hua.. woh apnay to btaya he nahj
i love u bro u helped me alot
34:03 ye link hum kaha se le ??
Same bro
there is a small problem if you click + without typing anything you are still going to get delete button
sir,select me argument diya toh wo delete ke andar kese pass ho gya pls btaao ??????????
kafin messed up hain ye chi
Great explanation
Vinod sir kya Aap react native ka full video nhi banaya h kya ????????
Great tutorial 🙇♂️
Bro What Should I learn first in Javascript - What is the roadmap.
Check my JavaScript series roadmap miljayega
Sir!!When i start my react js app it display my home page content properly but when i click other sub pages like about, contact its doesn't display anything olny showing navbar and updated filepath in browser how can i solve this ? Pls help how can i display other subpages content in my browser
hmm while loop b lga skte thay hainaa ?
hello sir agar hum aise hi koi small project bana rahe he or aapne jese ek park ka alag component create kiya wo kese pata chale k hame konsa part ka alag component banana hai ....plz sir iske par 1 video banaiye
great content 😍
Bro css ka code de diya karo it is ok if you are not give the js code but you should give the code for styling