add new func

index.html

@@ -15,7 +15,9 @@ <h1>Streetcat Rescue</h1>
     <div id="cat-counter">Cat Clicks: 0</div>
     <input class="happy" type="text" name="amount" id="amount" placeholder="Any amount helps!"/>
     <button class="happy" id="btn">We appreciate your donation!</button>
+    if its to bright or to dark <button id="Switch">Click here</button>
 </main>
+<div><img src="Sad-Cat.jpg" alt="Sad-Cat" id="sad-cat-image"></div>
 <script src="script.js"></script>
 </body>
 </html>

script.js

@@ -1,15 +1,19 @@
 const button = document.getElementById('btn');
 const input = document.getElementById('amount');
 const cat = document.getElementById('cat');
+const sadCatImage = document.getElementById("sad-cat-image");
 
 function handleDonation() {
     const amount = input.value;
 
     if (amount == 0) {
         alert('Thanks for nothing, the cats are all sad :(');
         document.body.style.background = 'red';
+        sadCatImage.src = "images.jpg";
+        sadCatImage.style.display = "block";
     } else {
         alert(`Thanks for the donation of $ ${amount}!`);
+        sadCatImage.style.display = "none";
     }
 }
 
@@ -31,9 +35,27 @@ function toggleCatClass() {
     cat.classList.toggle("rotate");
 }
 
-
 button.addEventListener('click', handleDonation);
 cat.addEventListener('click', catClick);
 cat.addEventListener('click', moveCat);
 cat.addEventListener('mouseover', toggleCatClass);
 cat.addEventListener('mouseout', toggleCatClass);
+
+document.addEventListener("DOMContentLoaded", function() {
+    const switchButton = document.getElementById("Switch");
+    const body = document.body;
+    let isLightBackground = true;
+
+    switchButton.addEventListener("click", function() {
+      if (isLightBackground) {
+        body.style.backgroundColor = "black";
+        body.style.color = "white"; 
+      } else {
+        body.style.backgroundColor = "lightblue";
+        body.style.color = "black"; 
+      }
+      isLightBackground = !isLightBackground;
+    });
+});
+
+

styles.css

@@ -1,5 +1,5 @@
 body {
-    background: #28debd;
+    background: lightblue;
     font-family: sans-serif;
     color: #daae6d;
     display: grid;