removed .parcel-cache tracking and deleted them also updated background animation on vetsWhoCode.html react component and fixed class module imports

Author: JVSONV

.gitignore

@@ -74,7 +74,7 @@ typings/
 
 # parcel-bundler cache (https://parceljs.org/)
 .cache
-.parcel-cache/
+.parcel-cache
 
 # Next.js build output
 .next

.parcel-cache/119caa20f5233e16

@@ -98,13 +98,6 @@ button.call-out {
   margin-bottom: 20px;
 }
 
-.react-app.skittles {
-  background-image: linear-gradient(45deg, #B39DDB, #ED9CD4, #FFA1B8, #FFB493, #FFD474, #F9F871);
-  background-size: 300%;
-  overflow: hidden;
-  animation: bg-animation 3.2s infinite alternate;
-}
-
 @keyframes pageLoad {
   0% {
     transform: translateY(-20);
@@ -117,11 +110,3 @@ button.call-out {
   }
 }
 
-@keyframes bg-animation {
-  0% {
-    background-position: left;
-  }
-  100% {
-    background-position: right;
-  }
-}

.parcel-cache/1360e7b616166f45

@@ -9,4 +9,20 @@
   display: flex;
   gap: 20px;
   justify-content: center;
+}
+
+.app.skittles {
+  background-image: linear-gradient(45deg, #B39DDB, #ED9CD4, #FFA1B8, #FFB493, #FFD474, #F9F871);
+  background-size: 300%;
+  overflow: hidden;
+  animation: bg-animation 3.2s infinite alternate;
+}
+
+@keyframes bg-animation {
+  0% {
+    background-position: left;
+  }
+  100% {
+    background-position: right;
+  }
 }

.parcel-cache/192a90629b7c55f9

@@ -1,14 +1,14 @@
 import React, { useState } from "react";
 import Button from "./Components/Button";
-import classes from "./App.module.css";
+import * as classes from "./App.module.css";
 
 const App = () => {
   const [currentCount, setCurrentCount] = useState(0);
-  const divBackground = document.getElementById("react-app");
+  const [animateBg, setAnimateBg] = useState(false);
 
-  const addButtonHandler = () => {
-    setCurrentCount((prevCount) => prevCount+=1);
-  };
+  function addButtonHandler() {
+    setCurrentCount((prevCount) => prevCount += 1);
+  }
 
   const subtractButtonHandler = () => {
     setCurrentCount((prevCount) => (prevCount - 1 <= 0 ? 0 : prevCount-= 1));
@@ -19,11 +19,11 @@ const App = () => {
   };
 
   const backgroundColorHandler = () => {
-    divBackground!.classList.toggle("skittles");
+    setAnimateBg(prev => !prev);
   };
 
   return (
-    <div className={classes.app}>
+    <div className={animateBg ? `${classes.app} ${classes.skittles}`: `${classes.app}`}>
       <Button
         innerText="Tast the rainbow"
         onClickHandler={backgroundColorHandler}

.parcel-cache/1d11806abf58443d

@@ -1,5 +1,5 @@
 import React from "react";
-import classes from "./CSS/Button.module.css";
+import * as classes from "./CSS/Button.module.css";
 
 type ButtonProps = {
   innerText: string;