├── README.md
├── src
    ├── Point of Sale
    │   ├── PointOfSaleData.js
    │   ├── Quantity.jsx
    │   └── PointOfSale.jsx
    ├── views
    │   ├── Home.jsx
    │   ├── Features.jsx
    │   ├── Pricing.jsx
    │   ├── FormState.jsx
    │   └── Form.jsx
    ├── components
    │   ├── Todo app
    │   │   ├── Todoo.jsx
    │   │   ├── Todo.jsx
    │   │   ├── TodoApp.jsx
    │   │   └── NewTodo.jsx
    │   ├── pricing
    │   │   ├── PricingInfo.jsx
    │   │   ├── PricingDetails.jsx
    │   │   └── PricingCard.jsx
    │   ├── mock-data
    │   │   └── pricing-card-data.js
    │   └── Header.jsx
    ├── setupTests.js
    ├── App.test.js
    ├── App.js
    ├── reportWebVitals.js
    ├── index.js
    ├── Todo App
    │   ├── Todo.jsx
    │   └── Index.jsx
    ├── index.css
    └── CounterApp
    │   ├── Counter.jsx
    │   └── Counters.jsx
├── public
    ├── robots.txt
    ├── favicon.ico
    ├── logo192.png
    ├── logo512.png
    ├── manifest.json
    └── index.html
├── test.js
├── .gitignore
├── .vscode
    └── launch.json
└── package.json


/README.md:
--------------------------------------------------------------------------------
1 | # My React App For Pracctice


--------------------------------------------------------------------------------
/src/Point of Sale/PointOfSaleData.js:
--------------------------------------------------------------------------------
1 | const PointOfSaleData = [
2 |   {
3 |     
4 |   }
5 | ]


--------------------------------------------------------------------------------
/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/masud-pervez/react-basic-problem/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/masud-pervez/react-basic-problem/HEAD/public/logo192.png


--------------------------------------------------------------------------------
/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/masud-pervez/react-basic-problem/HEAD/public/logo512.png


--------------------------------------------------------------------------------
/test.js:
--------------------------------------------------------------------------------
1 | // const maxId = Math.max(...[{id: 1},{id: 1},{id: 1},{id: 1},{id: 1},{id: 1},{id: 2}].map(item => item.id));
2 | 
3 | // console.log(maxId+1)


--------------------------------------------------------------------------------
/src/views/Home.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | 
3 | const Home = () => {
4 |   return (
5 |     <div>home</div>
6 |   )
7 | }
8 | 
9 | export default Home


--------------------------------------------------------------------------------
/src/components/Todo app/Todoo.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | 
3 | export default function Todoo({todo}) {
4 |   return (
5 |     <p>{todo}</p>
6 |   )
7 | }
8 | 


--------------------------------------------------------------------------------
/src/views/Features.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | 
3 | const Features = () => {
4 |   return (
5 |     <div>features</div>
6 |   )
7 | }
8 | 
9 | export default Features


--------------------------------------------------------------------------------
/src/setupTests.js:
--------------------------------------------------------------------------------
1 | // jest-dom adds custom jest matchers for asserting on DOM nodes.
2 | // allows you to do things like:
3 | // expect(element).toHaveTextContent(/react/i)
4 | // learn more: https://github.com/testing-library/jest-dom
5 | import '@testing-library/jest-dom';
6 | 


--------------------------------------------------------------------------------
/src/App.test.js:
--------------------------------------------------------------------------------
1 | import { render, screen } from '@testing-library/react';
2 | import App from './App';
3 | 
4 | test('renders learn react link', () => {
5 |   render(<App />);
6 |   const linkElement = screen.getByText(/learn react/i);
7 |   expect(linkElement).toBeInTheDocument();
8 | });
9 | 


--------------------------------------------------------------------------------
/src/components/Todo app/Todo.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import Todoo from './Todoo';
 3 | 
 4 | export default function Todo(props) {
 5 |   return (
 6 |     <div>
 7 |         {props.todos.map((todo ,inx) => (
 8 |           <Todoo key={inx} todo={todo} />
 9 |         ))}
10 |     </div>
11 |   )
12 | }
13 | 


--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
 1 | import 'bootstrap/dist/css/bootstrap.min.css';
 2 | import 'antd/dist/antd.css';
 3 | import PointOfSale from './Point of Sale/PointOfSale';
 4 | 
 5 | 
 6 | function App() {
 7 |   return (
 8 |     <div>
 9 |       <div className='container'>
10 |         <PointOfSale/>
11 |       </div>      
12 |     </div>
13 |   );
14 | }
15 | 
16 | export default App;
17 | 


--------------------------------------------------------------------------------
/src/views/Pricing.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import PricingDetails from '../components/pricing/PricingDetails'
 3 | import PricingInfo from '../components/pricing/PricingInfo'
 4 | 
 5 | const Pricing = () => {
 6 |   return (
 7 |     <main className=''>
 8 |       <PricingInfo />
 9 |       <PricingDetails />
10 |     </main>
11 |   )
12 | }
13 | 
14 | export default Pricing


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # production
12 | /build
13 | 
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 | 
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 | 


--------------------------------------------------------------------------------
/src/reportWebVitals.js:
--------------------------------------------------------------------------------
 1 | const reportWebVitals = onPerfEntry => {
 2 |   if (onPerfEntry && onPerfEntry instanceof Function) {
 3 |     import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
 4 |       getCLS(onPerfEntry);
 5 |       getFID(onPerfEntry);
 6 |       getFCP(onPerfEntry);
 7 |       getLCP(onPerfEntry);
 8 |       getTTFB(onPerfEntry);
 9 |     });
10 |   }
11 | };
12 | 
13 | export default reportWebVitals;
14 | 


--------------------------------------------------------------------------------
/src/components/pricing/PricingInfo.jsx:
--------------------------------------------------------------------------------
 1 | import React from "react"
 2 | export default function PricingInfo(){
 3 |     return (
 4 |         <section>
 5 |           <div className='text-center p-5'>
 6 |             <h2>Pricing</h2>
 7 |             <p>Quickly build an effective pricing table for your potential customers with this Bootstrap example. It’s built with default Bootstrap components and utilities with little customization.</p>
 8 |           </div>
 9 |         </section>
10 |     )
11 | }


--------------------------------------------------------------------------------
/.vscode/launch.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   // Use IntelliSense to learn about possible attributes.
 3 |   // Hover to view descriptions of existing attributes.
 4 |   // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
 5 |   "version": "0.2.0",
 6 |   "configurations": [
 7 |     {
 8 |       "type": "pwa-chrome",
 9 |       "request": "launch",
10 |       "name": "Launch Chrome against localhost",
11 |       "url": "http://localhost:8080",
12 |       "webRoot": "${workspaceFolder}"
13 |     }
14 |   ]
15 | }


--------------------------------------------------------------------------------
/src/components/pricing/PricingDetails.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import PricingCard from './PricingCard'
 3 | import { pricingData } from '../../mock-data/pricing-card-data'
 4 | 
 5 | export default function PricingDetails() {
 6 | 
 7 |   return (
 8 |     <section className=''>
 9 |       <div className='row'>
10 |         {
11 |           pricingData.map(item => (
12 |             <PricingCard key={item.id} data={item} />
13 |           ))
14 |         }
15 |       </div>
16 |     </section>
17 |   )
18 | }
19 | 


--------------------------------------------------------------------------------
/src/components/Todo app/TodoApp.jsx:
--------------------------------------------------------------------------------
 1 | import React, { useState } from 'react'
 2 | import NewTodo from './NewTodo'
 3 | import Todo from './Todo'
 4 | 
 5 | // const dummytodos = ["todo1","todo2"]
 6 | 
 7 | export default function TodoApp() {
 8 | 
 9 |   const [todos,setTodos] = useState([]);
10 | 
11 |   const handleNewTodo =(newTodo) =>{
12 |     setTodos([...todos , newTodo]);
13 |   };
14 | 
15 |   return (
16 |     <div>
17 |       <NewTodo onTodo={handleNewTodo}/>
18 |       <Todo todos={todos}  />
19 |     </div>
20 |   )
21 | }
22 | 


--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "React App",
 3 |   "name": "Create React App Sample",
 4 |   "icons": [
 5 |     {
 6 |       "src": "favicon.ico",
 7 |       "sizes": "64x64 32x32 24x24 16x16",
 8 |       "type": "image/x-icon"
 9 |     },
10 |     {
11 |       "src": "logo192.png",
12 |       "type": "image/png",
13 |       "sizes": "192x192"
14 |     },
15 |     {
16 |       "src": "logo512.png",
17 |       "type": "image/png",
18 |       "sizes": "512x512"
19 |     }
20 |   ],
21 |   "start_url": ".",
22 |   "display": "standalone",
23 |   "theme_color": "#000000",
24 |   "background_color": "#ffffff"
25 | }
26 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom/client';
 3 | import './index.css';
 4 | import App from './App';
 5 | import reportWebVitals from './reportWebVitals';
 6 | // import MyApp from './MyApp';
 7 | 
 8 | const root = ReactDOM.createRoot(document.getElementById('root'));
 9 | root.render(
10 |   <React.StrictMode>
11 |     <App />
12 |   </React.StrictMode>
13 | );
14 | 
15 | // If you want to start measuring performance in your app, pass a function
16 | // to log results (for example: reportWebVitals(console.log))
17 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
18 | reportWebVitals();
19 | 


--------------------------------------------------------------------------------
/src/components/Todo app/NewTodo.jsx:
--------------------------------------------------------------------------------
 1 | import React, { useState } from "react";
 2 | 
 3 | export default function NewTodo({onTodo}) {
 4 |   
 5 |   const [todo, setTodo] = useState("");
 6 | 
 7 |   const handleInputChange = (event) =>{
 8 |     setTodo(event.target.value)
 9 |   }
10 | 
11 |   const handlesubmit = (event)=>{
12 |     event.preventDefault();
13 |     onTodo(todo);
14 |   }
15 | 
16 |   return (
17 |     <form onSubmit={handlesubmit}>
18 |       <label className="form-label" htmlFor="todo">
19 |         New Todo
20 |       </label>
21 |       <input
22 |         type="text"
23 |         className="form-control"
24 |         id="todo"
25 |         name="todo"
26 |         value={todo}
27 |         onChange={handleInputChange}
28 |       />
29 | 
30 |       <button className="btn btn-danger my-4">Add todo</button>
31 |     </form>
32 |   );
33 | }
34 | 


--------------------------------------------------------------------------------
/src/Point of Sale/Quantity.jsx:
--------------------------------------------------------------------------------
 1 | import React, { useState } from "react";
 2 | 
 3 | export default function Quantity({childToParent}) {
 4 |   const [quantity, setQuantity] = useState(1);
 5 |   
 6 |   const handleIncrement = ()=>{
 7 |     setQuantity(quantity + 1)
 8 |     childToParent(quantity)
 9 |   };
10 |   const handleDecrement = ()=>{
11 |     setQuantity(quantity - 1)
12 |     childToParent(quantity)
13 |   };
14 | 
15 | 
16 |   return (
17 |     <div>
18 |       <button
19 |         type="button"
20 |         className="btn btn-outline-info px-2 py-0 mx-2"
21 |         onClick={handleIncrement}
22 |       >
23 |         +
24 |       </button>
25 | 
26 |       <button
27 |         type="button"
28 |         className="btn btn-outline-danger px-2 py-0"
29 |         onClick={handleDecrement}
30 |       >
31 |         -
32 |       </button>
33 |     </div>
34 |   );
35 | }
36 | 


--------------------------------------------------------------------------------
/src/Todo App/Todo.jsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { DeleteOutlined, EditOutlined } from "@ant-design/icons";
 3 | import { Tooltip } from "antd";
 4 | export default function Todo({value , idx, handleDelete ,handleEdit}) {
 5 |   return (
 6 |     <div className="">
 7 |       <div className="alert alert-info display-content shadow-sm mt-3 py-2" role="alert">
 8 |         <span className="text-dark fs-6">{value}</span>
 9 |         <span className="float-end mx-2">
10 |           <Tooltip title='Delete' placement="right" color='red'>
11 |             <DeleteOutlined className="delete-btn fs-6"  onClick={() => handleDelete(idx)}/>
12 |           </Tooltip>
13 |         </span>
14 |         <span className="float-end">
15 |           <Tooltip title="Edit" placement="bottom" color='green'>
16 |             <EditOutlined className="edit-btn fs-6" onClick={() => handleEdit(idx)}/>
17 |           </Tooltip>
18 |         </span>
19 |       </div>
20 |     </div>
21 |   );
22 | }
23 | 


--------------------------------------------------------------------------------
/src/components/pricing/PricingCard.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | const PricingCard = ({ data }) => {
 4 |   return (
 5 |     <div className='col-4'>
 6 |         <div className={`card ${data.borderStyle}`}>
 7 |         <div className={`card-header h5 ${data.headerStyle}`}>
 8 |           {data.headerTitle}
 9 |         </div>
10 |         <div className="card-body text-center">
11 |             <div><span className='h4 fw-bold'>${data.price}</span><span className='text-muted'>/mo</span></div>
12 |             <div className='my-3'>
13 |             <div>{data.users} users included</div>
14 |             <div>{data.storage} GB of storage</div>
15 |             <div>{data.support}</div>
16 |             {data.helpCenterAccess && <div>Help center access</div>}
17 |             </div> 
18 |             <div className=''>
19 |             <button className={`btn ${data.buttonStyle}`}>{data.buttonTitle}</button>
20 |             </div>                 
21 |         </div>
22 |         </div>
23 |     </div>
24 |   )
25 | }
26 | 
27 | export default PricingCard


--------------------------------------------------------------------------------
/src/components/mock-data/pricing-card-data.js:
--------------------------------------------------------------------------------
 1 | export const pricingData = [
 2 |   { 
 3 |     id: 1,
 4 |     headerTitle: "Free", 
 5 |     headerStyle: "",
 6 |     price: 0,
 7 |     users: 10,
 8 |     storage: 2,
 9 |     support: "Email support",
10 |     helpCenterAccess: true,
11 |     buttonTitle: "Sign up for Free",
12 |     buttonStyle: "btn-outline-primary",
13 |     borderStyle: ""
14 |   },
15 |   { 
16 |     id: 2,
17 |     headerTitle: "Pro", 
18 |     headerStyle: "",
19 |     price: 15,
20 |     users: 20,
21 |     storage: 10,
22 |     support: "Priority Email",
23 |     helpCenterAccess: true,
24 |     buttonTitle: "Get Started",
25 |     buttonStyle: "btn-primary",
26 |     borderStyle: ""
27 |   },
28 |   { 
29 |     id: 3,
30 |     headerTitle: "Enterprize", 
31 |     headerStyle: "bg-primary text-light",
32 |     price: 29,
33 |     users: 30,
34 |     storage: 15,
35 |     support: "Phone and email support",
36 |     helpCenterAccess: true,
37 |     buttonTitle: "Contact Us",
38 |     buttonStyle: "btn-primary",
39 |     borderStyle: "border border-primary"
40 |   }
41 | ]


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "myapp",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "@testing-library/jest-dom": "^5.16.4",
 7 |     "@testing-library/react": "^13.1.1",
 8 |     "@testing-library/user-event": "^13.5.0",
 9 |     "antd": "^4.20.7",
10 |     "aos": "^2.3.4",
11 |     "bootstrap": "^5.1.3",
12 |     "bootstrap-icons": "^1.8.3",
13 |     "react": "^18.0.0",
14 |     "react-dom": "^18.0.0",
15 |     "react-icons": "^4.4.0",
16 |     "react-scripts": "5.0.1",
17 |     "uuid": "^8.3.2",
18 |     "web-vitals": "^2.1.4"
19 |   },
20 |   "scripts": {
21 |     "start": "react-scripts start",
22 |     "build": "react-scripts build",
23 |     "test": "react-scripts test",
24 |     "eject": "react-scripts eject"
25 |   },
26 |   "eslintConfig": {
27 |     "extends": [
28 |       "react-app",
29 |       "react-app/jest"
30 |     ]
31 |   },
32 |   "browserslist": {
33 |     "production": [
34 |       ">0.2%",
35 |       "not dead",
36 |       "not op_mini all"
37 |     ],
38 |     "development": [
39 |       "last 1 chrome version",
40 |       "last 1 firefox version",
41 |       "last 1 safari version"
42 |     ]
43 |   }
44 | }
45 | 


--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |   margin: 0;
 3 |   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
 4 |     'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
 5 |     sans-serif;
 6 |   -webkit-font-smoothing: antialiased;
 7 |   -moz-osx-font-smoothing: grayscale;
 8 |   background: linear-gradient(10deg, rgba(18,222,224,1) 0%, rgba(122,226,170,1) 100%);
 9 |   background-repeat: no-repeat;
10 |   height: 100vh;
11 |   
12 | }
13 | 
14 | code {
15 |   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
16 |     monospace;
17 | }
18 | 
19 | .delete-btn{
20 |   padding: 1px;
21 |   border: 1px solid #055160;
22 |   border-radius: 2px;
23 |   transition: all 0.1s;
24 |   color: #055160;
25 |   cursor:pointer;
26 | }
27 | .delete-btn:hover{
28 |   border-color: #F92F60;
29 |   color: #F92F60;
30 | }
31 | 
32 | .edit-btn{
33 |   padding: 1px;
34 |   border: 1px solid #055160;
35 |   border-radius: 2px;
36 |   transition: all 0.1s;
37 |   color: #055160;
38 |   cursor:pointer;
39 | }
40 | .edit-btn:hover{
41 |   border-color: #2cc331;
42 |   color: #2cc331;
43 | }
44 | 
45 | .display-content:hover{
46 |   background: linear-gradient(90deg, rgba(122,226,170,1) 0%,  rgba(18,222,224,1) 100%);
47 |   transition:all 0.5s;
48 | }


--------------------------------------------------------------------------------
/src/components/Header.jsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | 
 3 | export default function Header(){
 4 |     return (
 5 |       <header className='bg-warning'>
 6 |         <nav className="navbar navbar-expand-lg navbar-light bg-light">
 7 |           <div className="container-fluid">
 8 |             <a className="navbar-brand" href="#">Navbar</a>
 9 |             <button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
10 |               <span className="navbar-toggler-icon"></span>
11 |             </button>
12 |             <div className="collapse navbar-collapse" id="navbarNav">
13 |               <ul className="navbar-nav">
14 |                 <li className="nav-item">
15 |                   <a className="nav-link active" aria-current="page" href="#">Home</a>
16 |                 </li>
17 |                 <li className="nav-item">
18 |                   <a className="nav-link" href="#">Features</a>
19 |                 </li>
20 |                 <li className="nav-item">
21 |                   <a className="nav-link" href="#">Pricing</a>
22 |                 </li>
23 |                 <li className="nav-item">
24 |                   <a className="nav-link disabled" href="#" tabIndex="-1" aria-disabled="true">Disabled</a>
25 |                 </li>
26 |               </ul>
27 |             </div>
28 |           </div>
29 |         </nav>
30 |       </header>
31 |     )
32 |   }


--------------------------------------------------------------------------------
/src/CounterApp/Counter.jsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | 
 3 | export default function Counter( { handleClick , idx , item={} , handleDelete} ) {
 4 |   return (
 5 |     <div className="col-md-4">
 6 |       <div className="card my-3 shadow">
 7 |         <div className="card-header">
 8 |           <span className="fs-4 badge bg-warning">#{item.id}</span>
 9 |           <button 
10 |             className="btn-close pe-auto fs-5 float-end"
11 |             onClick={()=>handleDelete(idx)}
12 |             >
13 |           </button>
14 |         </div>
15 |         <div className="card-body">
16 |           <h3 className="text-center">
17 |             <span
18 |               className={`badge bg-${
19 |                 item.value === 0 ? "secondary" : item.value > 0 ? "primary" : "danger"
20 |               }`}
21 |             >
22 |               {item.value}
23 |             </span>
24 |           </h3>
25 |           <div className="text-center py-4">
26 |             <button
27 |               type="button"
28 |               onClick={() => handleClick(idx,"increment")}
29 |               className="btn btn-primary"
30 |             >
31 |               Increment
32 |             </button>
33 |             <button
34 |               type="button"
35 |               onClick={() => handleClick(idx,"reset")}
36 |               className="btn btn-secondary mx-4"
37 |             >
38 |               Reset
39 |             </button>
40 |             <button
41 |               type="button"
42 |               onClick={() => handleClick(idx,"decrement")}
43 |               className="btn btn-danger"
44 |             >
45 |               Decrement
46 |             </button>
47 |           </div>
48 |         </div>
49 |       </div>
50 |     </div>
51 |   );
52 | }
53 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 7 |     <meta name="theme-color" content="#000000" />
 8 |     <meta
 9 |       name="description"
10 |       content="Web site created using create-react-app"
11 |     />
12 |     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
13 |     <!--
14 |       manifest.json provides metadata used when your web app is installed on a
15 |       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
16 |     -->
17 |     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
18 |     <!--
19 |       Notice the use of %PUBLIC_URL% in the tags above.
20 |       It will be replaced with the URL of the `public` folder during the build.
21 |       Only files inside the `public` folder can be referenced from the HTML.
22 | 
23 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
24 |       work correctly both with client-side routing and a non-root public URL.
25 |       Learn how to configure a non-root public URL by running `npm run build`.
26 |     -->
27 |     <title>React App</title>
28 |   </head>
29 |   <body>
30 |     <noscript>You need to enable JavaScript to run this app.</noscript>
31 |     <div id="root"></div>
32 |     <!--
33 |       This HTML file is a template.
34 |       If you open it directly in the browser, you will see an empty page.
35 | 
36 |       You can add webfonts, meta tags, or analytics to this file.
37 |       The build step will place the bundled scripts into the <body> tag.
38 | 
39 |       To begin the development, run `npm start` or `yarn start`.
40 |       To create a production bundle, use `npm run build` or `yarn build`.
41 |     -->
42 |   </body>
43 | </html>
44 | 


--------------------------------------------------------------------------------
/src/CounterApp/Counters.jsx:
--------------------------------------------------------------------------------
 1 | import React, { useState } from "react";
 2 | import Counter from "./Counter";
 3 | 
 4 | export default function Counters() {
 5 |   const [counters, setCounters] = useState([]);
 6 | 
 7 |   const handleClick = (id, type) => {
 8 |     const newCounters = [...counters];
 9 |     type === "increment"
10 |       ? newCounters[id].value++
11 |       : type === "decrement"
12 |       ? newCounters[id].value--
13 |       : (newCounters[id].value = 0);
14 |     setCounters(newCounters);
15 |   };
16 | 
17 |   const handleDelete = (id) => {
18 |     const newCounter = counters.filter((hg, indx) => indx !== id);
19 |     setCounters(newCounter);
20 |   };
21 | 
22 |   const handleResetAll = () => {
23 |     const newCounter = counters.map(( item ) => ({ ...item , value: 0 }));
24 |     setCounters(newCounter);
25 |   };
26 | 
27 |   const handleClear = () => {
28 |     setCounters([]);
29 |   };
30 | 
31 |   const handleAdd = () => {
32 |     const maxId =
33 |       counters.length < 1
34 |         ? 0
35 |         : Math.max(...[...counters].map((item) => item.id));
36 |     setCounters([...counters, { id: maxId + 1, value: 0 }]);
37 |   };
38 | 
39 |   return (
40 |     <div className="container">
41 |       <div className="row">
42 |         <div className="col-md-12 text-center text-md-start">
43 |           <button
44 |             type="button"
45 |             className="btn pe-auto btn-info text-light"
46 |             onClick={handleAdd}
47 |           >
48 |             Add Counter
49 |           </button>
50 |           <button
51 |             type="button"
52 |             className="btn pe-auto btn-danger m-4 text-light"
53 |             onClick={handleClear}
54 |           >
55 |             Clear
56 |           </button>
57 | 
58 |           <button
59 |             type="button"
60 |             className="btn pe-auto btn-warning "
61 |             onClick={handleResetAll}
62 |           >
63 |             Rest All
64 |           </button>
65 |         </div>
66 |       </div>
67 |       
68 |       <div className="row">
69 |         {counters.length > 0 ? (
70 |           counters.map((item, idx) => (
71 |             <Counter
72 |               key={idx}
73 |               item={item}
74 |               idx={idx}
75 |               handleClick={handleClick}
76 |               handleDelete={handleDelete}
77 |             />
78 |           ))
79 |         ) : (
80 |           <div className="col-md-3">
81 |             <div className="alert alert-danger shadow" role="alert">
82 |               Please add a counter
83 |             </div>
84 |           </div>
85 |         )}
86 |       </div>
87 |     </div>
88 |   );
89 | }
90 | 


--------------------------------------------------------------------------------
/src/views/FormState.jsx:
--------------------------------------------------------------------------------
 1 | import React, { useState } from 'react'
 2 | 
 3 | export default function Form() {
 4 |   const [formData, setFormData] = useState({})
 5 | 
 6 |   const handleChange = ({target}) => {
 7 |     const newFormData =  {...formData, [target.id]:target.value}
 8 |     // console.log(target.id, "===",target.value);
 9 |     setFormData(newFormData)
10 |   }
11 | 
12 |   const handleSubmit = (v) => {
13 |     v.preventDefault();
14 |     console.log("Form submited" ,v);
15 |   }
16 | 
17 |   return (
18 |     <div className="container">
19 |       <div className="row justify-content-center align-items-center">
20 |         <div className="col-md-6">
21 |           <form action="" onSubmit={handleSubmit} className='border my-5 p-3 shadow rounded'>
22 |             <div className='name my-3'>
23 |               <label htmlFor="name">Name</label>
24 |               <input
25 |                 className='form-control'
26 |                 onChange={handleChange}
27 |                 type="text"
28 |                 id='name'
29 |                 required
30 |               />
31 |             </div>
32 |             <div className='email my-3'>
33 |               <label htmlFor="email">Email</label>
34 |               <input
35 |                 className='form-control'
36 |                 // value={formData.email}
37 |                 onChange={handleChange}
38 |                 type="email"
39 |                 id='email'
40 |                 required
41 |               />
42 |             </div>
43 |             <div className='password my-3'>
44 |               <label htmlFor="password">Password</label>
45 |               <input
46 |                 className='form-control'
47 |                 // value={formData.password}
48 |                 onChange={handleChange}
49 |                 type="password" 
50 |                 id='password'
51 |                 required
52 |               />
53 |             </div>
54 |             <div className='submit my-3 text-center '>
55 |               <button 
56 |                 className='btn btn-info w-100 text-light'
57 |               >Submit</button>
58 |             </div>
59 |           </form>
60 |         </div>
61 | 
62 |         <div className="col-md-6">
63 |           <div className="card shadow">
64 |             <div className="card-head py-3 text-center">
65 |               <h1>Detail</h1>
66 |             </div>
67 |             <div className="card-body my-5">
68 |               <p><span className='badge bg-info'>Name</span> <span className='text-success'>{formData.name}</span></p>
69 |               <p><span className='badge bg-primary'>Email</span> <span className='text-success'>{formData.email}</span></p>
70 |               <p><span className='badge bg-info'>Password</span> <span className='text-success'>{formData.password}</span></p>
71 |             </div>
72 |           </div>
73 |         </div>
74 |       </div>
75 |     </div>
76 | 
77 | 
78 | 
79 |   )
80 | }
81 | 


--------------------------------------------------------------------------------
/src/views/Form.jsx:
--------------------------------------------------------------------------------
 1 | import React, { useState } from 'react'
 2 | 
 3 | 
 4 | export default function Form() {
 5 | 
 6 |   const [formData, setFormData] = useState({});
 7 | 
 8 |   const handleChange = ({target}) => {
 9 |     const newData = { ...formData, [target.id]: target.value};
10 |     setFormData(newData)
11 |   }
12 | 
13 |   const handleSubmit = (e) => {
14 |     e.preventDefault();
15 |     console.log("form is submited", formData);
16 |   }
17 | 
18 |   return (
19 |     <div className="container">
20 |       <div className="row justify-content-center align-items-center" style={{height:"100vh"}}>
21 |         <div className="col-md-4">
22 |           <form action="" onSubmit={handleSubmit} className='border p-3 shadow rounded'>
23 |             <div className='name my-3'>
24 |               <label htmlFor="name">Name</label>
25 |               <input
26 |                 className='form-control'
27 |                 value={formData.name}
28 |                 type="text"
29 |                 id='name'
30 |                 onChange={handleChange}
31 |                 required
32 |               />
33 |             </div>
34 |             <div className='email my-3'>
35 |               <label htmlFor="email">Email</label>
36 |               <input
37 |                 className='form-control'
38 |                 value={formData.email}
39 |                 type="email"
40 |                 id='email'
41 |                 onChange={handleChange}
42 |                 required
43 |               />
44 |             </div>
45 |             <div className='password my-3'>
46 |               <label htmlFor="password">Password</label>
47 |               <input
48 |                 className='form-control'
49 |                 value={formData.password}
50 |                 type="password" 
51 |                 id='password'
52 |                 onChange={handleChange}
53 |                 required
54 |               />
55 |             </div>
56 |             <div className='submit my-3 text-center '>
57 |               <button 
58 |                 className='btn btn-info w-100 text-light'
59 |               >Submit</button>
60 |             </div>
61 |           </form>
62 |         </div>
63 | 
64 |         <div className="col-md-4">
65 |           <div className="card shadow">
66 |             <div className="card-head py-3 text-center">
67 |               <h1>Detail</h1>
68 |             </div>
69 |             <div className="card-body my-5">
70 |               <p><span className='badge bg-info'>Name</span> <span className='text-success'>{formData.name}</span></p>
71 |               <p><span className='badge bg-primary'>Email</span> <span className='text-success'>{formData.email}</span></p>
72 |               <p><span className='badge bg-info'>Password</span> <span className='text-success'>{formData.password}</span></p>
73 |             </div>
74 |           </div>
75 |         </div>
76 |       </div>
77 |     </div>
78 | 
79 | 
80 | 
81 |   )
82 | }
83 | 


--------------------------------------------------------------------------------
/src/Todo App/Index.jsx:
--------------------------------------------------------------------------------
  1 | import React, { useState } from "react";
  2 | import Todo from "./Todo";
  3 | import { v4 as uuidv4 } from "uuid";
  4 | import { Button, Tooltip } from "antd";
  5 | import { FiSend } from "react-icons/fi";
  6 | import { GrUpdate } from "react-icons/gr";
  7 | 
  8 | export default function Index() {
  9 |   // all state defined here
 10 |   const [content, setContent] = useState("");
 11 |   const [items, setItems] = useState([]);
 12 |   const [toggleSubmit, setToggleSubmit] = useState(true);
 13 |   const [edited, setEdited] = useState(null);
 14 | 
 15 |   // all handle proseser will work here in the main root file
 16 |   const handleChange = (event) => {
 17 |     setContent(event.target.value);
 18 |   };
 19 | 
 20 |   const handleAdd = (event) => {
 21 | 
 22 |     if(!toggleSubmit){
 23 |       setItems(
 24 |         items.filter((elem) => {
 25 |           if (elem.id === edited) {
 26 |             return (elem.name = content);
 27 |           }
 28 |           return elem;
 29 |         })
 30 |       );
 31 |       setContent("");
 32 |     }else {
 33 |       setItems([...items, { id: uuidv4(), name: content }]);
 34 |       setContent("");
 35 |     }
 36 |     setToggleSubmit(true);
 37 |     event.preventDefault();
 38 |   };
 39 | 
 40 | 
 41 |   const handleDelete = (idx) => {
 42 |     const newItems = items.filter((item) => idx !== item.id);
 43 |     setItems(newItems);
 44 |   };
 45 | 
 46 |   const handleRemoveAll = () => {
 47 |     setItems([]);
 48 |     setToggleSubmit(true);
 49 |   };
 50 | 
 51 |   const handleEdit = (item) => {
 52 |     const newEditItem = items.find((elem) => {
 53 |       return elem.id === item;
 54 |     });
 55 |     setToggleSubmit(false);
 56 |     setContent(newEditItem.name);
 57 |     setEdited(item);
 58 |     
 59 |   };
 60 |   // return the DOM item
 61 |   return (
 62 |     <div
 63 |       className="row justify-content-center align-items-center"
 64 |       style={{ height: "100vh" }}
 65 |     >
 66 |       <div className="col-md-5">
 67 |         <div className="card shadow bg-muted ">
 68 |           <div className="card-header">
 69 |             <h6 className="text-muted ms-4">&#128221; Add your list here</h6>
 70 |           </div>
 71 |           <div className="card-body px-5">
 72 |             <form autoComplete="off" onSubmit={handleAdd}>
 73 |               <div className="input-group mb-3">
 74 |                 <input
 75 |                   required
 76 |                   type="text"
 77 |                   name="name"
 78 |                   className="form-control"
 79 |                   placeholder="&#x270D; write here"
 80 |                   value={content}
 81 |                   onChange={handleChange}
 82 |                 />
 83 | 
 84 |                 {toggleSubmit ? (
 85 |                   <Tooltip title="Submit" color="blue">
 86 |                     <button type="submit" className="btn btn-outline-primary">
 87 |                       <FiSend />
 88 |                     </button>
 89 |                   </Tooltip>
 90 |                 ) : (
 91 |                   <Tooltip title="Update" color="blue">
 92 |                     <button type="submit" className="btn btn-outline-primary">
 93 |                       <GrUpdate />
 94 |                     </button>
 95 |                   </Tooltip>
 96 |                 )}
 97 |               </div>
 98 |             </form>
 99 | 
100 |             {items.length > 0 &&
101 |               items.map((item) => (
102 |                 <Todo
103 |                   key={item.id}
104 |                   value={item.name}
105 |                   idx={item.id}
106 |                   handleDelete={handleDelete}
107 |                   handleEdit={handleEdit}
108 |                 />
109 |               ))}
110 | 
111 |             <div className="text-center">
112 |               <Button className="shadow-sm" onClick={handleRemoveAll}>
113 |                 Remove All
114 |               </Button>
115 |             </div>
116 |           </div>
117 |         </div>
118 |       </div>
119 |     </div>
120 |   );
121 | }
122 | 


--------------------------------------------------------------------------------
/src/Point of Sale/PointOfSale.jsx:
--------------------------------------------------------------------------------
  1 | import React, { useState } from "react";
  2 | import { AiOutlineDelete } from "react-icons/ai";
  3 | import Quantity from "./Quantity";
  4 | 
  5 | export default function PointOfSale() {
  6 |   const [product, setProduct] = useState("");
  7 |   const [productDetails, setProductDetails] = useState([]);
  8 |   const [quantity,setQuantity] = useState(1)
  9 |   const handleChange = ({ target }) => {
 10 |     setProduct(target.value);
 11 |   };
 12 | 
 13 |   const handleSubmit = (e) => {
 14 |     e.preventDefault();
 15 |     const maxId =
 16 |       productDetails.length < 1
 17 |         ? 0
 18 |         : Math.max(...[...productDetails].map((item) => item.id));
 19 | 
 20 |     if (product === "Ice-Cream") {
 21 |       const data = {
 22 |         id: maxId + 1,
 23 |         name: "Ice-Cream",
 24 |         cost: 15,
 25 |         code: "A4254",
 26 |         price: 0,
 27 |         quantity
 28 |       };
 29 |       const newProductDetails = [...productDetails, data];
 30 |       setProductDetails(newProductDetails);
 31 |     }
 32 | 
 33 |     if (product === "Cocolate") {
 34 |       const data = {
 35 |         id: maxId + 1,
 36 |         name: "Cocolate",
 37 |         cost: 10,
 38 |         code: "A4424",
 39 |         price: 0,
 40 |         quantity
 41 |       };
 42 |       const newProductDetails = [...productDetails, data];
 43 |       setProductDetails(newProductDetails);
 44 |     }
 45 | 
 46 |     if (product === "Cold-Drinks") {
 47 |       const data = {
 48 |         id: maxId + 1,
 49 |         name: "Cold-Drinks",
 50 |         cost: 25,
 51 |         code: "A4224",
 52 |         price: 0,
 53 |         quantity
 54 |       };
 55 |       const newProductDetails = [...productDetails, data];
 56 |       setProductDetails(newProductDetails);
 57 |     }
 58 |     setProduct("");
 59 |     // setQuantity(1)
 60 |   };
 61 | 
 62 |   const childToParent = (data) => {
 63 |     setQuantity(data);
 64 |   }
 65 |   const handleDelete = (id) => {
 66 |     const newProductDetails = productDetails.filter((item, idx) => idx !== id);
 67 |     setProductDetails(newProductDetails);
 68 |   };
 69 | 
 70 |   return (
 71 |     <div className="container">
 72 |       <div
 73 |         className="row justify-content-center align-items-center"
 74 |         style={{ height: "100vh" }}
 75 |       >
 76 |         <div className="col-md-10">
 77 |           <div className="card">
 78 |             <div className="card-body p-5">
 79 |               <form onSubmit={handleSubmit}>
 80 |                 <label htmlFor="product" className="form-label">
 81 |                   Product
 82 |                 </label>
 83 |                 <select
 84 |                   className="form-select form-select-sm w-25"
 85 |                   id="product"
 86 |                   onChange={handleChange}
 87 |                 >
 88 |                   <option value="">Select Product</option>
 89 |                   <option value="Ice-Cream">Ice-Cream</option>
 90 |                   <option value="Cocolate">Cocolate</option>
 91 |                   <option value="Cold-Drinks">Cold-Drinks</option>
 92 |                 </select>
 93 |                 <button type="submit" className="btn btn-info mt-4">
 94 |                   Add to cart
 95 |                 </button>
 96 |               </form>
 97 |               {productDetails.length > 0 ? (
 98 |                 <table className="table table-striped table-hover mt-5 text-center">
 99 |                   <thead>
100 |                     <tr>
101 |                       <th>#ID</th>
102 |                       <th>Product Name</th>
103 |                       <th>Product Code</th>
104 |                       <th>Cost</th>
105 |                       <th>Quantity</th>
106 |                       <th>Price</th>
107 |                       <th>Option</th>
108 |                     </tr>
109 |                   </thead>
110 |                   <tbody>
111 |                     {productDetails.map((item, idx) => (
112 |                       <tr key={idx}>
113 |                         <td>{item.id}</td>
114 |                         <td>{item.name}</td>
115 |                         <td>{item.code}</td>
116 |                         <td>{item.cost}</td>
117 |                         <td>{item.quantity} <Quantity childToParent={childToParent}/> </td>
118 |                         <td>{item.cost * item.quantity}</td>
119 |                         <td>
120 |                           <AiOutlineDelete
121 |                             className="delete-btn fs-4"
122 |                             onClick={() => handleDelete(idx)}
123 |                           />
124 |                         </td>
125 |                       </tr>
126 |                     ))}
127 |                   </tbody>
128 |                 </table>
129 |               ) : (
130 |                 <div className="alert alert-danger w-25 mt-5">
131 |                   Please Select Items
132 |                 </div>
133 |               )}
134 |             </div>
135 |           </div>
136 |         </div>
137 |       </div>
138 |     </div>
139 |   );
140 | }
141 | 


--------------------------------------------------------------------------------