<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Giphy API test</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="search-section">
<input id="search" type="search" placeholder="Search gifs...">
<button class="search-section__button" onclick="giffyModule.search()">Search</button>
</div>
<div class="gif-container-wrap" id="container-wrap">
<div class="gif-container" id="container">
</div>
<div class="loader" id="loader"></div>
</div>
<div class="pagination" id="pagination">
</div>
</body>
</html>
<script src="js/index.js"></script>
</body>
</html>
/*Downloaded from https://www.codeseek.co/vovant123/giphy-api-test-mpWGMW */
.gif-container-wrap {
position: relative;
}
.gif-container {
margin-top: 10px;
text-align: center;
}
.gif-container__item {
width: 200px;
height: 200px;
padding: 5px;
}
.search-section {
text-align: center;
}
.pagination {
margin-top: 10px;
}
.pagination__item {
display: inline-block;
color: white;
background-color: #4972ff;
border-radius: 6px;
margin: 3px;
padding: 5px;
user-select: none;
-webkit-user-select: none;
}
.pagination__item:hover {
cursor: pointer;
}
.pagination__item--active {
background-color: red;
}
.pagination__item--active:hover {
cursor: auto;
}
.loader {
top: 0;
bottom: 0;
margin: auto;
position: absolute;
left: 0;
right: 0;
visibility: hidden;
border: 16px solid #f3f3f3; /* Light grey */
border-top: 16px solid #3498db; /* Blue */
border-radius: 50%;
width: 120px;
height: 120px;
animation: spin 2s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/*Downloaded from https://www.codeseek.co/vovant123/giphy-api-test-mpWGMW */
var giffyModule = (function () {
var gifContainer = document.getElementById('container');
var pagination = document.getElementById('pagination');
var search = document.getElementById('search');
var searchPredicate;
// Event listener for enter pressed for search
search.addEventListener('keydown', function (e) {
if (!e) {
var e = window.event;
}
// Enter is pressed
if (e.keyCode == 13) {
giffyModule.search();
}
}, false);
// Event listener for pagination
pagination.addEventListener('click', function (e) {
if (!e) {
var e = window.event;
}
var page = e.target;
if (page.getAttribute('class') !== 'pagination__item') return;
// TODO find if there is a faster way
Array.prototype.forEach.call(pagination.children, function (page) {
page.classList.remove('pagination__item--active');
});
moveToPage(page.innerText);
// mark target as an active page
page.classList.add('pagination__item--active');
});
function displayGif(gif) {
var gifElement = document.createElement('img');
gifElement.setAttribute('src', gif.images.fixed_height.url);
gifElement.setAttribute('alt', gif.id);
gifElement.setAttribute('class', 'gif-container__item');
gifContainer.appendChild(gifElement);
}
function clearGifContainer() {
gifContainer.innerHTML = '';
}
function clearPagination() {
pagination.innerHTML = '';
}
function createPagination(paginationParams) {
var paginationCounter = 1;
var totalCount;
// max number of items to be displayed
paginationParams.total_count > 500 ? totalCount = 500 : totalCount = paginationParams.total_count;
for (var i = 0; i < totalCount; i += paginationParams.count) {
var paginationItem = document.createElement('div');
paginationItem.setAttribute('class', 'pagination__item');
paginationItem.innerText = paginationCounter++;
pagination.appendChild(paginationItem);
}
// setting first page active by default
pagination.firstElementChild.classList.add('pagination__item--active');
}
function moveToPage(pageNumber) {
clearGifContainer();
var gifs = getGifs(pageNumber);
gifs.data.forEach(function (gif) {
displayGif(gif);
});
}
function getGifs(pageNumber) {
//default parameter ES5
pageNumber = pageNumber || 1;
var offset = (pageNumber - 1) * 5;
// Creating a XMLHttpRequest
var xhr = new XMLHttpRequest();
// Configuring it:
xhr.open('GET', 'https://api.giphy.com/v1/gifs/search?q=' + searchPredicate
+ '&api_key=Iu24Y7bTGQ5IxxqLr11xt7tw4HTvxQNL&offset=' + offset +
'&limit=5', false);
// 3. Sending it
xhr.send();
// 4. if status is not 200, the result is an error
if (xhr.status != 200) {
// Process an error
alert(xhr.status + ': ' + xhr.statusText); // output example: 404: Not Found
} else {
var result = JSON.parse(xhr.responseText);
emulateLoading(2000);
return result;
}
}
function showLoader() {
document.getElementById('container-wrap').style.height = '200px';
gifContainer.style.visibility = 'hidden';
document.getElementById('loader').style.visibility = 'visible';
}
function emulateLoading(time) {
showLoader();
setTimeout(function () {
document.getElementById('container-wrap').style.height = 'auto';
gifContainer.style.visibility = 'visible';
document.getElementById('loader').style.visibility = 'hidden';
}, time);
}
return {
search: function () {
clearGifContainer();
clearPagination();
searchPredicate = search.value;
// TODO test case where gifs don't exist (due to GET method error)
var gifs = getGifs();
// if there is nothing to show
if (gifs.data.length === 0) return;
gifs.data.forEach(function (gif) {
displayGif(gif);
});
createPagination(gifs.pagination);
search.value = '';
}
}
})();