project completed

the-codingphoenix · Jul 4, 2024 · 70ca77c · 70ca77c
1 parent 27eb35d
commit 70ca77c
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 25 deletions.
diff --git a/index.html b/index.html
@@ -12,7 +12,7 @@
 <body>
     <div class="container">
         <button id="button">Tell Me A Joke</button>
-        <audio src="" id="audio" controls></audio>
+        <audio src="" id="audio" controls hidden></audio>
     </div>
     <!-- js -->
      <script src="VoiceRSS.js"></script>

diff --git a/robot.gif b/robot.gif
diff --git a/script.js b/script.js
@@ -1,16 +1,47 @@
+// Get the button and audio elements from the HTML
 const button = document.getElementById('button');
 const audioElement = document.getElementById('audio');
 
-function test() {
+// Function to disable/enable the button
+function toggleButton() {
+    button.disabled = !button.disabled; // Toggle the disabled property of the button
+}
+
+// Function to pass the joke to the VoiceRSS API for text-to-speech
+function tellMe(joke) {
+    const jokeString = joke.trim().replace(/ /g, '%20'); // Prepare the joke string for the API
     VoiceRSS.speech({
-        key: '83cad11a89d34667a4e3e59968eb945b',
-        src: 'Hello, world!',
-        hl: 'en-us',
-        v: 'Linda',
-        r: 0, 
-        c: 'mp3',
-        f: '44khz_16bit_stereo',
-        ssml: false
+        key: '83cad11a89d34667a4e3e59968eb945b', // API key for VoiceRSS
+        src: jokeString, // The joke to be spoken
+        hl: 'en-us', // Language of the speech
+        v: 'Linda', // Voice selection
+        r: 0, // Speech rate
+        c: 'mp3', // Audio codec
+        f: '44khz_16bit_stereo', // Audio format
+        ssml: false // SSML support
     });
 }
-test();
+
+// Asynchronous function to fetch jokes from the Joke API
+async function getJokes() {
+    let joke = ''; // Variable to store the joke
+    const apiUrl = 'https://v2.jokeapi.dev/joke/Programming?blacklistFlags=nsfw,religious,political,racist,sexist,explicit'; // URL of the Joke API
+    try {
+        const response = await fetch(apiUrl); // Fetch data from the API
+        const data = await response.json(); // Convert response to JSON
+        if (data.setup) {
+            joke = `${data.setup} ... ${data.delivery}`; // Combine setup and delivery if the joke has both
+        } else {
+            joke = data.joke; // Use single part joke
+        }
+        tellMe(joke); // Pass the joke to the text-to-speech function
+        toggleButton(); // Disable the button
+    } catch (error) {
+        console.log(error); // Log any errors to the console
+    }
+}
+
+// Event listener for the button to fetch a new joke when clicked
+button.addEventListener('click', getJokes);
+// Event listener for the audio element to re-enable the button when the audio ends
+audioElement.addEventListener('ended', toggleButton);
diff --git a/style.css b/style.css
@@ -7,41 +7,44 @@
 }
 
 :root {
-    --white: #fff;
-    --bg-color: #151515;
-    --primary-color: #a91d3a;
-    --secondary-color: #C73659;
-    --text-color:#EEEEEE;
+    --white: rgb(255, 255, 255);
+    --bg-color: rgb(21, 21, 21);
+    --primary-color: rgb(169, 25, 58);
+    --secondary-color: rgb(199, 54, 89);
+    --text-color: rgb(238, 238, 238);
 }
 
 body {
     background: var(--white);
+    overflow: hidden;
 }
 
 .container {
-    height: 100vh;
+    height: 90vh;
     width: 100vw;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
-    background: url('https://media3.giphy.com/media/v1.Y2lkPTc5MGI3NjExNzFpdWs3dnJlM2VqdTVvbWhrZzRsN3FvOWw2dGpqb2FnZ2Y3dXRmciZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/WwqLMEY4yJ7af3O00K/giphy.webp');
+    background: url('./robot.gif#191919');
     background-size: contain;
-    background-position: left center;
     background-repeat: no-repeat;
 }
 
+
 button {
     cursor: pointer;
     outline: none;
-    width: 200px;
-    height: 50px;
+    padding: 10px 15px;
     font-family: Montserrat, sans-serif;
-    font-weight: 600;
-    background: var(--secondary-color);
+    font-weight: 700;
+    background: rgb(199, 54, 88);
+    color: var(--bg-color);
+    font-size: 1rem;
+    letter-spacing: 2px;
     border: none;
     border-radius: 10px;
-    box-shadow: 2px 2px 20px 10px var(--bg-color);
+    box-shadow: 2px 2px 20px 10px rgba(21, 21, 21, 0.6);
 }
 
 button:hover {
@@ -64,6 +67,7 @@ button:disabled {
         background-size: cover;
     }
     button {
-        box-shadow: 5px 5px 30px 20px var(--bg-color);
+        box-shadow: 5px 5px 30px 15px rgba(21, 21, 21, 0.796);
+        margin-top: 30%;
     }
 }