├── table-to-pdf ├── src │ ├── index.css │ ├── App.css │ ├── App.jsx │ ├── main.jsx │ ├── pdfGenerator.css │ ├── PdfGenerator.jsx │ └── assets │ │ └── react.svg ├── vite.config.js ├── .gitignore ├── index.html ├── README.md ├── .eslintrc.cjs ├── package.json └── public │ └── vite.svg ├── README.md ├── button-form-table ├── src │ ├── index.css │ ├── vite-env.d.ts │ ├── formValidation.ts │ ├── main.tsx │ ├── App.css │ ├── DataTable.tsx │ ├── App.tsx │ ├── ModalForm.tsx │ └── assets │ │ └── react.svg ├── vite.config.ts ├── tsconfig.node.json ├── .gitignore ├── index.html ├── .eslintrc.cjs ├── tsconfig.json ├── package.json ├── README.md └── public │ └── vite.svg ├── modalbox-slideshow ├── src │ ├── App.css │ ├── main.jsx │ ├── Modal.jsx │ ├── modal.css │ ├── index.css │ ├── Slider.jsx │ ├── slider.css │ ├── App.jsx │ └── assets │ │ └── react.svg ├── vite.config.js ├── .gitignore ├── index.html ├── README.md ├── .eslintrc.cjs ├── package.json └── public │ └── vite.svg ├── currency-converter ├── .gitignore ├── .env ├── public │ ├── favicon.ico │ └── index.html ├── src │ ├── routes │ │ ├── routes.js │ │ └── index.js │ ├── App.test.js │ ├── App.js │ ├── index.js │ ├── index.css │ ├── reportWebVitals.js │ ├── App.css │ ├── logo.svg │ ├── pages │ │ └── currencyConverter │ │ │ ├── css │ │ │ └── currencyConverter.css │ │ │ └── index.js │ └── utils │ │ └── seeds │ │ └── commonCurrency.json ├── README.md └── package.json ├── youtube-videos ├── src │ ├── vite-env.d.ts │ ├── App.tsx │ ├── main.tsx │ ├── components │ │ ├── VideoCard.tsx │ │ ├── Tabs.tsx │ │ └── Playlist.tsx │ ├── App.css │ ├── data │ │ └── videosCSV.ts │ └── assets │ │ └── react.svg ├── vite.config.ts ├── tsconfig.node.json ├── .gitignore ├── index.html ├── .eslintrc.cjs ├── tsconfig.json ├── package.json ├── README.md └── public │ └── vite.svg ├── youtube-videos1 ├── src │ ├── vite-env.d.ts │ ├── main.tsx │ ├── notes.ts │ ├── components │ │ ├── Modal.css │ │ └── Modal.tsx │ ├── App.css │ ├── assets │ │ └── react.svg │ └── App.tsx ├── vite.config.ts ├── tsconfig.node.json ├── .gitignore ├── index.html ├── .eslintrc.cjs ├── tsconfig.json ├── package.json ├── README.md └── public │ └── vite.svg ├── image-gallery-dnd ├── src │ ├── index.css │ ├── main.jsx │ ├── Components │ │ ├── OverlayImage.jsx │ │ ├── ImageUploader.jsx │ │ ├── Loader.jsx │ │ └── ImageCard.jsx │ ├── assets │ │ ├── upload.svg │ │ └── react.svg │ ├── test.js │ ├── App.css │ ├── util │ │ └── image.util.js │ ├── App.jsx │ └── AppOld.jsx ├── postcss.config.js ├── public │ ├── qss.png │ ├── image-1.webp │ ├── image-2.webp │ ├── image-3.webp │ ├── image-4.webp │ ├── image-5.webp │ ├── image-6.webp │ ├── image-7.webp │ ├── image-8.webp │ ├── image-9.webp │ ├── image-10.jpeg │ ├── image-11.jpeg │ └── icons8-wordpress-480.png ├── vite.config.js ├── tailwind.config.js ├── .gitignore ├── README.md ├── .eslintrc.cjs ├── index.html └── package.json └── dnd-beautiful-example ├── vite.config.js ├── src ├── main.jsx ├── App.css ├── index.css ├── App.jsx └── assets │ └── react.svg ├── .gitignore ├── index.html ├── .eslintrc.cjs ├── package.json ├── public └── vite.svg └── README.md /table-to-pdf/src/index.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # machine-coding-rounds -------------------------------------------------------------------------------- /button-form-table/src/index.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /modalbox-slideshow/src/App.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /currency-converter/.gitignore: -------------------------------------------------------------------------------- 1 | #dependencies 2 | /node_modules -------------------------------------------------------------------------------- /button-form-table/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /currency-converter/.env: -------------------------------------------------------------------------------- 1 | REACT_APP_EXCHANGE_RATE_API_KEY= 2 | -------------------------------------------------------------------------------- /youtube-videos/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /youtube-videos1/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /image-gallery-dnd/src/index.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /image-gallery-dnd/postcss.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /image-gallery-dnd/public/qss.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/manoharbatra/reactjs-machine-coding-rounds/HEAD/image-gallery-dnd/public/qss.png -------------------------------------------------------------------------------- /currency-converter/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/manoharbatra/reactjs-machine-coding-rounds/HEAD/currency-converter/public/favicon.ico -------------------------------------------------------------------------------- /image-gallery-dnd/public/image-1.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/manoharbatra/reactjs-machine-coding-rounds/HEAD/image-gallery-dnd/public/image-1.webp -------------------------------------------------------------------------------- /image-gallery-dnd/public/image-2.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/manoharbatra/reactjs-machine-coding-rounds/HEAD/image-gallery-dnd/public/image-2.webp -------------------------------------------------------------------------------- /image-gallery-dnd/public/image-3.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/manoharbatra/reactjs-machine-coding-rounds/HEAD/image-gallery-dnd/public/image-3.webp -------------------------------------------------------------------------------- /image-gallery-dnd/public/image-4.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/manoharbatra/reactjs-machine-coding-rounds/HEAD/image-gallery-dnd/public/image-4.webp -------------------------------------------------------------------------------- /image-gallery-dnd/public/image-5.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/manoharbatra/reactjs-machine-coding-rounds/HEAD/image-gallery-dnd/public/image-5.webp -------------------------------------------------------------------------------- /image-gallery-dnd/public/image-6.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/manoharbatra/reactjs-machine-coding-rounds/HEAD/image-gallery-dnd/public/image-6.webp -------------------------------------------------------------------------------- /image-gallery-dnd/public/image-7.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/manoharbatra/reactjs-machine-coding-rounds/HEAD/image-gallery-dnd/public/image-7.webp -------------------------------------------------------------------------------- /image-gallery-dnd/public/image-8.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/manoharbatra/reactjs-machine-coding-rounds/HEAD/image-gallery-dnd/public/image-8.webp -------------------------------------------------------------------------------- /image-gallery-dnd/public/image-9.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/manoharbatra/reactjs-machine-coding-rounds/HEAD/image-gallery-dnd/public/image-9.webp -------------------------------------------------------------------------------- /image-gallery-dnd/public/image-10.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/manoharbatra/reactjs-machine-coding-rounds/HEAD/image-gallery-dnd/public/image-10.jpeg -------------------------------------------------------------------------------- /image-gallery-dnd/public/image-11.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/manoharbatra/reactjs-machine-coding-rounds/HEAD/image-gallery-dnd/public/image-11.jpeg -------------------------------------------------------------------------------- /table-to-pdf/src/App.css: -------------------------------------------------------------------------------- 1 | .App{ 2 | font-size:larger; 3 | align-items: center; 4 | margin: 0 auto 5 | } 6 | 7 | button{ 8 | font-size: larger; 9 | } -------------------------------------------------------------------------------- /image-gallery-dnd/public/icons8-wordpress-480.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/manoharbatra/reactjs-machine-coding-rounds/HEAD/image-gallery-dnd/public/icons8-wordpress-480.png -------------------------------------------------------------------------------- /button-form-table/src/formValidation.ts: -------------------------------------------------------------------------------- 1 | const isFormValid = (inputs: string[]): boolean => { 2 | return inputs.every(input => input.trim() !== ''); 3 | }; 4 | 5 | export default isFormValid; 6 | -------------------------------------------------------------------------------- /image-gallery-dnd/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /table-to-pdf/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react-swc' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /button-form-table/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react-swc' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /modalbox-slideshow/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react-swc' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /youtube-videos/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react-swc' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /youtube-videos1/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react-swc' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /dnd-beautiful-example/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react-swc' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /currency-converter/src/routes/routes.js: -------------------------------------------------------------------------------- 1 | import { lazy } from 'react'; 2 | 3 | export const PublicRoutes = [ 4 | { 5 | slug: '/', 6 | component: lazy(() => import('../pages/currencyConverter')), 7 | exact: true, 8 | } 9 | ] -------------------------------------------------------------------------------- /table-to-pdf/src/App.jsx: -------------------------------------------------------------------------------- 1 | import './App.css' 2 | import PdfGenerator from './PdfGenerator' 3 | 4 | function App() { 5 | return ( 6 |
7 | 8 |
9 | ) 10 | } 11 | 12 | export default App 13 | -------------------------------------------------------------------------------- /youtube-videos/src/App.tsx: -------------------------------------------------------------------------------- 1 | import './App.css' 2 | import Playlist from './components/Playlist' 3 | 4 | function App() { 5 | 6 | return ( 7 |
8 | 9 |
10 | ) 11 | } 12 | 13 | export default App 14 | -------------------------------------------------------------------------------- /currency-converter/src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | 5 | it('renders without crashing', () => { 6 | const div = document.createElement('div'); 7 | ReactDOM.render(, div); 8 | }); 9 | -------------------------------------------------------------------------------- /image-gallery-dnd/tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | export default { 3 | content: [ 4 | "./index.html", 5 | "./src/**/*.{js,ts,jsx,tsx}", 6 | ], 7 | theme: { 8 | extend: {}, 9 | }, 10 | plugins: [], 11 | } 12 | 13 | -------------------------------------------------------------------------------- /youtube-videos/src/main.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom/client' 3 | import App from './App.tsx' 4 | 5 | ReactDOM.createRoot(document.getElementById('root')!).render( 6 | 7 | 8 | , 9 | ) 10 | -------------------------------------------------------------------------------- /currency-converter/src/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import 'bootstrap/dist/css/bootstrap.min.css'; 3 | import './App.css'; 4 | import AppRoutes from './routes'; 5 | const App = () => { 6 | return <> 7 | 8 | 9 | } 10 | export default App; 11 | -------------------------------------------------------------------------------- /youtube-videos1/src/main.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom/client' 3 | import App from './App.tsx' 4 | 5 | ReactDOM.createRoot(document.getElementById('root')!).render( 6 | 7 | 8 | , 9 | ) 10 | -------------------------------------------------------------------------------- /table-to-pdf/src/main.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom/client' 3 | import App from './App.jsx' 4 | import './index.css' 5 | 6 | ReactDOM.createRoot(document.getElementById('root')).render( 7 | 8 | 9 | , 10 | ) 11 | -------------------------------------------------------------------------------- /button-form-table/src/main.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom/client' 3 | import App from './App.tsx' 4 | import './index.css' 5 | 6 | ReactDOM.createRoot(document.getElementById('root')!).render( 7 | 8 | 9 | , 10 | ) 11 | -------------------------------------------------------------------------------- /modalbox-slideshow/src/main.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom/client' 3 | import App from './App.jsx' 4 | import './index.css' 5 | 6 | ReactDOM.createRoot(document.getElementById('root')).render( 7 | 8 | 9 | , 10 | ) 11 | -------------------------------------------------------------------------------- /dnd-beautiful-example/src/main.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom/client' 3 | import App from './App.jsx' 4 | import './index.css' 5 | 6 | ReactDOM.createRoot(document.getElementById('root')).render( 7 | 8 | 9 | , 10 | ) 11 | -------------------------------------------------------------------------------- /youtube-videos/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "skipLibCheck": true, 5 | "module": "ESNext", 6 | "moduleResolution": "bundler", 7 | "allowSyntheticDefaultImports": true, 8 | "strict": true 9 | }, 10 | "include": ["vite.config.ts"] 11 | } 12 | -------------------------------------------------------------------------------- /youtube-videos1/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "skipLibCheck": true, 5 | "module": "ESNext", 6 | "moduleResolution": "bundler", 7 | "allowSyntheticDefaultImports": true, 8 | "strict": true 9 | }, 10 | "include": ["vite.config.ts"] 11 | } 12 | -------------------------------------------------------------------------------- /button-form-table/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "skipLibCheck": true, 5 | "module": "ESNext", 6 | "moduleResolution": "bundler", 7 | "allowSyntheticDefaultImports": true, 8 | "strict": true 9 | }, 10 | "include": ["vite.config.ts"] 11 | } 12 | -------------------------------------------------------------------------------- /currency-converter/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StrictMode } from "react"; 3 | import { createRoot } from "react-dom/client"; 4 | import App from './App'; 5 | import './index.css'; 6 | 7 | const root = createRoot(document.getElementById("root")); 8 | 9 | root.render( 10 | 11 | 12 | 13 | ); -------------------------------------------------------------------------------- /image-gallery-dnd/src/main.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom/client' 3 | import App from './App.jsx' 4 | import './index.css' 5 | import { Analytics } from '@vercel/analytics/react'; 6 | 7 | 8 | ReactDOM.createRoot(document.getElementById('root')).render( 9 | <> 10 | 11 | 12 | 13 | 14 | ) 15 | -------------------------------------------------------------------------------- /currency-converter/src/index.css: -------------------------------------------------------------------------------- 1 | body, 2 | html { 3 | /* background: #eaeaea; 4 | color: #1a1a1a; 5 | height: 100%; 6 | width: 100%; */ 7 | } 8 | 9 | h1 { 10 | font-size: 78px; 11 | } 12 | 13 | h1, 14 | h2 { 15 | text-align: center; 16 | } 17 | 18 | hr { 19 | margin-top: 20px; 20 | } 21 | 22 | .text-left { 23 | text-align: left; 24 | } -------------------------------------------------------------------------------- /table-to-pdf/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /button-form-table/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /dnd-beautiful-example/src/App.css: -------------------------------------------------------------------------------- 1 | /* ul { 2 | list-style-type: none; 3 | padding: 0; 4 | margin: 0; 5 | } 6 | 7 | li { 8 | border: 1px solid #ccc; 9 | padding: 10px; 10 | margin-bottom: 5px; 11 | background-color: #f9f9f9; 12 | cursor: pointer; 13 | } 14 | 15 | li:hover { 16 | background-color: #e9e9e9; 17 | } 18 | 19 | .dragging { 20 | opacity: 0.5; 21 | } */ 22 | -------------------------------------------------------------------------------- /image-gallery-dnd/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /modalbox-slideshow/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /youtube-videos/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /youtube-videos1/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /dnd-beautiful-example/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /image-gallery-dnd/src/Components/OverlayImage.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | const OverlayImage = ({ url , isDragging }) => { 4 | return ( 5 |
6 | 7 |
8 | ); 9 | }; 10 | 11 | export default OverlayImage; 12 | -------------------------------------------------------------------------------- /table-to-pdf/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /modalbox-slideshow/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /youtube-videos/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React + TS 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /youtube-videos1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React + TS 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /button-form-table/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React + TS 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /dnd-beautiful-example/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /currency-converter/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; -------------------------------------------------------------------------------- /currency-converter/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | /* text-align: center; */ 3 | } 4 | 5 | .App-logo { 6 | animation: App-logo-spin infinite 20s linear; 7 | height: 80px; 8 | } 9 | 10 | .App-header { 11 | background-color: #222; 12 | height: 150px; 13 | padding: 20px; 14 | color: white; 15 | } 16 | 17 | .App-intro { 18 | font-size: large; 19 | } 20 | 21 | @keyframes App-logo-spin { 22 | from { transform: rotate(0deg); } 23 | to { transform: rotate(360deg); } 24 | } 25 | -------------------------------------------------------------------------------- /table-to-pdf/README.md: -------------------------------------------------------------------------------- 1 | # React + Vite 2 | 3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. 4 | 5 | Currently, two official plugins are available: 6 | 7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh 8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh 9 | -------------------------------------------------------------------------------- /modalbox-slideshow/README.md: -------------------------------------------------------------------------------- 1 | # React + Vite 2 | 3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. 4 | 5 | Currently, two official plugins are available: 6 | 7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh 8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh 9 | -------------------------------------------------------------------------------- /button-form-table/.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { browser: true, es2020: true }, 4 | extends: [ 5 | 'eslint:recommended', 6 | 'plugin:@typescript-eslint/recommended', 7 | 'plugin:react-hooks/recommended', 8 | ], 9 | ignorePatterns: ['dist', '.eslintrc.cjs'], 10 | parser: '@typescript-eslint/parser', 11 | plugins: ['react-refresh'], 12 | rules: { 13 | 'react-refresh/only-export-components': [ 14 | 'warn', 15 | { allowConstantExport: true }, 16 | ], 17 | }, 18 | } 19 | -------------------------------------------------------------------------------- /youtube-videos/.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { browser: true, es2020: true }, 4 | extends: [ 5 | 'eslint:recommended', 6 | 'plugin:@typescript-eslint/recommended', 7 | 'plugin:react-hooks/recommended', 8 | ], 9 | ignorePatterns: ['dist', '.eslintrc.cjs'], 10 | parser: '@typescript-eslint/parser', 11 | plugins: ['react-refresh'], 12 | rules: { 13 | 'react-refresh/only-export-components': [ 14 | 'warn', 15 | { allowConstantExport: true }, 16 | ], 17 | }, 18 | } 19 | -------------------------------------------------------------------------------- /youtube-videos1/.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { browser: true, es2020: true }, 4 | extends: [ 5 | 'eslint:recommended', 6 | 'plugin:@typescript-eslint/recommended', 7 | 'plugin:react-hooks/recommended', 8 | ], 9 | ignorePatterns: ['dist', '.eslintrc.cjs'], 10 | parser: '@typescript-eslint/parser', 11 | plugins: ['react-refresh'], 12 | rules: { 13 | 'react-refresh/only-export-components': [ 14 | 'warn', 15 | { allowConstantExport: true }, 16 | ], 17 | }, 18 | } 19 | -------------------------------------------------------------------------------- /table-to-pdf/src/pdfGenerator.css: -------------------------------------------------------------------------------- 1 | /* src/PdfGenerator.css */ 2 | .pdf-generator { 3 | font-family: Arial, sans-serif; 4 | padding: 20px; 5 | } 6 | 7 | .pdf-generator h1 { 8 | margin-bottom: 20px; 9 | } 10 | 11 | .pdf-generator table { 12 | width: 100%; 13 | border-collapse: collapse; 14 | } 15 | 16 | .pdf-generator th, .pdf-generator td { 17 | border: 1px solid #ddd; 18 | padding: 8px; 19 | } 20 | 21 | .pdf-generator th { 22 | background-color: #f2f2f2; 23 | text-align: left; 24 | } 25 | -------------------------------------------------------------------------------- /image-gallery-dnd/README.md: -------------------------------------------------------------------------------- 1 | # Image Gallery 2 | 3 | Simple React Image gallery project with Drag and Drop Functionality. 4 | 5 | 6 | - Drag and drop functionality. 7 | - Image onclick select and unselect 8 | - Bulk Delete 9 | - Bulk Unselect 10 | - Responsive Grid Design 11 | - One Large feature image 12 | - Google font, Hero icons etc. 13 | 14 | ## Live Link 🔗 15 | 16 | https://image-gallery-react-ahm.vercel.app/ 17 | 18 | ### Packages 19 | - Tailwind CSS 20 | - dnd-kit 21 | 22 | ### How to run 23 | - npm install # Install dependencies 24 | - npm run dev # Start the development server -------------------------------------------------------------------------------- /button-form-table/src/App.css: -------------------------------------------------------------------------------- 1 | /* styles.css */ 2 | 3 | .paper{ 4 | width: 400px; 5 | margin: 0 auto; 6 | } 7 | 8 | .modal_text_input{ 9 | background-color: lightyellow; 10 | } 11 | 12 | .table-container { 13 | width: 100%; 14 | border-collapse: collapse; 15 | margin-top: 20px; 16 | } 17 | 18 | .table-container th, 19 | .table-container td { 20 | border: 1px solid #ddd; 21 | padding: 8px; 22 | text-align: left; 23 | } 24 | 25 | .table-container th { 26 | background-color: #f2f2f2; 27 | } 28 | 29 | .table-container tr:nth-child(even) { 30 | background-color: #f2f2f2; 31 | } 32 | -------------------------------------------------------------------------------- /image-gallery-dnd/src/assets/upload.svg: -------------------------------------------------------------------------------- 1 | 9 | 14 | -------------------------------------------------------------------------------- /image-gallery-dnd/src/test.js: -------------------------------------------------------------------------------- 1 | const PAGES = { 2 | home: { title: "Home", content: "Home page" }, 3 | about: { title: "About", content: "About page" }, 4 | service: { title: "Service", content: "Service page" }, 5 | feature: { title: "Feature", content: "Feature page" }, 6 | pricing: { title: "Pricing", content: "Pricing page" }, 7 | contract: { title: "Contract", content: "Contract page" }, 8 | }; 9 | 10 | 11 | 12 | 13 | //1:render nav link with all PAGES. Nav click should change the page 14 | //2:render page content and page title & url 15 | //3:link should look like this => Home -------------------------------------------------------------------------------- /youtube-videos1/src/notes.ts: -------------------------------------------------------------------------------- 1 | interface NotesData { 2 | [category: string]: { 3 | [playlist: string]: string; 4 | notes: string; 5 | }; 6 | } 7 | 8 | export const notesData: NotesData = { 9 | "All":{ 10 | "notes": "Notes for All Categories", 11 | }, 12 | "LinkedIn": { 13 | "notes": "Notes for LinkedIn category" 14 | }, 15 | "News": { 16 | "notes": "Notes for News category" 17 | }, 18 | "Corporate": { 19 | "notes": 'Here is corporate gyaan', 20 | "Multiple Job Offers": "Notes for Multiple Job Offers playlist", 21 | "Notice Period": "Notes for Notice Period playlist" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /table-to-pdf/.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { browser: true, es2020: true }, 4 | extends: [ 5 | 'eslint:recommended', 6 | 'plugin:react/recommended', 7 | 'plugin:react/jsx-runtime', 8 | 'plugin:react-hooks/recommended', 9 | ], 10 | ignorePatterns: ['dist', '.eslintrc.cjs'], 11 | parserOptions: { ecmaVersion: 'latest', sourceType: 'module' }, 12 | settings: { react: { version: '18.2' } }, 13 | plugins: ['react-refresh'], 14 | rules: { 15 | 'react/jsx-no-target-blank': 'off', 16 | 'react-refresh/only-export-components': [ 17 | 'warn', 18 | { allowConstantExport: true }, 19 | ], 20 | }, 21 | } 22 | -------------------------------------------------------------------------------- /dnd-beautiful-example/.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { browser: true, es2020: true }, 4 | extends: [ 5 | 'eslint:recommended', 6 | 'plugin:react/recommended', 7 | 'plugin:react/jsx-runtime', 8 | 'plugin:react-hooks/recommended', 9 | ], 10 | ignorePatterns: ['dist', '.eslintrc.cjs'], 11 | parserOptions: { ecmaVersion: 'latest', sourceType: 'module' }, 12 | settings: { react: { version: '18.2' } }, 13 | plugins: ['react-refresh'], 14 | rules: { 15 | 'react/jsx-no-target-blank': 'off', 16 | 'react-refresh/only-export-components': [ 17 | 'warn', 18 | { allowConstantExport: true }, 19 | ], 20 | }, 21 | } 22 | -------------------------------------------------------------------------------- /modalbox-slideshow/.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { browser: true, es2020: true }, 4 | extends: [ 5 | 'eslint:recommended', 6 | 'plugin:react/recommended', 7 | 'plugin:react/jsx-runtime', 8 | 'plugin:react-hooks/recommended', 9 | ], 10 | ignorePatterns: ['dist', '.eslintrc.cjs'], 11 | parserOptions: { ecmaVersion: 'latest', sourceType: 'module' }, 12 | settings: { react: { version: '18.2' } }, 13 | plugins: ['react-refresh'], 14 | rules: { 15 | 'react/jsx-no-target-blank': 'off', 16 | 'react-refresh/only-export-components': [ 17 | 'warn', 18 | { allowConstantExport: true }, 19 | ], 20 | }, 21 | } 22 | -------------------------------------------------------------------------------- /currency-converter/README.md: -------------------------------------------------------------------------------- 1 | ### React Currency Converter 2 | 3 | ![](https://raw.githubusercontent.com/moneyphp/money/master/resources/logo.png) 4 | 5 | 6 | 7 | ### Demo 8 | Author: 9 | [https://currency-convrt.netlify.app](https://currency-convrt.netlify.app/) 10 | 11 | 12 | ## Installation 13 | 14 | Install with simply `git clone` 15 | 16 | - cd till last folder 17 | - ` npm install` or `npm i` to install node modules 18 | - get your **FREE** `API KEY` from [https://www.exchangerate-api.com](https://www.exchangerate-api.com/). 19 | - create `.env` file and put `API KEY` as following 20 | - `REACT_APP_EXCHANGE_RATE_API_KEY=your_free_api_key_get_from_exchangerate-api` 21 | - And Its done. -------------------------------------------------------------------------------- /youtube-videos/src/components/VideoCard.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | interface Props { 4 | title: string; 5 | url: string; 6 | } 7 | 8 | const VideoCard: React.FC = ({ title, url }) => { 9 | return ( 10 |
11 | 20 |

{title}

21 |
22 | ); 23 | }; 24 | 25 | export default VideoCard; 26 | -------------------------------------------------------------------------------- /image-gallery-dnd/.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { browser: true, es2020: true }, 4 | extends: [ 5 | 'eslint:recommended', 6 | 'plugin:react/recommended', 7 | 'plugin:react/jsx-runtime', 8 | 'plugin:react-hooks/recommended', 9 | ], 10 | ignorePatterns: ['dist', '.eslintrc.cjs'], 11 | parserOptions: { ecmaVersion: 'latest', sourceType: 'module' }, 12 | settings: { react: { version: '18.2' } }, 13 | plugins: ['react-refresh'], 14 | rules: { 15 | 'react-refresh/only-export-components': [ 16 | 'warn', 17 | { allowConstantExport: true }, 18 | ], 19 | "react/prop-types-rules": { 20 | "react/prop-types": "off" 21 | } 22 | }, 23 | 24 | } 25 | -------------------------------------------------------------------------------- /button-form-table/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ES2020", 4 | "useDefineForClassFields": true, 5 | "lib": ["ES2020", "DOM", "DOM.Iterable"], 6 | "module": "ESNext", 7 | "skipLibCheck": true, 8 | 9 | /* Bundler mode */ 10 | "moduleResolution": "bundler", 11 | "allowImportingTsExtensions": true, 12 | "resolveJsonModule": true, 13 | "isolatedModules": true, 14 | "noEmit": true, 15 | "jsx": "react-jsx", 16 | 17 | /* Linting */ 18 | "strict": true, 19 | "noUnusedLocals": true, 20 | "noUnusedParameters": true, 21 | "noFallthroughCasesInSwitch": true 22 | }, 23 | "include": ["src"], 24 | "references": [{ "path": "./tsconfig.node.json" }] 25 | } 26 | -------------------------------------------------------------------------------- /modalbox-slideshow/src/Modal.jsx: -------------------------------------------------------------------------------- 1 | import "./modal.css"; 2 | 3 | const Modal = ({ children, show, onClose, title }) => { 4 | return ( 5 | show && ( 6 | <> 7 |
8 |
9 |
10 |
11 |
{title}
12 |
13 | X 14 |
15 |
16 |
{children}
17 |
18 |
19 | 20 | ) 21 | ); 22 | }; 23 | 24 | export default Modal; -------------------------------------------------------------------------------- /youtube-videos/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ES2020", 4 | "useDefineForClassFields": true, 5 | "lib": ["ES2020", "DOM", "DOM.Iterable"], 6 | "module": "ESNext", 7 | "skipLibCheck": true, 8 | 9 | /* Bundler mode */ 10 | "moduleResolution": "bundler", 11 | "allowImportingTsExtensions": true, 12 | "resolveJsonModule": true, 13 | "isolatedModules": true, 14 | "noEmit": true, 15 | "jsx": "react-jsx", 16 | 17 | /* Linting */ 18 | "strict": true, 19 | "noUnusedLocals": true, 20 | "noUnusedParameters": true, 21 | "noFallthroughCasesInSwitch": true 22 | }, 23 | "include": ["src"], 24 | "references": [{ "path": "./tsconfig.node.json" }] 25 | } 26 | -------------------------------------------------------------------------------- /youtube-videos1/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ES2020", 4 | "useDefineForClassFields": true, 5 | "lib": ["ES2020", "DOM", "DOM.Iterable"], 6 | "module": "ESNext", 7 | "skipLibCheck": true, 8 | 9 | /* Bundler mode */ 10 | "moduleResolution": "bundler", 11 | "allowImportingTsExtensions": true, 12 | "resolveJsonModule": true, 13 | "isolatedModules": true, 14 | "noEmit": true, 15 | "jsx": "react-jsx", 16 | 17 | /* Linting */ 18 | "strict": true, 19 | "noUnusedLocals": true, 20 | "noUnusedParameters": true, 21 | "noFallthroughCasesInSwitch": true 22 | }, 23 | "include": ["src"], 24 | "references": [{ "path": "./tsconfig.node.json" }] 25 | } 26 | -------------------------------------------------------------------------------- /youtube-videos/src/components/Tabs.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | interface Props { 4 | playlists: string[]; 5 | selectedPlaylist: string | null; 6 | onClick: (playlist: string | null) => void; 7 | } 8 | 9 | const Tabs: React.FC = ({ playlists, selectedPlaylist, onClick }) => { 10 | return ( 11 |
12 | {playlists.map((playlist: string) => ( 13 | 20 | ))} 21 |
22 | ); 23 | }; 24 | 25 | export default Tabs; 26 | 27 | -------------------------------------------------------------------------------- /image-gallery-dnd/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | Image Gallery 11 | 12 | 13 |
14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /currency-converter/src/routes/index.js: -------------------------------------------------------------------------------- 1 | import {Suspense, Fragment} from 'react'; 2 | import {BrowserRouter as Router, Route, Routes} from 'react-router-dom'; 3 | import { PublicRoutes } from './routes.js'; 4 | 5 | function AppRoutes() { 6 | return ( 7 | 8 | 9 | Subscibe to Manohar Batra YT Channel...
}> 10 | 11 | {PublicRoutes.map(({component: Component, slug, exact}, index) => ( 12 | }/> 13 | ))} 14 | 15 | 16 | 17 | 18 | ); 19 | } 20 | 21 | export default AppRoutes; -------------------------------------------------------------------------------- /modalbox-slideshow/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "modalbox-slideshow", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "start": "vite", 8 | "build": "vite build", 9 | "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "react": "^18.2.0", 14 | "react-dom": "^18.2.0" 15 | }, 16 | "devDependencies": { 17 | "@types/react": "^18.2.66", 18 | "@types/react-dom": "^18.2.22", 19 | "@vitejs/plugin-react-swc": "^3.5.0", 20 | "eslint": "^8.57.0", 21 | "eslint-plugin-react": "^7.34.1", 22 | "eslint-plugin-react-hooks": "^4.6.0", 23 | "eslint-plugin-react-refresh": "^0.4.6", 24 | "vite": "^5.2.0" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /youtube-videos1/src/components/Modal.css: -------------------------------------------------------------------------------- 1 | .modal-overlay { 2 | position: fixed; 3 | top: 0; 4 | left: 0; 5 | width: 100%; 6 | height: 100%; 7 | background-color: rgba(0, 0, 0, 0.5); 8 | display: flex; 9 | justify-content: center; 10 | align-items: center; 11 | } 12 | 13 | .modal-content { 14 | background-color: white; 15 | border-radius: 5px; 16 | padding: 20px; 17 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); 18 | max-width: 80%; 19 | } 20 | 21 | .modal-header { 22 | display: flex; 23 | justify-content: space-between; 24 | align-items: center; 25 | } 26 | 27 | .modal-close { 28 | background: none; 29 | border: none; 30 | font-size: 1.5rem; 31 | cursor: pointer; 32 | } 33 | 34 | .modal-body { 35 | margin-top: 20px; 36 | } 37 | -------------------------------------------------------------------------------- /dnd-beautiful-example/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "dnd-kit-example", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "react": "^18.2.0", 14 | "react-beautiful-dnd": "^13.1.1", 15 | "react-dom": "^18.2.0" 16 | }, 17 | "devDependencies": { 18 | "@types/react": "^18.2.66", 19 | "@types/react-dom": "^18.2.22", 20 | "@vitejs/plugin-react-swc": "^3.5.0", 21 | "eslint": "^8.57.0", 22 | "eslint-plugin-react": "^7.34.1", 23 | "eslint-plugin-react-hooks": "^4.6.0", 24 | "eslint-plugin-react-refresh": "^0.4.6", 25 | "vite": "^5.2.0" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /youtube-videos1/src/components/Modal.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import './Modal.css'; 3 | 4 | interface ModalProps { 5 | isOpen: boolean; 6 | onClose: () => void; 7 | text: string; 8 | } 9 | 10 | const Modal: React.FC = ({ isOpen, onClose, text }) => { 11 | if (!isOpen) return null; 12 | 13 | return ( 14 |
15 |
e.stopPropagation()}> 16 |
17 |

Notes

18 | 21 |
22 |
23 |

{text}

24 |
25 |
26 |
27 | ); 28 | }; 29 | 30 | export default Modal; 31 | -------------------------------------------------------------------------------- /table-to-pdf/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "table-to-pdf", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "start": "vite", 9 | "build": "vite build", 10 | "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0", 11 | "preview": "vite preview" 12 | }, 13 | "dependencies": { 14 | "jspdf-autotable": "^3.8.2", 15 | "react": "^18.2.0", 16 | "react-dom": "^18.2.0" 17 | }, 18 | "devDependencies": { 19 | "@types/react": "^18.2.66", 20 | "@types/react-dom": "^18.2.22", 21 | "@vitejs/plugin-react-swc": "^3.5.0", 22 | "eslint": "^8.57.0", 23 | "eslint-plugin-react": "^7.34.1", 24 | "eslint-plugin-react-hooks": "^4.6.0", 25 | "eslint-plugin-react-refresh": "^0.4.6", 26 | "vite": "^5.2.0" 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /image-gallery-dnd/src/App.css: -------------------------------------------------------------------------------- 1 | 2 | #root { 3 | max-width: 1280px; 4 | margin: 0 auto; 5 | padding: 2rem; 6 | text-align: left; 7 | font-family: 'Montserrat', sans-serif; 8 | } 9 | 10 | /* .logo { 11 | height: 6em; 12 | padding: 1.5em; 13 | will-change: filter; 14 | transition: filter 300ms; 15 | } 16 | .logo:hover { 17 | filter: drop-shadow(0 0 2em #646cffaa); 18 | } 19 | .logo.react:hover { 20 | filter: drop-shadow(0 0 2em #61dafbaa); 21 | } 22 | 23 | @keyframes logo-spin { 24 | from { 25 | transform: rotate(0deg); 26 | } 27 | to { 28 | transform: rotate(360deg); 29 | } 30 | } 31 | 32 | @media (prefers-reduced-motion: no-preference) { 33 | a:nth-of-type(2) .logo { 34 | animation: logo-spin infinite 20s linear; 35 | } 36 | } 37 | 38 | .card { 39 | padding: 2em; 40 | } 41 | 42 | .read-the-docs { 43 | color: #888; 44 | } */ 45 | -------------------------------------------------------------------------------- /youtube-videos/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "youtube-videos", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "tsc && vite build", 9 | "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "react": "^18.2.0", 14 | "react-dom": "^18.2.0" 15 | }, 16 | "devDependencies": { 17 | "@types/react": "^18.2.66", 18 | "@types/react-dom": "^18.2.22", 19 | "@typescript-eslint/eslint-plugin": "^7.2.0", 20 | "@typescript-eslint/parser": "^7.2.0", 21 | "@vitejs/plugin-react-swc": "^3.5.0", 22 | "eslint": "^8.57.0", 23 | "eslint-plugin-react-hooks": "^4.6.0", 24 | "eslint-plugin-react-refresh": "^0.4.6", 25 | "typescript": "^5.2.2", 26 | "vite": "^5.2.0" 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /youtube-videos/src/App.css: -------------------------------------------------------------------------------- 1 | .app { 2 | max-width: 1280px; 3 | width: 100vw; 4 | margin: 0 auto; 5 | padding: 2rem; 6 | font-family:'Times New Roman', Times, serif; 7 | font-weight: 400; 8 | } 9 | 10 | .search-container { 11 | .search-input{ 12 | width:100%; 13 | height:30px; 14 | margin-bottom: 20px; 15 | } 16 | } 17 | 18 | .btns-playlist{ 19 | display: flex; 20 | justify-content: center; 21 | gap:10px; 22 | margin-bottom: 20px; 23 | } 24 | 25 | .btn-playlist { 26 | padding: 10px 15px; 27 | margin-right: 10px; 28 | background-color: #f0f0f0; 29 | border: 1px solid #ddd; 30 | border-radius: 5px; 31 | cursor: pointer; 32 | } 33 | 34 | .btn-playlist.active, 35 | .btn-playlist:hover, 36 | .btn-playlist:focus { 37 | background-color: lightblue; 38 | } 39 | 40 | .videos-container { 41 | display: flex; 42 | flex-wrap: wrap; 43 | } 44 | 45 | .video-container{ 46 | width: 25%; 47 | } -------------------------------------------------------------------------------- /youtube-videos1/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "youtube-videos1", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "tsc && vite build", 9 | "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "react": "^18.2.0", 14 | "react-dom": "^18.2.0", 15 | "react-icons": "^5.1.0", 16 | "react-player": "^2.16.0" 17 | }, 18 | "devDependencies": { 19 | "@types/react": "^18.2.66", 20 | "@types/react-dom": "^18.2.22", 21 | "@typescript-eslint/eslint-plugin": "^7.2.0", 22 | "@typescript-eslint/parser": "^7.2.0", 23 | "@vitejs/plugin-react-swc": "^3.5.0", 24 | "eslint": "^8.57.0", 25 | "eslint-plugin-react-hooks": "^4.6.0", 26 | "eslint-plugin-react-refresh": "^0.4.6", 27 | "typescript": "^5.2.2", 28 | "vite": "^5.2.0" 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /modalbox-slideshow/src/modal.css: -------------------------------------------------------------------------------- 1 | .modal-backdrop { 2 | position: fixed; 3 | width: 100vw; 4 | height: 100vh; 5 | background-color: rgba(0, 0, 0, 0.2); 6 | top: 0; 7 | left: 0; 8 | } 9 | 10 | .modal-wrapper { 11 | padding: 10px; 12 | margin: 10px auto; 13 | box-shadow: 0px 2px 6px #000; 14 | position: fixed; 15 | width: 100%; 16 | max-width: 500px; 17 | left: 50%; 18 | top: 50%; 19 | transform: translate(-50%, -50%); 20 | z-index: 11111; 21 | background-color: #fff; 22 | } 23 | 24 | .modal-header { 25 | display: flex; 26 | align-items: center; 27 | justify-content: space-between; 28 | margin-bottom: 10px; 29 | } 30 | 31 | .modal-close { 32 | text-align: center; 33 | font-size: 1.2em; 34 | cursor: pointer; 35 | width: 30px; 36 | height: 30px; 37 | border-radius: 50%; 38 | background-color: gray; 39 | line-height: 1.7em; 40 | color: #fff; 41 | } -------------------------------------------------------------------------------- /image-gallery-dnd/src/Components/ImageUploader.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | const ImageUploader = ( { handleFileChange }) => { 4 | return ( 5 |
6 | 13 | 22 |
23 | ); 24 | }; 25 | 26 | export default ImageUploader; 27 | -------------------------------------------------------------------------------- /image-gallery-dnd/src/util/image.util.js: -------------------------------------------------------------------------------- 1 | export const Images = [ 2 | { 3 | id: 1, 4 | url: "image-1.webp", 5 | isChecked: false, 6 | }, 7 | { 8 | id: 2, 9 | url: "image-2.webp", 10 | isChecked: false, 11 | }, 12 | { 13 | id: 3, 14 | url: "image-3.webp", 15 | isChecked: false, 16 | }, 17 | { 18 | id: 4, 19 | url: "image-4.webp", 20 | isChecked: false, 21 | }, 22 | { 23 | id: 5, 24 | url: "image-5.webp", 25 | isChecked: false, 26 | }, 27 | { 28 | id: 6, 29 | url: "image-6.webp", 30 | isChecked: false, 31 | }, 32 | { 33 | id: 7, 34 | url: "image-7.webp", 35 | isChecked: false, 36 | }, 37 | { 38 | id: 8, 39 | url: "image-8.webp", 40 | isChecked: false, 41 | }, 42 | { 43 | id: 9, 44 | url: "image-9.webp", 45 | isChecked: false, 46 | }, 47 | { 48 | id: 10, 49 | url: "image-10.jpeg", 50 | isChecked: false, 51 | }, 52 | { 53 | id: 11, 54 | url: "image-11.jpeg", 55 | isChecked: false, 56 | }, 57 | 58 | ]; 59 | 60 | 61 | -------------------------------------------------------------------------------- /button-form-table/src/DataTable.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | interface DataTableProps { 4 | data: string[][]; 5 | onEdit: (index: number) => void; 6 | onDelete: (index: number) => void; 7 | } 8 | 9 | const DataTable: React.FC = ({ data, onEdit, onDelete }) => { 10 | return ( 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | {data.map((rowData, index) => ( 22 | 23 | {rowData.map((cellData, cellIndex) => ( 24 | 25 | ))} 26 | 30 | 31 | ))} 32 | 33 |
Input 1Input 2Input 3Actions
{cellData} 27 | 28 | 29 |
34 | ); 35 | }; 36 | 37 | export default DataTable; 38 | -------------------------------------------------------------------------------- /image-gallery-dnd/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "image-gallery", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0", 10 | "preview": "vite preview", 11 | "host": "vite --host" 12 | }, 13 | "dependencies": { 14 | "@dnd-kit/core": "^6.0.8", 15 | "@dnd-kit/sortable": "^7.0.2", 16 | "@dnd-kit/utilities": "^3.2.1", 17 | "@vercel/analytics": "^1.1.1", 18 | "axios": "^1.6.2", 19 | "react": "^18.2.0", 20 | "react-dom": "^18.2.0" 21 | }, 22 | "devDependencies": { 23 | "@types/react": "^18.2.15", 24 | "@types/react-dom": "^18.2.7", 25 | "@vitejs/plugin-react": "^4.0.3", 26 | "autoprefixer": "^10.4.16", 27 | "eslint": "^8.45.0", 28 | "eslint-plugin-react": "^7.32.2", 29 | "eslint-plugin-react-hooks": "^4.6.0", 30 | "eslint-plugin-react-refresh": "^0.4.3", 31 | "postcss": "^8.4.31", 32 | "tailwindcss": "^3.3.5", 33 | "vite": "^4.4.5" 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /button-form-table/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "button-form-table", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "tsc && vite build", 9 | "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "@carbon/icons-react": "^11.39.0", 14 | "@emotion/react": "^11.11.4", 15 | "@emotion/styled": "^11.11.5", 16 | "@mui/material": "^5.15.15", 17 | "carbon-components": "^10.58.12", 18 | "carbon-components-react": "^8.55.0", 19 | "i": "^0.3.7", 20 | "npm": "^10.5.2", 21 | "react": "^18.2.0", 22 | "react-dom": "^18.2.0", 23 | "react-icons": "^5.1.0" 24 | }, 25 | "devDependencies": { 26 | "@types/react": "^18.2.66", 27 | "@types/react-dom": "^18.2.22", 28 | "@typescript-eslint/eslint-plugin": "^7.2.0", 29 | "@typescript-eslint/parser": "^7.2.0", 30 | "@vitejs/plugin-react-swc": "^3.5.0", 31 | "eslint": "^8.57.0", 32 | "eslint-plugin-react-hooks": "^4.6.0", 33 | "eslint-plugin-react-refresh": "^0.4.6", 34 | "typescript": "^5.2.2", 35 | "vite": "^5.2.0" 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /currency-converter/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 16 | React App 17 | 18 | 19 |
20 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /image-gallery-dnd/src/Components/Loader.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | const Loader = () => { 4 | return ( 5 |
6 | {Array.from({ length: 9 }, (_, index) => ( 7 |
11 |
12 | 20 | 25 | 26 |
27 |
28 | ))} 29 |
30 | ); 31 | }; 32 | 33 | export default Loader; 34 | -------------------------------------------------------------------------------- /currency-converter/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "base", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@fortawesome/fontawesome-svg-core": "^6.2.1", 7 | "@fortawesome/free-solid-svg-icons": "^6.2.1", 8 | "@fortawesome/react-fontawesome": "^0.2.0", 9 | "@reduxjs/toolkit": "^1.9.1", 10 | "axios": "^1.2.0", 11 | "bootstrap": "^5.2.3", 12 | "css-loader": "^6.7.2", 13 | "import-glob-loader": "^1.1.0", 14 | "react": "^18.2.0", 15 | "react-currency-input-field": "^3.6.9", 16 | "react-dom": "^18.2.0", 17 | "react-redux": "^8.0.5", 18 | "react-router-dom": "^6.0.1", 19 | "react-scripts": "^5.0.1", 20 | "react-select": "^5.7.0", 21 | "react-spinners": "^0.13.7", 22 | "redux": "^4.2.0", 23 | "redux-saga": "^1.2.1", 24 | "sass-loader": "^13.2.0", 25 | "style-loader": "^3.3.1" 26 | }, 27 | "scripts": { 28 | "start": "react-scripts start", 29 | "build": "react-scripts build", 30 | "test": "react-scripts test --env=jsdom", 31 | "eject": "react-scripts eject" 32 | }, 33 | "browserslist": { 34 | "production": [ 35 | ">0.2%", 36 | "not dead", 37 | "not op_mini all" 38 | ], 39 | "development": [ 40 | "last 1 chrome version", 41 | "last 1 firefox version", 42 | "last 1 safari version" 43 | ] 44 | }, 45 | "devDependencies": { 46 | "sass": "^1.57.1" 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /button-form-table/README.md: -------------------------------------------------------------------------------- 1 | # React + TypeScript + Vite 2 | 3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. 4 | 5 | Currently, two official plugins are available: 6 | 7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh 8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh 9 | 10 | ## Expanding the ESLint configuration 11 | 12 | If you are developing a production application, we recommend updating the configuration to enable type aware lint rules: 13 | 14 | - Configure the top-level `parserOptions` property like this: 15 | 16 | ```js 17 | export default { 18 | // other rules... 19 | parserOptions: { 20 | ecmaVersion: 'latest', 21 | sourceType: 'module', 22 | project: ['./tsconfig.json', './tsconfig.node.json'], 23 | tsconfigRootDir: __dirname, 24 | }, 25 | } 26 | ``` 27 | 28 | - Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked` 29 | - Optionally add `plugin:@typescript-eslint/stylistic-type-checked` 30 | - Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list 31 | -------------------------------------------------------------------------------- /youtube-videos/README.md: -------------------------------------------------------------------------------- 1 | # React + TypeScript + Vite 2 | 3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. 4 | 5 | Currently, two official plugins are available: 6 | 7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh 8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh 9 | 10 | ## Expanding the ESLint configuration 11 | 12 | If you are developing a production application, we recommend updating the configuration to enable type aware lint rules: 13 | 14 | - Configure the top-level `parserOptions` property like this: 15 | 16 | ```js 17 | export default { 18 | // other rules... 19 | parserOptions: { 20 | ecmaVersion: 'latest', 21 | sourceType: 'module', 22 | project: ['./tsconfig.json', './tsconfig.node.json'], 23 | tsconfigRootDir: __dirname, 24 | }, 25 | } 26 | ``` 27 | 28 | - Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked` 29 | - Optionally add `plugin:@typescript-eslint/stylistic-type-checked` 30 | - Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list 31 | -------------------------------------------------------------------------------- /youtube-videos1/README.md: -------------------------------------------------------------------------------- 1 | # React + TypeScript + Vite 2 | 3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. 4 | 5 | Currently, two official plugins are available: 6 | 7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh 8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh 9 | 10 | ## Expanding the ESLint configuration 11 | 12 | If you are developing a production application, we recommend updating the configuration to enable type aware lint rules: 13 | 14 | - Configure the top-level `parserOptions` property like this: 15 | 16 | ```js 17 | export default { 18 | // other rules... 19 | parserOptions: { 20 | ecmaVersion: 'latest', 21 | sourceType: 'module', 22 | project: ['./tsconfig.json', './tsconfig.node.json'], 23 | tsconfigRootDir: __dirname, 24 | }, 25 | } 26 | ``` 27 | 28 | - Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked` 29 | - Optionally add `plugin:@typescript-eslint/stylistic-type-checked` 30 | - Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list 31 | -------------------------------------------------------------------------------- /table-to-pdf/public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /youtube-videos/public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /youtube-videos1/public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /button-form-table/public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /modalbox-slideshow/public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /dnd-beautiful-example/public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /dnd-beautiful-example/src/index.css: -------------------------------------------------------------------------------- 1 | :root { 2 | font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; 3 | line-height: 1.5; 4 | font-weight: 400; 5 | 6 | color-scheme: light dark; 7 | color: rgba(255, 255, 255, 0.87); 8 | background-color: #242424; 9 | 10 | font-synthesis: none; 11 | text-rendering: optimizeLegibility; 12 | -webkit-font-smoothing: antialiased; 13 | -moz-osx-font-smoothing: grayscale; 14 | } 15 | 16 | a { 17 | font-weight: 500; 18 | color: #646cff; 19 | text-decoration: inherit; 20 | } 21 | a:hover { 22 | color: #535bf2; 23 | } 24 | 25 | body { 26 | margin: 0; 27 | display: flex; 28 | place-items: center; 29 | min-width: 320px; 30 | min-height: 100vh; 31 | } 32 | 33 | h1 { 34 | font-size: 3.2em; 35 | line-height: 1.1; 36 | } 37 | 38 | button { 39 | border-radius: 8px; 40 | border: 1px solid transparent; 41 | padding: 0.6em 1.2em; 42 | font-size: 1em; 43 | font-weight: 500; 44 | font-family: inherit; 45 | background-color: #1a1a1a; 46 | cursor: pointer; 47 | transition: border-color 0.25s; 48 | } 49 | button:hover { 50 | border-color: #646cff; 51 | } 52 | button:focus, 53 | button:focus-visible { 54 | outline: 4px auto -webkit-focus-ring-color; 55 | } 56 | 57 | @media (prefers-color-scheme: light) { 58 | :root { 59 | color: #213547; 60 | background-color: #ffffff; 61 | } 62 | a:hover { 63 | color: #747bff; 64 | } 65 | button { 66 | background-color: #f9f9f9; 67 | } 68 | } 69 | -------------------------------------------------------------------------------- /modalbox-slideshow/src/index.css: -------------------------------------------------------------------------------- 1 | :root { 2 | font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; 3 | line-height: 1.5; 4 | font-weight: 400; 5 | 6 | color-scheme: light dark; 7 | color: rgba(255, 255, 255, 0.87); 8 | background-color: #242424; 9 | 10 | font-synthesis: none; 11 | text-rendering: optimizeLegibility; 12 | -webkit-font-smoothing: antialiased; 13 | -moz-osx-font-smoothing: grayscale; 14 | } 15 | 16 | a { 17 | font-weight: 500; 18 | color: #646cff; 19 | text-decoration: inherit; 20 | } 21 | a:hover { 22 | color: #535bf2; 23 | } 24 | 25 | body { 26 | margin: 0; 27 | display: flex; 28 | place-items: center; 29 | min-width: 320px; 30 | min-height: 100vh; 31 | } 32 | 33 | h1 { 34 | font-size: 3.2em; 35 | line-height: 1.1; 36 | } 37 | 38 | button { 39 | border-radius: 8px; 40 | border: 1px solid transparent; 41 | padding: 0.6em 1.2em; 42 | font-size: 1em; 43 | font-weight: 500; 44 | font-family: inherit; 45 | background-color: #1a1a1a; 46 | cursor: pointer; 47 | transition: border-color 0.25s; 48 | } 49 | button:hover { 50 | border-color: #646cff; 51 | } 52 | button:focus, 53 | button:focus-visible { 54 | outline: 4px auto -webkit-focus-ring-color; 55 | } 56 | 57 | @media (prefers-color-scheme: light) { 58 | :root { 59 | color: #213547; 60 | background-color: #ffffff; 61 | } 62 | a:hover { 63 | color: #747bff; 64 | } 65 | button { 66 | background-color: #f9f9f9; 67 | } 68 | } 69 | -------------------------------------------------------------------------------- /modalbox-slideshow/src/Slider.jsx: -------------------------------------------------------------------------------- 1 | import './slider.css'; 2 | 3 | const Slider = ({ images, active, setActive }) => { 4 | const onNext = () => { 5 | if (active < images.length - 1) { 6 | setActive(active + 1); 7 | } 8 | }; 9 | 10 | const onPrev = () => { 11 | if (active > 0) { 12 | setActive(active - 1); 13 | } 14 | }; 15 | 16 | const isFirstImage = active === 0; 17 | const isLastImage = active === images.length - 1; 18 | 19 | return ( 20 |
21 |
22 | {images.map((e, i) => ( 23 | 24 | ))} 25 |
26 |
27 |
28 | {!isFirstImage && 29 | ( 30 |
31 | {" "} 32 | <{" "} 33 |
34 | )} 35 | {!isLastImage && (
36 | {" "} 37 | >{" "} 38 |
)} 39 | 40 |
41 |
42 |
43 | ); 44 | }; 45 | 46 | const Slide = ({ image_url, caption, active }) => { 47 | return ( 48 |
49 | {caption} 50 | {caption} 51 |
52 | ); 53 | }; 54 | 55 | export default Slider; 56 | -------------------------------------------------------------------------------- /table-to-pdf/src/PdfGenerator.jsx: -------------------------------------------------------------------------------- 1 | import jsPDF from 'jspdf'; 2 | import 'jspdf-autotable'; 3 | import './pdfGenerator.css'; 4 | 5 | const PdfGenerator = () => { 6 | const generatePDF = () => { 7 | // Create a new PDF document 8 | const doc = new jsPDF(); 9 | 10 | // Define table columns and rows 11 | const columns = ['ID', 'Name', 'Age']; 12 | const data = [ 13 | [1, 'John Doe', 30], 14 | [2, 'Jane Smith', 25], 15 | [3, 'Bob Johnson', 40] 16 | ]; 17 | 18 | // Add table using autoTable plugin 19 | doc.autoTable({ 20 | head: [columns], 21 | body: data 22 | }); 23 | 24 | // Save the PDF 25 | doc.save('sample.pdf'); 26 | }; 27 | 28 | return ( 29 |
30 |

PDF Generator

31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 |
IDNameAge
1John Doe30
2Jane Smith25
3Bob Johnson40
57 | 58 |
59 | ); 60 | }; 61 | 62 | export default PdfGenerator; 63 | -------------------------------------------------------------------------------- /youtube-videos/src/data/videosCSV.ts: -------------------------------------------------------------------------------- 1 | export const rawData = `LinkedIn Roast,Ep-16: Earning 20 LPA in India then what to do next? Remote Job and DSA for product based companies,https://www.youtube.com/watch?v=fvGSM0UQG-M 2 | LinkedIn Roast,Ep-15: 20 LPA at 3 yrs exp | High Salary is big trap | Corporate Talks,https://www.youtube.com/watch?v=mr_Bj2VlL_w 3 | LinkedIn Roast,Ep-14: 2 yrs exp employee got 18 LPA job with fake experience,https://www.youtube.com/watch?v=9WASY-xuYEk 4 | LinkedIn Roast,Ep-13: 4.6 yrs 50k per month - When should I switch job?,https://www.youtube.com/watch?v=JqhwS_uKPrY 5 | LinkedIn Roast,Ep-7: Why manager forced him to resign by putting him on PIP Performance Improvement Plan,https://www.youtube.com/watch?v=4h9Q4rfht7Y 6 | Corporate News,Ep-6: 3.5 LPA to 35 LPA in 10 years | How much companies are paying in 2023.,https://www.youtube.com/watch?v=gB3pnA49OUc 7 | Multiple Job Offers,EP-5: Big4 are forcing employees to apply leaves or resign | How to handle bench period in a company,https://www.youtube.com/watch?v=zyoKwpNUiJ0 8 | Multiple Job Offers,Ep-4: 4 LPA to 12.5 LPA | Tester to Developer | Real life experience of a software engineer,https://www.youtube.com/watch?v=bl8N0GUi6GI 9 | Multiple Job Offers,Ep-3: Couple got 32 LPA job | Husband helped wife to get a job in IT Industry | Career Mistakes,https://www.youtube.com/watch?v=bJTjubLXjrY 10 | Notice Period,Ep-2: Jobless having 1 year old kid to 18 LPA | Inspiring journey of a software engineer,https://www.youtube.com/watch?v=eHF13Y3Nyro 11 | Notice Period,Ep-1: Career Mistakes by Software Engineer | Employee fired from job after 8 months,https://www.youtube.com/watch?v=LGRcFCYdnJE`; 12 | -------------------------------------------------------------------------------- /image-gallery-dnd/src/Components/ImageCard.jsx: -------------------------------------------------------------------------------- 1 | import { useSortable } from "@dnd-kit/sortable"; 2 | import { CSS } from "@dnd-kit/utilities"; 3 | 4 | const ImageCard = ({ elm, index, checked }) => { 5 | const { 6 | attributes, 7 | listeners, 8 | setNodeRef, 9 | transform, 10 | transition, 11 | isDragging, 12 | } = useSortable({ id: elm.id }); 13 | const style = { 14 | transform: CSS.Transform.toString(transform), 15 | transition: transition || undefined, 16 | opacity: isDragging ? "0.5" : "1", 17 | touchAction: 'none', 18 | }; 19 | return ( 20 |
28 |
31 | {!isDragging ? ( 32 | 37 | ) : ( 38 | null 39 | )} 40 |
47 |
48 | checked(index)} 51 | checked={elm?.isChecked} 52 | type="checkbox" 53 | > 54 |
55 |
56 |
57 |
58 | ); 59 | }; 60 | 61 | export default ImageCard; 62 | -------------------------------------------------------------------------------- /modalbox-slideshow/src/slider.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | 5 | .App { 6 | font-family: sans-serif; 7 | text-align: center; 8 | } 9 | 10 | .slider { 11 | position: relative; 12 | max-width: 500px; 13 | margin: 0 auto; 14 | } 15 | 16 | .slide { 17 | position: relative; 18 | display: none; 19 | } 20 | 21 | @keyframes fade { 22 | from { 23 | opacity: 0.4; 24 | } 25 | to { 26 | opacity: 1; 27 | } 28 | } 29 | 30 | .slide.active { 31 | display: block; 32 | animation-name: fade; 33 | animation-duration: 1.5s; 34 | } 35 | 36 | .slide span { 37 | position: absolute; 38 | bottom: 20px; 39 | left: 50%; 40 | transform: translateX(-50%); 41 | color: #fff; 42 | } 43 | 44 | .slide img { 45 | width: 100%; 46 | } 47 | 48 | .navigation-bottom { 49 | display: flex; 50 | align-items: center; 51 | justify-content: center; 52 | } 53 | 54 | .preview { 55 | margin: 0 2px; 56 | transition: all 0.2s ease; 57 | cursor: pointer; 58 | border: 3px solid gray; 59 | } 60 | 61 | .preview.active { 62 | border-color: skyblue; 63 | } 64 | 65 | .navigation-next-prev .next-prev { 66 | position: absolute; 67 | top: 50%; 68 | font-size: 1.5em; 69 | cursor: pointer; 70 | transform: translateY(-100%); 71 | z-index: 10000; 72 | } 73 | 74 | .next { 75 | right: 10px; 76 | } 77 | 78 | .prev { 79 | left: 10px; 80 | } 81 | 82 | .image-list { 83 | display: flex; 84 | align-items: center; 85 | justify-content: space-between; 86 | flex-wrap: wrap; 87 | } 88 | 89 | .image-list > div { 90 | flex: 1 33%; 91 | padding: 5px; 92 | cursor: pointer; 93 | } 94 | 95 | .image-list > div img { 96 | width: 100%; 97 | border: 3px solid gray; 98 | } 99 | 100 | .image-list > div.active img { 101 | border-color: skyblue; 102 | } -------------------------------------------------------------------------------- /youtube-videos/src/components/Playlist.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from "react"; 2 | import Tabs from "./Tabs"; 3 | import VideoCard from "./VideoCard"; 4 | import { rawData } from "../data/videosCSV"; 5 | 6 | interface Video { 7 | playlist: string; 8 | title: string; 9 | url: string; 10 | } 11 | 12 | const Playlist: React.FC = () => { 13 | const [videos, setVideos] = useState([]); 14 | const [selectedPlaylist, setSelectedPlaylist] = useState("All"); 15 | const [searchTerm, setSearchTerm] = useState(""); 16 | 17 | useEffect(() => { 18 | processData(rawData); 19 | }, []); 20 | 21 | const processData = (rawData: string) => { 22 | const lines = rawData.trim().split("\n"); 23 | const videosData = lines.map((line) => { 24 | const [playlist, title, url] = line.split(","); 25 | return { 26 | playlist: playlist.trim(), 27 | title: title.trim(), 28 | url: url.trim(), 29 | }; 30 | }); 31 | setVideos(videosData); 32 | }; 33 | 34 | const uniquePlaylists = ["All", ...Array.from(new Set(videos.map((video) => video.playlist)))]; 35 | 36 | const handleClick = (playlist: string | null) => { 37 | setSelectedPlaylist(playlist); 38 | }; 39 | 40 | const handleSearch = (event: React.ChangeEvent) => { 41 | setSearchTerm(event.target.value); 42 | }; 43 | 44 | const filteredVideos = videos.filter((video) => { 45 | return ( 46 | (selectedPlaylist === "All" || video.playlist === selectedPlaylist) && 47 | video.title.toLowerCase().includes(searchTerm.toLowerCase()) 48 | ); 49 | }); 50 | 51 | return ( 52 |
53 |
54 | 61 |
62 | 63 |
64 | {filteredVideos.map((video, index) => ( 65 | 66 | ))} 67 |
68 |
69 | ); 70 | }; 71 | 72 | export default Playlist; -------------------------------------------------------------------------------- /youtube-videos1/src/App.css: -------------------------------------------------------------------------------- 1 | .app { 2 | max-width: 1280px; 3 | width: 100vw; 4 | margin: 0 auto; 5 | padding: 0rem 1rem; 6 | font-family:'Times New Roman', Times, serif; 7 | font-weight: 400; 8 | text-align: center; 9 | /* background-image: linear-gradient(to bottom, black, yellow); */ 10 | } 11 | 12 | .social-icons { 13 | margin-top: 10px; 14 | } 15 | 16 | .social-icons > * { 17 | margin-right: 10px; 18 | font-size: 24px; 19 | transition: transform 0.3s ease; 20 | } 21 | 22 | .social-icons > *:hover { 23 | transform: scale(1.2); 24 | } 25 | 26 | .search-container { 27 | .search-input{ 28 | width:100%; 29 | height:30px; 30 | margin-bottom: 20px; 31 | border-radius: 10px; 32 | } 33 | } 34 | 35 | .btns-category{ 36 | display: flex; 37 | justify-content: flex-start; 38 | flex-wrap: wrap; 39 | gap:10px; 40 | margin-bottom: 20px; 41 | 42 | .btn-notes{ 43 | margin-left:10px; 44 | border-radius: 20px; 45 | } 46 | } 47 | 48 | .btn-category { 49 | width: 238px; 50 | font-weight: 600; 51 | padding: 10px 15px; 52 | margin-right: 10px; 53 | background-color: #f0f0f0; 54 | border: 1px solid #ddd; 55 | border-radius: 20px; 56 | cursor: pointer; 57 | } 58 | 59 | .btn-category.active, 60 | .btn-category:hover, 61 | .btn-category:focus { 62 | background-color: lightblue; 63 | } 64 | 65 | .btns-playlist{ 66 | display: flex; 67 | justify-content: flex-start; 68 | flex-wrap:wrap; 69 | gap:10px; 70 | margin-bottom: 20px; 71 | 72 | .btn-notes{ 73 | margin-left:10px; 74 | border-radius: 20px; 75 | } 76 | } 77 | 78 | .btn-playlist { 79 | width: 238px; 80 | padding: 10px 15px; 81 | margin-right: 10px; 82 | background-color: lightgreen; 83 | border: 1px solid #ddd; 84 | border-radius: 20px; 85 | cursor: pointer; 86 | } 87 | 88 | .btn-playlist.active, 89 | .btn-playlist:hover, 90 | .btn-playlist:focus { 91 | background-color: lightblue; 92 | } 93 | 94 | .videos-container { 95 | display: flex; 96 | flex-wrap: wrap; 97 | } 98 | 99 | .video-container{ 100 | width: 25%; 101 | 102 | .react-player__preview{ 103 | border: 2px solid black; 104 | border-radius: 15px; 105 | } 106 | 107 | .video-title{ 108 | font-family: system-ui; 109 | font-weight: 500; 110 | margin: 10px 10px 20px 5px 111 | } 112 | } 113 | -------------------------------------------------------------------------------- /dnd-beautiful-example/src/App.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd"; 3 | 4 | const getItems = count => 5 | Array.from({ length: count }, (v, k) => k).map(k => ({ 6 | id: `item-${k}`, 7 | content: `item ${k}` 8 | })); 9 | 10 | const reorder = (list, startIndex, endIndex) => { 11 | const result = Array.from(list); 12 | const [removed] = result.splice(startIndex, 1); 13 | result.splice(endIndex, 0, removed); 14 | 15 | return result; 16 | }; 17 | 18 | const grid = 8; 19 | 20 | const getItemStyle = (isDragging, draggableStyle) => ({ 21 | userSelect: "none", 22 | padding: grid * 2, 23 | margin: `0 0 ${grid}px 0`, 24 | background: isDragging ? "lightgreen" : "grey", 25 | ...draggableStyle 26 | }); 27 | 28 | const getListStyle = isDraggingOver => ({ 29 | background: isDraggingOver ? "lightblue" : "lightgrey", 30 | padding: grid, 31 | width: 250 32 | }); 33 | 34 | const App = () => { 35 | const [items, setItems] = useState(getItems(5)); 36 | 37 | const onDragEnd = result => { 38 | if (!result.destination) { 39 | return; 40 | } 41 | 42 | const reorderedItems = reorder( 43 | items, 44 | result.source.index, 45 | result.destination.index 46 | ); 47 | 48 | setItems(reorderedItems); 49 | }; 50 | 51 | return ( 52 | 53 | 54 | {(provided, snapshot) => ( 55 |
60 | {items.map((item, index) => ( 61 | 62 | {(provided, snapshot) => ( 63 |
72 | {item.content + ' index: ' + index} 73 |
74 | )} 75 | 76 | ))} 77 | {provided.placeholder} 78 |
79 | )} 80 | 81 | 82 | ); 83 | }; 84 | 85 | export default App; 86 | -------------------------------------------------------------------------------- /currency-converter/src/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /dnd-beautiful-example/README.md: -------------------------------------------------------------------------------- 1 | # React + Vite 2 | 3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. 4 | 5 | Currently, two official plugins are available: 6 | 7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh 8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh 9 | 10 | 11 | More Examples: https://codesandbox.io/examples/package/react-beautiful-dnd 12 | 13 | Certainly! Let's break down the functional component code: 14 | 15 | 1. Imports: 16 | 17 | React: Imported from React library. 18 | DragDropContext, Droppable, Draggable: These are imports from react-beautiful-dnd library, which provides drag and drop functionality for React components. 19 | 20 | 2. Data Generation: 21 | 22 | getItems: This function generates fake data for the draggable items. It creates an array of items, each with an id and content. 23 | 24 | 3. Reordering Function: 25 | 26 | reorder: This function is used to reorder items within the list based on the start index and end index provided. 27 | 28 | 4. Styles: 29 | 30 | grid: This variable is used to define the grid size. 31 | getItemStyle: This function defines the styles for each draggable item. It changes the background color of the item when it's being dragged. 32 | getListStyle: This function defines the styles for the droppable list. It changes the background color of the list when items are being dragged over it. 33 | 34 | 5. Component Definition: 35 | 36 | App: This is a functional component that represents the main application. 37 | useState: It's a hook used to manage the state of the items array. 38 | onDragEnd: This function is called when a drag operation ends. It updates the state with the reordered items. 39 | The component returns JSX directly. 40 | DragDropContext: It wraps the entire application and provides the context for drag and drop functionality. 41 | Droppable: It defines a droppable area where draggable items can be dropped. 42 | Inside Droppable, a function is used to render the list of draggable items. 43 | Draggable: It defines a draggable item within the droppable area. 44 | Inside Draggable, another function is used to render the content of each item. 45 | provided and snapshot are provided by react-beautiful-dnd and contain information about the droppable area and draggable item respectively. 46 | The placeholder provided by Droppable is used to maintain the layout when items are being dragged. 47 | 48 | 6. Rendering: 49 | 50 | The component returns JSX directly from the function. 51 | There's no need for ReactDOM.render as the component is exported and can be rendered at the root level of the application. -------------------------------------------------------------------------------- /modalbox-slideshow/src/App.jsx: -------------------------------------------------------------------------------- 1 | import { useState } from "react"; 2 | import Modal from "./Modal"; 3 | import Slider from './Slider'; 4 | 5 | export default function App() { 6 | const [show, setShow] = useState(false); 7 | const [active, setActive] = useState(0); 8 | 9 | const images = [ 10 | { 11 | image_url: 12 | "https://img.freepik.com/free-photo/young-female-jacket-shorts-presenting-comparing-something-looking-confident-front-view_176474-37521.jpg?w=1800&t=st=1693037944~exp=1693038544~hmac=97e967909706f9b73b4b47d521acf54806f4b9b3efab6196bc8a69f07efff554", 13 | caption: "Image 1" 14 | }, 15 | { 16 | image_url: 17 | "https://img.freepik.com/free-photo/girl-grey-shirt-showing-something-her-hand_144627-51099.jpg?t=st=1693037931~exp=1693038531~hmac=63713e5a5cf2d23f53ca82b9996ad224ac6e92d0275a53b6debbe6523d7df020", 18 | caption: "Image 2" 19 | }, 20 | { 21 | image_url: 22 | "https://img.freepik.com/free-photo/young-lady-shirt-jacket-making-scales-gesture-looking-cheerful-front-view_176474-85195.jpg?t=st=1693037931~exp=1693038531~hmac=2f83b6689538e4056912c96f448163e9ef10998f48f671b7e50279f81611fbe6", 23 | caption: "Image 3" 24 | }, 25 | { 26 | image_url: 27 | "https://img.freepik.com/free-photo/girl-wide-opening-hands-giving-explanation-high-quality-photo_144627-60466.jpg?w=1800&t=st=1693038021~exp=1693038621~hmac=d4520cd86b2aea3e5dda765ede05bb53d70e18a574756d0f41a6806fe325d26d", 28 | caption: "Image 4" 29 | }, 30 | { 31 | image_url: 32 | "https://img.freepik.com/free-photo/young-lady-shirt-jacket-making-scales-gesture-looking-cheerful-front-view_176474-85195.jpg?t=st=1693037931~exp=1693038531~hmac=2f83b6689538e4056912c96f448163e9ef10998f48f671b7e50279f81611fbe6", 33 | caption: "Image 5" 34 | }, 35 | { 36 | image_url: 37 | "https://img.freepik.com/free-photo/girl-wide-opening-hands-giving-explanation-high-quality-photo_144627-60466.jpg?w=1800&t=st=1693038021~exp=1693038621~hmac=d4520cd86b2aea3e5dda765ede05bb53d70e18a574756d0f41a6806fe325d26d", 38 | caption: "Image 6" 39 | } 40 | ]; 41 | 42 | const handleClick = (index) => { 43 | setActive(index); 44 | setShow(true); 45 | }; 46 | 47 | const onClose = () => { 48 | setShow(false); 49 | }; 50 | 51 | return ( 52 |
53 | 54 | 55 | 56 |
57 | {images.map((e, i) => ( 58 |
handleClick(i)} 61 | key={e.caption} 62 | > 63 | {e.caption} 64 |
65 | ))} 66 |
67 |
68 | ); 69 | }; -------------------------------------------------------------------------------- /button-form-table/src/App.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | import { Button } from 'carbon-components-react'; 3 | import ModalForm from './ModalForm'; 4 | import DataTable from './DataTable'; 5 | import './App.css'; 6 | 7 | const App: React.FC = () => { 8 | const [isModalOpen, setIsModalOpen] = useState(false); 9 | const [formData1, setFormData1] = useState([]); 10 | const [formData2, setFormData2] = useState([]); 11 | const [editIndex, setEditIndex] = useState(null); 12 | const [formType, setFormType] = useState(1); // To track which form is being used 13 | 14 | const openModal = ( 15 | editIndex: number | null = null, 16 | formType: number = 1 17 | ) => { 18 | setIsModalOpen(true); 19 | setEditIndex(editIndex); 20 | setFormType(formType); 21 | }; 22 | 23 | const closeModal = () => { 24 | setIsModalOpen(false); 25 | setEditIndex(null); 26 | }; 27 | 28 | const handleFormSubmit = (data: string[]) => { 29 | if (editIndex !== null) { 30 | if (formType === 1) { 31 | const newData = [...formData1]; 32 | newData[editIndex] = data; 33 | setFormData1(newData); 34 | } else { 35 | const newData = [...formData2]; 36 | newData[editIndex] = data; 37 | setFormData2(newData); 38 | } 39 | } else { 40 | if (formType === 1) { 41 | setFormData1([...formData1, data]); 42 | } else { 43 | setFormData2([...formData2, data]); 44 | } 45 | } 46 | closeModal(); 47 | }; 48 | 49 | const handleEdit = (index: number) => { 50 | openModal(index, formType); 51 | }; 52 | 53 | const handleDelete = (index: number) => { 54 | if (formType === 1) { 55 | const newData = [...formData1]; 56 | newData.splice(index, 1); 57 | setFormData1(newData); 58 | } else { 59 | const newData = [...formData2]; 60 | newData.splice(index, 1); 61 | setFormData2(newData); 62 | } 63 | }; 64 | 65 | return ( 66 |
67 | 68 | 69 | {isModalOpen && ( 70 | 76 | )} 77 | {formData1.length>0 && ( 78 |
79 |

Entered Data for Form 1

80 | 81 |
82 | )} 83 | {formData2.length>0 && ( 84 |
85 |

Entered Data for Form 2

86 | 87 |
88 | ) } 89 | 90 |
91 | ); 92 | }; 93 | 94 | export default App; 95 | -------------------------------------------------------------------------------- /button-form-table/src/ModalForm.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from 'react'; 2 | import Modal from "@mui/material/Modal"; 3 | import Button from '@mui/material/Button'; 4 | import TextField from '@mui/material/TextField'; 5 | import { ThemeProvider, createTheme } from '@mui/material/styles'; 6 | 7 | interface ModalFormProps { 8 | isOpen: boolean; 9 | onClose: () => void; 10 | onSubmit: (data: string[]) => void; 11 | editData?: string[]; // Optional prop for editing existing data 12 | customLabels?: string[]; // Optional prop for customizing input labels 13 | } 14 | 15 | const theme = createTheme({ 16 | palette: { 17 | primary: { 18 | main: '#007bff', // Change this color code to your desired primary color 19 | }, 20 | secondary: { 21 | main: '#ffc107', // Change this color code to your desired secondary color 22 | }, 23 | }, 24 | }); 25 | 26 | const ModalForm: React.FC = ({ isOpen, onClose, onSubmit, editData, customLabels }) => { 27 | const [inputs, setInputs] = useState(['', '', '']); 28 | 29 | useEffect(() => { 30 | if (editData) { 31 | setInputs(editData); 32 | } 33 | }, [editData]); 34 | 35 | const handleChange = (index: number, value: string) => { 36 | const newInputs = [...inputs]; 37 | newInputs[index] = value; 38 | setInputs(newInputs); 39 | }; 40 | 41 | const handleSubmit = () => { 42 | onSubmit(inputs); 43 | setInputs(['', '', '']); 44 | onClose(); 45 | }; 46 | 47 | return ( 48 | 49 | 55 |
{/* Removed classes prop */} 56 | 57 | 83 |
84 | 85 | 86 | ); 87 | }; 88 | 89 | export default ModalForm; -------------------------------------------------------------------------------- /table-to-pdf/src/assets/react.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /youtube-videos/src/assets/react.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /youtube-videos1/src/assets/react.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /button-form-table/src/assets/react.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /dnd-beautiful-example/src/assets/react.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /image-gallery-dnd/src/assets/react.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /modalbox-slideshow/src/assets/react.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /youtube-videos1/src/App.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | import Modal from './components/Modal'; 3 | import {notesData} from './notes'; 4 | import {rawData} from './data/videosCSV.ts' 5 | import ReactPlayer from 'react-player'; 6 | import { FaLinkedin } from "react-icons/fa"; 7 | import { IoCall } from "react-icons/io5"; 8 | import './App.css'; 9 | 10 | interface Video { 11 | category: string; 12 | playlist: string; 13 | title: string; 14 | url: string; 15 | } 16 | 17 | const parseRawData = (rawData: string): Video[] => { 18 | return rawData.split('\n').map((entry) => { 19 | const [category, playlist, title, url] = entry.split(','); 20 | return { category, playlist, title, url }; 21 | }); 22 | }; 23 | 24 | const App: React.FC = () => { 25 | const [searchTerm, setSearchTerm] = useState(''); 26 | const [videos, setVideos] = useState(parseRawData(rawData)); 27 | const [selectedCategory, setSelectedCategory] = useState('All'); 28 | const [selectedPlaylist, setSelectedPlaylist] = useState("All"); 29 | const [modalText, setModalText] = useState(''); 30 | const [isModalOpen, setIsModalOpen] = useState(false); 31 | 32 | const filteredVideos = videos.filter((video) => { 33 | return ( 34 | video.title.toLowerCase().includes(searchTerm.toLowerCase()) && 35 | (selectedCategory === "All" || !selectedCategory || video.category === selectedCategory) && 36 | (selectedPlaylist === "All" || !selectedPlaylist || video.playlist === selectedPlaylist) 37 | ); 38 | }); 39 | 40 | const categories = ['All', ...Array.from(new Set(videos.map((video) => video.category)))]; 41 | const playlists = 42 | selectedCategory && 43 | selectedCategory === 'All' 44 | ? undefined : 45 | ["All", ...Array.from(new Set(videos.filter((video) => video.category === selectedCategory).map((video) => video.playlist)))]; 46 | 47 | const openModalCategory = (selectedCategory: string) => { 48 | if (selectedCategory && notesData[selectedCategory]) { 49 | setModalText(notesData[selectedCategory].notes); 50 | setIsModalOpen(true); 51 | } 52 | }; 53 | 54 | const openModalPlaylist = (selectedPlaylist: string) => { 55 | if (selectedCategory && selectedPlaylist && notesData[selectedCategory] && notesData[selectedCategory][selectedPlaylist]) { 56 | setModalText(notesData[selectedCategory][selectedPlaylist]); 57 | setIsModalOpen(true); 58 | } 59 | }; 60 | 61 | const closeModal = () => { 62 | setModalText(''); 63 | setIsModalOpen(false); 64 | }; 65 | 66 | return ( 67 |
68 |

Subscribe to Manohar Batra YT Channel

69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 |
78 | setSearchTerm(e.target.value)} 83 | className="search-input" 84 | /> 85 |
86 |
87 | {categories.map((category) => ( 88 | 97 | 98 | ))} 99 |
100 | {selectedCategory && playlists && ( 101 |
102 | {playlists.map((playlist) => ( 103 | 112 | 113 | ))} 114 |
115 | )} 116 |
117 | {filteredVideos.map((video, index) => ( 118 |
119 | {/* */} 127 | 137 |

{video.title}

138 |
139 | ))} 140 |
141 | 142 |
143 | ); 144 | }; 145 | 146 | export default App; 147 | -------------------------------------------------------------------------------- /currency-converter/src/pages/currencyConverter/css/currencyConverter.css: -------------------------------------------------------------------------------- 1 | body{ 2 | /* background-image: url('../../../assets/images/bg-image.jpg'); */ 3 | /* background-color: #fff; */ 4 | } 5 | 6 | .headerContent{ 7 | min-height: 270px; 8 | width: auto; 9 | background-color: #1746A2; 10 | padding-top: 5rem; 11 | position: relative; 12 | } 13 | .headerTitle{ 14 | color: #EEF1FF; 15 | position: absolute; 16 | left: 0; 17 | right: 0; 18 | z-index: 0; 19 | bottom: 90px; 20 | } 21 | 22 | .currency-container{ 23 | margin-top: -70px; 24 | /* background-color: #EEF1FF; */ 25 | background-color: #FFF; 26 | /* padding: 50px 30px; */ 27 | padding: 45px; 28 | border-radius: 10px; 29 | box-shadow: rgb(35 55 80 / 30%) 0px 6px 12px; 30 | z-index: 9999; 31 | } 32 | .inputAmount{ 33 | padding: 5px 10px; 34 | font-weight: bold; 35 | border: none; 36 | border-bottom: 3px solid #ccc; 37 | width: 100%; 38 | height: 40px !important; 39 | padding-left: 0; 40 | } 41 | .css-13cymwt-control, .css-t3ipsp-control{ 42 | border: none !important; 43 | border-bottom: 3px solid #ccc !important; 44 | border-radius: 0 !important; 45 | height: 40px !important; 46 | max-height: 40px !important; 47 | } 48 | .css-t3ipsp-control{ 49 | box-shadow: none !important; 50 | } 51 | .swap-icon { 52 | /* background: #675AFE; */ 53 | height: 37px; 54 | max-height: 37px; 55 | border: 3px solid #1746a2; 56 | padding: 5px; 57 | border-radius: 50%; 58 | width: 37px; 59 | max-width: 37px; 60 | text-align: center; 61 | color: #1746a2; 62 | cursor: pointer; 63 | } 64 | .font-weight-bold{font-weight: bold;} 65 | .mb-10{margin-bottom: 10px;} 66 | .pl-0{padding-left: 0;} 67 | .text-right{ 68 | text-align: right; 69 | } 70 | input:focus-visible, select:focus-visible { 71 | outline: none; 72 | /* border-radius: 3px; */ 73 | } 74 | .currency-symbol{ 75 | border-bottom: 3px solid #ccc; 76 | height: 40px !important; 77 | width: 100%; 78 | text-align: center; 79 | display: flex; 80 | justify-content: center; 81 | align-items: center; 82 | } 83 | .lbl-title{ 84 | color: #1746a2 ; 85 | } 86 | .btn-convert{ 87 | border-color: #1746a2; 88 | border-radius: 0; 89 | border-width: 3px; 90 | font-weight: bold; 91 | color: #1746a2; 92 | } 93 | 94 | .btn-convert:hover, .btn-convert:active{ 95 | border-color: #0d6efd; 96 | color: #0d6efd !important; 97 | border-radius: 2px; 98 | background-color: #fff !important; 99 | } 100 | .font-awes-icon{ 101 | color: #5c667bb5; 102 | font-size: 25px; 103 | } 104 | .disclaimer-container{ 105 | background-color: #f2f7fe; 106 | color: #5c667b; 107 | border-radius: 8px; 108 | padding: 15px 10px; 109 | } 110 | .disclaimer-text-container { 111 | font-size: 12px; 112 | } 113 | .result-currency-from { 114 | color: #5c667b; 115 | font-weight: bold; 116 | font-size: 1.2rem; 117 | } 118 | .result-currency-to { 119 | color: #1746a2; 120 | font-weight: bold; 121 | font-size: 1.8rem; 122 | } 123 | .exchange-rate { 124 | font-size: 0.9rem !important; 125 | text-decoration: underline; 126 | color: #5c667b; 127 | text-underline-offset: 5px; 128 | } 129 | .result-container { 130 | transition: all .5s; 131 | height: 80px; 132 | } 133 | .hidden{ 134 | height: 0px !important; 135 | transition: all .5s; 136 | } 137 | #loader { 138 | z-index: 99999; 139 | translate: 0 10px; 140 | position: absolute; 141 | } 142 | 143 | .blur-2{ 144 | filter: blur(2px); 145 | } 146 | .page-currecy-converter{ 147 | /* display: flex; 148 | align-items: center; 149 | justify-content: center; 150 | min-height: 100vh; 151 | padding: 0 10px; */ 152 | /* background: #675AFE; */ 153 | } 154 | /* ::selection{ 155 | color: #fff; 156 | background: #675AFE; 157 | } 158 | .wrapper{ 159 | width: 470px; 160 | padding: 30px; 161 | border-radius: 7px; 162 | background: #fff; 163 | box-shadow: 7px 7px 20px rgba(0, 0, 0, 0.05); 164 | margin: 0 auto; 165 | } 166 | .wrapper header{ 167 | font-size: 28px; 168 | font-weight: 500; 169 | text-align: center; 170 | } 171 | .wrapper form{ 172 | margin: 40px 0 20px 0; 173 | } 174 | form :where(input, select, button){ 175 | width: 100%; 176 | outline: none; 177 | border-radius: 5px; 178 | border: none; 179 | } 180 | form p{ 181 | font-size: 18px; 182 | margin-bottom: 5px; 183 | } 184 | form input{ 185 | height: 50px; 186 | font-size: 17px; 187 | padding: 0 15px; 188 | border: 1px solid #999; 189 | } 190 | form input:focus{ 191 | padding: 0 14px; 192 | border: 2px solid #675AFE; 193 | } */ 194 | /* 195 | form .drop-list{ 196 | display: flex; 197 | margin-top: 20px; 198 | align-items: center; 199 | justify-content: space-between; 200 | } 201 | .drop-list .select-box{ 202 | display: flex; 203 | width: 115px; 204 | height: 45px; 205 | align-items: center; 206 | border-radius: 5px; 207 | justify-content: center; 208 | border: 1px solid #999; 209 | } 210 | .select-box img{ 211 | max-width: 21px; 212 | } 213 | .select-box select{ 214 | width: auto; 215 | font-size: 16px; 216 | background: none; 217 | margin: 0 -5px 0 5px; 218 | } 219 | .select-box select::-webkit-scrollbar{ 220 | width: 8px; 221 | } 222 | .select-box select::-webkit-scrollbar-track{ 223 | background: #fff; 224 | } 225 | .select-box select::-webkit-scrollbar-thumb{ 226 | background: #888; 227 | border-radius: 8px; 228 | border-right: 2px solid #ffffff; 229 | } 230 | .drop-list .icon{ 231 | cursor: pointer; 232 | margin-top: 30px; 233 | font-size: 22px; 234 | } */ 235 | /* form .exchange-rate{ 236 | font-size: 17px; 237 | margin: 20px 0 30px; 238 | } 239 | form button{ 240 | height: 52px; 241 | color: #fff; 242 | font-size: 17px; 243 | cursor: pointer; 244 | background: #675AFE; 245 | transition: 0.3s ease; 246 | } 247 | form button:hover{ 248 | background: #4534fe; 249 | } */ 250 | 251 | #swap-icon{ 252 | /* color: #4534fe; 253 | font-size: 17px; 254 | cursor: pointer; 255 | transition: 0.3s ease; 256 | display: inline-block; 257 | padding: 5px; 258 | border-radius: 4px; */ 259 | /* background: #675AFE; */ 260 | /* height: 52px; */ 261 | } 262 | /* #swap-icon:hover{ 263 | background: #4534fe; 264 | } */ -------------------------------------------------------------------------------- /image-gallery-dnd/src/App.jsx: -------------------------------------------------------------------------------- 1 | import { 2 | DndContext, 3 | DragOverlay, 4 | MouseSensor, 5 | TouchSensor, 6 | closestCenter, 7 | useSensor, 8 | useSensors, 9 | } from "@dnd-kit/core"; 10 | import { 11 | SortableContext, 12 | arrayMove, 13 | rectSortingStrategy, 14 | } from "@dnd-kit/sortable"; 15 | import axios from "axios"; 16 | import { useEffect, useState } from "react"; 17 | import "./App.css"; 18 | 19 | import ImageCard from "./Components/ImageCard"; 20 | import OverlayImage from "./Components/OverlayImage"; 21 | import Loader from "./Components/Loader"; 22 | import ImageUploader from "./Components/ImageUploader"; 23 | import { Analytics } from '@vercel/analytics/react'; 24 | 25 | 26 | function App() { 27 | const [images, setImages] = useState([]); 28 | const [image, setImage] = useState(null); 29 | const [activeImage, setActiveImage] = useState(null); 30 | const [totalChecked, setTotalChecked] = useState(0); 31 | 32 | useEffect(() => { 33 | axios 34 | .get("https://nest-image-gallery.vercel.app/api/v1/image/all") 35 | .then(function (response) { 36 | const imageData = response.data.map((image) => { 37 | const newImage = { ...image, id: image._id, isChecked: false }; 38 | return newImage; 39 | }); 40 | setImages(imageData); 41 | }) 42 | .catch(function (error) { 43 | console.log(error); 44 | }); 45 | }, []); 46 | 47 | const sensors = useSensors( 48 | useSensor(MouseSensor, { 49 | activationConstraint: { 50 | distance: 8, 51 | }, 52 | }), 53 | useSensor(TouchSensor, { 54 | activationConstraint: { 55 | distance: 8, 56 | }, 57 | }) 58 | ); 59 | 60 | //to handle bulk unselect 61 | const handleUnChecked = () => { 62 | const uncheckedImages = images.map((img) => { 63 | return { ...img, isChecked: false }; 64 | }); 65 | setImages(uncheckedImages); 66 | 67 | setTotalChecked(0); 68 | }; 69 | 70 | //to handle individual select 71 | const checked = (index) => { 72 | const updatedImages = [...images]; 73 | updatedImages[index].isChecked = !updatedImages[index].isChecked; 74 | setImages(updatedImages); 75 | 76 | setTotalChecked(images.filter((image) => image.isChecked).length ?? 0); 77 | }; 78 | 79 | //to handle delete 80 | const handleDelete = () => { 81 | const deletingIds = []; 82 | images.forEach((image) => { 83 | if (image.isChecked) { 84 | deletingIds.push(image.id); 85 | } 86 | }); 87 | 88 | const deletingIdsStr = deletingIds.map((id) => `ids=${id}`).join("&"); 89 | 90 | axios 91 | .delete( 92 | `https://nest-image-gallery.vercel.app/api/v1/image/delete-multiple?${deletingIdsStr}` 93 | ) 94 | .then(function (response) { 95 | if (response.data.isDeleted) { 96 | const remainingImages = images.filter( 97 | (image) => !deletingIds.includes(image.id) 98 | ); 99 | setImages(remainingImages); 100 | } 101 | }) 102 | .catch(function (error) { 103 | console.log(error); 104 | }); 105 | setTotalChecked(0); 106 | }; 107 | 108 | const handleDragStart = (event) => { 109 | const active = images.find((image) => image.id === event.active.id); 110 | setActiveImage(active.url); 111 | }; 112 | 113 | const handleDragCancel = () => { 114 | setActiveImage(null); 115 | }; 116 | 117 | //to handle dnd kit OnDragEnd 118 | const onDragEnd = (event) => { 119 | const { active, over } = event; 120 | if (active.id === over.id) { 121 | return; 122 | } 123 | setImages((images) => { 124 | const oldIndex = images.findIndex((image) => image.id === active.id); 125 | const newIndex = images.findIndex((image) => image.id === over.id); 126 | return arrayMove(images, oldIndex, newIndex); 127 | }); 128 | }; 129 | 130 | // setTotalChecked(images.filter((image) => image.isChecked).length ?? 0); 131 | 132 | //Separate imageCard for dnd kit with dnd kit function and props 133 | 134 | const handleFileChange = (e) => { 135 | const form = new FormData(); 136 | 137 | const file = e.target.files[0]; 138 | setImage(URL.createObjectURL(file)); 139 | 140 | form.append("image", file); 141 | 142 | axios 143 | .post( 144 | "https://api.imgbb.com/1/upload?key=4389f6aa038004767b479af56fd374b6", 145 | form 146 | ) 147 | .then(function (response) { 148 | createNewEntry({ 149 | imgBBId: response.data.data.id, 150 | fileName: response.data.data.image.filename, 151 | url: response.data.data.image.url, 152 | }); 153 | }) 154 | .catch(function (error) { 155 | console.log(error); 156 | }); 157 | }; 158 | 159 | const createNewEntry = (body) => { 160 | axios 161 | .post("https://nest-image-gallery.vercel.app/api/v1/image/create", body) 162 | .then(function (response) { 163 | setImages([ 164 | ...images, 165 | { ...response.data, id: response.data._id, isChecked: false }, 166 | ]); 167 | }) 168 | .catch(function (error) { 169 | console.log(error); 170 | }); 171 | setImage(null); 172 | }; 173 | 174 | return ( 175 | <> 176 |
177 |
178 |
179 |
180 | {!!totalChecked && ( 181 | handleUnChecked()} 185 | checked={totalChecked > 0 ? true : false} 186 | /> 187 | )} 188 |
189 | {totalChecked ? ( 190 |

{`${totalChecked}`}Images Selected

191 | ) : ( 192 | "Image Gallery" 193 | )} 194 |
195 |
196 |
197 |
198 | {!!totalChecked && ( 199 |
203 | 204 | Delete 205 | 206 |
207 | )} 208 | 209 |
210 |
211 | 218 | 219 |
220 | {images?.length > 0 ? ( 221 | images.map((elm, index) => ( 222 | 228 | )) 229 | ) : ( 230 | 231 | )} 232 | 233 | {image ? ( 234 |
235 | 239 | 251 | 252 | 253 |
254 | ) : ( 255 | "" 256 | )} 257 |
258 | 259 | 260 | {activeImage ? : null} 261 | 262 | 263 |
264 | 265 | ); 266 | } 267 | 268 | export default App; 269 | -------------------------------------------------------------------------------- /image-gallery-dnd/src/AppOld.jsx: -------------------------------------------------------------------------------- 1 | import { useEffect, useState } from "react"; 2 | import "./App.css"; 3 | import { Images } from "./util/image.util"; 4 | import { 5 | DndContext, 6 | MouseSensor, 7 | TouchSensor, 8 | closestCenter, 9 | useSensor, 10 | useSensors, 11 | } from "@dnd-kit/core"; 12 | import { 13 | SortableContext, 14 | arrayMove, 15 | rectSortingStrategy, 16 | useSortable, 17 | } from "@dnd-kit/sortable"; 18 | import { CSS } from "@dnd-kit/utilities"; 19 | import axios from "axios"; 20 | 21 | function App() { 22 | const [images, setImages] = useState([...Images]); 23 | // const [images, setImages] = useState([]); 24 | 25 | // useEffect(() => { 26 | // axios 27 | // .get("https://nest-image-gallery.vercel.app/api/v1/image/all") 28 | // .then(function (response) { 29 | // const imageData = response.data.map((image) => { 30 | // return { ...image, isChecked: false }; 31 | // }); 32 | // setImages(imageData); 33 | // }) 34 | // .catch(function (error) { 35 | // console.log(error); 36 | // }); 37 | // }, []); 38 | 39 | const sensors = useSensors( 40 | useSensor(MouseSensor, { 41 | activationConstraint: { 42 | distance: 8, 43 | }, 44 | }), 45 | useSensor(TouchSensor, { 46 | activationConstraint: { 47 | distance: 8, 48 | }, 49 | }) 50 | ); 51 | 52 | //to handle bulk unselect 53 | const handleUnChecked = () => { 54 | const uncheckedImages = images.map((img) => { 55 | return { ...img, isChecked: false }; 56 | }); 57 | setImages(uncheckedImages); 58 | }; 59 | 60 | //to handle individual select 61 | const checked = (index) => { 62 | console.log("checked"); 63 | const updatedImages = [...images]; 64 | updatedImages[index].isChecked = !updatedImages[index].isChecked; 65 | setImages(updatedImages); 66 | }; 67 | 68 | //to handle delete 69 | const handleDelete = () => { 70 | console.log("delete"); 71 | const deletingIds = []; 72 | images.forEach((image) => { 73 | if (image.isChecked) { 74 | deletingIds.push(image._id); 75 | } 76 | }); 77 | 78 | const deletingIdsStr = deletingIds.join(","); 79 | 80 | console.log("deletingIds", deletingIdsStr); 81 | 82 | axios 83 | .delete( 84 | "https://nest-image-gallery.vercel.app/api/v1/image/delete-multiple?ids=" + 85 | deletingIdsStr 86 | ) 87 | .then(function (response) { 88 | console.log(response); 89 | if (response.data.isDeleted) { 90 | const remainingImages = images.filter( 91 | (image) => !deletingIds.includes(image._id) 92 | ); 93 | setImages(remainingImages); 94 | } 95 | }) 96 | .error(function (error) { 97 | console.log(error); 98 | }); 99 | }; 100 | 101 | //to handle dnd kit OnDragEnd 102 | const onDragEnd = (event) => { 103 | // console.log(event) 104 | const { active, over } = event; 105 | if (active.id === over.id) { 106 | return; 107 | } 108 | setImages((images) => { 109 | const oldIndex = images.findIndex((image) => image.id === active.id); 110 | const newIndex = images.findIndex((image) => image.id === over.id); 111 | return arrayMove(images, oldIndex, newIndex); 112 | }); 113 | }; 114 | 115 | //keeping the total selected img 116 | const totalChecked = images.filter((image) => image.isChecked).length ?? 0; 117 | 118 | //Separate imageCard for dnd kit with dnd kit function and props 119 | const ImageCard = ({ elm, index }) => { 120 | const { attributes, listeners, setNodeRef, transform, transition } = 121 | useSortable({ id: elm._id }); 122 | const style = { 123 | transition, 124 | transform: CSS.Transform.toString(transform), 125 | }; 126 | return ( 127 |
{ 135 | console.log("Image clicked"); 136 | checked(index); 137 | }} 138 | > 139 |
140 | 145 |
152 |
153 | { 156 | console.log("Image clicked"); 157 | checked(index); 158 | }} 159 | defaultChecked={elm?.isChecked} 160 | type="checkbox" 161 | > 162 |
163 |
164 |
165 |
166 | ); 167 | }; 168 | 169 | const handleFileChange = (e) => { 170 | const form = new FormData(); 171 | 172 | const file = e.target.files[0]; 173 | console.log(file); 174 | // // setUploadImage(file); 175 | form.append("image", file); 176 | 177 | axios 178 | .post( 179 | "https://api.imgbb.com/1/upload?key=4389f6aa038004767b479af56fd374b6", 180 | form 181 | ) 182 | .then(function (response) { 183 | console.log(response); 184 | createNewEntry({ 185 | imgBBId: response.data.data.id, 186 | fileName: response.data.data.image.filename, 187 | url: response.data.data.image.url, 188 | }); 189 | }) 190 | .catch(function (error) { 191 | console.log(error); 192 | }); 193 | }; 194 | 195 | const createNewEntry = (body) => { 196 | axios 197 | .post("https://nest-image-gallery.vercel.app/api/v1/image/create", body) 198 | .then(function (response) { 199 | console.log("createNewEntry", response); 200 | setImages([...images, { ...response.data, isChecked: false }]); 201 | }) 202 | .catch(function (error) { 203 | console.log(error); 204 | }); 205 | }; 206 | 207 | console.log(images); 208 | 209 | return ( 210 | <> 211 |
212 |
213 | {/* checking if any image selected, if selected then delete button will appear */} 214 | {totalChecked ? ( 215 |
216 |
217 | handleUnChecked()} 221 | defaultChecked={totalChecked > 0 ? true : false} 222 | /> 223 | 224 | {totalChecked} Images Selected 225 | 226 |
227 | 228 |
232 | 240 | 245 | 246 | Delete 247 |
248 |
249 | ) : ( 250 |
251 | Image Gallery 252 |
253 | )} 254 |
255 | {/* dnd kit component */} 256 | 261 | 262 |
263 | {/* checking if any image available or not */} 264 | {images?.length > 0 ? ( 265 | images.map((elm, index) => ( 266 | 267 | )) 268 | ) : ( 269 |

No Images

270 | )} 271 | {/* */} 272 |
273 | 281 | 286 | 287 | 288 | {/*

Upload Images

*/} 289 | 292 | 300 |
301 |
302 | 303 | 304 |
305 | 306 | ); 307 | } 308 | 309 | export default App; 310 | -------------------------------------------------------------------------------- /currency-converter/src/pages/currencyConverter/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | import { useState, useEffect, useMemo } from "react"; 4 | import './css/currencyConverter.css'; 5 | import currencies from '../../utils/seeds/commonCurrency.json'; 6 | import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; 7 | import FadeLoader from "react-spinners/FadeLoader"; 8 | import Select from 'react-select' 9 | import CurrencyInput from 'react-currency-input-field'; 10 | 11 | import { 12 | faSyncAlt, faRepeat, faRightLeft, faCircleInfo 13 | } from "@fortawesome/free-solid-svg-icons"; 14 | 15 | const URL = `https://v6.exchangerate-api.com/v6/${process.env.REACT_APP_EXCHANGE_RATE_API_KEY}/pair`; 16 | 17 | function currencyConverter(props) { 18 | const [exchangeRate, setExchangeRate] = useState(0); 19 | const [exchangeRateAmount, setExchangeRateAmount] = useState(0); 20 | const [selectedCurrencySymbol, setSelectedCurrencySymbol] = useState("$"); 21 | const [selectAmount, setSelectAmount] = useState(10); 22 | const [exchangedSelectAmount, setExchangedSelectAmount] = useState(1); 23 | const [date, setDate] = useState(new Date()); 24 | const [isLoading, setLoading] = useState(false); 25 | const [reslultContaierCls, setReslultContaierCls] = useState("hidden"); 26 | 27 | 28 | let cuntriesOptions = []; 29 | Object.keys(currencies).map((currency, index) => { 30 | cuntriesOptions.push({ 31 | value: currencies[currency].code, 32 | label: `${currencies[currency].code} - ${currencies[currency].name}`, 33 | name: currencies[currency].name, 34 | symbol: currencies[currency].symbol, 35 | index: index 36 | }) 37 | }); 38 | 39 | const [selectedCurrencyFrom, setSelectedCurrencyFrom] = useState(cuntriesOptions[0]); 40 | const [selectedCurrencyTo, setSelectedCurrencyTo] = useState(cuntriesOptions[48]); 41 | 42 | useEffect(() => { 43 | if( selectAmount ){ 44 | handleConvert(); 45 | } 46 | }, [selectedCurrencyFrom, selectedCurrencyTo]); 47 | 48 | const handleConvert = () => { 49 | setLoading(true); 50 | setExchangeRateAmount(0); 51 | setExchangeRate(0) 52 | setReslultContaierCls('hidden'); 53 | 54 | const controller = new AbortController(); 55 | const signal = controller.signal; 56 | fetch(`${URL}/${selectedCurrencyFrom.value}/${selectedCurrencyTo.value}/${selectAmount}`, { signal }) 57 | .then((res) => res.json()) 58 | .then((data) => { 59 | console.log({ data }); 60 | if (data.result === "success") { 61 | var conversionRate = data.conversion_rate 62 | setExchangedSelectAmount(selectAmount); 63 | setExchangeRateAmount(roundOffToX(2, data.conversion_result)); 64 | setExchangeRate(roundOffToX(2, conversionRate)) 65 | setLoading(false); 66 | setReslultContaierCls(''); 67 | } 68 | 69 | }).catch(err => { 70 | setLoading(false); 71 | }); 72 | return () => { 73 | controller.abort(); 74 | } 75 | 76 | 77 | } 78 | 79 | useEffect(() => { 80 | 81 | const inerval = setInterval(() => { 82 | setDate(new Date()); 83 | }, 1000); 84 | 85 | return () => { 86 | clearInterval(inerval); 87 | } 88 | }, []); 89 | 90 | const handleSelectTo = (_eTo) => { 91 | setSelectedCurrencyTo(_eTo) 92 | } 93 | 94 | const handleSelectFrom = (_eFrom) => { 95 | console.log(" _eFrom ", _eFrom); 96 | setSelectedCurrencySymbol(_eFrom.symbol) 97 | setSelectedCurrencyFrom(_eFrom) 98 | } 99 | 100 | const handleSwap = (_eFrom) => { 101 | setSelectedCurrencyFrom(selectedCurrencyTo); 102 | setSelectedCurrencyTo(selectedCurrencyFrom); 103 | setSelectedCurrencySymbol(selectedCurrencyTo.symbol); 104 | } 105 | 106 | function roundOffToX(x, value) { 107 | return (x) ? value.toFixed(x) : value; 108 | } 109 | 110 | return <> 111 |
112 |
113 |
114 |

Currency Converter

115 | Check live foreign currency exchange rates 116 |
117 |
118 | 119 |
120 | {isLoading ?
121 |
: '' 122 | } 123 |
124 |
125 |
126 |
127 | 128 |
129 |
130 |
131 | 132 | {selectedCurrencySymbol} 133 | 134 |
135 |
136 | setSelectAmount(value) 142 | } 143 | value={selectAmount} 144 | /> 145 |
146 |
147 |
148 |
149 |
150 |
151 | 152 |
153 |
154 | 178 |
179 |
180 |
181 |
182 |
183 |
184 |
185 |
186 |
187 | {isLoading ? '' : <>

188 | {exchangedSelectAmount} {selectedCurrencyFrom.name} = 189 | {exchangeRateAmount} {selectedCurrencyTo.name} 190 |

191 | 1 {selectedCurrencyFrom.value} = {exchangeRate} {selectedCurrencyTo.value} 192 |

} 193 |
194 |
195 |
196 |
197 |
198 |
199 |
200 |
201 | 206 |
207 |
208 |
209 |
210 | We use third party resources & the mid-market rate for our Converter. This is for informational purposes only. We don't claim this is exact exchange rate. 211 |
212 |
213 |
214 |
215 |
216 |
217 |
218 |
219 |
220 | 221 |
222 |
223 |
224 |
225 |
226 | 227 |
228 |
229 |
230 |
231 |
232 |
233 | 234 | } 235 | export default currencyConverter; 236 | -------------------------------------------------------------------------------- /currency-converter/src/utils/seeds/commonCurrency.json: -------------------------------------------------------------------------------- 1 | { 2 | "USD": { 3 | "symbol": "$", 4 | "name": "US Dollar", 5 | "symbol_native": "$", 6 | "decimal_digits": 2, 7 | "rounding": 0, 8 | "code": "USD", 9 | "name_plural": "US dollars" 10 | }, 11 | "CAD": { 12 | "symbol": "CA$", 13 | "name": "Canadian Dollar", 14 | "symbol_native": "$", 15 | "decimal_digits": 2, 16 | "rounding": 0, 17 | "code": "CAD", 18 | "name_plural": "Canadian dollars" 19 | }, 20 | "EUR": { 21 | "symbol": "€", 22 | "name": "Euro", 23 | "symbol_native": "€", 24 | "decimal_digits": 2, 25 | "rounding": 0, 26 | "code": "EUR", 27 | "name_plural": "euros" 28 | }, 29 | "AED": { 30 | "symbol": "AED", 31 | "name": "United Arab Emirates Dirham", 32 | "symbol_native": "د.إ.‏", 33 | "decimal_digits": 2, 34 | "rounding": 0, 35 | "code": "AED", 36 | "name_plural": "UAE dirhams" 37 | }, 38 | "AFN": { 39 | "symbol": "Af", 40 | "name": "Afghan Afghani", 41 | "symbol_native": "؋", 42 | "decimal_digits": 0, 43 | "rounding": 0, 44 | "code": "AFN", 45 | "name_plural": "Afghan Afghanis" 46 | }, 47 | "ALL": { 48 | "symbol": "ALL", 49 | "name": "Albanian Lek", 50 | "symbol_native": "Lek", 51 | "decimal_digits": 0, 52 | "rounding": 0, 53 | "code": "ALL", 54 | "name_plural": "Albanian lekë" 55 | }, 56 | "AMD": { 57 | "symbol": "AMD", 58 | "name": "Armenian Dram", 59 | "symbol_native": "դր.", 60 | "decimal_digits": 0, 61 | "rounding": 0, 62 | "code": "AMD", 63 | "name_plural": "Armenian drams" 64 | }, 65 | "ARS": { 66 | "symbol": "AR$", 67 | "name": "Argentine Peso", 68 | "symbol_native": "$", 69 | "decimal_digits": 2, 70 | "rounding": 0, 71 | "code": "ARS", 72 | "name_plural": "Argentine pesos" 73 | }, 74 | "AUD": { 75 | "symbol": "AU$", 76 | "name": "Australian Dollar", 77 | "symbol_native": "$", 78 | "decimal_digits": 2, 79 | "rounding": 0, 80 | "code": "AUD", 81 | "name_plural": "Australian dollars" 82 | }, 83 | "AZN": { 84 | "symbol": "man.", 85 | "name": "Azerbaijani Manat", 86 | "symbol_native": "ман.", 87 | "decimal_digits": 2, 88 | "rounding": 0, 89 | "code": "AZN", 90 | "name_plural": "Azerbaijani manats" 91 | }, 92 | "BAM": { 93 | "symbol": "KM", 94 | "name": "Bosnia-Herzegovina Convertible Mark", 95 | "symbol_native": "KM", 96 | "decimal_digits": 2, 97 | "rounding": 0, 98 | "code": "BAM", 99 | "name_plural": "Bosnia-Herzegovina convertible marks" 100 | }, 101 | "BDT": { 102 | "symbol": "Tk", 103 | "name": "Bangladeshi Taka", 104 | "symbol_native": "৳", 105 | "decimal_digits": 2, 106 | "rounding": 0, 107 | "code": "BDT", 108 | "name_plural": "Bangladeshi takas" 109 | }, 110 | "BGN": { 111 | "symbol": "BGN", 112 | "name": "Bulgarian Lev", 113 | "symbol_native": "лв.", 114 | "decimal_digits": 2, 115 | "rounding": 0, 116 | "code": "BGN", 117 | "name_plural": "Bulgarian leva" 118 | }, 119 | "BHD": { 120 | "symbol": "BD", 121 | "name": "Bahraini Dinar", 122 | "symbol_native": "د.ب.‏", 123 | "decimal_digits": 3, 124 | "rounding": 0, 125 | "code": "BHD", 126 | "name_plural": "Bahraini dinars" 127 | }, 128 | "BIF": { 129 | "symbol": "FBu", 130 | "name": "Burundian Franc", 131 | "symbol_native": "FBu", 132 | "decimal_digits": 0, 133 | "rounding": 0, 134 | "code": "BIF", 135 | "name_plural": "Burundian francs" 136 | }, 137 | "BND": { 138 | "symbol": "BN$", 139 | "name": "Brunei Dollar", 140 | "symbol_native": "$", 141 | "decimal_digits": 2, 142 | "rounding": 0, 143 | "code": "BND", 144 | "name_plural": "Brunei dollars" 145 | }, 146 | "BOB": { 147 | "symbol": "Bs", 148 | "name": "Bolivian Boliviano", 149 | "symbol_native": "Bs", 150 | "decimal_digits": 2, 151 | "rounding": 0, 152 | "code": "BOB", 153 | "name_plural": "Bolivian bolivianos" 154 | }, 155 | "BRL": { 156 | "symbol": "R$", 157 | "name": "Brazilian Real", 158 | "symbol_native": "R$", 159 | "decimal_digits": 2, 160 | "rounding": 0, 161 | "code": "BRL", 162 | "name_plural": "Brazilian reals" 163 | }, 164 | "BWP": { 165 | "symbol": "BWP", 166 | "name": "Botswanan Pula", 167 | "symbol_native": "P", 168 | "decimal_digits": 2, 169 | "rounding": 0, 170 | "code": "BWP", 171 | "name_plural": "Botswanan pulas" 172 | }, 173 | "BYN": { 174 | "symbol": "Br", 175 | "name": "Belarusian Ruble", 176 | "symbol_native": "руб.", 177 | "decimal_digits": 2, 178 | "rounding": 0, 179 | "code": "BYN", 180 | "name_plural": "Belarusian rubles" 181 | }, 182 | "BZD": { 183 | "symbol": "BZ$", 184 | "name": "Belize Dollar", 185 | "symbol_native": "$", 186 | "decimal_digits": 2, 187 | "rounding": 0, 188 | "code": "BZD", 189 | "name_plural": "Belize dollars" 190 | }, 191 | "CDF": { 192 | "symbol": "CDF", 193 | "name": "Congolese Franc", 194 | "symbol_native": "FrCD", 195 | "decimal_digits": 2, 196 | "rounding": 0, 197 | "code": "CDF", 198 | "name_plural": "Congolese francs" 199 | }, 200 | "CHF": { 201 | "symbol": "CHF", 202 | "name": "Swiss Franc", 203 | "symbol_native": "CHF", 204 | "decimal_digits": 2, 205 | "rounding": 0.05, 206 | "code": "CHF", 207 | "name_plural": "Swiss francs" 208 | }, 209 | "CLP": { 210 | "symbol": "CL$", 211 | "name": "Chilean Peso", 212 | "symbol_native": "$", 213 | "decimal_digits": 0, 214 | "rounding": 0, 215 | "code": "CLP", 216 | "name_plural": "Chilean pesos" 217 | }, 218 | "CNY": { 219 | "symbol": "CN¥", 220 | "name": "Chinese Yuan", 221 | "symbol_native": "CN¥", 222 | "decimal_digits": 2, 223 | "rounding": 0, 224 | "code": "CNY", 225 | "name_plural": "Chinese yuan" 226 | }, 227 | "COP": { 228 | "symbol": "CO$", 229 | "name": "Colombian Peso", 230 | "symbol_native": "$", 231 | "decimal_digits": 0, 232 | "rounding": 0, 233 | "code": "COP", 234 | "name_plural": "Colombian pesos" 235 | }, 236 | "CRC": { 237 | "symbol": "₡", 238 | "name": "Costa Rican Colón", 239 | "symbol_native": "₡", 240 | "decimal_digits": 0, 241 | "rounding": 0, 242 | "code": "CRC", 243 | "name_plural": "Costa Rican colóns" 244 | }, 245 | "CVE": { 246 | "symbol": "CV$", 247 | "name": "Cape Verdean Escudo", 248 | "symbol_native": "CV$", 249 | "decimal_digits": 2, 250 | "rounding": 0, 251 | "code": "CVE", 252 | "name_plural": "Cape Verdean escudos" 253 | }, 254 | "CZK": { 255 | "symbol": "Kč", 256 | "name": "Czech Republic Koruna", 257 | "symbol_native": "Kč", 258 | "decimal_digits": 2, 259 | "rounding": 0, 260 | "code": "CZK", 261 | "name_plural": "Czech Republic korunas" 262 | }, 263 | "DJF": { 264 | "symbol": "Fdj", 265 | "name": "Djiboutian Franc", 266 | "symbol_native": "Fdj", 267 | "decimal_digits": 0, 268 | "rounding": 0, 269 | "code": "DJF", 270 | "name_plural": "Djiboutian francs" 271 | }, 272 | "DKK": { 273 | "symbol": "Dkr", 274 | "name": "Danish Krone", 275 | "symbol_native": "kr", 276 | "decimal_digits": 2, 277 | "rounding": 0, 278 | "code": "DKK", 279 | "name_plural": "Danish kroner" 280 | }, 281 | "DOP": { 282 | "symbol": "RD$", 283 | "name": "Dominican Peso", 284 | "symbol_native": "RD$", 285 | "decimal_digits": 2, 286 | "rounding": 0, 287 | "code": "DOP", 288 | "name_plural": "Dominican pesos" 289 | }, 290 | "DZD": { 291 | "symbol": "DA", 292 | "name": "Algerian Dinar", 293 | "symbol_native": "د.ج.‏", 294 | "decimal_digits": 2, 295 | "rounding": 0, 296 | "code": "DZD", 297 | "name_plural": "Algerian dinars" 298 | }, 299 | "EEK": { 300 | "symbol": "Ekr", 301 | "name": "Estonian Kroon", 302 | "symbol_native": "kr", 303 | "decimal_digits": 2, 304 | "rounding": 0, 305 | "code": "EEK", 306 | "name_plural": "Estonian kroons" 307 | }, 308 | "EGP": { 309 | "symbol": "EGP", 310 | "name": "Egyptian Pound", 311 | "symbol_native": "ج.م.‏", 312 | "decimal_digits": 2, 313 | "rounding": 0, 314 | "code": "EGP", 315 | "name_plural": "Egyptian pounds" 316 | }, 317 | "ERN": { 318 | "symbol": "Nfk", 319 | "name": "Eritrean Nakfa", 320 | "symbol_native": "Nfk", 321 | "decimal_digits": 2, 322 | "rounding": 0, 323 | "code": "ERN", 324 | "name_plural": "Eritrean nakfas" 325 | }, 326 | "ETB": { 327 | "symbol": "Br", 328 | "name": "Ethiopian Birr", 329 | "symbol_native": "Br", 330 | "decimal_digits": 2, 331 | "rounding": 0, 332 | "code": "ETB", 333 | "name_plural": "Ethiopian birrs" 334 | }, 335 | "GBP": { 336 | "symbol": "£", 337 | "name": "British Pound Sterling", 338 | "symbol_native": "£", 339 | "decimal_digits": 2, 340 | "rounding": 0, 341 | "code": "GBP", 342 | "name_plural": "British pounds sterling" 343 | }, 344 | "GEL": { 345 | "symbol": "GEL", 346 | "name": "Georgian Lari", 347 | "symbol_native": "GEL", 348 | "decimal_digits": 2, 349 | "rounding": 0, 350 | "code": "GEL", 351 | "name_plural": "Georgian laris" 352 | }, 353 | "GHS": { 354 | "symbol": "GH₵", 355 | "name": "Ghanaian Cedi", 356 | "symbol_native": "GH₵", 357 | "decimal_digits": 2, 358 | "rounding": 0, 359 | "code": "GHS", 360 | "name_plural": "Ghanaian cedis" 361 | }, 362 | "GNF": { 363 | "symbol": "FG", 364 | "name": "Guinean Franc", 365 | "symbol_native": "FG", 366 | "decimal_digits": 0, 367 | "rounding": 0, 368 | "code": "GNF", 369 | "name_plural": "Guinean francs" 370 | }, 371 | "GTQ": { 372 | "symbol": "GTQ", 373 | "name": "Guatemalan Quetzal", 374 | "symbol_native": "Q", 375 | "decimal_digits": 2, 376 | "rounding": 0, 377 | "code": "GTQ", 378 | "name_plural": "Guatemalan quetzals" 379 | }, 380 | "HKD": { 381 | "symbol": "HK$", 382 | "name": "Hong Kong Dollar", 383 | "symbol_native": "$", 384 | "decimal_digits": 2, 385 | "rounding": 0, 386 | "code": "HKD", 387 | "name_plural": "Hong Kong dollars" 388 | }, 389 | "HNL": { 390 | "symbol": "HNL", 391 | "name": "Honduran Lempira", 392 | "symbol_native": "L", 393 | "decimal_digits": 2, 394 | "rounding": 0, 395 | "code": "HNL", 396 | "name_plural": "Honduran lempiras" 397 | }, 398 | "HRK": { 399 | "symbol": "kn", 400 | "name": "Croatian Kuna", 401 | "symbol_native": "kn", 402 | "decimal_digits": 2, 403 | "rounding": 0, 404 | "code": "HRK", 405 | "name_plural": "Croatian kunas" 406 | }, 407 | "HUF": { 408 | "symbol": "Ft", 409 | "name": "Hungarian Forint", 410 | "symbol_native": "Ft", 411 | "decimal_digits": 0, 412 | "rounding": 0, 413 | "code": "HUF", 414 | "name_plural": "Hungarian forints" 415 | }, 416 | "IDR": { 417 | "symbol": "Rp", 418 | "name": "Indonesian Rupiah", 419 | "symbol_native": "Rp", 420 | "decimal_digits": 0, 421 | "rounding": 0, 422 | "code": "IDR", 423 | "name_plural": "Indonesian rupiahs" 424 | }, 425 | "ILS": { 426 | "symbol": "₪", 427 | "name": "Israeli New Sheqel", 428 | "symbol_native": "₪", 429 | "decimal_digits": 2, 430 | "rounding": 0, 431 | "code": "ILS", 432 | "name_plural": "Israeli new sheqels" 433 | }, 434 | "INR": { 435 | "symbol": "Rs", 436 | "name": "Indian Rupee", 437 | "symbol_native": "₹", 438 | "decimal_digits": 2, 439 | "rounding": 0, 440 | "code": "INR", 441 | "name_plural": "Indian rupees" 442 | }, 443 | "IQD": { 444 | "symbol": "IQD", 445 | "name": "Iraqi Dinar", 446 | "symbol_native": "د.ع.‏", 447 | "decimal_digits": 0, 448 | "rounding": 0, 449 | "code": "IQD", 450 | "name_plural": "Iraqi dinars" 451 | }, 452 | "IRR": { 453 | "symbol": "IRR", 454 | "name": "Iranian Rial", 455 | "symbol_native": "﷼", 456 | "decimal_digits": 0, 457 | "rounding": 0, 458 | "code": "IRR", 459 | "name_plural": "Iranian rials" 460 | }, 461 | "ISK": { 462 | "symbol": "Ikr", 463 | "name": "Icelandic Króna", 464 | "symbol_native": "kr", 465 | "decimal_digits": 0, 466 | "rounding": 0, 467 | "code": "ISK", 468 | "name_plural": "Icelandic krónur" 469 | }, 470 | "JMD": { 471 | "symbol": "J$", 472 | "name": "Jamaican Dollar", 473 | "symbol_native": "$", 474 | "decimal_digits": 2, 475 | "rounding": 0, 476 | "code": "JMD", 477 | "name_plural": "Jamaican dollars" 478 | }, 479 | "JOD": { 480 | "symbol": "JD", 481 | "name": "Jordanian Dinar", 482 | "symbol_native": "د.أ.‏", 483 | "decimal_digits": 3, 484 | "rounding": 0, 485 | "code": "JOD", 486 | "name_plural": "Jordanian dinars" 487 | }, 488 | "JPY": { 489 | "symbol": "¥", 490 | "name": "Japanese Yen", 491 | "symbol_native": "￥", 492 | "decimal_digits": 0, 493 | "rounding": 0, 494 | "code": "JPY", 495 | "name_plural": "Japanese yen" 496 | }, 497 | "KES": { 498 | "symbol": "Ksh", 499 | "name": "Kenyan Shilling", 500 | "symbol_native": "Ksh", 501 | "decimal_digits": 2, 502 | "rounding": 0, 503 | "code": "KES", 504 | "name_plural": "Kenyan shillings" 505 | }, 506 | "KHR": { 507 | "symbol": "KHR", 508 | "name": "Cambodian Riel", 509 | "symbol_native": "៛", 510 | "decimal_digits": 2, 511 | "rounding": 0, 512 | "code": "KHR", 513 | "name_plural": "Cambodian riels" 514 | }, 515 | "KMF": { 516 | "symbol": "CF", 517 | "name": "Comorian Franc", 518 | "symbol_native": "FC", 519 | "decimal_digits": 0, 520 | "rounding": 0, 521 | "code": "KMF", 522 | "name_plural": "Comorian francs" 523 | }, 524 | "KRW": { 525 | "symbol": "₩", 526 | "name": "South Korean Won", 527 | "symbol_native": "₩", 528 | "decimal_digits": 0, 529 | "rounding": 0, 530 | "code": "KRW", 531 | "name_plural": "South Korean won" 532 | }, 533 | "KWD": { 534 | "symbol": "KD", 535 | "name": "Kuwaiti Dinar", 536 | "symbol_native": "د.ك.‏", 537 | "decimal_digits": 3, 538 | "rounding": 0, 539 | "code": "KWD", 540 | "name_plural": "Kuwaiti dinars" 541 | }, 542 | "KZT": { 543 | "symbol": "KZT", 544 | "name": "Kazakhstani Tenge", 545 | "symbol_native": "тңг.", 546 | "decimal_digits": 2, 547 | "rounding": 0, 548 | "code": "KZT", 549 | "name_plural": "Kazakhstani tenges" 550 | }, 551 | "LBP": { 552 | "symbol": "L.L.", 553 | "name": "Lebanese Pound", 554 | "symbol_native": "ل.ل.‏", 555 | "decimal_digits": 0, 556 | "rounding": 0, 557 | "code": "LBP", 558 | "name_plural": "Lebanese pounds" 559 | }, 560 | "LKR": { 561 | "symbol": "SLRs", 562 | "name": "Sri Lankan Rupee", 563 | "symbol_native": "SL Re", 564 | "decimal_digits": 2, 565 | "rounding": 0, 566 | "code": "LKR", 567 | "name_plural": "Sri Lankan rupees" 568 | }, 569 | "LTL": { 570 | "symbol": "Lt", 571 | "name": "Lithuanian Litas", 572 | "symbol_native": "Lt", 573 | "decimal_digits": 2, 574 | "rounding": 0, 575 | "code": "LTL", 576 | "name_plural": "Lithuanian litai" 577 | }, 578 | "LVL": { 579 | "symbol": "Ls", 580 | "name": "Latvian Lats", 581 | "symbol_native": "Ls", 582 | "decimal_digits": 2, 583 | "rounding": 0, 584 | "code": "LVL", 585 | "name_plural": "Latvian lati" 586 | }, 587 | "LYD": { 588 | "symbol": "LD", 589 | "name": "Libyan Dinar", 590 | "symbol_native": "د.ل.‏", 591 | "decimal_digits": 3, 592 | "rounding": 0, 593 | "code": "LYD", 594 | "name_plural": "Libyan dinars" 595 | }, 596 | "MAD": { 597 | "symbol": "MAD", 598 | "name": "Moroccan Dirham", 599 | "symbol_native": "د.م.‏", 600 | "decimal_digits": 2, 601 | "rounding": 0, 602 | "code": "MAD", 603 | "name_plural": "Moroccan dirhams" 604 | }, 605 | "MDL": { 606 | "symbol": "MDL", 607 | "name": "Moldovan Leu", 608 | "symbol_native": "MDL", 609 | "decimal_digits": 2, 610 | "rounding": 0, 611 | "code": "MDL", 612 | "name_plural": "Moldovan lei" 613 | }, 614 | "MGA": { 615 | "symbol": "MGA", 616 | "name": "Malagasy Ariary", 617 | "symbol_native": "MGA", 618 | "decimal_digits": 0, 619 | "rounding": 0, 620 | "code": "MGA", 621 | "name_plural": "Malagasy Ariaries" 622 | }, 623 | "MKD": { 624 | "symbol": "MKD", 625 | "name": "Macedonian Denar", 626 | "symbol_native": "MKD", 627 | "decimal_digits": 2, 628 | "rounding": 0, 629 | "code": "MKD", 630 | "name_plural": "Macedonian denari" 631 | }, 632 | "MMK": { 633 | "symbol": "MMK", 634 | "name": "Myanma Kyat", 635 | "symbol_native": "K", 636 | "decimal_digits": 0, 637 | "rounding": 0, 638 | "code": "MMK", 639 | "name_plural": "Myanma kyats" 640 | }, 641 | "MOP": { 642 | "symbol": "MOP$", 643 | "name": "Macanese Pataca", 644 | "symbol_native": "MOP$", 645 | "decimal_digits": 2, 646 | "rounding": 0, 647 | "code": "MOP", 648 | "name_plural": "Macanese patacas" 649 | }, 650 | "MUR": { 651 | "symbol": "MURs", 652 | "name": "Mauritian Rupee", 653 | "symbol_native": "MURs", 654 | "decimal_digits": 0, 655 | "rounding": 0, 656 | "code": "MUR", 657 | "name_plural": "Mauritian rupees" 658 | }, 659 | "MXN": { 660 | "symbol": "MX$", 661 | "name": "Mexican Peso", 662 | "symbol_native": "$", 663 | "decimal_digits": 2, 664 | "rounding": 0, 665 | "code": "MXN", 666 | "name_plural": "Mexican pesos" 667 | }, 668 | "MYR": { 669 | "symbol": "RM", 670 | "name": "Malaysian Ringgit", 671 | "symbol_native": "RM", 672 | "decimal_digits": 2, 673 | "rounding": 0, 674 | "code": "MYR", 675 | "name_plural": "Malaysian ringgits" 676 | }, 677 | "MZN": { 678 | "symbol": "MTn", 679 | "name": "Mozambican Metical", 680 | "symbol_native": "MTn", 681 | "decimal_digits": 2, 682 | "rounding": 0, 683 | "code": "MZN", 684 | "name_plural": "Mozambican meticals" 685 | }, 686 | "NAD": { 687 | "symbol": "N$", 688 | "name": "Namibian Dollar", 689 | "symbol_native": "N$", 690 | "decimal_digits": 2, 691 | "rounding": 0, 692 | "code": "NAD", 693 | "name_plural": "Namibian dollars" 694 | }, 695 | "NGN": { 696 | "symbol": "₦", 697 | "name": "Nigerian Naira", 698 | "symbol_native": "₦", 699 | "decimal_digits": 2, 700 | "rounding": 0, 701 | "code": "NGN", 702 | "name_plural": "Nigerian nairas" 703 | }, 704 | "NIO": { 705 | "symbol": "C$", 706 | "name": "Nicaraguan Córdoba", 707 | "symbol_native": "C$", 708 | "decimal_digits": 2, 709 | "rounding": 0, 710 | "code": "NIO", 711 | "name_plural": "Nicaraguan córdobas" 712 | }, 713 | "NOK": { 714 | "symbol": "Nkr", 715 | "name": "Norwegian Krone", 716 | "symbol_native": "kr", 717 | "decimal_digits": 2, 718 | "rounding": 0, 719 | "code": "NOK", 720 | "name_plural": "Norwegian kroner" 721 | }, 722 | "NPR": { 723 | "symbol": "NPRs", 724 | "name": "Nepalese Rupee", 725 | "symbol_native": "नेरू", 726 | "decimal_digits": 2, 727 | "rounding": 0, 728 | "code": "NPR", 729 | "name_plural": "Nepalese rupees" 730 | }, 731 | "NZD": { 732 | "symbol": "NZ$", 733 | "name": "New Zealand Dollar", 734 | "symbol_native": "$", 735 | "decimal_digits": 2, 736 | "rounding": 0, 737 | "code": "NZD", 738 | "name_plural": "New Zealand dollars" 739 | }, 740 | "OMR": { 741 | "symbol": "OMR", 742 | "name": "Omani Rial", 743 | "symbol_native": "ر.ع.‏", 744 | "decimal_digits": 3, 745 | "rounding": 0, 746 | "code": "OMR", 747 | "name_plural": "Omani rials" 748 | }, 749 | "PAB": { 750 | "symbol": "B/.", 751 | "name": "Panamanian Balboa", 752 | "symbol_native": "B/.", 753 | "decimal_digits": 2, 754 | "rounding": 0, 755 | "code": "PAB", 756 | "name_plural": "Panamanian balboas" 757 | }, 758 | "PEN": { 759 | "symbol": "S/.", 760 | "name": "Peruvian Nuevo Sol", 761 | "symbol_native": "S/.", 762 | "decimal_digits": 2, 763 | "rounding": 0, 764 | "code": "PEN", 765 | "name_plural": "Peruvian nuevos soles" 766 | }, 767 | "PHP": { 768 | "symbol": "₱", 769 | "name": "Philippine Peso", 770 | "symbol_native": "₱", 771 | "decimal_digits": 2, 772 | "rounding": 0, 773 | "code": "PHP", 774 | "name_plural": "Philippine pesos" 775 | }, 776 | "PKR": { 777 | "symbol": "PKRs", 778 | "name": "Pakistani Rupee", 779 | "symbol_native": "₨", 780 | "decimal_digits": 0, 781 | "rounding": 0, 782 | "code": "PKR", 783 | "name_plural": "Pakistani rupees" 784 | }, 785 | "PLN": { 786 | "symbol": "zł", 787 | "name": "Polish Zloty", 788 | "symbol_native": "zł", 789 | "decimal_digits": 2, 790 | "rounding": 0, 791 | "code": "PLN", 792 | "name_plural": "Polish zlotys" 793 | }, 794 | "PYG": { 795 | "symbol": "₲", 796 | "name": "Paraguayan Guarani", 797 | "symbol_native": "₲", 798 | "decimal_digits": 0, 799 | "rounding": 0, 800 | "code": "PYG", 801 | "name_plural": "Paraguayan guaranis" 802 | }, 803 | "QAR": { 804 | "symbol": "QR", 805 | "name": "Qatari Rial", 806 | "symbol_native": "ر.ق.‏", 807 | "decimal_digits": 2, 808 | "rounding": 0, 809 | "code": "QAR", 810 | "name_plural": "Qatari rials" 811 | }, 812 | "RON": { 813 | "symbol": "RON", 814 | "name": "Romanian Leu", 815 | "symbol_native": "RON", 816 | "decimal_digits": 2, 817 | "rounding": 0, 818 | "code": "RON", 819 | "name_plural": "Romanian lei" 820 | }, 821 | "RSD": { 822 | "symbol": "din.", 823 | "name": "Serbian Dinar", 824 | "symbol_native": "дин.", 825 | "decimal_digits": 0, 826 | "rounding": 0, 827 | "code": "RSD", 828 | "name_plural": "Serbian dinars" 829 | }, 830 | "RUB": { 831 | "symbol": "RUB", 832 | "name": "Russian Ruble", 833 | "symbol_native": "₽.", 834 | "decimal_digits": 2, 835 | "rounding": 0, 836 | "code": "RUB", 837 | "name_plural": "Russian rubles" 838 | }, 839 | "RWF": { 840 | "symbol": "RWF", 841 | "name": "Rwandan Franc", 842 | "symbol_native": "FR", 843 | "decimal_digits": 0, 844 | "rounding": 0, 845 | "code": "RWF", 846 | "name_plural": "Rwandan francs" 847 | }, 848 | "SAR": { 849 | "symbol": "SR", 850 | "name": "Saudi Riyal", 851 | "symbol_native": "ر.س.‏", 852 | "decimal_digits": 2, 853 | "rounding": 0, 854 | "code": "SAR", 855 | "name_plural": "Saudi riyals" 856 | }, 857 | "SDG": { 858 | "symbol": "SDG", 859 | "name": "Sudanese Pound", 860 | "symbol_native": "SDG", 861 | "decimal_digits": 2, 862 | "rounding": 0, 863 | "code": "SDG", 864 | "name_plural": "Sudanese pounds" 865 | }, 866 | "SEK": { 867 | "symbol": "Skr", 868 | "name": "Swedish Krona", 869 | "symbol_native": "kr", 870 | "decimal_digits": 2, 871 | "rounding": 0, 872 | "code": "SEK", 873 | "name_plural": "Swedish kronor" 874 | }, 875 | "SGD": { 876 | "symbol": "S$", 877 | "name": "Singapore Dollar", 878 | "symbol_native": "$", 879 | "decimal_digits": 2, 880 | "rounding": 0, 881 | "code": "SGD", 882 | "name_plural": "Singapore dollars" 883 | }, 884 | "SOS": { 885 | "symbol": "Ssh", 886 | "name": "Somali Shilling", 887 | "symbol_native": "Ssh", 888 | "decimal_digits": 0, 889 | "rounding": 0, 890 | "code": "SOS", 891 | "name_plural": "Somali shillings" 892 | }, 893 | "SYP": { 894 | "symbol": "SY£", 895 | "name": "Syrian Pound", 896 | "symbol_native": "ل.س.‏", 897 | "decimal_digits": 0, 898 | "rounding": 0, 899 | "code": "SYP", 900 | "name_plural": "Syrian pounds" 901 | }, 902 | "THB": { 903 | "symbol": "฿", 904 | "name": "Thai Baht", 905 | "symbol_native": "฿", 906 | "decimal_digits": 2, 907 | "rounding": 0, 908 | "code": "THB", 909 | "name_plural": "Thai baht" 910 | }, 911 | "TND": { 912 | "symbol": "DT", 913 | "name": "Tunisian Dinar", 914 | "symbol_native": "د.ت.‏", 915 | "decimal_digits": 3, 916 | "rounding": 0, 917 | "code": "TND", 918 | "name_plural": "Tunisian dinars" 919 | }, 920 | "TOP": { 921 | "symbol": "T$", 922 | "name": "Tongan Paʻanga", 923 | "symbol_native": "T$", 924 | "decimal_digits": 2, 925 | "rounding": 0, 926 | "code": "TOP", 927 | "name_plural": "Tongan paʻanga" 928 | }, 929 | "TRY": { 930 | "symbol": "TL", 931 | "name": "Turkish Lira", 932 | "symbol_native": "TL", 933 | "decimal_digits": 2, 934 | "rounding": 0, 935 | "code": "TRY", 936 | "name_plural": "Turkish Lira" 937 | }, 938 | "TTD": { 939 | "symbol": "TT$", 940 | "name": "Trinidad and Tobago Dollar", 941 | "symbol_native": "$", 942 | "decimal_digits": 2, 943 | "rounding": 0, 944 | "code": "TTD", 945 | "name_plural": "Trinidad and Tobago dollars" 946 | }, 947 | "TWD": { 948 | "symbol": "NT$", 949 | "name": "New Taiwan Dollar", 950 | "symbol_native": "NT$", 951 | "decimal_digits": 2, 952 | "rounding": 0, 953 | "code": "TWD", 954 | "name_plural": "New Taiwan dollars" 955 | }, 956 | "TZS": { 957 | "symbol": "TSh", 958 | "name": "Tanzanian Shilling", 959 | "symbol_native": "TSh", 960 | "decimal_digits": 0, 961 | "rounding": 0, 962 | "code": "TZS", 963 | "name_plural": "Tanzanian shillings" 964 | }, 965 | "UAH": { 966 | "symbol": "₴", 967 | "name": "Ukrainian Hryvnia", 968 | "symbol_native": "₴", 969 | "decimal_digits": 2, 970 | "rounding": 0, 971 | "code": "UAH", 972 | "name_plural": "Ukrainian hryvnias" 973 | }, 974 | "UGX": { 975 | "symbol": "USh", 976 | "name": "Ugandan Shilling", 977 | "symbol_native": "USh", 978 | "decimal_digits": 0, 979 | "rounding": 0, 980 | "code": "UGX", 981 | "name_plural": "Ugandan shillings" 982 | }, 983 | "UYU": { 984 | "symbol": "$U", 985 | "name": "Uruguayan Peso", 986 | "symbol_native": "$", 987 | "decimal_digits": 2, 988 | "rounding": 0, 989 | "code": "UYU", 990 | "name_plural": "Uruguayan pesos" 991 | }, 992 | "UZS": { 993 | "symbol": "UZS", 994 | "name": "Uzbekistan Som", 995 | "symbol_native": "UZS", 996 | "decimal_digits": 0, 997 | "rounding": 0, 998 | "code": "UZS", 999 | "name_plural": "Uzbekistan som" 1000 | }, 1001 | "VEF": { 1002 | "symbol": "Bs.F.", 1003 | "name": "Venezuelan Bolívar", 1004 | "symbol_native": "Bs.F.", 1005 | "decimal_digits": 2, 1006 | "rounding": 0, 1007 | "code": "VEF", 1008 | "name_plural": "Venezuelan bolívars" 1009 | }, 1010 | "VND": { 1011 | "symbol": "₫", 1012 | "name": "Vietnamese Dong", 1013 | "symbol_native": "₫", 1014 | "decimal_digits": 0, 1015 | "rounding": 0, 1016 | "code": "VND", 1017 | "name_plural": "Vietnamese dong" 1018 | }, 1019 | "XAF": { 1020 | "symbol": "FCFA", 1021 | "name": "CFA Franc BEAC", 1022 | "symbol_native": "FCFA", 1023 | "decimal_digits": 0, 1024 | "rounding": 0, 1025 | "code": "XAF", 1026 | "name_plural": "CFA francs BEAC" 1027 | }, 1028 | "XOF": { 1029 | "symbol": "CFA", 1030 | "name": "CFA Franc BCEAO", 1031 | "symbol_native": "CFA", 1032 | "decimal_digits": 0, 1033 | "rounding": 0, 1034 | "code": "XOF", 1035 | "name_plural": "CFA francs BCEAO" 1036 | }, 1037 | "YER": { 1038 | "symbol": "YR", 1039 | "name": "Yemeni Rial", 1040 | "symbol_native": "ر.ي.‏", 1041 | "decimal_digits": 0, 1042 | "rounding": 0, 1043 | "code": "YER", 1044 | "name_plural": "Yemeni rials" 1045 | }, 1046 | "ZAR": { 1047 | "symbol": "R", 1048 | "name": "South African Rand", 1049 | "symbol_native": "R", 1050 | "decimal_digits": 2, 1051 | "rounding": 0, 1052 | "code": "ZAR", 1053 | "name_plural": "South African rand" 1054 | }, 1055 | "ZMK": { 1056 | "symbol": "ZK", 1057 | "name": "Zambian Kwacha", 1058 | "symbol_native": "ZK", 1059 | "decimal_digits": 0, 1060 | "rounding": 0, 1061 | "code": "ZMK", 1062 | "name_plural": "Zambian kwachas" 1063 | }, 1064 | "ZWL": { 1065 | "symbol": "ZWL$", 1066 | "name": "Zimbabwean Dollar", 1067 | "symbol_native": "ZWL$", 1068 | "decimal_digits": 0, 1069 | "rounding": 0, 1070 | "code": "ZWL", 1071 | "name_plural": "Zimbabwean Dollar" 1072 | } 1073 | } --------------------------------------------------------------------------------