source code agr chahye to le lo body{ background-color: #b2aba9; } .container{ background-color: hsl(0, 0%, 95%); justify-content: center; width: 50%; margin-left: 26%; margin-top: 5%; text-align: center; } input [type=text], select { width: 80%; padding: 12px 20px; margin: 8px 0; display: inline-block; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; } input[type=password], select{ width: 80%; padding: 12px 20px; margin: 8px 0; display: inline-block; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; } button{ width:30%; background-color: #fd0707; color: white; padding: 14px 20px; margin: 8px 0; border: none; border-radius: 4px; cursor: pointer; } button:hover { background-color: #19ed78; } .header{ background-color: rgb(75, 150, 86); padding: 10px 20px; color: white; } .ui-define{ background-color: rgb(243, 240, 243); margin-left: 25%; width: 50%; padding: 20px 30px; margin-top: 5%; } import React, { useEffect, useState } from "react"; function Form() { const data = { name: "", email: "", password: "" }; const [inputData, setInputData] = useState(data); const [flag, setFlag] = useState(false); useEffect(() => {}, [flag]); function handleData(e) { setInputData({ ...inputData, [e.target.name]: e.target.value }); console.log(inputData); } function handleSubmit(e) { e.preventDefault(); if (!inputData.name || !inputData.email || !inputData.password) { alert("all fields are required"); } else { setFlag(true); } } return ( <> <pre> {flag ? ( <h2 className="ui-define"> {" "} hello {inputData.name}, you have Registered successfully </h2> ) : ( "" )} </pre> <form className="container" onSubmit={handleSubmit}> <div className="header"> <h1>Registration form </h1> </div> <div> <input type="text" placeholder="Enter Your Name" name="name" value={inputData.name} onChange={handleData} ></input> </div> <div> <input type="text" placeholder="Enter Your email" name="email" value={inputData.email} onChange={handleData} ></input> </div> <div> <input type="text" placeholder="Enter Your Password" name="password" value={inputData.password} onChange={handleData} ></input> </div> <div> <button type="submit">submit</button> </div> </form> </> ); } export default Form; // video starts at 11:00 // import React, { useState } from "react"; // function Form() { // const data = { name: "", email: "", password: "" }; // const [inputData, setInputData] = useState(data); // function handleData(e) { // setInputData({ ...inputData, [e.target.name]: e.target.value }); // console.log(inputData); // } // function handleSubmit(e) { // e.preventDefault(); // } // return ( // <form className="container" onSubmit={handleSubmit}> // <div className="header"> // <h1>Registration form </h1> // </div> // <div> // <input // type="text" // placeholder="Enter Your Name" // name="name" // value={inputData.name} // onChange={handleData} // ></input> // </div> // <div> // <input // type="text" // placeholder="Enter Your email" // name="email" // value={inputData.email} // onChange={handleData} // ></input> // </div> // <div> // <input // type="text" // placeholder="Enter Your Password" // name="password" // value={inputData.password} // onChange={handleData} // ></input> // </div> // <div> // <button type="submit">submit</button> // </div> // </form> // ); // } // export default Form;

source code agr chhaye to le lo body{ background-color: #525b6d; } .app{ text-align: center; } .container{ background-color: rgb(37, 116, 129); justify-content: center; width: 50%; margin-left: 26%; margin-top: 5%; text-align: center; padding: 20px; } input[type=text], select{ width: 80%; padding: 12px 20px; margin: 30px 0; display: inline-block; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; } button{ width:15%; background-color: #fb1212; color: black; padding: 14px 20px; margin: 8px 0; border: none; border-radius: 4px; cursor: pointer; font-weight: bold; } button:hover{ background-color: #45a049; } .header{ width:100%; padding: 12px 20px; color: white; font-size: 50px; font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; } .List-heading{ color: rgb(15,14,14); font-size: 50px; font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; text-align: left; background-color: cadetblue; width: 60%; } .listData{ color:black; font-size: 20px; background-color: rgb(164,203,237); text-align: left; padding-left: 30px; width: 53%; padding-bottom: 2%; padding-top: 2%; border-radius: 10px; } .btn-position{ position: relative; left:11%; top:-54px; } import React, { useState } from "react"; import "./App.css"; function TodoList() { const [activity, setActivity] = useState(""); const [listData, setlistData] = useState([]); function addActivity() { setlistData([...listData, activity]); console.log(listData); setActivity(""); } function removeActivity(index) { const updatedListData = listData.filter((elem, id) => { return index != id; }); setlistData(updatedListData); } function removeAll() { setlistData([]); } return (<> <div className="container" > <div className="header" > TODO list </div> <input type="text" placeholder="Add Activity" value={activity} onChange={ (e) => { setActivity(e.target.value); } } > </input> <button onClick={addActivity} > Add </button> <p className="List-heading" > Here Is Your List </p> { listData != [] && listData.map((curelem, index) => (<> <div className="listData" key={index} > {curelem} </div> <div > <button className="btn-position" onClick={ () => removeActivity(index) } > Remove(-) </button> </div> </> )) } { listData.length >= 1 && <button onClick={removeAll} > Remove All </button>} </ div> </> ); } export default TodoList;

GOOD❤

TOP CLASS❤❤❤❤❤❤❤

TOP CLASS❤

Ma'am aap vahut achi tarah se samghaati and most important thing your vice is very lovely. so thanks a lot.

What is ATS ?

Thank you so much mam, bahut ache se samjhaya he apne, mazza aa gaya mam. keep making such conceptual topics video.

Beautifully Explained 🔥🔥🔥

hello didi meri hope totati jaa jari hai job nhi mil rahi hai

Thank you so much mam bahut ache se samjha dia apne.

Hey Yoshita ! Could you please help? It's been more than 6 months since I have joined one company as a react js developer. Initially they gave me some react & angular project. But now they started giving me some other tech which is not helping and I feel like I'm degrading myself. The pay is very average. The issue I have signed a contract with them for 2 years. So I can't leave. Could you please suggest something?

Well done! I ws struggling frm a week n finally got this one, concepts r cleared. Thanku so much for these amazing videos. Keep it up👍

Thank you so much mam.

you should also explain TDZ

very nice video

Mera government job preparation ka chalte 7 years ka gap ho gya...now I m learning frontend web development...kya mujhe job mil sakti in IT ??

Ma'am aapke react js videos kaafi helpful h.... mujhe bahut simple way m sikhne ko mila h...... but kb or kahan kya components use kre real web development m.. isme thoda problem hoti h

ye aapne {count } jo likha hain iska kya matlab hai or ye aise kyu likha hain

Thanks you 😊

Tutorial for web socket?

Typescript ka khatam ho gaya Kiya ?

Ma'am hmara resume ATS PASS kr skta h use check krne k liye koi tool h kya ?

Perfect Explaination

Thanks didi

Could you please share the theory document as well.?

hello mam! i have 5 skills i.e html, css, js, react and tailwindcss. And made a news website and ecommerce website.. is it good enough for taking freshers job or internship?

Thank you❤

this playlist is so helpful

when see redux tutorial after completing react tutorial na

maam is this playlist complete ? REACT is finished with this video?

Sometimes luck also matters Ma'am, I've tried this but it didn't work,but I've not give up yet...

I am facing this problem while working on Google search frequently pop uping

please take javascript .and also how to connect with database using hooks, nodejs,expressjs

Well explained ma'am you are the best teacher thank you so much ma'am 🥰❣️❣️

simply the best your videos; as you are; you are also simply the best.

why not direct use <ChildC name={name} /> in App.js?

React Hook useCallback has an unnecessary dependency: 'count'. Either exclude it or remove the dependency array react-hooks/exhaustive-deps ----When i put count as a dependency in the array of useCallback. why so

Thanks

Ma am me web development kr raha ho muhe html or css aati hai or abhi react kr raha ho muje job cahiye kese kru pzzz suggestion dedo

Nice Great job 🎉

crystal clear explanation

Greet explanation buddy 😃

saras

Thanks Yoshita🤝

Please share notes PDF

If anyone want to withdraw the form in Accenture..can you tell me the process?

Mam react typescript ki series khatam ho gyi kya? Ya abhi aur videoes aangi

uff thank you yoshitaa i was finding hard time learning useContext() thank you this is the easiest tutorial ever

you are beautifull sexy