| Pokémon API 2020

Ein Programm zum Kennenlernen von API’s (application programming interface). Es ging darum Informationen / Inhalte einer API abzurufen und auf einer Seite wieder zu geben. In diesem Fall war es eine über Pokémon. Es kann über die Suchleisste nach einem Pokémon gesucht werden. Wenn mit der Maus über eines gehalten wird, wird eine andere Version angezeigt.

HTML

<!DOCTYPE html>

<head>

<title>Pokémon</title>

</head>

<body>

<button class="goBack">return</button>

</div>

</body>

</html>

CSS

body {

flex-wrap: wrap;

font-family: Arial;

max-width: 1288px;

background-color: darkgrey;

}

p {

width: 96px;

margin: 0;

text-align: center;

margin-bottom: 5px;

}

.field {

display: inline-block;

margin: 15px;

border: 1px solid #858585;

border-radius: 10px;

background-color: #e6e4f5;

position: relative;

height: 100px;

}

input {

margin-right: 100%;

margin-left: 50px;

margin-top: 10px;

height: 30px;

}

.goAndBack {

margin-left: 80px;

margin-top: 5px;

display: block;

}

.buttonLoadMore {

position: fixed;

left: 0;

bottom: 0;

width: 100%;

height: 30px;

overflow: hidden;

background-color: #535353;

color: #e0e0e0;

z-index: 30;

}

.chosen {

background-color: #474747;

color: #e0e0e0;

}

.normal {

top: 10px;

left:0;

position: absolute;

z-index: 20;

}

.shiny {

position: absolute;

z-index: 10;

top: 10px;

left:0;

}

.field:hover .normal {

display: none;

}

JavaScript

let plusFifty = 50;

let liSelected;

let counter = 0;

let counterLimit = 50;

let field = $('.field');

let changeableLink = 'https://pokeapi.co/api/v2/pokemon?limit='+ counterLimit +'';

let arrowCounter = false;

let variableCounter = [];

loadMore();

$('.buttonLoadMore').on('click', (event)=> {

changeableLink = 'https://pokeapi.co/api/v2/pokemon?offset='+ plusFifty +'&limit=50';

plusFifty = plusFifty +50;

counterLimit = counterLimit + counterLimit;

if (plusFifty > 1048) {

$('.buttonLoadMore').hide();

}

loadMore()

});

$('.button').on('click', showAndHide());

$(document).on('keydown', function (event) {

const pressedKey = event.key;

switch (pressedKey) {

case 'ArrowRight':

arrowNavigation(1)

break;

case 'ArrowLeft':

arrowNavigation(-1)

break;

case 'ArrowUp':

searchUpAndDown('up')

break;

case 'ArrowDown':

searchUpAndDown('down')

break;

case 'Enter':

$('.field').show();

showAndHide()

$('#searchbar').val('');

return false;

default:

}

});

$('.goBack').on('click', (event)=> {

$('.field').show();

});

function showAndHide() {

const input = $('#searchbar').val().toLowerCase()

$('.field').each(function (index, value) {

const text = $(value).text().toLowerCase()

if (!text.includes(input)) {

$(value).hide();

}

});

}

function loadMore() {

fetch(changeableLink)

.then(data => data.json())

.then(data => {

let pokemonData = data.results;

for (let i = 0; i < pokemonData.length; i++) {

let pokemonName = pokemonData[i].name;

let pokemonLink = pokemonData[i].url;

console.log(pokemonLink);

fetch(pokemonLink)

.then(data => data.json())

.then(data => {

let pokemonImage = data.sprites.front_default;

let shinyPokemon = data.sprites.front_shiny;

$(".field-wrapper").append('<div class="field"><img class="normal" src="' + pokemonImage +'"><img class="shiny" src="'+ shinyPokemon +'"><p>' + pokemonName + '</p></div>');

field = $('.field');

liSelected = field.eq(counter);

})

}

})

};

function arrowNavigation(offset) {

if (arrowCounter) {

counter = counter + offset;

} else {

arrowCounter = true;

}

if (counter >= counterLimit){

counter = counter - counterLimit;

}else if (counter < 0) {

counter = counter + counterLimit;

}

$('.field').removeClass('chosen')

liSelected = field.eq(counter).addClass('chosen');

}

function searchUpAndDown(operation) {

let positionActive = $('.field.chosen').offset();

variableCounter = [];

$('.field').removeClass('chosen')

$('.field').each(function () {

if (operation === 'down') {

if ($(this).offset().top > positionActive.top && $(this).offset().left === positionActive.left) {

counter = $(this).index()

$(this).addClass('chosen')

return false;

}

} else {

counter = counter - 1

if ($(this).offset().top < positionActive.top && $(this).offset().left === positionActive.left){

variableCounter.push($(this))

}

})

if (operation === 'up') {

let element = variableCounter.pop();

element.addClass('chosen');

counter = element.index();

}