<!DOCTYPE html> <html lang="en"> <head>

   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Random Anime Recommendation</title>
   <style>
       body {
           font-family: Arial, sans-serif;
           margin: 0;
           padding: 0;
           background-color: #f0f0f0;
       }

       header {
           background-color: #333;
           color: #fff;
           text-align: center;
           padding: 1rem 0;
       }

       main {
           max-width: 800px;
           margin: 0 auto;
           padding: 2rem;
           text-align: center;
       }

       button {
           padding: 10px 20px;
           background-color: #333;
           color: #fff;
           border: none;
           cursor: pointer;
       }

       .anime-info {
           background-color: #fff;
           border: 1px solid #ccc;
           padding: 1rem;
           margin-top: 1rem;
       }
   </style>

</head> <body>

   <header>

Random Anime Recommendation

   </header>
   <main>
       <button id="getRecommendation">Get Random Recommendation</button>

   </main>
   <script>
       document.addEventListener("DOMContentLoaded", function () {
           const getRecommendationButton = document.getElementById("getRecommendation");
           const animeInfo = document.getElementById("animeInfo");

           getRecommendationButton.addEventListener("click", function () {
               fetchRandomRecommendation();
           });

           function fetchRandomRecommendation() {
               const apiUrl = "http://api.anidb.net:9001/httpapi?request=randomrecommendation";

               fetch(apiUrl)
                   .then((response) => response.json())
                   .then((data) => {
                       // Display anime recommendation on the page
                       animeInfo.innerHTML = `

Recommended Anime

Title: ${data.recommendation[0].title}

Description: ${data.recommendation[0].description}

                       `;
                   })
                   .catch((error) => {
                       console.error("Error fetching anime recommendation:", error);
                   });
           }
       });
   </script>

</body> </html>

WhiteGPT

Random Anime Recommendation

Recommended Anime