Assignment for week 7 Recoil :

package.json

@@ -7,12 +7,12 @@
     "dev": "vite",
     "build": "vite build",
     "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "prepare": "husky"
   },
   "dependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-router-dom": "^6.21.2",
     "recoil": "^0.7.7"
   },
   "devDependencies": {
@@ -23,6 +23,8 @@
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.5",
+    "husky": "^9.0.11",
+    "react-router-dom": "^6.22.3",
     "vite": "^5.0.8"
   }
 }

src/App.css

@@ -0,0 +1,3 @@
+body {
+
+} 

src/App.jsx

@@ -1,58 +1,17 @@
-import { useContext, useMemo, useState } from "react"
-import { CountContext } from "./context";
-import { RecoilRoot, useRecoilState, useRecoilValue, useSetRecoilState } from "recoil";
-import { countAtom, evenSelector } from "./store/atoms/count";
+import "./App.css";
 
-function App() {
-  return (
-    <div>
-      <RecoilRoot>
-        <Count />
-      </RecoilRoot>
-    </div>
-  )
-}
-
-function Count() {
-  console.log("re-render");
-  return <div>
-    <CountRenderer />
-    <Buttons />
-  </div>
-}
-
-function CountRenderer() {
-  const count = useRecoilValue(countAtom);
-
-  return <div>
-    <b>
-      {count}
-    </b>
-    <EvenCountRenderer />
-  </div>
-}
+import { RecoilRoot } from "recoil";
+import Birthday from "./components/Assgmnt7_BirthdayCards/Birthday";
 
-function EvenCountRenderer() {
-  const isEven = useRecoilValue(evenSelector);
+//we can get the value of the selector function by using the useRecoilValue
+//useRecoilValue can take either an atom or the selector to return the value
 
-  return <div>
-    {isEven ? "It is even" : null}
-  </div>
-}
-
-function Buttons() {
-  const setCount = useSetRecoilState(countAtom);
-  console.log("buttons re-rendererd");
-
-  return <div>
-    <button onClick={() => {
-      setCount(count => count + 1)
-    }}>Increase</button>
-
-    <button onClick={() => {
-      setCount(count => count - 1)
-    }}>Decrease</button>
-  </div>
+function App() {
+	return (
+		<RecoilRoot>
+			<Birthday />
+		</RecoilRoot>
+	);
 }
 
-export default App
+export default App;

src/components/Assgmnt1_Profile/Profile.jsx

@@ -0,0 +1,41 @@
+import React from "react";
+import styles from "./profile.module.css";
+
+function Profile() {
+	return (
+		<div className={styles.profileContainer}>
+			<section className={styles.firstHalf}>
+				<article className={styles.onlyBackground}></article>
+				<article className={styles.profile}>
+					<img
+						src="https://shorturl.at/nrwOW"
+						height={100}
+						width={100}
+						alt="saka"
+					/>
+					<p>
+						B Saka, <small>22</small>
+					</p>
+					<p>Arsenal, London</p>
+				</article>
+			</section>
+
+			<footer className={styles.footerContainer}>
+				<article className="articleContent">
+					<p>7M</p>
+					<p>Followers</p>
+				</article>
+				<article className="articleContent">
+					<p>16M</p>
+					<p>Likes</p>
+				</article>
+				<article className="articleContent">
+					<p>2.3k</p>
+					<p>Photos</p>
+				</article>
+			</footer>
+		</div>
+	);
+}
+
+export default Profile;

src/components/Assgmnt1_Profile/index.js

@@ -0,0 +1,2 @@
+export * from "./Profile";
+export { default } from "./Profile";

src/components/Assgmnt1_Profile/profile.module.css

@@ -0,0 +1,81 @@
+.profileContainer {
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  border: 1px solid rgb(78, 6, 6);
+  margin-top: 2rem;
+  margin: 0 auto;
+  height: fit-content;
+  max-width: 30vw;
+  padding-bottom: 1rem;
+
+  border-radius: 11px;
+}
+
+
+.footerContainer {
+  display: flex;
+  gap: 1rem;
+  border-top: 2px solid pink;
+  width: 100%;
+  justify-content: space-around;
+}
+
+.footerContainer article p:nth-child(1) {
+  font-weight: bolder;
+}
+
+.footerContainer article p {
+  margin: 0;
+  margin-top: 0.55rem;
+  text-align: center;
+}
+
+
+.footerContainer article p:nth-child(2) {
+  font-weight: 100;
+  font-size: x-small;
+  opacity: 0.57;
+}
+
+.firstHalf {
+  height: 40vh;
+  width: 100%;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+
+}
+
+.onlyBackground {
+  height: 50%;
+  width: 100%;
+  background: linear-gradient(rgb(17, 65, 113), rgb(147, 15, 15));
+  border-radius: 11px;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.profile img {
+  object-fit: cover;
+  border-radius: 50%;
+  position: absolute;
+  top: 33%;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.profile {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  align-items: center;
+}
+
+.profile p {
+  margin: 0;
+  margin-bottom: 1rem;
+}

src/components/Assgmnt2_BackgroundChanger/BackGchanger.jsx

@@ -0,0 +1,40 @@
+/* eslint-disable react/prop-types */
+import React from "react";
+import styles from "./backGchanger.module.css";
+import { atomColor } from "./atom";
+import { useRecoilState } from "recoil";
+
+const colors = ["red", "yellow", "pink", "purple", "brown", "green", "white"];
+
+function BackGchanger() {
+	return (
+		<div className={styles.colorContainer}>
+			{colors.map((color) => {
+				return <ColorButton key={color} color={color} />;
+			})}
+		</div>
+	);
+}
+
+export default BackGchanger;
+
+function ColorButton({ color }) {
+	const [bgColor, setBgColor] = useRecoilState(atomColor);
+	React.useEffect(() => {
+		document.body.style.backgroundColor = bgColor;
+	}, [bgColor]);
+
+	return (
+		<button
+			type="button"
+			style={{
+				backgroundColor: color,
+				textDecoration: bgColor === color ? "underline" : "",
+			}}
+			onClick={() => setBgColor(color)}
+			className={styles.buttonColor}
+		>
+			{color === "white" ? "default" : color}
+		</button>
+	);
+}

src/components/Assgmnt2_BackgroundChanger/atom.js

@@ -0,0 +1,6 @@
+import { atom } from "recoil";
+
+export const atomColor = atom({
+	key: "color_Atom",
+	default: "",
+});

src/components/Assgmnt2_BackgroundChanger/backGchanger.module.css

@@ -0,0 +1,28 @@
+.colorContainer {
+  margin: 0;
+  padding: 0;
+
+  color: white;
+  display: flex;
+  justify-content: space-between;
+  gap: 1rem;
+  width: 600px;
+  padding: 1rem 2rem;
+  border-bottom: 1px solid white;
+  box-shadow: 0px 5px 4px rgba(0, 0, 0, 0.3);
+  text-align: center;
+  position: absolute;
+  top: 80%;
+  left: 50%;
+  transform: translateX(-50%);
+
+}
+
+
+.buttonColor {
+  padding: 0.5rem 1rem;
+  border: none;
+  border-radius: 11px;
+  text-align: center;
+  cursor: pointer;
+}

src/components/Assgmnt2_BackgroundChanger/index.js

@@ -0,0 +1,2 @@
+export * from "./BackGchanger";
+export { default } from "./BackGchanger";

src/components/Assgmnt3_CustomReactElement/ReactElement.jsx

@@ -0,0 +1,39 @@
+import React from "react";
+/* implemented in react */
+
+//a function to generate a react element
+// function generateReactElement() {
+// 	const element = React.createElement(
+// 		"a",
+// 		{
+// 			href: "https://www.google.com",
+// 			style: {
+// 				color: "white",
+// 			},
+// 		},
+// 		"click here to vist Google"
+// 	);
+// 	return element;
+// }
+
+function customRender() {
+	const path = document.getElementById("appendTothiDiv");
+	const anchorElement = document.createElement("a");
+	anchorElement.setAttribute("href", "https://www.google.com");
+	anchorElement.style.color = "white";
+	anchorElement.textContent = "click here to visit Google";
+	path.appendChild(anchorElement);
+}
+
+function ReactElement() {
+	const loadOnce = React.useRef(false);
+	React.useEffect(() => {
+		if (loadOnce.current) {
+			customRender();
+		}
+		loadOnce.current = true;
+	}, []);
+	return <div id="appendTothiDiv"></div>;
+}
+
+export default ReactElement;

src/components/Assgmnt3_CustomReactElement/index.js

@@ -0,0 +1,2 @@
+export * from "./ReactElement";
+export { default } from "./ReactElement";

src/components/Assgmnt4_ParagraphGenerator/Paragraph.jsx

@@ -0,0 +1,23 @@
+import { useRecoilValue, useRecoilState } from "recoil";
+import styles from "./paragraph.module.css";
+import { atomNumber, derivedState } from "./atom";
+
+function Paragraph() {
+	const [number, setNumber] = useRecoilState(atomNumber);
+	const paragraph = useRecoilValue(derivedState);
+	return (
+		<div className={styles.paragraphContainer}>
+			<h3>Para Generator</h3>
+			<input
+				type="number"
+				value={number}
+				onChange={(e) => setNumber(e.target.value)}
+			/>
+			<button>Generate</button>
+
+			<section>{paragraph}</section>
+		</div>
+	);
+}
+
+export default Paragraph;