Merge branch 'main' into feature/compact-number-format

Author: venisha-kalola

src/pages/Crypto.jsx

@@ -3,11 +3,11 @@
  * ----------------------
  * Easy:
  *  - [ ] Sort buttons (Market Cap, Price, 24h %)
- *  - [ ] Show coin symbol & small logo (image URL in API)
- *  - [ ] Format numbers with utility (abbreviate large caps: 1.2B)
- *  - [ ] Highlight positive vs negative 24h change (green/red)
+ *  - [x] Show coin symbol & small logo (image URL in API)
+ *  - [x] Format numbers with utility (abbreviate large caps: 1.2B)
+ *  - [x] Highlight positive vs negative 24h change (green/red)
  * Medium:
- *  - [ ] Add pagination (Top 50 -> allow next pages)
+ *  - [x] Add pagination (Top 50 -> allow next pages)
  *  - [ ] Client-side caching with timestamp (avoid re-fetch spam)
  *  - [ ] Mini sparkline (use canvas or simple SVG)
  *  - [ ] Favorites (star) + localStorage persistence
@@ -18,45 +18,109 @@
  *  - [ ] Dark mode adaptive coloring for charts
  *  - [ ] Extract to service + custom hook (useCryptoMarkets)
  */
-import { useEffect, useState } from 'react';
-import Loading from '../components/Loading.jsx';
-import ErrorMessage from '../components/ErrorMessage.jsx';
-import Card from '../components/Card.jsx';
-import formatNumber from '../utilities/numberFormatter.js';
+
+import { useEffect, useState } from "react";
+import Loading from "../components/Loading.jsx";
+import ErrorMessage from "../components/ErrorMessage.jsx";
+import Card from "../components/Card.jsx";
+import formatNumber from "../utilities/numberFormatter.js";
+
 export default function Crypto() {
   const [coins, setCoins] = useState([]);
-  const [query, setQuery] = useState('');
+  const [query, setQuery] = useState("");
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState(null);
+  const [page, setPage] = useState(1);
 
-  useEffect(() => { fetchCoins(); }, []);
+  useEffect(() => {
+    fetchCoins();
+  }, [page]);
 
   async function fetchCoins() {
     try {
-      setLoading(true); setError(null);
-      const res = await fetch('https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&order=market_cap_desc&per_page=50&page=1&sparkline=false');
-      if (!res.ok) throw new Error('Failed to fetch');
+      setLoading(true);
+      setError(null);
+      const res = await fetch(
+        `https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&order=market_cap_desc&per_page=50&page=${page}&sparkline=false`
+      );
+      if (!res.ok) throw new Error("Failed to fetch");
       const json = await res.json();
       setCoins(json);
-    } catch (e) { setError(e); } finally { setLoading(false); }
+    } catch (e) {
+      setError(e);
+    } finally {
+      setLoading(false);
+    }
   }
 
-  const filtered = coins.filter(c => c.name.toLowerCase().includes(query.toLowerCase()));
+  const filtered = coins.filter((c) =>
+    c.name.toLowerCase().includes(query.toLowerCase())
+  );
 
   return (
     <div>
-      <h2>Cryptocurrency Tracker</h2>
-      <input value={query} onChange={e => setQuery(e.target.value)} placeholder="Search coin" />
+      <h2>💹 Cryptocurrency Tracker</h2>
+      <input
+        value={query}
+        onChange={(e) => setQuery(e.target.value)}
+        placeholder="Search coin..."
+        style={{ marginBottom: "1rem" }}
+      />
+
       {loading && <Loading />}
       <ErrorMessage error={error} />
+
       <div className="grid">
-        {filtered.map(c => (
-          <Card key={c.id} title={c.name} footer={<span>${c.current_price}</span>}>
-            <p>Market Cap: ${formatNumber(c.market_cap)}</p>
-            <p>24h: {c.price_change_percentage_24h?.toFixed(2)}%</p>
-            {/* TODO: Add mini sparkline chart */}
-          </Card>
-        ))}
+        {filtered.map((c) => {
+          const isPositive = c.price_change_percentage_24h >= 0;
+          return (
+            <Card
+              key={c.id}
+              title={
+                <span style={{ display: "flex", alignItems: "center", gap: 8 }}>
+                  <img
+                    src={c.image}
+                    alt={c.symbol}
+                    style={{ width: 24, height: 24, borderRadius: "50%" }}
+                  />
+                  {c.name} ({c.symbol.toUpperCase()})
+                </span>
+              }
+              footer={<strong>${c.current_price.toLocaleString()}</strong>}
+            >
+              <p>Market Cap: ${formatNumber(c.market_cap)}</p>
+              <p
+                style={{
+                  color: isPositive ? "#16a34a" : "#dc2626",
+                  fontWeight: 600,
+                }}
+              >
+                24h: {isPositive ? "+" : ""}
+                {c.price_change_percentage_24h?.toFixed(2)}%
+              </p>
+              {/* TODO: Add mini sparkline chart */}
+            </Card>
+          );
+        })}
+      </div>
+
+      <div
+        className="pagination"
+        style={{
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          gap: "1rem",
+          marginTop: "1.5rem",
+        }}
+      >
+        <button onClick={() => setPage((p) => p - 1)} disabled={page === 1}>
+          Previous
+        </button>
+
+        <span>Page {page}</span>
+
+        <button onClick={() => setPage((p) => p + 1)}>Next</button>
       </div>
     </div>
   );

src/styles.css

@@ -412,3 +412,35 @@ blockquote {
 @media (max-width: 640px) {
   .weather-inner { padding: 1rem; }
 }
+
+
+/**Pagination **/
+
+.pagination {
+  width: 100%;
+  display: flex;
+  justify-content: center;  
+  align-items: center;     
+  margin-top: 20px;         
+  gap: 15px;           
+}
+
+.pagination button {
+  padding: 8px 16px;
+  border-radius: 5px;
+  border: none;
+  background-color: #007bff;
+  color: white;
+  font-weight: bold;
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+
+.pagination button:hover {
+  background-color: #0056b3;
+}
+
+.pagination button:disabled {
+  background-color: #ccc;
+  cursor: not-allowed;
+}