randomdog/index.html at main · Shermaniac/randomdog · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Random Dog App</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <style>
    .spinner {
      border: 4px solid transparent;
      border-top: 4px solid #3b82f6;
      border-radius: 50%;
      width: 40px;
      height: 40px;
      animation: spin 1s linear infinite;
    }

    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
  </style>
</head>
<body class="bg-black flex items-center justify-center min-h-screen">
  <div class="text-center">
    <div id="loadingSpinner" class="spinner mx-auto mb-6 hidden"></div>
    <img id="dogImage"
         src="https://images.dog.ceo/breeds/hound-afghan/n02088094_1003.jpg"
         alt="Random Dog"
         class="w-80 h-80 object-cover rounded-lg shadow-xl border-4 border-gray-700 mb-6">
    <p id="dogBreed" class="text-white text-xl font-semibold mb-4">Breed: Afghan Hound</p>
    <button id="newDogButton"
            class="px-8 py-4 bg-gradient-to-r from-blue-400 to-blue-600 text-white rounded-full text-lg font-semibold shadow-xl hover:from-blue-500 hover:to-blue-700 transition-all">
      Show Me a New Dog
    </button>
  </div>

  <script>
    const dogImage = document.getElementById('dogImage');
    const newDogButton = document.getElementById('newDogButton');
    const loadingSpinner = document.getElementById('loadingSpinner');
    const dogBreed = document.getElementById('dogBreed');

    function formatBreedName(breed) {
      return breed.split('-')
                  .map(word => word.charAt(0).toUpperCase() + word.slice(1))
                  .join(' ');
    }

    newDogButton.addEventListener('click', () => {
      // Show the loading spinner
      loadingSpinner.classList.remove('hidden');
      dogImage.classList.add('hidden');
      dogBreed.classList.add('hidden');

      // Fetch a new dog image
      fetch('https://dog.ceo/api/breeds/image/random')
        .then(response => response.json())
        .then(data => {
          const newImageUrl = data.message;
          const breedPath = newImageUrl.split('/')[4];
          const formattedBreed = formatBreedName(breedPath);

          const tempImage = new Image();

          tempImage.onload = () => {
            // Hide the loading spinner and show the new image and breed
            dogImage.src = tempImage.src;
            dogBreed.textContent = `Breed: ${formattedBreed}`;
            loadingSpinner.classList.add('hidden');
            dogImage.classList.remove('hidden');
            dogBreed.classList.remove('hidden');
          };

          tempImage.src = newImageUrl;
        })
        .catch(error => {
          console.error('Error fetching dog image:', error);
          loadingSpinner.classList.add('hidden');
          dogImage.classList.remove('hidden');
          dogBreed.classList.remove('hidden');
        });
    });
  </script>
</body>
</html>