Merge pull request #43 from AdityaSinha2305/pet-image

feat: Pet image generation, new feature added to the website

Website/pet-name-generator.js

@@ -89,17 +89,68 @@ function getInputValues() {
     const petType = document.getElementById('petType').value.toLowerCase();
     const traits = document.getElementById('petTrait').value.toLowerCase();
     const color = document.getElementById('petColour').value.toLowerCase();
+
 
     return { petType, traits, color };
+}
+
+
+
+
+
+// Array of static bird image URLs
+const birdImages = [
+  "../assets/bird1.jpg",
+  "../assets/bird2.jpg",
+  "../assets/bird3.jpg",
+  "../assets/bird4.jpg",
+  "../assets/bird5.jpg"
+];
+
+
+// Free API URLs for different pets
+const apiUrls = {
+  dog: 'https://dog.ceo/api/breeds/image/random',
+  cat: 'https://api.thecatapi.com/v1/images/search',
+  bird: 'static'  // Placeholder for bird image logic
+};
+
+
+
+// Function to fetch a random image from the free API based on the pet name
+function fetchPetImage(petName) {
+  if (petName === 'bird') {
+    // Select a random bird image from the array
+    const randomBirdIndex = Math.floor(Math.random() * birdImages.length);
+    return Promise.resolve(birdImages[randomBirdIndex]);
   }
 
+  const apiUrl = apiUrls[petName];
+
+  // Use fetch with promises instead of async/await
+  return fetch(apiUrl)
+      .then(response => response.json())  // Parse the response as JSON
+      .then(data => {
+          // Handle the different structure of each API's response
+          if (petName === 'dog') {
+              return data.message;  // Dog API returns 'message' with image URL
+          } else if (petName === 'cat') {
+              return data[0].url;  // Cat API returns an array with 'url' for the image
+          }
+      })
+      .catch(error => {
+          console.error("Error fetching pet image:", error);
+          return 'https://via.placeholder.com/300';  // Fallback image in case of an error
+      });
+}
+
 
 
 // Function to get a matching pet name based on type, traits, and color
 function getMatchingName(petType, traits, color) {
     let matchedNames = [];
-  
-    // Check if the petType and color exist in the database
+
+    // Check if the petType, trait and color exist in the database
     if (petNamesByAttributes[petType]) {
       if (petNamesByAttributes[petType][traits] && petNamesByAttributes[petType][traits][color]) {
         matchedNames = matchedNames.concat(petNamesByAttributes[petType][traits][color]);
@@ -109,11 +160,23 @@ function getMatchingName(petType, traits, color) {
     if (matchedNames.length > 0) {
       // Randomly choose one name from the matched names
       const randomIndex = Math.floor(Math.random() * matchedNames.length);
+      petName = petType;
+
+      // Fetch the random pet image based on the pet name (returns a promise)
+      fetchPetImage(petName)
+      .then(imageUrl => {
+        document.getElementById('pet-image').src = imageUrl;
+        document.getElementById('pet-image').style.visibility = "visible";
+      })
+      .catch(error => {
+        console.error("Error displaying pet:", error);
+    });
+
       return matchedNames[randomIndex];
     } else {
       return "No matching name found!";
     }
-  }
+}
 
 // Form submission handler
 document.getElementById('pet-name-form').addEventListener('submit', function(event) {
@@ -126,6 +189,7 @@ document.getElementById('pet-name-form').addEventListener('submit', function(eve
     const suggestedName = getMatchingName(petType, traits, color);
 
     // Display the result
+
     document.getElementById('generated-name').innerHTML = `Suggested Pet Name: ${suggestedName}`;
     document.getElementById('generated-name').style.visibility = "visible";
   });

Website/pet.html

@@ -128,7 +128,8 @@ <h2>Pet Name Generator</h2>
             <!-- <div class="cloud" id="cloud"></div> -->
         </form>
 
-
+        <br><br><br>
+        <img id="pet-image" src="" alt="Random Pet Image" style="width:300px; height:300px;visibility: hidden;">
         <br><br><br>
         <h3 id="generated-name"></h3>
     </section>