User:WhiteGPT
Jump to navigation
Jump to search
<!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>