Completed the Assignment

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-dom": "^18.3.1",
+    "react-router-dom": "^6.23.1",
     "recoil": "^0.7.7"
   },
   "devDependencies": {

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 (
-    <div>
-      <RecoilRoot>
-        <Count />
-      </RecoilRoot>
-    </div>
-  )
-}
+// import { RecoilRoot, useRecoilValue, useSetRecoilState } from "recoil";
+// import { countAtom, evenSelector } from "./store/atoms/count";
 
-function Count() {
-  console.log("re-render");
-  return <div>
-    <CountRenderer />
-    <Buttons />
-  </div>
-}
+// function App() {
+//   return (
+//     <div>
+//       <RecoilRoot>
+//         <Count />
+//       </RecoilRoot>
+//     </div>
+//   )
+// }
 
-function CountRenderer() {
-  const count = useRecoilValue(countAtom);
+// function Count() {
+//   console.log("re-render");
+//   return <div>
+//     <CountRenderer />
+//     <Buttons />
+//   </div>
+// }
+
+// function CountRenderer() {
+//   const count = useRecoilValue(countAtom);
 
-  return <div>
-    <b>
-      {count}
-    </b>
-    <EvenCountRenderer />
-  </div>
-}
+//   return <div>
+//     <b>
+//       {count}
+//     </b>
+//     <EvenCountRenderer />
+//   </div>
+// }
+
+// function EvenCountRenderer() {
+//   const isEven =useRecoilValue(evenSelector);
+//   console.log(isEven)
+
+//   return <div>
+//     {isEven ? "It is even" : null}
+//   </div>
+// }
 
-function EvenCountRenderer() {
-  const isEven = useRecoilValue(evenSelector);
+// function Buttons() {
+//   const setCount = useSetRecoilState(countAtom);
+//   console.log("buttons re-rendererd");
 
-  return <div>
-    {isEven ? "It is even" : null}
-  </div>
+//   return <div>
+//     <button onClick={() => {
+//       setCount(count => count + 1)
+//     }}>Increase</button>
+
+//     <button onClick={() => {
+//       setCount(count => count - 1)
+//     }}>Decrease</button>
+//   </div>
+// }
+
+// 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(
+  <RecoilRoot>
+     <BrowserRouter >
+     <NavBar />
+     <Routes>
+        <Route path="/"  element={<Assignment />}/> 
+        <Route path="/profile"  element={<Profile />}/> 
+        <Route path="/backgroundChanger"  element={<BackgroundChanger />}/> 
+        <Route path="/reactCustomComponent"  element={<CustomComponent />}/> 
+        <Route path="/paraGenerator"  element={<Generatepara />}/> 
+        <Route path="/githubInfo"  element={< GitHubInfo/>}/> 
+        <Route path="/otpLogin"  element={<OtpLogin />}/> 
+        <Route path="/birthWishCard"  element={<BirthDayWishCard />}/> 
+      </Routes>
+     </BrowserRouter>
+  </RecoilRoot>
+)
 }
 
-function Buttons() {
-  const setCount = useSetRecoilState(countAtom);
-  console.log("buttons re-rendererd");
 
-  return <div>
-    <button onClick={() => {
-      setCount(count => count + 1)
-    }}>Increase</button>
+function NavBar(){
+  const navigate = useNavigate()
+  return(
+    <div>
+      <button onClick={()=> navigate("/")}>wordFilter</button>
+      <button onClick={()=> navigate("/profile")}>profile</button>
+      <button onClick={()=> navigate("/backgroundChanger")}>BackgroundChanger</button>
+      <button onClick={()=> navigate("/reactCustomComponent")}>Custom js</button>
+      <button onClick={()=> navigate("/paraGenerator")}>GeneratePara</button>
+      <button onClick={()=> navigate("/githubInfo")}>My GitHub</button>
+      <button onClick={()=> navigate("/otpLogin")}>otpLogin</button>
+      <button onClick={()=> navigate("/birthWishCard")}>BirthDay Wishes</button>
 
-    <button onClick={() => {
-      setCount(count => count - 1)
-    }}>Decrease</button>
-  </div>
+    </div>
+  )
 }
 
-export default App
+
+export default App;

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(
+        <>
+            <input type="text" placeholder="enter the filter words" onChange={(e)=>setInput(e.target.value)}/>
+
+           {filteredTodoList.map((word,index)=>{
+            return <div key={index}>
+                {word}
+            </div>
+
+           })}
+        </>
+    )
+}
+
+
+export default TodoAssignment;

src/components/Dashboard.jsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react"
+
 
 export default function Dashboard() {
 

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(
+        <>
+            <img src={personProfile.img} alt="" />
+
+            <div>
+                <h2>{personProfile.name}</h2>
+                <p>{personProfile.age}</p>
+                <h3>{personProfile.location}</h3>
+            </div>
+
+            <div>
+                <p>followers {personProfile.followers>999? ((personProfile.followers / 1000) + 'k') : personProfile.followers}</p>
+                <p>likes {personProfile.Likes>999 ?  ((personProfile.Likes / 1000) + 'k') : personProfile.Likes}</p>
+                <p>photos {personProfile.photos> 999 ?  ((personProfile.photos / 1000) + 'k') : personProfile.photos}</p>
+
+            </div>
+        </>
+    )
+
+}
+
+export default Profile;

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(
+        <>
+           <style>{`body { background-color: ${backgroundChangerColor}; }`}</style>
+        <div style={{backgroundColor:'white', boxShadow: '2px solid gray', margin:'4px', padding: '6px', bottom: '0', position: 'absolute'}}>
+                <button style={{backgroundColor: 'red'}} onClick={() => {
+                    setBackgroundChangerColor('red');
+                }}>Red</button>
+                <button style={{backgroundColor: 'yellow'}}  onClick={() => {
+                    setBackgroundChangerColor('yellow');
+                }}>Yellow</button>
+                <button style={{backgroundColor: 'black', color: 'white'}}  onClick={() => {
+                    setBackgroundChangerColor('black' );
+                }}>Black</button>
+                <button style={{backgroundColor: 'purple'}}  onClick={() => {
+                    setBackgroundChangerColor('purple');
+                }}>Purple</button>
+                <button  style={{backgroundColor: 'green'}}  onClick={() => {
+                    setBackgroundChangerColor('green');
+                }}>Green</button>
+                <button style={{backgroundColor: 'blue'}}  onClick={() => {
+                    setBackgroundChangerColor('blue');
+                }}>Blue</button>
+                <button  style={{backgroundColor: 'orange'}} onClick={() => {
+                    setBackgroundChangerColor('orange');
+                }}>Default</button>
+            </div>
+        </>
+    )
+
+}
+
+
+export default BackgroundChanger;

src/components/Q3.customR.jsx

@@ -0,0 +1,35 @@
+
+
+
+import { useEffect, useState } from "react";
+
+
+function createReactElement(){
+
+    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 <div id="customDivElement"></div>;
+}
+
+export default CustomComponent;

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(
+        <>
+            <input type="text" placeholder="enter the no. of word you want in the paragraph" onChange={(e)=> setInput(e.target.value)}/>
+
+            <div>{generateRamdomWord()}</div>
+        </>
+    )
+
+}
+
+export default Generatepara;

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" ?
+      <div>
+        <img src={loadableInfo.contents.avatar_url} alt="github image url" />
+        <h1>gitHub userName: {username}</h1>
+        <h2>nickName: {loadableInfo.contents.name}</h2>
+        <p>follower: {loadableInfo.contents.followers}</p>
+        <p>following: {loadableInfo.contents.following}</p>
+        <p>repository: {loadableInfo.contents.public_repos}</p>
+      </div>
+      : null
+  }
+    </>
+  );
+}
+
+export default GitHubInfo;