Merge pull request #117 from Rish6392/favorites-section

added favorites section

Author: Kanavpreet-Singh

src/App.js

@@ -3,6 +3,7 @@ import {Route, Routes} from "react-router-dom";
 import {Home} from "./pages/Home";
 import {Games} from "./pages/Games";
 import {Activities} from "./pages/Activities";
+import Favorites from "./pages/Favorites";
 import {activities, games} from "./data/content";
 import {Navbar} from './components/common/Navbar';
 import "slick-carousel/slick/slick.css";
@@ -24,6 +25,7 @@ function App() {
                     })
                 }
                 <Route exact path="/activities" element={<Activities />} />
+                <Route exact path="/favorites" element={<Favorites />} />
                 {
                     activities.map(activity => {
                         return (

src/assets/icons/favorite-outline.svg

@@ -0,0 +1,28 @@
+.fav-button {
+  /* Match the Generate button visual style from RandomQuote.css */
+  font-size: 1.2rem;
+  background: white;
+  border-radius: 5px;
+  padding: 18px 20px;
+  border: 1px solid #4b4b4b;
+  box-shadow: 1px 1px 3px #4b4b4b;
+  margin: 10px 0;
+  transition-duration: 300ms;
+  cursor: pointer;
+}
+.fav-button:hover {
+  transform: scale(1.05);
+  background: black;
+  color: white;
+}
+.fav-button.saved {
+  background: #ffeaa7;
+  border-color: #ffcc00;
+}
+
+.fav-button.small {
+  /* helper class if a smaller variant is needed */
+  padding: 6px 10px;
+  font-size: 1rem;
+  box-shadow: none;
+}

src/assets/icons/star-outline.svg

@@ -0,0 +1,34 @@
+import React, {useEffect, useState} from 'react';
+import './FavoriteButton.css';
+import { listFavorites, addFavorite, removeFavorite } from '../../utils/favoritesStorage';
+
+export default function FavoriteButton({ item }) {
+  const [saved, setSaved] = useState(false);
+
+  useEffect(() => {
+    const all = listFavorites();
+    const exists = all.some((it) => JSON.stringify(it.content) === JSON.stringify(item.content));
+    setSaved(!!exists);
+  }, [item]);
+
+  const handleToggle = () => {
+    if (saved) {
+      // remove
+      const all = listFavorites();
+      const found = all.find((it) => JSON.stringify(it.content) === JSON.stringify(item.content));
+      if (found) {
+        removeFavorite(found.id);
+        setSaved(false);
+      }
+    } else {
+      const added = addFavorite(item);
+      if (added) setSaved(true);
+    }
+  };
+
+  return (
+    <button className={`fav-button ${saved ? 'saved' : ''}`} onClick={handleToggle} title={saved ? 'Remove from favorites' : 'Save to favorites'}>
+      {saved ? '★ Saved' : '☆ Save'}
+    </button>
+  );
+}

src/components/common/FavoriteButton.css

@@ -0,0 +1,11 @@
+.fav-button {
+  background: transparent;
+  border: 1px solid #ccc;
+  padding: 6px 10px;
+  border-radius: 6px;
+  cursor: pointer;
+}
+.fav-button.saved {
+  background: #ffeaa7;
+  border-color: #ffcc00;
+}

src/components/common/FavoriteButton.js

@@ -5,6 +5,7 @@ import logo from '../../logo.png';
 import home_icon from '../../assets/icons/home-outline.svg';
 import game_icon from '../../assets/icons/game-controller-outline.svg';
 import pulse_icon from '../../assets/icons/pulse-outline.svg';
+import star_icon from '../../assets/icons/star-outline.svg';
 
 const navbarOptions = [
     {
@@ -22,39 +23,46 @@ const navbarOptions = [
         title: "Activities",
         url: "/activities"
     }
+    ,
+    {
+        icon: star_icon,
+        title: "Favorites",
+        url: "/favorites"
+    }
 ]
 export const Navbar = () => {
     let location = useLocation();
 
     useEffect(() => {
-        const list = document.querySelectorAll('.list');
-   
-        if (location.pathname === "/") {
-            list[0].classList.add("active");
-            list[1].classList.remove("active");
-            list[2].classList.remove("active");
-        }
-
-        if (location.pathname.includes("/games")) {
-            list[0].classList.remove("active");
-            list[1].classList.add("active");
-            list[2].classList.remove("active");
-        }
+        const listItems = document.querySelectorAll('.list');
+        // clear all
+        listItems.forEach(li => li.classList.remove('active'));
 
-        if (location.pathname.includes("/activities")) {
-            list[0].classList.remove("active");
-            list[1].classList.remove("active");
-            list[2].classList.add("active");
+        // find the link whose href best matches the current path
+        const anchors = document.querySelectorAll('.list a');
+        let matched = null;
+        anchors.forEach(a => {
+            const href = a.getAttribute('href');
+            if (!href) return;
+            // exact match or startsWith
+            if (location.pathname === href || location.pathname.startsWith(href)) {
+                matched = a;
+            }
+        });
+        if (matched && matched.parentElement) {
+            matched.parentElement.classList.add('active');
+        } else if (location.pathname === '/') {
+            // default to first
+            if (listItems[0]) listItems[0].classList.add('active');
         }
 
         function handleClick() {
-            list.forEach((item) => item.classList.remove("active"));
-            this.classList.add("active")
+            listItems.forEach((item) => item.classList.remove('active'));
+            this.classList.add('active')
         }
-        list.forEach((item) =>
-            item.addEventListener("click", handleClick));
+        listItems.forEach((item) => item.addEventListener('click', handleClick));
 
-        console.log('location', location)
+        // console.log('location', location)
     }, [location])
 
     return (

src/components/common/FavoriteButton.module.css

@@ -1,4 +1,5 @@
-import { RandomQuote } from "../pages/activities/RandomQuote";
+// RandomQuote wrapper is used instead of original to provide favorite/save UI
+import { RandomQuoteWithFav } from "../pages/activities_wrappers/RandomQuoteWithFav";
 import { MagicSquares } from "../pages/games/MagicSquares";
 import { TicTacToe } from "../pages/games/TicTacToe";
 import { Wordle } from "../pages/games/Wordle";
@@ -7,8 +8,9 @@ import { FortuneCard } from "../pages/activities/FotuneCard";
 import { SearchWord } from "../pages/activities/getDefinition";
 import { Jitter } from "../pages/games/Jitter";
 import { RandomMeme } from "../pages/activities/RandomMemes";
-import { RandomJoke } from "../pages/activities/RandomJoke";
-import { RandomAnimeQuote } from "../pages/activities/RandomAnimeQuote";
+// Use wrapper components that include favorite button functionality
+import { RandomJokeWithFav } from "../pages/activities_wrappers/RandomJokeWithFav";
+import { RandomAnimeQuoteWithFav } from "../pages/activities_wrappers/RandomAnimeQuoteWithFav";
 import { SimonSays } from "../pages/games/SimonSays";
 import { ReactionTime } from "../pages/games/ReactionTime";
 import MemeCaptionMaker from "../pages/games/MemeCaptionMaker";
@@ -28,14 +30,14 @@ export const activities = [
     description: "Get random quotes",
     icon: "https://cdn-icons-png.flaticon.com/512/2541/2541991.png",
     urlTerm: "random-quotes",
-    element: <RandomQuote />,
+    element: <RandomQuoteWithFav />,
   },
   {
     title: "Random Anime Quotes",
     description: "Get random anime quotes",
     icon: "https://64.media.tumblr.com/7b526ba246f48e294ebc87fe2cbd8e1b/1a4bdb8275a18adc-c7/s250x400/94d6c7e70601111ba79b8801cd939694d0000018.jpg",
     urlTerm: "random-anime-quotes",
-    element: <RandomAnimeQuote />,
+    element: <RandomAnimeQuoteWithFav />,
   },
   {
     title: "Random memes",
@@ -63,7 +65,7 @@ export const activities = [
     description: "Get random jokes",
     icon: "https://www.troublefreepool.com/media/joke-png.127455/full",
     urlTerm: "random-jokes",
-    element: <RandomJoke />,
+    element: <RandomJokeWithFav />,
   },
   {
     title: "Calculator",