Calculator Tools Calculator Tools
Create

Poki os Jogos

Jan 5, 2024

About this app

Explore uma ampla seleção de jogos divertidos no Poki.

Poki os Jogos Poki os Jogos

Related apps

Put this on your site

Source

                    <html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">

<title>Poki os Jogos</title>
<meta name="description" content="Explore uma ampla seleção de jogos divertidos no Poki.">
<meta name="keywords" content="Poki, jogos, diversão">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

<script type="text/javascript">
try {
// App Javascript Goes Here. Place your entire script content inside the try block for error handling.

// This will run when the DOM is ready.
document.addEventListener("DOMContentLoaded", function() {
// Function to fetch games from Poki API
function fetchGames() {
// Base URL for Poki API
var apiUrl = "https://api.poki.com/v1";

// Endpoint to get games
var gamesEndpoint = apiUrl + "/games";

// Make a GET request to the games endpoint
$.get(gamesEndpoint, function(data) {
// Check if the response is successful
if (data.success) {
// Get the list of games
var games = data.games;

// Create a container to display the games
var gamesContainer = $("#games-container");

// Iterate over the games and create a card for each game
games.forEach(function(game) {
// Create a card element
var card = $("<div>").addClass("card");

// Create an image element for the game thumbnail
var thumbnail = $("<img>").addClass("card-img-top").attr("src", game.thumbnail);

// Create a card body element
var cardBody = $("<div>").addClass("card-body");

// Create a title element for the game
var title = $("<h5>").addClass("card-title").text(game.title);

// Create a description element for the game
var description = $("<p>").addClass("card-text").text(game.description);

// Append the title and description to the card body
cardBody.append(title, description);

// Append the thumbnail and card body to the card
card.append(thumbnail, cardBody);

// Append the card to the games container
gamesContainer.append(card);
});
} else {
// Display an error message if the API request fails
var errorMessage = $("<p>").addClass("text-danger").text("Failed to fetch games. Please try again later.");
$("#games-container").append(errorMessage);
}
});
}

// Call the fetchGames function to display the games
fetchGames();
});

} catch (error) {
// This will throw the error to the parent window.
throw error;
}
</script>

<style>
/* App CSS Goes Here */
body {
background-color: #f3f3f3;
font-family: 'Roboto', sans-serif;
}

#main-container {
padding: 20px;
}

#title {
text-align: center;
margin-bottom: 20px;
}

.card {
margin-bottom: 20px;
border-radius: 10px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}

.card-img-top {
object-fit: cover;
height: 200px;
border-radius: 10px 10px 0 0;
}

.card-body {
padding: 20px;
}

.card-title {
font-size: 18px;
font-weight: bold;
margin-bottom: 10px;
}

.card-text {
font-size: 14px;
color: #666;
}

.text-danger {
color: #f00;
}
</style>
</head>
<body>
<div id="main-container" class="container">
<h1 id="title">Poki os Jogos</h1>

<div id="games-container"></div>
</div>
</body>
</html>