stop music button added

src/index.html

@@ -33,6 +33,7 @@ <h1>Check If you are a Thala ?
       <div id="resultContainer">
         <p id="resultText"></p>
       </div>
+      <button type="button" id="stop-music" onclick="Stopmusic()">Stop Music</button>
     <div class="thala">
       <p class="tfr">#ThalaForReason</p>
     </div>

src/index.js

@@ -18,7 +18,11 @@ document.addEventListener("DOMContentLoaded", function () {
 });
 // index.js
 const button = document.getElementsByClassName("checkButton");
-
+// function to stop music
+function Stopmusic(){
+  audio.pause();
+  audio.currentTime = 0; // Set playback position to the beginning
+}
 async function generateContent() {
   if (button.disabled === true) {
     return;

src/styles.css

@@ -204,4 +204,7 @@ button:hover {
   background: #333;
   border-radius: 50%;
   transform: translate(-50%,-50%);
+}
+#stop-music{
+  margin-left: 7.7rem;
 }