From 49f96463851aeaed36ce0b557c3b6e7ab031f82f Mon Sep 17 00:00:00 2001 From: RAJAN KANNAUJIYA Date: Wed, 15 May 2024 16:21:48 +0530 Subject: [PATCH 1/2] only customReact is pending --- package-lock.json | 202 +++++++++++++++++++++++++---- package.json | 3 +- src/App.jsx | 145 ++++++++++++++------- src/components/Assignment.jsx | 28 ++++ src/components/Dashboard.jsx | 2 +- src/components/Q1.Profile.jsx | 29 +++++ src/components/Q2.background.jsx | 42 ++++++ src/components/Q3.customR.jsx | 17 +++ src/components/Q4.generatePara.jsx | 46 +++++++ src/components/Q5.githubinfo.jsx | 27 ++++ src/components/Q6.otplogin.jsx | 84 ++++++++++++ src/components/Q7.birthWish.jsx | 44 +++++++ src/components/wishCard.js | 11 ++ src/store/atoms/allInOne.jsx | 84 ++++++++++++ src/store/atoms/count.js | 18 --- src/store/atoms/count.jsx | 14 +- src/store/atoms/todo.jsx | 38 ++++++ 17 files changed, 742 insertions(+), 92 deletions(-) create mode 100644 src/components/Assignment.jsx create mode 100644 src/components/Q1.Profile.jsx create mode 100644 src/components/Q2.background.jsx create mode 100644 src/components/Q3.customR.jsx create mode 100644 src/components/Q4.generatePara.jsx create mode 100644 src/components/Q5.githubinfo.jsx create mode 100644 src/components/Q6.otplogin.jsx create mode 100644 src/components/Q7.birthWish.jsx create mode 100644 src/components/wishCard.js create mode 100644 src/store/atoms/allInOne.jsx delete mode 100644 src/store/atoms/count.js create mode 100644 src/store/atoms/todo.jsx diff --git a/package-lock.json b/package-lock.json index 34f56fa..5f72319 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,9 +8,10 @@ "name": "week-7-1", "version": "0.0.0", "dependencies": { + "axios": "^1.6.8", "react": "^18.2.0", "react-dom": "^18.2.0", - "react-router-dom": "^6.21.2", + "react-router-dom": "^6.23.1", "recoil": "^0.7.7" }, "devDependencies": { @@ -929,9 +930,9 @@ } }, "node_modules/@remix-run/router": { - "version": "1.14.2", - "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.14.2.tgz", - "integrity": "sha512-ACXpdMM9hmKZww21yEqWwiLws/UPLhNKvimN8RrYSqPSvB3ov7sLvAcfvaxePeLvccTQKGdkDIhLYApZVDFuKg==", + "version": "1.16.1", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.16.1.tgz", + "integrity": "sha512-es2g3dq6Nb07iFxGk5GuHN20RwBZOsuDQN7izWIisUcv9r+d2C5jQxqmgkdebXgReWfiyUabcki6Fg77mSNrig==", "engines": { "node": ">=14.0.0" } @@ -1384,6 +1385,11 @@ "has-symbols": "^1.0.3" } }, + "node_modules/asynckit": { + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz", + "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==" + }, "node_modules/available-typed-arrays": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.5.tgz", @@ -1396,6 +1402,16 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/axios": { + "version": "1.6.8", + "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.8.tgz", + "integrity": "sha512-v/ZHtJDU39mDpyBoFVkETcd/uNdxrWRrg3bKpOKzXFA6Bvqopts6ALSMU3y6ijYxbw2B+wPrIv46egTzJXCLGQ==", + "dependencies": { + "follow-redirects": "^1.15.6", + "form-data": "^4.0.0", + "proxy-from-env": "^1.1.0" + } + }, "node_modules/balanced-match": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz", @@ -1516,6 +1532,17 @@ "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==", "dev": true }, + "node_modules/combined-stream": { + "version": "1.0.8", + "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz", + "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==", + "dependencies": { + "delayed-stream": "~1.0.0" + }, + "engines": { + "node": ">= 0.8" + } + }, "node_modules/concat-map": { "version": "0.0.1", "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", @@ -1602,6 +1629,14 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/delayed-stream": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz", + "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==", + "engines": { + "node": ">=0.4.0" + } + }, "node_modules/doctrine": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz", @@ -2168,6 +2203,25 @@ "integrity": "sha512-36yxDn5H7OFZQla0/jFJmbIKTdZAQHngCedGxiMmpNfEZM0sdEeT+WczLQrjK6D7o2aiyLYDnkw0R3JK0Qv1RQ==", "dev": true }, + "node_modules/follow-redirects": { + "version": "1.15.6", + "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.6.tgz", + "integrity": "sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==", + "funding": [ + { + "type": "individual", + "url": "https://github.com/sponsors/RubenVerborgh" + } + ], + "engines": { + "node": ">=4.0" + }, + "peerDependenciesMeta": { + "debug": { + "optional": true + } + } + }, "node_modules/for-each": { "version": "0.3.3", "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz", @@ -2177,6 +2231,19 @@ "is-callable": "^1.1.3" } }, + "node_modules/form-data": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz", + "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==", + "dependencies": { + "asynckit": "^0.4.0", + "combined-stream": "^1.0.8", + "mime-types": "^2.1.12" + }, + "engines": { + "node": ">= 6" + } + }, "node_modules/fs.realpath": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz", @@ -2964,6 +3031,25 @@ "yallist": "^3.0.2" } }, + "node_modules/mime-db": { + "version": "1.52.0", + "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz", + "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==", + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/mime-types": { + "version": "2.1.35", + "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz", + "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==", + "dependencies": { + "mime-db": "1.52.0" + }, + "engines": { + "node": ">= 0.6" + } + }, "node_modules/minimatch": { "version": "3.1.2", "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz", @@ -3273,6 +3359,11 @@ "react-is": "^16.13.1" } }, + "node_modules/proxy-from-env": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz", + "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==" + }, "node_modules/punycode": { "version": "2.3.1", "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz", @@ -3341,11 +3432,11 @@ } }, "node_modules/react-router": { - "version": "6.21.2", - "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.21.2.tgz", - "integrity": "sha512-jJcgiwDsnaHIeC+IN7atO0XiSRCrOsQAHHbChtJxmgqG2IaYQXSnhqGb5vk2CU/wBQA12Zt+TkbuJjIn65gzbA==", + "version": "6.23.1", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.23.1.tgz", + "integrity": "sha512-fzcOaRF69uvqbbM7OhvQyBTFDVrrGlsFdS3AL+1KfIBtGETibHzi3FkoTRyiDJnWNc2VxrfvR+657ROHjaNjqQ==", "dependencies": { - "@remix-run/router": "1.14.2" + "@remix-run/router": "1.16.1" }, "engines": { "node": ">=14.0.0" @@ -3355,12 +3446,12 @@ } }, "node_modules/react-router-dom": { - "version": "6.21.2", - "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.21.2.tgz", - "integrity": "sha512-tE13UukgUOh2/sqYr6jPzZTzmzc70aGRP4pAjG2if0IP3aUT+sBtAKUJh0qMh0zylJHGLmzS+XWVaON4UklHeg==", + "version": "6.23.1", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.23.1.tgz", + "integrity": "sha512-utP+K+aSTtEdbWpC+4gxhdlPFwuEfDKq8ZrPFU65bbRJY+l706qjR7yaidBpo3MSeA/fzwbXWbKBI6ftOnP3OQ==", "dependencies": { - "@remix-run/router": "1.14.2", - "react-router": "6.21.2" + "@remix-run/router": "1.16.1", + "react-router": "6.23.1" }, "engines": { "node": ">=14.0.0" @@ -4654,9 +4745,9 @@ } }, "@remix-run/router": { - "version": "1.14.2", - "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.14.2.tgz", - "integrity": "sha512-ACXpdMM9hmKZww21yEqWwiLws/UPLhNKvimN8RrYSqPSvB3ov7sLvAcfvaxePeLvccTQKGdkDIhLYApZVDFuKg==" + "version": "1.16.1", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.16.1.tgz", + "integrity": "sha512-es2g3dq6Nb07iFxGk5GuHN20RwBZOsuDQN7izWIisUcv9r+d2C5jQxqmgkdebXgReWfiyUabcki6Fg77mSNrig==" }, "@rollup/rollup-android-arm-eabi": { "version": "4.9.5", @@ -4977,12 +5068,27 @@ "has-symbols": "^1.0.3" } }, + "asynckit": { + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz", + "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==" + }, "available-typed-arrays": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.5.tgz", "integrity": "sha512-DMD0KiN46eipeziST1LPP/STfDU0sufISXmjSgvVsoU2tqxctQeASejWcfNtxYKqETM1UxQ8sp2OrSBWpHY6sw==", "dev": true }, + "axios": { + "version": "1.6.8", + "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.8.tgz", + "integrity": "sha512-v/ZHtJDU39mDpyBoFVkETcd/uNdxrWRrg3bKpOKzXFA6Bvqopts6ALSMU3y6ijYxbw2B+wPrIv46egTzJXCLGQ==", + "requires": { + "follow-redirects": "^1.15.6", + "form-data": "^4.0.0", + "proxy-from-env": "^1.1.0" + } + }, "balanced-match": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz", @@ -5060,6 +5166,14 @@ "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==", "dev": true }, + "combined-stream": { + "version": "1.0.8", + "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz", + "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==", + "requires": { + "delayed-stream": "~1.0.0" + } + }, "concat-map": { "version": "0.0.1", "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", @@ -5126,6 +5240,11 @@ "object-keys": "^1.1.1" } }, + "delayed-stream": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz", + "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==" + }, "doctrine": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz", @@ -5565,6 +5684,11 @@ "integrity": "sha512-36yxDn5H7OFZQla0/jFJmbIKTdZAQHngCedGxiMmpNfEZM0sdEeT+WczLQrjK6D7o2aiyLYDnkw0R3JK0Qv1RQ==", "dev": true }, + "follow-redirects": { + "version": "1.15.6", + "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.6.tgz", + "integrity": "sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==" + }, "for-each": { "version": "0.3.3", "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz", @@ -5574,6 +5698,16 @@ "is-callable": "^1.1.3" } }, + "form-data": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz", + "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==", + "requires": { + "asynckit": "^0.4.0", + "combined-stream": "^1.0.8", + "mime-types": "^2.1.12" + } + }, "fs.realpath": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz", @@ -6129,6 +6263,19 @@ "yallist": "^3.0.2" } }, + "mime-db": { + "version": "1.52.0", + "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz", + "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==" + }, + "mime-types": { + "version": "2.1.35", + "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz", + "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==", + "requires": { + "mime-db": "1.52.0" + } + }, "minimatch": { "version": "3.1.2", "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz", @@ -6343,6 +6490,11 @@ "react-is": "^16.13.1" } }, + "proxy-from-env": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz", + "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==" + }, "punycode": { "version": "2.3.1", "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz", @@ -6385,20 +6537,20 @@ "dev": true }, "react-router": { - "version": "6.21.2", - "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.21.2.tgz", - "integrity": "sha512-jJcgiwDsnaHIeC+IN7atO0XiSRCrOsQAHHbChtJxmgqG2IaYQXSnhqGb5vk2CU/wBQA12Zt+TkbuJjIn65gzbA==", + "version": "6.23.1", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.23.1.tgz", + "integrity": "sha512-fzcOaRF69uvqbbM7OhvQyBTFDVrrGlsFdS3AL+1KfIBtGETibHzi3FkoTRyiDJnWNc2VxrfvR+657ROHjaNjqQ==", "requires": { - "@remix-run/router": "1.14.2" + "@remix-run/router": "1.16.1" } }, "react-router-dom": { - "version": "6.21.2", - "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.21.2.tgz", - "integrity": "sha512-tE13UukgUOh2/sqYr6jPzZTzmzc70aGRP4pAjG2if0IP3aUT+sBtAKUJh0qMh0zylJHGLmzS+XWVaON4UklHeg==", + "version": "6.23.1", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.23.1.tgz", + "integrity": "sha512-utP+K+aSTtEdbWpC+4gxhdlPFwuEfDKq8ZrPFU65bbRJY+l706qjR7yaidBpo3MSeA/fzwbXWbKBI6ftOnP3OQ==", "requires": { - "@remix-run/router": "1.14.2", - "react-router": "6.21.2" + "@remix-run/router": "1.16.1", + "react-router": "6.23.1" } }, "recoil": { diff --git a/package.json b/package.json index 2892dc2..802e532 100644 --- a/package.json +++ b/package.json @@ -10,9 +10,10 @@ "preview": "vite preview" }, "dependencies": { + "axios": "^1.6.8", "react": "^18.2.0", "react-dom": "^18.2.0", - "react-router-dom": "^6.21.2", + "react-router-dom": "^6.23.1", "recoil": "^0.7.7" }, "devDependencies": { diff --git a/src/App.jsx b/src/App.jsx index 896ad1e..5c5bc9f 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,58 +1,111 @@ -import { useContext, useMemo, useState } from "react" -import { CountContext } from "./context"; -import { RecoilRoot, useRecoilState, useRecoilValue, useSetRecoilState } from "recoil"; -import { countAtom, evenSelector } from "./store/atoms/count"; -function App() { - return ( -
- - - -
- ) -} +// import { RecoilRoot, useRecoilValue, useSetRecoilState } from "recoil"; +// import { countAtom, evenSelector } from "./store/atoms/count"; -function Count() { - console.log("re-render"); - return
- - -
-} +// function App() { +// return ( +//
+// +// +// +//
+// ) +// } -function CountRenderer() { - const count = useRecoilValue(countAtom); +// function Count() { +// console.log("re-render"); +// return
+// +// +//
+// } + +// function CountRenderer() { +// const count = useRecoilValue(countAtom); - return
- - {count} - - -
-} +// return
+// +// {count} +// +// +//
+// } + +// function EvenCountRenderer() { +// const isEven =useRecoilValue(evenSelector); +// console.log(isEven) + +// return
+// {isEven ? "It is even" : null} +//
+// } -function EvenCountRenderer() { - const isEven = useRecoilValue(evenSelector); +// function Buttons() { +// const setCount = useSetRecoilState(countAtom); +// console.log("buttons re-rendererd"); - return
- {isEven ? "It is even" : null} -
+// return
+// + +// +//
+// } + +// export default App +import { BrowserRouter, Routes, Route } from "react-router-dom"; +import { useNavigate } from "react-router-dom"; +import { RecoilRoot } from 'recoil'; +import Assignment from './components/Assignment'; +import Profile from "./components/Q1.Profile"; +import BackgroundChanger from "./components/Q2.background"; +import CustomComponent from "./components/Q3.customR"; +import Generatepara from "./components/Q4.generatePara"; +import GitHubInfo from "./components/Q5.githubinfo"; +import OtpLogin from "./components/Q6.otplogin"; +import BirthDayWishCard from "./components/Q7.birthWish"; + +function App(){ + +return( + + + + + }/> + }/> + }/> + }/> + }/> + }/> + }/> + }/> + + + +) } -function Buttons() { - const setCount = useSetRecoilState(countAtom); - console.log("buttons re-rendererd"); - return
- +function NavBar(){ + const navigate = useNavigate() + return( +
+ + + + + + + + - -
+
+ ) } -export default App + +export default App; \ No newline at end of file diff --git a/src/components/Assignment.jsx b/src/components/Assignment.jsx new file mode 100644 index 0000000..b691cbf --- /dev/null +++ b/src/components/Assignment.jsx @@ -0,0 +1,28 @@ +// import { useState } from "react"; +import { useRecoilValue, useSetRecoilState } from "recoil"; +import { filteredTodo, inputList } from "../store/atoms/todo"; + +function TodoAssignment(){ + + const setInput= useSetRecoilState(inputList) + const filteredTodoList= useRecoilValue(filteredTodo) + + + + + return( + <> + setInput(e.target.value)}/> + + {filteredTodoList.map((word,index)=>{ + return
+ {word} +
+ + })} + + ) +} + + +export default TodoAssignment; \ No newline at end of file diff --git a/src/components/Dashboard.jsx b/src/components/Dashboard.jsx index 5c66ee7..5834daa 100644 --- a/src/components/Dashboard.jsx +++ b/src/components/Dashboard.jsx @@ -1,4 +1,4 @@ -import { useEffect, useState } from "react" + export default function Dashboard() { diff --git a/src/components/Q1.Profile.jsx b/src/components/Q1.Profile.jsx new file mode 100644 index 0000000..1862b27 --- /dev/null +++ b/src/components/Q1.Profile.jsx @@ -0,0 +1,29 @@ +import { useRecoilValue } from "recoil"; +import { profile } from "../store/atoms/allInOne"; + + + +function Profile(){ + const personProfile = useRecoilValue(profile) + return( + <> + + +
+

{personProfile.name}

+

{personProfile.age}

+

{personProfile.location}

+
+ +
+

followers {personProfile.followers>999? ((personProfile.followers / 1000) + 'k') : personProfile.followers}

+

likes {personProfile.Likes>999 ? ((personProfile.Likes / 1000) + 'k') : personProfile.Likes}

+

photos {personProfile.photos> 999 ? ((personProfile.photos / 1000) + 'k') : personProfile.photos}

+ +
+ + ) + +} + +export default Profile; \ No newline at end of file diff --git a/src/components/Q2.background.jsx b/src/components/Q2.background.jsx new file mode 100644 index 0000000..d049efb --- /dev/null +++ b/src/components/Q2.background.jsx @@ -0,0 +1,42 @@ +import { useRecoilState } from "recoil"; +import { backgroundChanger } from "../store/atoms/allInOne"; + + + +function BackgroundChanger(){ + +const [backgroundChangerColor,setBackgroundChangerColor] = useRecoilState(backgroundChanger); + console.log(backgroundChanger) + return( + <> + +
+ + + + + + + +
+ + ) + +} + + +export default BackgroundChanger; \ No newline at end of file diff --git a/src/components/Q3.customR.jsx b/src/components/Q3.customR.jsx new file mode 100644 index 0000000..4aaa449 --- /dev/null +++ b/src/components/Q3.customR.jsx @@ -0,0 +1,17 @@ + + + +function CustomComponent(){ + + + + + return( + <> + CustomComponent + + ) + +} + +export default CustomComponent; \ No newline at end of file diff --git a/src/components/Q4.generatePara.jsx b/src/components/Q4.generatePara.jsx new file mode 100644 index 0000000..17c02de --- /dev/null +++ b/src/components/Q4.generatePara.jsx @@ -0,0 +1,46 @@ +import { useRecoilState } from "recoil"; +import { paraGenerator } from "../store/atoms/allInOne"; + + +function Generatepara(){ +const [input,setInput] = useRecoilState(paraGenerator); + +// const handleChange = (e)=>{ +// setInput({ +// ...setInput, +// input: e.target.value +// }) +// } + +function generateRamdomWord (){ + if (isNaN(input) || input <= 0) { + return "Please enter a valid positive number."; + } +const word = ['hii', 'you', 'have', 'generated', 'this', 'paragraph', 'congratulation','yeah']; +let paragraph = ''; + +for(let i =1; i<=input; i++){ + const randomIndex = Math.floor( Math.random()* word.length); + const paraword = word[randomIndex]; + + paragraph= paragraph + paraword + ' '; + if ((i + 1) % 15 === 0) { + // Add a line break after every 10 words + paragraph += "."; + } +} + +return paragraph; + +} + return( + <> + setInput(e.target.value)}/> + +
{generateRamdomWord()}
+ + ) + +} + +export default Generatepara; \ No newline at end of file diff --git a/src/components/Q5.githubinfo.jsx b/src/components/Q5.githubinfo.jsx new file mode 100644 index 0000000..6938877 --- /dev/null +++ b/src/components/Q5.githubinfo.jsx @@ -0,0 +1,27 @@ +import { useRecoilValueLoadable } from "recoil"; +import { gitHubInfo } from "../store/atoms/allInOne"; + +function GitHubInfo() { + const username = "Rajankannaujiya"; + const loadableInfo = useRecoilValueLoadable(gitHubInfo(username)); + console.log("value is s", loadableInfo); + + return ( + <> + { + loadableInfo.state === "hasValue" ? +
+ github image url +

gitHub userName: {username}

+

nickName: {loadableInfo.contents.name}

+

follower: {loadableInfo.contents.followers}

+

following: {loadableInfo.contents.following}

+

repository: {loadableInfo.contents.public_repos}

+
+ : null + } + + ); +} + +export default GitHubInfo; diff --git a/src/components/Q6.otplogin.jsx b/src/components/Q6.otplogin.jsx new file mode 100644 index 0000000..24c1f68 --- /dev/null +++ b/src/components/Q6.otplogin.jsx @@ -0,0 +1,84 @@ +import { useRecoilState } from "recoil"; +import { login, otpError, phoneNumber } from "../store/atoms/allInOne"; +import { useEffect, useRef, useState } from "react"; + +const corretOtp = JSON.stringify(Math.floor(Math.random() * 10000)); +console.log(corretOtp); +function OtpLogin() { + const otpBoxReference = useRef([]); + const [phoneNo, setPhoneNo] = useRecoilState(phoneNumber); + const [phoneNoEnter, setPhoneNoEnter] = useState(true); + const [correctOtp, setCorrectOtp] = useState(false); + const [error, seterror] = useRecoilState(otpError); + + const [otp, setOtp] = useRecoilState(login); + + function handleChange(value, index) { + let newArr = [...otp]; + newArr[index] = value; + setOtp(newArr); + + if (value && index < 4 - 1) { + otpBoxReference.current[index + 1].focus(); + } + } + + function handleBackspaceAndEnter(e, index) { + if (e.key === "Backspace" && !e.target.value && index > 0) { + otpBoxReference.current[index - 1].focus(); + } + if (e.key === "Enter" && e.target.value && index < 4 - 1) { + otpBoxReference.current[index + 1].focus(); + } + } + + useEffect(() => { + if (otp.join("") !== "" && otp.join("") !== corretOtp) { + seterror("❌ Wrong OTP Please Check Again"); + } else { + seterror(null); + } + }, [otp, seterror]); + + return ( + <> +

Login via OTP

+ {phoneNoEnter ? ( +
+ setPhoneNo(e.target.value)} + /> + +
+ ) : !correctOtp ? ( +
+ {otp.map((digit, index) => ( + handleChange(e.target.value, index)} + onKeyUp={(e) => handleBackspaceAndEnter(e, index)} + ref={(reference) => (otpBoxReference.current[index] = reference)} + /> + ))} +

{error}

+ +
+ ) : ( +
+

hii you have login successfull

+
+ )} + + ); +} + +export default OtpLogin; diff --git a/src/components/Q7.birthWish.jsx b/src/components/Q7.birthWish.jsx new file mode 100644 index 0000000..8144ec0 --- /dev/null +++ b/src/components/Q7.birthWish.jsx @@ -0,0 +1,44 @@ +/* eslint-disable react/prop-types */ + +import { useRecoilState } from "recoil"; +import { wishCard } from "./wishCard.js"; +import { useState } from "react"; +import { birthDayWishesAtom } from "../store/atoms/allInOne.jsx"; + +function BirthDayWishCard(){ + + const [showCard, setShowCard] =useState(false) + const [name, setname] = useRecoilState(birthDayWishesAtom) + + return( + + <> + {!showCard?

Enter your name

setname(e.target.value)}/>
: + } + + ) +} + + +function BirthDayCard ({name}){ + return( + <> +

`Happy birthDay {name}`

+ { + wishCard.map((wishCard)=>{ + return ( +
{wishCard.description}
+ ) + }) + } + + ) +} + + +export default BirthDayWishCard; \ No newline at end of file diff --git a/src/components/wishCard.js b/src/components/wishCard.js new file mode 100644 index 0000000..a51f38c --- /dev/null +++ b/src/components/wishCard.js @@ -0,0 +1,11 @@ + + +export const wishCard = [{ + id: 1, + description: "wishing you a very happy birthday" +}, +{ + id: 2, + description: "do achieve some greate height in your tech coureier" +} +] \ No newline at end of file diff --git a/src/store/atoms/allInOne.jsx b/src/store/atoms/allInOne.jsx new file mode 100644 index 0000000..f71cab3 --- /dev/null +++ b/src/store/atoms/allInOne.jsx @@ -0,0 +1,84 @@ +import axios from "axios"; +import { atom, atomFamily, selector, selectorFamily } from "recoil"; + + +export const profile = atom({ + key:"profile", + default:{ + img:"https://source.unsplash.com/random/200x200?sig=1", + name:"Rita Correia", + age:32, + location: "london", + followers:80000, + Likes:803000, + photos:1400 + } +}) + + + +export const backgroundChanger = atom({ + key:"backgroundChanger", + default:"" +}) + + + +export const paraGenerator = atom({ + key:"paraGenerator", + default:0 +}) + + +export const gitHubInfo = atomFamily({ + key:"gitHubInfo", + default: selectorFamily({ + key: 'githubInfoSelector', + get: username => async() => { + const res = await axios.get(`https://api.github.com/users/${username}`); + console.log(res.data); + return res.data + }, + }), + +}) + + +const otp = ["","","",""] + +export const login = atom({ + key:"login", + default:otp +}) + +export const phoneNumber = atom({ + key:"phoneNumber", + default:0, +}) + + +export const otpError= atom( + { + key:"otpError", + default: '' + } +) + + + +export const birthDayWishesAtom = atom( + { + key: "birthDayWishes", + default: '', + } +) + +export const birthDaySelector = selector({ + key:"birthDaySelector", + get: ({get})=>{ + return get(birthDayWishesAtom); + + } +}) + + diff --git a/src/store/atoms/count.js b/src/store/atoms/count.js deleted file mode 100644 index 0ff7aef..0000000 --- a/src/store/atoms/count.js +++ /dev/null @@ -1,18 +0,0 @@ -import { createContext, useMemo } from "react"; -import { atom, selector } from "recoil"; - -export const countAtom = atom({ - key: "countAtom", - default: 0 -}); - -export const evenSelector = selector({ - key: "evenSelector", - get: ({get}) => { - const count = get(countAtom); - return count % 2; - } -}); - -// Todo creation application with filtering logic -// todos, filter \ No newline at end of file diff --git a/src/store/atoms/count.jsx b/src/store/atoms/count.jsx index ab5ab9a..d8599a4 100644 --- a/src/store/atoms/count.jsx +++ b/src/store/atoms/count.jsx @@ -1,6 +1,18 @@ -import { atom } from "recoil"; +import { atom, selector } from "recoil"; export const countAtom = atom({ key: "countAtom", default: 0 }); + + +export const evenSelector = selector( + { + key:"evenSelector", + get: ({get})=>{ + const count = get(countAtom); + + return count%2 ===0?"it is even": null; + } + } +) \ No newline at end of file diff --git a/src/store/atoms/todo.jsx b/src/store/atoms/todo.jsx new file mode 100644 index 0000000..1188d18 --- /dev/null +++ b/src/store/atoms/todo.jsx @@ -0,0 +1,38 @@ +import { atom, selector } from "recoil"; + +const words = ['hii', 'my', 'name', 'is', 'Rajan', 'I', 'am', 'in', 'second', 'year']; + + +const TOTAL_LINES = 1000; +const ALL_WORDS = []; +for(let i=0;i{ + const input = get(inputList); + const sentence = get(todo); + + return sentence.filter(sentence => sentence.includes(input)) + + } +}) \ No newline at end of file From 80b4fbe9bcaf1dae77a98b2357282bf481dd802c Mon Sep 17 00:00:00 2001 From: RAJAN KANNAUJIYA Date: Thu, 16 May 2024 12:50:14 +0530 Subject: [PATCH 2/2] completed the Assignment --- package-lock.json | 44 +++++++++++++++++------------------ package.json | 2 +- src/components/Q3.customR.jsx | 34 ++++++++++++++++++++------- 3 files changed, 49 insertions(+), 31 deletions(-) diff --git a/package-lock.json b/package-lock.json index 5f72319..d7ebaf0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,7 +10,7 @@ "dependencies": { "axios": "^1.6.8", "react": "^18.2.0", - "react-dom": "^18.2.0", + "react-dom": "^18.3.1", "react-router-dom": "^6.23.1", "recoil": "^0.7.7" }, @@ -3394,9 +3394,9 @@ ] }, "node_modules/react": { - "version": "18.2.0", - "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz", - "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==", + "version": "18.3.1", + "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz", + "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==", "dependencies": { "loose-envify": "^1.1.0" }, @@ -3405,15 +3405,15 @@ } }, "node_modules/react-dom": { - "version": "18.2.0", - "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz", - "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==", + "version": "18.3.1", + "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz", + "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==", "dependencies": { "loose-envify": "^1.1.0", - "scheduler": "^0.23.0" + "scheduler": "^0.23.2" }, "peerDependencies": { - "react": "^18.2.0" + "react": "^18.3.1" } }, "node_modules/react-is": { @@ -3659,9 +3659,9 @@ } }, "node_modules/scheduler": { - "version": "0.23.0", - "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz", - "integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==", + "version": "0.23.2", + "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz", + "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==", "dependencies": { "loose-envify": "^1.1.0" } @@ -6508,20 +6508,20 @@ "dev": true }, "react": { - "version": "18.2.0", - "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz", - "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==", + "version": "18.3.1", + "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz", + "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==", "requires": { "loose-envify": "^1.1.0" } }, "react-dom": { - "version": "18.2.0", - "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz", - "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==", + "version": "18.3.1", + "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz", + "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==", "requires": { "loose-envify": "^1.1.0", - "scheduler": "^0.23.0" + "scheduler": "^0.23.2" } }, "react-is": { @@ -6674,9 +6674,9 @@ } }, "scheduler": { - "version": "0.23.0", - "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz", - "integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==", + "version": "0.23.2", + "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz", + "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==", "requires": { "loose-envify": "^1.1.0" } diff --git a/package.json b/package.json index 802e532..55ee0cb 100644 --- a/package.json +++ b/package.json @@ -12,7 +12,7 @@ "dependencies": { "axios": "^1.6.8", "react": "^18.2.0", - "react-dom": "^18.2.0", + "react-dom": "^18.3.1", "react-router-dom": "^6.23.1", "recoil": "^0.7.7" }, diff --git a/src/components/Q3.customR.jsx b/src/components/Q3.customR.jsx index 4aaa449..a318912 100644 --- a/src/components/Q3.customR.jsx +++ b/src/components/Q3.customR.jsx @@ -1,17 +1,35 @@ -function CustomComponent(){ +import { useEffect, useState } from "react"; - +function createReactElement(){ - return( - <> - CustomComponent - - ) + const divToAppend = document.getElementById('customDivElement'); + const anchorTag = document.createElement('a'); + anchorTag.setAttribute('href', 'https://www.google.com') + anchorTag.textContent = 'checkout my github'; + + divToAppend.appendChild(anchorTag); +} + + + +function CustomComponent() { + const [showAnchor, setShowAnchor] = useState(true); + + useEffect(()=>{ + if(showAnchor){ + createReactElement(); + } + + setShowAnchor(false); + },[showAnchor]) + + + return
; } -export default CustomComponent; \ No newline at end of file +export default CustomComponent;