From 0adce03c4cba9a27a1f699a2dd5b0fc6f4cb64c6 Mon Sep 17 00:00:00 2001
From: Hemant Sharma <itshemantsharma173@gmail.com>
Date: Fri, 16 Feb 2024 23:20:09 +0530
Subject: [PATCH] bugs fixed

---
 src/components/Chantcounter.jsx | 18 ++++++------------
 src/components/Malacounter.jsx  |  2 +-
 src/containers/Homepage.jsx     | 21 ++++++++++-----------
 src/index.css                   |  1 +
 src/styles/Chantcounter.css     |  3 ++-
 src/styles/Homepage.css         |  2 +-
 6 files changed, 21 insertions(+), 26 deletions(-)

diff --git a/src/components/Chantcounter.jsx b/src/components/Chantcounter.jsx
index 44e446b..6631512 100644
--- a/src/components/Chantcounter.jsx
+++ b/src/components/Chantcounter.jsx
@@ -2,23 +2,17 @@ import { useState, useEffect } from "react";
 import "../styles/Chantcounter.css";
 
 export default function Chantcounter({ handleMalaCount }) {
-  const [chantCount, setChantCount] = useState("0107");
+  const [chantCount, setChantCount] = useState(105);
 
   useEffect(() => {
-    if (chantCount === "0108") {
-      handleMalaCount(chantCount);
+    if (chantCount === 108) {
+      handleMalaCount();
+      setChantCount(0);
     }
-  }, [chantCount]);
+  }, [chantCount, handleMalaCount]);
 
   const updateChantCount = () => {
-    setChantCount((prevCount) => {
-      let newCount = parseInt(prevCount) + 1;
-      if (newCount === 108) {
-        handleMalaCount(newCount.toString().padStart(4, "0"));
-        newCount = 0;
-      }
-      return newCount.toString().padStart(4, "0");
-    });
+    setChantCount((prevCount) => prevCount + 1);
   };
 
   return (
diff --git a/src/components/Malacounter.jsx b/src/components/Malacounter.jsx
index b13ef28..fc067e2 100644
--- a/src/components/Malacounter.jsx
+++ b/src/components/Malacounter.jsx
@@ -4,7 +4,7 @@ import "../styles/Malacounter.css";
 export default function Malacounter({ count }) {
   return (
     <div id="malaCounter">
-      <p>{count}</p>
+      <p>{count < 9 ? "0" + count.toString() : count.toString()}</p>
     </div>
   );
 }
diff --git a/src/containers/Homepage.jsx b/src/containers/Homepage.jsx
index db2e059..f9dbc0b 100644
--- a/src/containers/Homepage.jsx
+++ b/src/containers/Homepage.jsx
@@ -6,20 +6,19 @@ import Malacounter from "../components/Malacounter";
 import Chantcounter from "../components/Chantcounter";
 import Prabhupictures from "../components/Prabhupictures";
 
-import React, { useState, useEffect } from "react";
+import { useState, useEffect } from "react";
 import Quotes from "../components/Quotes";
 
 export default function Homepage() {
   const [randomIndex, setRandomIndex] = useState(0);
-  const [malaCount, setMalaCount] = useState("00");
-
-  const handleMalaCount = (chantCount) => {
-    if (chantCount === "0107") {
-      setMalaCount((prevMalaCount) => {
-        let newMalaCount = parseInt(prevMalaCount) + 1;
-        return newMalaCount.toString().padStart(2, "0");
-      });
-    }
+  const [malaCount, setMalaCount] = useState(0);
+
+  const handleMalaCount = () => {
+    console.log("108 chants completed!");
+    setMalaCount((prevMalaCount) => {
+      let newMalaCount = prevMalaCount + 1;
+      return newMalaCount;
+    });
   };
 
   useEffect(() => {
@@ -43,7 +42,7 @@ export default function Homepage() {
       />
       <div id="counterContainer">
         <Malacounter count={malaCount} />
-        <Chantcounter onChantCount={handleMalaCount} />
+        <Chantcounter handleMalaCount={handleMalaCount} />
       </div>
     </>
   );
diff --git a/src/index.css b/src/index.css
index 549bc59..2fb50ac 100644
--- a/src/index.css
+++ b/src/index.css
@@ -9,6 +9,7 @@
 * {
   margin: 0;
   padding: 0;
+  font-family: 'Hanuman', serif;
 }
 
 body {
diff --git a/src/styles/Chantcounter.css b/src/styles/Chantcounter.css
index 1cca041..2802a9c 100644
--- a/src/styles/Chantcounter.css
+++ b/src/styles/Chantcounter.css
@@ -2,11 +2,12 @@
     color: #000;
     background-color: #fff;
     border-radius: 9px;
-    padding: 15px 105px;
+    padding: 10px 105px;
     font-size: xx-large;
     border: 0;
     box-shadow: 0 0 10px rgba(219, 172, 52);
     height: 100%;
+    width: 100%;
     cursor: pointer;
     animation: glow 2s infinite;
 }
diff --git a/src/styles/Homepage.css b/src/styles/Homepage.css
index ecc24ec..d80ce51 100644
--- a/src/styles/Homepage.css
+++ b/src/styles/Homepage.css
@@ -2,7 +2,7 @@
     display: flex;
     flex-direction: row;
     align-items: center;
-    justify-content: center;
+    justify-content: space-between;
     width: 360px;
     margin: auto;
     gap: 10px;