Calculator Tools Calculator Tools
Create

Poki Game Search

Jan 5, 2024

About this app

Search for games and play them on Poki

Poki Game Search Poki Game Search Search

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 Game Search</title>
<meta name="description" content="Search for games and play them on Poki">
<meta name="keywords" content="poki, game, play, search">

<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.
$(document).ready(function() {
$('#search-form').submit(function(event) {
event.preventDefault();
var query = $('#search-input').val();
searchGames(query);
});
});

function searchGames(query) {
$.ajax({
url: 'https://poki.com/api/v1/search',
method: 'GET',
data: {
query: query
},
success: function(response) {
displayGames(response.results);
},
error: function(error) {
console.log(error);
}
});
}

function displayGames(games) {
var container = $('#games-container');
container.empty();

if (games.length === 0) {
container.append('<p>No games found.</p>');
} else {
games.forEach(function(game) {
var gameElement = $('<div class="game"><h3>' + game.name + '</h3><img src="' + game.image + '" alt="' + game.name + '"><a href="' + game.url + '" target="_blank">Play Now</a></div>');
container.append(gameElement);
});
}
}

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

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

.container {
max-width: 800px;
margin: 0 auto;
}

h1 {
text-align: center;
margin: 40px 0;
}

.search-form {
text-align: center;
margin-bottom: 40px;
}

.search-input {
width: 100%;
max-width: 500px;
padding: 10px;
font-size: 16px;
border: none;
border-radius: 4px;
}

.search-button {
margin-top: 10px;
padding: 10px 20px;
background-color: #337ab7;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
}

.games-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
}

.game {
background-color: #fff;
padding: 20px;
border-radius: 4px;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
text-align: center;
}

.game h3 {
margin-bottom: 10px;
}

.game img {
max-width: 100%;
height: auto;
margin-bottom: 10px;
}

.game a {
display: inline-block;
padding: 10px 20px;
background-color: #337ab7;
color: #fff;
text-decoration: none;
border-radius: 4px;
}
</style>
</head>
<body>
<div id="main-container" class="container">
<h1>Poki Game Search</h1>

<form id="search-form" class="search-form">
<input type="text" id="search-input" class="search-input" placeholder="Enter a game name">
<button type="submit" class="search-button">Search</button>
</form>

<div id="games-container" class="games-container">
<!-- Game results will be displayed here -->
</div>
</div>
</body>
</html>