├── .gitignore ├── 1_useState ├── .eslintrc.cjs ├── .gitignore ├── README.md ├── index.html ├── package-lock.json ├── package.json ├── public │ └── vite.svg ├── src │ ├── App.jsx │ ├── assets │ │ └── react.svg │ └── main.jsx └── vite.config.js ├── 2_passwordGenerator ├── .eslintrc.cjs ├── .gitignore ├── README.md ├── index.html ├── package-lock.json ├── package.json ├── public │ └── vite.svg ├── src │ ├── App.jsx │ ├── assets │ │ └── react.svg │ ├── index.css │ └── main.jsx └── vite.config.js ├── 3_currencyConvertor ├── .eslintrc.cjs ├── .gitignore ├── README.md ├── index.html ├── package-lock.json ├── package.json ├── postcss.config.js ├── public │ └── vite.svg ├── src │ ├── App.css │ ├── App.jsx │ ├── InputBox.jsx │ ├── assets │ │ └── react.svg │ ├── index.css │ └── main.jsx ├── tailwind.config.js └── vite.config.js ├── 4_ReactRouter ├── .eslintrc.cjs ├── .gitignore ├── README.md ├── index.html ├── package-lock.json ├── package.json ├── postcss.config.js ├── public │ └── vite.svg ├── src │ ├── App.jsx │ ├── Footer │ │ └── Footer.jsx │ ├── Header │ │ └── Header.jsx │ ├── Main │ │ ├── About.jsx │ │ ├── Contact.jsx │ │ └── Home.jsx │ ├── assets │ │ └── react.svg │ ├── index.css │ └── main.jsx ├── tailwind.config.js └── vite.config.js ├── 5_ContextApi ├── .eslintrc.cjs ├── .gitignore ├── README.md ├── index.html ├── package-lock.json ├── package.json ├── public │ └── vite.svg ├── src │ ├── App.jsx │ ├── Login.jsx │ ├── Profile.jsx │ ├── assets │ │ └── react.svg │ ├── context │ │ ├── UserContext.js │ │ └── UserContextProvider.jsx │ ├── index.css │ └── main.jsx └── vite.config.js ├── 6_themeSwitcher ├── .eslintrc.cjs ├── .gitignore ├── README.md ├── index.html ├── package-lock.json ├── package.json ├── postcss.config.js ├── public │ └── vite.svg ├── src │ ├── App.jsx │ ├── assets │ │ └── react.svg │ ├── components │ │ ├── Card.jsx │ │ └── ToggleButton.jsx │ ├── context │ │ └── ThemeContext.jsx │ ├── index.css │ └── main.jsx ├── tailwind.config.js └── vite.config.js ├── 7_todoList ├── .eslintrc.cjs ├── .gitignore ├── README.md ├── index.html ├── package-lock.json ├── package.json ├── postcss.config.js ├── public │ └── vite.svg ├── src │ ├── App.jsx │ ├── assets │ │ └── react.svg │ ├── components │ │ ├── Input.jsx │ │ └── Todo.jsx │ ├── contexts │ │ └── todoContext.js │ ├── index.css │ └── main.jsx ├── tailwind.config.js └── vite.config.js ├── 8_reduxToolkit_TodoList ├── .eslintrc.cjs ├── .gitignore ├── README.md ├── index.html ├── package-lock.json ├── package.json ├── postcss.config.js ├── public │ └── vite.svg ├── src │ ├── App.jsx │ ├── app │ │ └── store.js │ ├── assets │ │ └── react.svg │ ├── components │ │ ├── Input.jsx │ │ └── Todo.jsx │ ├── features │ │ └── todoSlice.jsx │ ├── index.css │ └── main.jsx ├── tailwind.config.js └── vite.config.js └── IncompleteCurrencyConvertor ├── .eslintrc.cjs ├── .gitignore ├── README.md ├── index.html ├── package-lock.json ├── package.json ├── postcss.config.js ├── public └── vite.svg ├── src ├── App.css ├── App.jsx ├── InputBox.jsx ├── assets │ └── react.svg ├── index.css └── main.jsx ├── tailwind.config.js └── vite.config.js /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store -------------------------------------------------------------------------------- /1_useState/.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 | }, 20 | } 21 | -------------------------------------------------------------------------------- /1_useState/.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 | -------------------------------------------------------------------------------- /1_useState/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 | -------------------------------------------------------------------------------- /1_useState/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Vite + React 9 | 10 | 11 |
12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /1_useState/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "1", 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-dom": "^18.2.0" 15 | }, 16 | "devDependencies": { 17 | "@types/react": "^18.2.15", 18 | "@types/react-dom": "^18.2.7", 19 | "@vitejs/plugin-react": "^4.0.3", 20 | "eslint": "^8.45.0", 21 | "eslint-plugin-react": "^7.32.2", 22 | "eslint-plugin-react-hooks": "^4.6.0", 23 | "eslint-plugin-react-refresh": "^0.4.3", 24 | "vite": "^4.4.5" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /1_useState/public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /1_useState/src/App.jsx: -------------------------------------------------------------------------------- 1 | import { useState } from 'react' 2 | function App() { 3 | const colors = ["#475569","#FFA07A","#FFD700","#FF69B4","#FF6347","#FF4500","#FF8C00","#FFA500","#FFDAB9","#FFE4E1","#FFE4B5","#FFEFD5","#FFF0F5","#FFF8DC","#FFFACD","#FFFAF0","#FFFF00","#FFFFE0","#FFFFF0","#FFC0CB"]; 4 | 5 | const [count, setCount] = useState(0); 6 | const [colorCount, setColorCount] = useState(0); 7 | 8 | function inc(){ 9 | if(count < 20) setCount(count + 1); 10 | } 11 | 12 | function dec(){ 13 | if(count > 0) setCount(count - 1); 14 | } 15 | 16 | function change(){ 17 | setColorCount((colorCount+1)%21); 18 | } 19 | 20 | return ( 21 | <> 22 |
23 |
24 |

Value : {count}

25 |
26 | 27 | 28 |
29 | 30 |
31 |
32 | 33 | ) 34 | } 35 | 36 | export default App -------------------------------------------------------------------------------- /1_useState/src/assets/react.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /1_useState/src/main.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom/client' 3 | import App from './App.jsx' 4 | 5 | ReactDOM.createRoot(document.getElementById('root')).render( 6 | 7 | 8 | , 9 | ) 10 | -------------------------------------------------------------------------------- /1_useState/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 | -------------------------------------------------------------------------------- /2_passwordGenerator/.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 | }, 20 | } 21 | -------------------------------------------------------------------------------- /2_passwordGenerator/.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 | -------------------------------------------------------------------------------- /2_passwordGenerator/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 | -------------------------------------------------------------------------------- /2_passwordGenerator/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Vite + React 9 | 10 | 11 |
12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /2_passwordGenerator/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "2", 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-dom": "^18.2.0" 15 | }, 16 | "devDependencies": { 17 | "@types/react": "^18.2.15", 18 | "@types/react-dom": "^18.2.7", 19 | "@vitejs/plugin-react": "^4.0.3", 20 | "eslint": "^8.45.0", 21 | "eslint-plugin-react": "^7.32.2", 22 | "eslint-plugin-react-hooks": "^4.6.0", 23 | "eslint-plugin-react-refresh": "^0.4.3", 24 | "vite": "^4.4.5" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /2_passwordGenerator/public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /2_passwordGenerator/src/App.jsx: -------------------------------------------------------------------------------- 1 | import { useState, useCallback, useEffect } from "react"; 2 | 3 | function App() { 4 | let str = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ"; 5 | const [result, setResult] = useState("fs@9"); 6 | const [numAllowed, setNumAllowed] = useState(false); 7 | const [charAllowed, setCharAllowed] = useState(false); 8 | const [length, setLength] = useState(4); 9 | const [copyBtn, setCopyBtn] = useState("Copy"); 10 | let password = ""; 11 | 12 | const passwordGenerator = useCallback(() => { 13 | if (numAllowed) str += "0123456789"; 14 | if (charAllowed) str += "~!@#$%^&*()_-+={}[]:;,.|/<>?"; 15 | 16 | for (let index = 0; index < length; index++) { 17 | let charIndex = Math.floor(Math.random() * str.length); 18 | password += str.charAt(charIndex); 19 | } 20 | // console.log(password); 21 | setResult(password); 22 | password = ""; 23 | }, [numAllowed, charAllowed, length, setResult]); 24 | 25 | const copyTheData = () => { 26 | window.navigator.clipboard.writeText(result); 27 | setCopyBtn("Copied"); 28 | setTimeout(() => { 29 | setCopyBtn("Copy"); 30 | }, 2000); 31 | }; 32 | 33 | useEffect(() => { 34 | passwordGenerator(); 35 | }, [numAllowed, charAllowed, length, passwordGenerator]); 36 | 37 | return ( 38 | <> 39 |
40 |
41 |

Password Generator

42 |
43 |

44 | 50 | 56 |

57 |

58 | setLength(e.target.value)} 62 | min={4} 63 | max={20} 64 | className="w-full appearance-none cursor-pointer bg-cyan-700 h-1 rounded-full outline-none active:outline-none focus:outline-none" 65 | /> 66 | Length: {length} 67 |

68 |
69 | 77 | 85 |
86 | 92 |
93 |
94 |
95 | 96 | ); 97 | } 98 | 99 | export default App; 100 | -------------------------------------------------------------------------------- /2_passwordGenerator/src/assets/react.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /2_passwordGenerator/src/index.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bitwisegaurav/ReactLearning/d82dcc7dc4d6612c9ae0255eda21802ebae64798/2_passwordGenerator/src/index.css -------------------------------------------------------------------------------- /2_passwordGenerator/src/main.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom/client' 3 | import App from './App.jsx' 4 | 5 | ReactDOM.createRoot(document.getElementById('root')).render( 6 | 7 | 8 | 9 | ) 10 | -------------------------------------------------------------------------------- /2_passwordGenerator/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 | -------------------------------------------------------------------------------- /3_currencyConvertor/.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 | }, 20 | } 21 | -------------------------------------------------------------------------------- /3_currencyConvertor/.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 | -------------------------------------------------------------------------------- /3_currencyConvertor/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 | -------------------------------------------------------------------------------- /3_currencyConvertor/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /3_currencyConvertor/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "3-currencyconvertor", 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-dom": "^18.2.0" 15 | }, 16 | "devDependencies": { 17 | "@types/react": "^18.2.15", 18 | "@types/react-dom": "^18.2.7", 19 | "@vitejs/plugin-react": "^4.0.3", 20 | "autoprefixer": "^10.4.16", 21 | "eslint": "^8.45.0", 22 | "eslint-plugin-react": "^7.32.2", 23 | "eslint-plugin-react-hooks": "^4.6.0", 24 | "eslint-plugin-react-refresh": "^0.4.3", 25 | "postcss": "^8.4.31", 26 | "tailwindcss": "^3.3.5", 27 | "vite": "^4.4.5" 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /3_currencyConvertor/postcss.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /3_currencyConvertor/public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /3_currencyConvertor/src/App.css: -------------------------------------------------------------------------------- 1 | #root { 2 | width: 100vw; 3 | height: 100vh; 4 | } 5 | -------------------------------------------------------------------------------- /3_currencyConvertor/src/App.jsx: -------------------------------------------------------------------------------- 1 | import { useState } from "react"; 2 | import InputBox from "./InputBox" 3 | import { useEffect } from "react"; 4 | 5 | function fetchData(currency, setData){ 6 | fetch(`https://cdn.jsdelivr.net/gh/fawazahmed0/currency-api@1/latest/currencies/${currency}.json`) 7 | .then((res) => res.json()) 8 | .then(res => { 9 | setData(res[currency]); 10 | }) 11 | } 12 | 13 | function App() { 14 | const [fromCurr, setFromCurr] = useState("usd"); 15 | const [toCurr, setToCurr] = useState("inr"); 16 | const [fromAmount, setFromAmount] = useState(1); 17 | const [toAmount, setToAmount] = useState(1); 18 | const [conversion, setConversion] = useState(1); 19 | const [data, setData] = useState({}); 20 | 21 | useEffect(() => { 22 | setConversion(data[toCurr]) 23 | setToAmount(fromAmount * data[toCurr]) 24 | }, [fromCurr, toCurr, data, fromAmount]); 25 | useEffect(() => { 26 | fetchData(fromCurr, setData); 27 | }, [fromCurr, toCurr, data, fromAmount, conversion, toAmount]) 28 | 29 | const values = { 30 | fromCurr, 31 | setFromCurr, 32 | toCurr, 33 | setToCurr, 34 | fromAmount, 35 | setFromAmount, 36 | toAmount, 37 | setToAmount, 38 | conversion, 39 | setConversion, 40 | data, 41 | } 42 | 43 | return ( 44 | <> 45 |
46 |
47 | 48 | 49 |
50 |
51 | 52 | ) 53 | } 54 | 55 | export default App -------------------------------------------------------------------------------- /3_currencyConvertor/src/InputBox.jsx: -------------------------------------------------------------------------------- 1 | import PropTypes from 'prop-types'; 2 | function InputBox(props) { 3 | const from = props.from ?? false; 4 | const values = props.values; 5 | const keys = Object.keys(values.data); 6 | 7 | return ( 8 |
9 | 12 | 32 | { 37 | const amount = parseFloat(e.target.value); 38 | if(!isNaN(amount)) { 39 | if(from) values.setFromAmount(amount); 40 | else values.setToAmount(amount); 41 | } 42 | }} 43 | className="w-full px-4 py-2 mt-4 rounded-lg focus:outline-none" 44 | min={0}/> 45 |
46 | ) 47 | } 48 | 49 | InputBox.propTypes = { 50 | from: PropTypes.bool, 51 | values: PropTypes.shape({ 52 | fromCurr: PropTypes.string, 53 | toCurr: PropTypes.string, 54 | fromAmount: PropTypes.number, 55 | toAmount: PropTypes.number, 56 | conversion: PropTypes.number, 57 | data: PropTypes.object, 58 | setConversion: PropTypes.func.isRequired, 59 | setFromAmount: PropTypes.func.isRequired, 60 | setToAmount: PropTypes.func.isRequired, 61 | setFromCurr: PropTypes.func.isRequired, 62 | setToCurr: PropTypes.func.isRequired 63 | }) 64 | } 65 | 66 | export default InputBox -------------------------------------------------------------------------------- /3_currencyConvertor/src/assets/react.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /3_currencyConvertor/src/index.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; -------------------------------------------------------------------------------- /3_currencyConvertor/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 | -------------------------------------------------------------------------------- /3_currencyConvertor/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 | -------------------------------------------------------------------------------- /3_currencyConvertor/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 | -------------------------------------------------------------------------------- /4_ReactRouter/.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 | }, 20 | } 21 | -------------------------------------------------------------------------------- /4_ReactRouter/.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 | -------------------------------------------------------------------------------- /4_ReactRouter/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 | -------------------------------------------------------------------------------- /4_ReactRouter/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /4_ReactRouter/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "4", 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-dom": "^18.2.0", 15 | "react-router-dom": "^6.17.0" 16 | }, 17 | "devDependencies": { 18 | "@types/react": "^18.2.15", 19 | "@types/react-dom": "^18.2.7", 20 | "@vitejs/plugin-react": "^4.0.3", 21 | "autoprefixer": "^10.4.16", 22 | "eslint": "^8.45.0", 23 | "eslint-plugin-react": "^7.32.2", 24 | "eslint-plugin-react-hooks": "^4.6.0", 25 | "eslint-plugin-react-refresh": "^0.4.3", 26 | "postcss": "^8.4.31", 27 | "tailwindcss": "^3.3.3", 28 | "vite": "^4.4.5" 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /4_ReactRouter/postcss.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /4_ReactRouter/public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /4_ReactRouter/src/App.jsx: -------------------------------------------------------------------------------- 1 | // import { RouterProvider, createBrowserRouter } from "react-router-dom"; 2 | import { Routes, Route } from "react-router-dom"; 3 | import Footer from "./Footer/Footer"; 4 | import Header from "./Header/Header"; 5 | import Home, { Test } from "./Main/Home"; 6 | import About from "./Main/About"; 7 | import Contact from "./Main/Contact"; 8 | 9 | // const router = createBrowserRouter([ 10 | // { 11 | // path: "/", 12 | // element: , 13 | // children: [ 14 | // { 15 | // path: "about", 16 | // element: 17 | // }, 18 | // { 19 | // path: "contact", 20 | // element: 21 | // }, 22 | // ], 23 | // } 24 | // ]) 25 | 26 | function App() { 27 | return ( 28 | <> 29 |
30 |
31 |
32 |
33 | 34 | 35 | } /> 36 | } /> 37 | } /> 38 | } /> 39 | 40 | 41 |
42 |
43 |
44 |
45 | 46 | ); 47 | } 48 | 49 | export default App; 50 | -------------------------------------------------------------------------------- /4_ReactRouter/src/Footer/Footer.jsx: -------------------------------------------------------------------------------- 1 | import { Link } from "react-router-dom" 2 | 3 | function Footer() { 4 | return ( 5 |
6 |
7 | Logo 8 |

Vite

9 |
10 |
11 |
    12 |
  • 13 | 14 | GitHub 15 | 16 |
    • 17 |
  • 18 | Linkedin 19 |
    • 20 |
  • 21 | Replit 22 |
    • 23 |
24 |
25 |
26 | ) 27 | } 28 | 29 | export default Footer -------------------------------------------------------------------------------- /4_ReactRouter/src/Header/Header.jsx: -------------------------------------------------------------------------------- 1 | import { NavLink } from "react-router-dom"; 2 | 3 | function Header() { 4 | return ( 5 | <> 6 |
7 |
8 | Logo 9 |
10 |
11 |
    12 |
  • 13 | `px-5 py-2 ${isActive ? "text-slate-500" : "text-slate-300" } cursor-pointer hover:bg-white hover:bg-opacity-10 rounded-md`}> 14 | Home 15 | 16 |
    • 17 |
  • 18 | `px-5 py-2 ${isActive ? `text-slate-500` : `text-slate-300` } cursor-pointer hover:bg-white hover:bg-opacity-10 rounded-md`}>About 19 |
    • 20 |
  • 21 | `px-5 py-2 ${isActive ? "text-slate-500" : "text-slate-300" } cursor-pointer hover:bg-white hover:bg-opacity-10 rounded-md`}>Contact 22 |
    • 23 |
24 |
25 |
26 | 27 | Log In 28 | 29 |
30 |
31 | 32 | ); 33 | } 34 | 35 | export default Header; 36 | -------------------------------------------------------------------------------- /4_ReactRouter/src/Main/About.jsx: -------------------------------------------------------------------------------- 1 | import { useCallback, useEffect, useState } from 'react'; 2 | // import { useLoaderData } from 'react-router-dom'; 3 | 4 | export default function About() { 5 | const [data, setData] = useState([]); 6 | // const loaderData = useLoaderData(); 7 | const fetchData = useCallback(() => { 8 | fetch('https://api.github.com/users/bitwisegaurav') 9 | .then(res => res.json()).then(res => setData(res)) 10 | }, []) 11 | useEffect(() => { 12 | fetchData(); 13 | // console.log(loaderData); 14 | }) 15 | return ( 16 | <> 17 |

Github

18 |
19 |
20 | Image 21 |
22 |
23 |
24 |
Name : 25 | {data.name} 26 |
27 |
Followers : 28 | {data.followers} 29 |
30 |
Following : 31 | {data.following} 32 |
33 |
34 |
35 |
Bio : 36 | {data.bio} 37 |
38 |
Public Repos : 39 | {data.public_repos} 40 |
41 |
42 |
43 |
44 | 45 | ) 46 | } 47 | 48 | // export const githubInfo = async () => { 49 | // const response = await fetch('https://api.github.com/users/bitwisegaurav'); 50 | // console.log("something") 51 | // return response.json(); 52 | // }; 53 | -------------------------------------------------------------------------------- /4_ReactRouter/src/Main/Contact.jsx: -------------------------------------------------------------------------------- 1 | export default function Contact() { 2 | return ( 3 |
4 |
5 |

Contact Us

6 |
7 |
8 |
9 |
10 | 11 |
12 | 13 |
14 |
15 |
16 | 17 |
18 | 19 |
20 |
21 |
22 | 23 |
24 | 25 |
26 |
27 |
28 | 29 |
30 | 31 |
32 |
33 |
34 |
35 | 36 |
37 |
38 |
39 | ) 40 | } -------------------------------------------------------------------------------- /4_ReactRouter/src/Main/Home.jsx: -------------------------------------------------------------------------------- 1 | import { useParams } from "react-router-dom" 2 | 3 | export default function Home() { 4 | 5 | return ( 6 |
7 |
8 | 52 | ) 53 | } 54 | 55 | export function Test(){ 56 | const {text} = useParams(); 57 | return ( 58 |
Test : {text}
59 | ) 60 | } -------------------------------------------------------------------------------- /4_ReactRouter/src/assets/react.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /4_ReactRouter/src/index.css: -------------------------------------------------------------------------------- 1 | @import 'tailwindcss/base'; 2 | @import 'tailwindcss/components'; 3 | @import 'tailwindcss/utilities'; 4 | 5 | body{ 6 | background-color: #334155; 7 | height: 100vh; 8 | } -------------------------------------------------------------------------------- /4_ReactRouter/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 { BrowserRouter as Router } from 'react-router-dom'; 6 | 7 | ReactDOM.createRoot(document.getElementById('root')).render( 8 | 9 | 10 | 11 | 12 | , 13 | ) 14 | -------------------------------------------------------------------------------- /4_ReactRouter/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 | -------------------------------------------------------------------------------- /4_ReactRouter/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 | -------------------------------------------------------------------------------- /5_ContextApi/.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 | }, 20 | } 21 | -------------------------------------------------------------------------------- /5_ContextApi/.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 | -------------------------------------------------------------------------------- /5_ContextApi/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 | -------------------------------------------------------------------------------- /5_ContextApi/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Vite + React 9 | 10 | 11 |
12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /5_ContextApi/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "5-contextapi", 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-dom": "^18.2.0" 15 | }, 16 | "devDependencies": { 17 | "@types/react": "^18.2.15", 18 | "@types/react-dom": "^18.2.7", 19 | "@vitejs/plugin-react": "^4.0.3", 20 | "eslint": "^8.45.0", 21 | "eslint-plugin-react": "^7.32.2", 22 | "eslint-plugin-react-hooks": "^4.6.0", 23 | "eslint-plugin-react-refresh": "^0.4.3", 24 | "vite": "^4.4.5" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /5_ContextApi/public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /5_ContextApi/src/App.jsx: -------------------------------------------------------------------------------- 1 | import Login from './Login' 2 | import Profile from './Profile' 3 | import UserContextProvider from './context/UserContextProvider' 4 | 5 | function App() { 6 | 7 | return ( 8 | <> 9 |
10 | 11 | 12 | 13 | 14 |
15 | 16 | ) 17 | } 18 | 19 | export default App 20 | -------------------------------------------------------------------------------- /5_ContextApi/src/Login.jsx: -------------------------------------------------------------------------------- 1 | import {useState, useContext} from 'react' 2 | import UserContext from './context/UserContext' 3 | 4 | export default function Login(){ 5 | const [username, setUsername] = useState(""); 6 | const [password, setPassword] = useState(""); 7 | 8 | const {setUser} = useContext(UserContext); 9 | 10 | const handleData = (e) => { 11 | e.preventDefault(); 12 | console.log("Login"); 13 | setUser({username, password}); 14 | } 15 | 16 | return ( 17 | <> 18 |
19 | 20 |

Login Page

21 | setUsername(e.target.value)} name="username" className="w-full rounded-lg px-4 py-2 text-slate-800 placeholder:text-slate-500"/> 22 | setPassword(e.target.value)} name="password" className="w-full rounded-lg px-4 py-2 text-slate-800 placeholder:text-slate-500"/> 23 | 24 |
25 | 26 | ) 27 | } -------------------------------------------------------------------------------- /5_ContextApi/src/Profile.jsx: -------------------------------------------------------------------------------- 1 | import {useContext} from 'react' 2 | import UserContext from './context/UserContext' 3 | 4 | export default function Profile(){ 5 | 6 | const {user} = useContext(UserContext); 7 | 8 | return ( 9 | <> 10 |
11 |

User Profile

12 |
Welcome {user ? user.username : "Guest"}
13 |
14 | 15 | ) 16 | } -------------------------------------------------------------------------------- /5_ContextApi/src/assets/react.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /5_ContextApi/src/context/UserContext.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const UserContext = React.createContext(); 4 | 5 | export default UserContext; -------------------------------------------------------------------------------- /5_ContextApi/src/context/UserContextProvider.jsx: -------------------------------------------------------------------------------- 1 | // import React from 'react'; 2 | import {useState} from 'react'; 3 | import UserContext from './UserContext.js'; 4 | import PropTypes from 'prop-types'; 5 | 6 | const UserContextProvider = ({ children }) => { 7 | const [user, setUser] = useState(null); 8 | return ( 9 | 10 | {children} 11 | 12 | ); 13 | }; 14 | 15 | UserContextProvider.propTypes = { 16 | children: PropTypes.node.isRequired, 17 | }; 18 | 19 | export default UserContextProvider; -------------------------------------------------------------------------------- /5_ContextApi/src/index.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bitwisegaurav/ReactLearning/d82dcc7dc4d6612c9ae0255eda21802ebae64798/5_ContextApi/src/index.css -------------------------------------------------------------------------------- /5_ContextApi/src/main.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom/client' 3 | import App from './App.jsx' 4 | 5 | ReactDOM.createRoot(document.getElementById('root')).render( 6 | 7 | 8 | , 9 | ) 10 | -------------------------------------------------------------------------------- /5_ContextApi/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 | -------------------------------------------------------------------------------- /6_themeSwitcher/.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 | }, 20 | } 21 | -------------------------------------------------------------------------------- /6_themeSwitcher/.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 | -------------------------------------------------------------------------------- /6_themeSwitcher/README.md: -------------------------------------------------------------------------------- 1 | # Toggle Switcher 2 | 3 | I used context api and useContext hook for this toggle switching project -------------------------------------------------------------------------------- /6_themeSwitcher/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /6_themeSwitcher/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "6-themeswitcher", 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-dom": "^18.2.0" 15 | }, 16 | "devDependencies": { 17 | "@types/react": "^18.2.15", 18 | "@types/react-dom": "^18.2.7", 19 | "@vitejs/plugin-react": "^4.0.3", 20 | "autoprefixer": "^10.4.16", 21 | "eslint": "^8.45.0", 22 | "eslint-plugin-react": "^7.32.2", 23 | "eslint-plugin-react-hooks": "^4.6.0", 24 | "eslint-plugin-react-refresh": "^0.4.3", 25 | "postcss": "^8.4.31", 26 | "tailwindcss": "^3.3.5", 27 | "vite": "^4.4.5" 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /6_themeSwitcher/postcss.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /6_themeSwitcher/public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /6_themeSwitcher/src/App.jsx: -------------------------------------------------------------------------------- 1 | import { useEffect, useState, useCallback } from "react" 2 | import Card from "./components/Card" 3 | import ToggleButton from "./components/ToggleButton" 4 | import { ThemeToggleProvider } from "./context/ThemeContext" 5 | 6 | function App() { 7 | const [theme, setTheme] = useState("dark"); 8 | 9 | const toggleTheme = useCallback(() => { 10 | setTheme((prevTheme) => (prevTheme === "light" ? "dark" : "light")); 11 | }, []); 12 | 13 | useEffect(() => { 14 | const root = document.getElementById("root"); 15 | root.classList.remove("dark", "light"); 16 | root.classList.add(theme); 17 | }, [theme]); 18 | 19 | return ( 20 |
21 |
22 | 23 | 24 | 25 | 26 |
27 |
28 | ); 29 | } 30 | 31 | export default App 32 | -------------------------------------------------------------------------------- /6_themeSwitcher/src/assets/react.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /6_themeSwitcher/src/components/Card.jsx: -------------------------------------------------------------------------------- 1 | 2 | export default function Card() { 3 | return ( 4 |
5 |
6 | Image 7 |
8 |

9 |

Gaurav Mishra

10 |

Full Stack Developer

11 |

12 | 13 |
14 | ); 15 | } 16 | -------------------------------------------------------------------------------- /6_themeSwitcher/src/components/ToggleButton.jsx: -------------------------------------------------------------------------------- 1 | import useThemeToggle from "../context/ThemeContext"; 2 | 3 | export default function ToggleButton() { 4 | const { toggleTheme} = useThemeToggle(); 5 | 6 | return ( 7 | 17 | ); 18 | } 19 | 20 | -------------------------------------------------------------------------------- /6_themeSwitcher/src/context/ThemeContext.jsx: -------------------------------------------------------------------------------- 1 | import { createContext, useContext } from "react"; 2 | 3 | export const themeContext = createContext({ 4 | theme: "", 5 | toggleTheme: function(){} 6 | }) 7 | 8 | export const ThemeToggleProvider = themeContext.Provider; 9 | 10 | export default function useThemeToggle(){ 11 | return useContext(themeContext); 12 | } -------------------------------------------------------------------------------- /6_themeSwitcher/src/index.css: -------------------------------------------------------------------------------- 1 | @import 'tailwindcss/base'; 2 | @import 'tailwindcss/components'; 3 | @import 'tailwindcss/utilities'; 4 | 5 | *{ 6 | transition: background 0.3s ease-in-out; 7 | } -------------------------------------------------------------------------------- /6_themeSwitcher/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 | -------------------------------------------------------------------------------- /6_themeSwitcher/tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | export default { 3 | content: [ 4 | "./index.html", 5 | "./src/**/*.{js,ts,jsx,tsx}", 6 | ], 7 | darkMode: "class", 8 | theme: { 9 | extend: {}, 10 | }, 11 | plugins: [], 12 | } 13 | 14 | -------------------------------------------------------------------------------- /6_themeSwitcher/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 | -------------------------------------------------------------------------------- /7_todoList/.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 | }, 20 | } 21 | -------------------------------------------------------------------------------- /7_todoList/.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 | -------------------------------------------------------------------------------- /7_todoList/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 | -------------------------------------------------------------------------------- /7_todoList/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /7_todoList/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "7-todolist", 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-dom": "^18.2.0" 15 | }, 16 | "devDependencies": { 17 | "@types/react": "^18.2.15", 18 | "@types/react-dom": "^18.2.7", 19 | "@vitejs/plugin-react": "^4.0.3", 20 | "autoprefixer": "^10.4.16", 21 | "eslint": "^8.45.0", 22 | "eslint-plugin-react": "^7.32.2", 23 | "eslint-plugin-react-hooks": "^4.6.0", 24 | "eslint-plugin-react-refresh": "^0.4.3", 25 | "postcss": "^8.4.31", 26 | "tailwindcss": "^3.3.5", 27 | "vite": "^4.4.5" 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /7_todoList/postcss.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /7_todoList/public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /7_todoList/src/App.jsx: -------------------------------------------------------------------------------- 1 | import { useEffect, useState } from "react" 2 | import Input from "./components/Input" 3 | import { TodoProvider } from "./contexts/todoContext" 4 | import Todo from "./components/Todo"; 5 | 6 | function App() { 7 | const [todos, setTodos] = useState([]); 8 | 9 | const addTodo = (todo) => { 10 | setTodos((preTodos) => [{ ...todo }, ...preTodos]); 11 | } 12 | const removeTodo = (id) => { 13 | setTodos((preTodos) => preTodos.filter((todo) => todo.id !== id)); 14 | } 15 | const toggleTodo = (id) => { 16 | setTodos((preTodos) => preTodos.map((preTodo) => ( 17 | preTodo.id === id ? {...preTodo, completed: !preTodo.completed} : {...preTodo} 18 | ))) 19 | } 20 | const editTodo = (id, todo) => { 21 | setTodos((preTodos) => preTodos.map((preTodo) => ( 22 | preTodo.id === id ? todo : preTodo 23 | ))) 24 | console.table(todos) 25 | } 26 | 27 | useEffect(() => { 28 | const values = JSON.parse(localStorage.getItem("todos")); 29 | if(values) setTodos(values); 30 | }, []) 31 | 32 | useEffect(() => { 33 | localStorage.setItem("todos", JSON.stringify(todos)); 34 | }, [todos]) 35 | 36 | return ( 37 |
38 |
39 |

Todo List

40 | 41 | 42 | { 43 | todos.map((todo) => ( 44 | 45 | )) 46 | } 47 | 48 |
49 |
50 | ) 51 | } 52 | 53 | export default App -------------------------------------------------------------------------------- /7_todoList/src/assets/react.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /7_todoList/src/components/Input.jsx: -------------------------------------------------------------------------------- 1 | 2 | import useTodo from "../contexts/todoContext" 3 | 4 | export default function Input() { 5 | const {addTodo} = useTodo(); 6 | function handleData(e){ 7 | e.preventDefault(); 8 | addTodo({id: Date.now(), title: e.target.msg.value, completed: false, editable: false }) 9 | } 10 | return ( 11 |
12 | 13 | 14 |
15 | ) 16 | } -------------------------------------------------------------------------------- /7_todoList/src/components/Todo.jsx: -------------------------------------------------------------------------------- 1 | import { useState } from "react" 2 | import PropTypes from 'prop-types'; 3 | import useTodo from "../contexts/todoContext"; 4 | 5 | export default function Todo({ todo }) { 6 | const [msg, setMsg] = useState(todo.title); 7 | const {toggleTodo, editTodo, removeTodo} = useTodo(); 8 | 9 | function edit(){ 10 | if(todo.editable){ 11 | editTodo(todo.id, { 12 | ...todo, 13 | title: msg, 14 | completed: todo.completed, 15 | editable: false, 16 | }) 17 | }else{ 18 | editTodo(todo.id, { 19 | ...todo, 20 | editable: true, 21 | }) 22 | } 23 | } 24 | 25 | return ( 26 |
27 | toggleTodo(todo.id)}/> 28 | setMsg(e.target.value)} 33 | readOnly={!todo.editable} 34 | /> 35 | 36 | 37 |
38 | ); 39 | } 40 | 41 | Todo.propTypes = { 42 | todo: PropTypes.shape({ 43 | id: PropTypes.number.isRequired, 44 | title: PropTypes.string.isRequired, 45 | completed: PropTypes.bool.isRequired, 46 | editable: PropTypes.bool.isRequired, 47 | }).isRequired, 48 | }; -------------------------------------------------------------------------------- /7_todoList/src/contexts/todoContext.js: -------------------------------------------------------------------------------- 1 | import { createContext, useContext } from "react"; 2 | 3 | export const todoContext = createContext({ 4 | todos: [ 5 | { 6 | id: 1, 7 | title: 'Todo 1', 8 | completed: false, 9 | editable: false, 10 | } 11 | ], 12 | addTodo: (todo) => {}, 13 | removeTodo: (id) => {}, 14 | toggleTodo: (id, todo) => {}, 15 | editTodo: (id, todo) => {}, 16 | }); 17 | 18 | export const TodoProvider = todoContext.Provider; 19 | 20 | export default function useTodo() { return useContext(todoContext);} 21 | -------------------------------------------------------------------------------- /7_todoList/src/index.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; -------------------------------------------------------------------------------- /7_todoList/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 | -------------------------------------------------------------------------------- /7_todoList/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 | spacing: { 10 | '128': '50rem', 11 | } 12 | }, 13 | }, 14 | plugins: [], 15 | } 16 | 17 | -------------------------------------------------------------------------------- /7_todoList/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 | -------------------------------------------------------------------------------- /8_reduxToolkit_TodoList/.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 | }, 20 | } 21 | -------------------------------------------------------------------------------- /8_reduxToolkit_TodoList/.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 | -------------------------------------------------------------------------------- /8_reduxToolkit_TodoList/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 | -------------------------------------------------------------------------------- /8_reduxToolkit_TodoList/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /8_reduxToolkit_TodoList/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "8-reduxtoolkit-todolist", 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-dom": "^18.2.0" 15 | }, 16 | "devDependencies": { 17 | "@types/react": "^18.2.15", 18 | "@types/react-dom": "^18.2.7", 19 | "@vitejs/plugin-react": "^4.0.3", 20 | "autoprefixer": "^10.4.16", 21 | "eslint": "^8.45.0", 22 | "eslint-plugin-react": "^7.32.2", 23 | "eslint-plugin-react-hooks": "^4.6.0", 24 | "eslint-plugin-react-refresh": "^0.4.3", 25 | "postcss": "^8.4.31", 26 | "tailwindcss": "^3.3.5", 27 | "vite": "^4.4.5" 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /8_reduxToolkit_TodoList/postcss.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /8_reduxToolkit_TodoList/public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /8_reduxToolkit_TodoList/src/App.jsx: -------------------------------------------------------------------------------- 1 | import { useSelector } from "react-redux"; 2 | import Input from "./components/Input" 3 | import Todo from "./components/Todo"; 4 | 5 | function App() { 6 | const todos = useSelector(state => state.todos); 7 | 8 | return ( 9 |
10 |
11 |

Todo List

12 | 13 | {todos.map((todo) => )} 14 |
15 |
16 | ) 17 | } 18 | 19 | export default App -------------------------------------------------------------------------------- /8_reduxToolkit_TodoList/src/app/store.js: -------------------------------------------------------------------------------- 1 | import {configureStore} from '@reduxjs/toolkit' 2 | import todoReducer from '../features/todoSlice' 3 | 4 | export const store = configureStore({ 5 | reducer: todoReducer 6 | }); -------------------------------------------------------------------------------- /8_reduxToolkit_TodoList/src/assets/react.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /8_reduxToolkit_TodoList/src/components/Input.jsx: -------------------------------------------------------------------------------- 1 | import { useState } from "react"; 2 | import { useDispatch } from "react-redux" 3 | import { addTodo } from "../features/todoSlice"; 4 | 5 | export default function Input() { 6 | const [msg, setMsg] = useState(""); 7 | const dispatch = useDispatch(); 8 | 9 | const handleData = (e) => { 10 | e.preventDefault(); 11 | if (msg.trim() !== "") { 12 | dispatch(addTodo(msg)); 13 | setMsg(""); 14 | } 15 | } 16 | 17 | return ( 18 |
19 | setMsg(e.target.value)} /> 20 | 21 |
22 | ) 23 | } -------------------------------------------------------------------------------- /8_reduxToolkit_TodoList/src/components/Todo.jsx: -------------------------------------------------------------------------------- 1 | import { useDispatch } from "react-redux"; 2 | import PropTypes from 'prop-types'; 3 | import { editTodo, removeTodo, toggleTodo, updateTodo } from "../features/todoSlice"; 4 | import { useState } from "react"; 5 | 6 | export default function Todo({todo}) { 7 | const dispatch = useDispatch(); 8 | const [msg, setMsg] = useState(todo.title) 9 | 10 | const edited = () => { 11 | if(todo.editable){ 12 | dispatch(updateTodo({ 13 | id: todo.id, 14 | title: msg, 15 | })) 16 | } else { 17 | dispatch(editTodo(todo.id)) 18 | } 19 | } 20 | 21 | return ( 22 |
23 | dispatch(toggleTodo(todo.id))}/> 24 | setMsg(e.target.value)} 28 | readOnly={!todo.editable} 29 | /> 30 | 31 | 32 |
33 | ); 34 | } 35 | 36 | Todo.propTypes = { 37 | todo: PropTypes.shape({ 38 | id: PropTypes.string.isRequired, 39 | title: PropTypes.string.isRequired, 40 | completed: PropTypes.bool.isRequired, 41 | editable: PropTypes.bool.isRequired, 42 | }).isRequired, 43 | }; -------------------------------------------------------------------------------- /8_reduxToolkit_TodoList/src/features/todoSlice.jsx: -------------------------------------------------------------------------------- 1 | import {createSlice, nanoid} from '@reduxjs/toolkit' 2 | 3 | export const todoSlice = createSlice({ 4 | name: 'todo', 5 | initialState: { 6 | todos: [ 7 | { 8 | id: "1", 9 | title: 'Todo 1', 10 | completed: false, 11 | editable: false, 12 | } 13 | ], 14 | }, 15 | reducers: { 16 | addTodo: (state, action) => { 17 | state.todos.push({id: nanoid(), title: action.payload, completed: false, editable: false}); 18 | }, 19 | removeTodo: (state, action) => { 20 | state.todos = state.todos.filter(todo => todo.id !== action.payload); 21 | }, 22 | toggleTodo: (state, action) => { 23 | state.todos = state.todos.map(todo => todo.id === action.payload ? {...todo, completed: !todo.completed} : todo); 24 | }, 25 | editTodo: (state, action) => { 26 | state.todos = state.todos.map(todo => todo.id === action.payload ? {...todo, editable: !todo.editable} : todo); 27 | }, 28 | updateTodo: (state, action) => { 29 | state.todos = state.todos.map(todo => todo.id === action.payload.id ? {...todo, title: action.payload.title, editable: !todo.editable} : todo); 30 | console.table(state.todos) 31 | }, 32 | }, 33 | }) 34 | 35 | export const {addTodo, removeTodo, toggleTodo, editTodo, updateTodo} = todoSlice.actions; 36 | 37 | const todoReducer = todoSlice.reducer; 38 | export default todoReducer; -------------------------------------------------------------------------------- /8_reduxToolkit_TodoList/src/index.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; -------------------------------------------------------------------------------- /8_reduxToolkit_TodoList/src/main.jsx: -------------------------------------------------------------------------------- 1 | import ReactDOM from 'react-dom/client' 2 | import App from './App.jsx' 3 | import './index.css' 4 | import { Provider } from "react-redux"; 5 | import { store } from './app/store.js' 6 | 7 | ReactDOM.createRoot(document.getElementById('root')).render( 8 | 9 | 10 | , 11 | ) 12 | -------------------------------------------------------------------------------- /8_reduxToolkit_TodoList/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 | spacing: { 10 | '128': '40rem', 11 | } 12 | }, 13 | }, 14 | plugins: [], 15 | } 16 | 17 | -------------------------------------------------------------------------------- /8_reduxToolkit_TodoList/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 | -------------------------------------------------------------------------------- /IncompleteCurrencyConvertor/.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 | }, 20 | } 21 | -------------------------------------------------------------------------------- /IncompleteCurrencyConvertor/.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 | -------------------------------------------------------------------------------- /IncompleteCurrencyConvertor/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 | -------------------------------------------------------------------------------- /IncompleteCurrencyConvertor/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /IncompleteCurrencyConvertor/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "test", 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-dom": "^18.2.0" 15 | }, 16 | "devDependencies": { 17 | "@types/react": "^18.2.15", 18 | "@types/react-dom": "^18.2.7", 19 | "@vitejs/plugin-react": "^4.0.3", 20 | "autoprefixer": "^10.4.16", 21 | "eslint": "^8.45.0", 22 | "eslint-plugin-react": "^7.32.2", 23 | "eslint-plugin-react-hooks": "^4.6.0", 24 | "eslint-plugin-react-refresh": "^0.4.3", 25 | "postcss": "^8.4.31", 26 | "tailwindcss": "^3.3.5", 27 | "vite": "^4.4.5" 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /IncompleteCurrencyConvertor/postcss.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /IncompleteCurrencyConvertor/public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /IncompleteCurrencyConvertor/src/App.css: -------------------------------------------------------------------------------- 1 | #root { 2 | max-width: 1280px; 3 | margin: 0 auto; 4 | padding: 2rem; 5 | text-align: center; 6 | } 7 | 8 | .logo { 9 | height: 6em; 10 | padding: 1.5em; 11 | will-change: filter; 12 | transition: filter 300ms; 13 | } 14 | .logo:hover { 15 | filter: drop-shadow(0 0 2em #646cffaa); 16 | } 17 | .logo.react:hover { 18 | filter: drop-shadow(0 0 2em #61dafbaa); 19 | } 20 | 21 | @keyframes logo-spin { 22 | from { 23 | transform: rotate(0deg); 24 | } 25 | to { 26 | transform: rotate(360deg); 27 | } 28 | } 29 | 30 | @media (prefers-reduced-motion: no-preference) { 31 | a:nth-of-type(2) .logo { 32 | animation: logo-spin infinite 20s linear; 33 | } 34 | } 35 | 36 | .card { 37 | padding: 2em; 38 | } 39 | 40 | .read-the-docs { 41 | color: #888; 42 | } 43 | -------------------------------------------------------------------------------- /IncompleteCurrencyConvertor/src/App.jsx: -------------------------------------------------------------------------------- 1 | import { useState, useEffect } from 'react' 2 | import InputBox from './InputBox' 3 | 4 | function App() { 5 | const [amount, setAmount] = useState(1); 6 | const [convertedAmount, setConvertedAmount] = useState(1); 7 | const [conversion, setConversion] = useState(1); 8 | const [from, setFrom] = useState("usd"); 9 | const [to, setTo] = useState("inr"); 10 | useEffect(() => { 11 | setConvertedAmount( 12 | (amount * conversion) 13 | ); 14 | }, [amount, conversion]) 15 | 16 | if(from && to){ 17 | console.log(convertedAmount); 18 | } 19 | 20 | return ( 21 | <> 22 |
23 |
24 | 25 | 26 |
27 |
28 | 29 | ) 30 | } 31 | 32 | export default App -------------------------------------------------------------------------------- /IncompleteCurrencyConvertor/src/InputBox.jsx: -------------------------------------------------------------------------------- 1 | import {useState, useEffect} from 'react'; 2 | import PropTypes from 'prop-types'; 3 | 4 | function fetchData(currency, setData){ 5 | fetch(`https://cdn.jsdelivr.net/gh/fawazahmed0/currency-api@1/latest/currencies/${currency}.json`) 6 | .then((res) => res.json()) 7 | .then(res => { 8 | setData(res[currency]); 9 | }) 10 | } 11 | 12 | function InputBox(props) { 13 | const [data, setData] = useState([]); 14 | const [selectValue, setSelectValue] = useState(props.currency); 15 | const keys = Object.keys(data); 16 | 17 | useEffect(() => { 18 | fetchData(props.currency, setData); 19 | }, [props.currency, props.from]); 20 | 21 | function setAll(){ 22 | if(props.take){ 23 | const to = props.to; 24 | const values = data[to]; 25 | props.setFrom(selectValue); 26 | console.log(values, selectValue); 27 | } 28 | else 29 | props.setTo(selectValue); 30 | console.log(props); 31 | } 32 | // setAll(); 33 | useEffect(setAll, [data, selectValue, props.from, props.to, props, keys]); 34 | 35 | useEffect(() => { 36 | props.setConversion(data[props.to]); 37 | }, [props.to, props, data]) 38 | 39 | return ( 40 |
41 | 44 | 59 | props.setValue(Number(e.target.value))} 64 | className="w-full px-4 py-2 mt-4 rounded-lg focus:outline-none" 65 | min={0} 66 | /> 67 |
68 | ); 69 | } 70 | 71 | InputBox.propTypes = { 72 | currency: PropTypes.string.isRequired, 73 | label: PropTypes.string.isRequired, 74 | value: PropTypes.number.isRequired, 75 | to: PropTypes.number, 76 | from: PropTypes.number, 77 | setValue: PropTypes.func.isRequired, 78 | setConversion: PropTypes.func, 79 | setFrom: PropTypes.func, 80 | setTo: PropTypes.func, 81 | take: PropTypes.bool, 82 | }; 83 | 84 | export default InputBox; -------------------------------------------------------------------------------- /IncompleteCurrencyConvertor/src/assets/react.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /IncompleteCurrencyConvertor/src/index.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; -------------------------------------------------------------------------------- /IncompleteCurrencyConvertor/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 | -------------------------------------------------------------------------------- /IncompleteCurrencyConvertor/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 | } -------------------------------------------------------------------------------- /IncompleteCurrencyConvertor/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 | --------------------------------------------------------------------------------