Enhance PopularNews, Search, and Stories components with reading mode and font size adjustments

Author: TheCoderAdi

src/PopularNews.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { useGlobalContext } from './Context';
 
 const PopularNews = () => {
-    const { isLoading, popularNews } = useGlobalContext();
+    const { isLoading, popularNews, fontSize, readingMode } = useGlobalContext();
 
     if (isLoading) {
         return <p>Loading popular news...</p>;
@@ -15,10 +15,18 @@ const PopularNews = () => {
                 <ul>
                     {popularNews.map((news) => (
                         <li key={news.objectID} className="news-item">
-                            <a href={news.url} target="_blank" rel="noopener noreferrer">
+                            <a href={news.url} target="_blank" rel="noopener noreferrer"
+                                style={{
+                                    fontSize: readingMode === true ? `${fontSize}px` : "",
+                                }}
+                            >
                                 {news.title}
                             </a>
-                            <span className="badge">💬 {news.num_comments || 0} comments</span>
+                            <span className="badge"
+                                style={{
+                                    fontSize: readingMode === true ? `${fontSize}px` : "",
+                                }}
+                            >💬 {news.num_comments || 0} comments</span>
                         </li>
                     ))}
                 </ul>

src/Search.jsx

@@ -1,29 +1,40 @@
 import React from 'react'
-import{useGlobalContext} from './Context'
+import { useGlobalContext } from './Context'
 
 
 const Search = () => {
-   const {query,searchFn,showPopularNews}=useGlobalContext();
+  const { query, searchFn, showPopularNews, setReadingMode, readingMode } = useGlobalContext();
   return (
     <>
-    <h1 className="heading">
-  <span className='subText'>T</span>ech
-  <span className='subText'>P</span>ulse
-</h1>
-    
-  {!showPopularNews &&
-    <form>
-      <div>
-        <input type="text" placeholder="search here"
-          value={query}
-          onChange={(e)=> searchFn(e.target.value)}
-        />
+      <div
+        style={{
+          display: "flex",
+          justifyContent: "center",
+        }}>
+        <button
+          onClick={() => setReadingMode(!readingMode)}
+        >
+          {readingMode ? "Exit Reading Mode" : "Enter Reading Mode"}
+        </button>
       </div>
-    </form>
-  }
+      <h1 className="heading">
+        <span className='subText'>T</span>ech
+        <span className='subText'>P</span>ulse
+      </h1>
+
+      {!showPopularNews &&
+        <form>
+          <div>
+            <input type="text" placeholder="search here"
+              value={query}
+              onChange={(e) => searchFn(e.target.value)}
+            />
+          </div>
+        </form>
+      }
     </>
-    
-   
+
+
   )
 }
 

src/Stories.jsx

@@ -2,11 +2,11 @@ import React, { useCallback, memo } from "react";
 import { useGlobalContext } from "./Context";
 
 const Stories = () => {
-  const { hits, isLoading, bookMark, setBookMark } = useGlobalContext();
+  const { hits, isLoading, bookMark, setBookMark, readingMode, fontSize } = useGlobalContext();
 
   const toggleBookmark = useCallback((news) => {
     const isBookmarked = bookMark.some((item) => item.objectID === news.objectID);
-    
+
     const updatedBookmarks = isBookmarked
       ? bookMark.filter((item) => item.objectID !== news.objectID)
       : [...bookMark, news];
@@ -28,13 +28,23 @@ const Stories = () => {
 
           return (
             <div className="card" key={objectID}>
-              <h2>{title}</h2>
-              <p>
+              <h2
+                style={{
+                  fontSize: readingMode === true ? `${fontSize}px` : "",
+                }}
+              >{title}</h2>
+              <p style={{
+                fontSize: readingMode === true ? `${fontSize}px` : "",
+              }}>
                 By <span>{author}</span> | <span>{num_comments}</span> comments
               </p>
 
               <div className="card-button">
-                <a href={url} target="_blank" rel="noreferrer">
+                <a href={url} target="_blank" rel="noreferrer"
+                  style={{
+                    fontSize: readingMode === true ? `${fontSize}px` : "",
+                  }}
+                >
                   Read More
                 </a>
 
@@ -49,7 +59,7 @@ const Stories = () => {
           );
         })}
 
-        <p>Made with ❤️ by 
+        <p>Made with ❤️ by
           <a href="https://www.linkedin.com/in/choudhury-mehbub-alam-b6b191219/">
             DevLeo
           </a>