Make countdown timer bigger, easier to read from a glance

package.json

@@ -8,8 +8,10 @@
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "bootstrap": "^5.3.2",
+    "firebase": "^10.7.1",
     "react": "^18.2.0",
     "react-bootstrap": "^2.9.2",
+    "react-countdown-clock": "^2.10.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"

src/App.js

@@ -3,6 +3,7 @@ import CountdownTimer from './CountdownTimer';
 import 'bootstrap/dist/css/bootstrap.min.css';
 import './App.css';
 
+
 // Set your target date here
 
 function App() {

src/CountdownTimer.js

@@ -11,32 +11,32 @@ import Card from 'react-bootstrap/Card';
 
 // Create a CountdownTimer component and add variables to hold the days, hours, minutes, and seconds values returned from the useCountdown hook
 const CountdownTimer = ({ targetDate }) => {
- const [days, hours, minutes, seconds] = useCountdown(targetDate);
+  const [days, hours, minutes, seconds] = useCountdown(targetDate);
 
-//  Return the JSX to display the countdown timer, this function will return the ExpiredNotice component if the countdown has finished,
-//  otherwise it will return the ShowCounter component
-// The component below display's the simple text stating the purpose of the timer, and the countdown box itself.
-
- return (
- <Container fluid className="countdown-container">
- <Row className="justify-content-center align-items-center">
-   <Col xs={12} sm={8} md={6}>
-     <h1 className="title">Countdown to TomBay's Retirement</h1>
-     <Card className="border-0 shadow-lg mt-4"> 
-       {days + hours + minutes + seconds <= 0 ? (
-         <Card.Body className="d-flex flex-column justify-content-center align-items-center">
-           <ExpiredNotice />
-         </Card.Body>
-       ) : (
-         <Card.Body className="d-flex flex-column justify-content-center align-items-center">
-           <ShowCounter days={days} hours={hours} minutes={minutes} seconds={seconds} />
-         </Card.Body>
-       )}
-     </Card>
-   </Col>
- </Row>
- </Container>
- );
+  // Return the JSX to display the countdown timer, this function will return the ExpiredNotice component if the countdown has finished,
+  // otherwise it will return the ShowCounter component
+  // The component below display's the simple text stating the purpose of the timer, and the countdown box itself.
+  return (
+    <Container fluid className="countdown-container">
+      <Row className="justify-content-center align-items-center">
+        <Col xs={12} sm={8} md={6}>
+          <h1 className="title">Countdown to TomBay's Retirement</h1>
+          <Card className="border-0 shadow-lg mt-4 countdown-card countdown-card--big"> {/* Updated CSS class */}
+            {days + hours + minutes + seconds <= 0 ? (
+              <Card.Body className="d-flex flex-column justify-content-center align-items-center">
+                <ExpiredNotice />
+              </Card.Body>
+            ) : (
+              <Card.Body className="d-flex flex-column justify-content-center align-items-center">
+                <ShowCounter days={days} hours={hours} minutes={minutes} seconds={seconds} />
+                
+              </Card.Body>
+            )}
+          </Card>
+        </Col>
+      </Row>
+    </Container>
+  );
 };
 
 export default CountdownTimer;

src/ShowCounter.js

@@ -3,7 +3,7 @@
 import React from 'react';
 
 const ShowCounter = ({ days, hours, minutes, seconds }) => (
- <div>
+ <div style={{ fontSize: '4rem' }}>
    {days} days, {hours} hours, {minutes} minutes, {seconds} seconds
  </div>
 );

src/index.css

@@ -10,4 +10,6 @@ body {
 code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
+
+    
 }

src/styles.css

@@ -0,0 +1,5 @@
+/* styles.css */
+
+.ShowCounter {
+    font-size: 3em;
+   }