2
\$\begingroup\$

https://jsfiddle.net/0a7tcv2g/

I know I could locally store the data, write in es6, and all that, but I wanted to learn to work with APIs, and really understand JS through ES5, before brushing up my ES6+ skills. I haven't finished adding all the small details yet, but thats trivial at this point. Just looking for feedback on my JS, and responsiveness of my site. (I know I used some es6, and could use const in some places instead of let).

HTML:

<!DOCTYPE html>
<html>
<head>
<title>Pokedex</title>
<link rel="stylesheet" type="text/css" 
href="styles.css">
</head>
<body>
<h1 id="main-header">Pokedex</h1>
<div id="main-container">

</div>
<script src="index.js" 
type="text/javascript"></script>
</body>
</html>

CSS:

*{
font-family: Arial, Helvetica, San-serrif;
margin:0;
padding: 0;
}

h1 {
background: red;
color: white;
font-size: 3em;
text-align: center;

}

#main-container {
position: absolute;
display: flex;
flex-wrap: wrap;
perspective: 625em;
}

.card-container {
position: relative;
display: flex;
transform-style: preserve-3d;
flex-wrap: wrap;
justify-content: center;
align-content: center;
flex-basis: 31%;
height: 25em;
width:18.75em;
box-shadow: 0.07em 0.07em 0.4em 0.13em 
rgb(40, 40, 40, 0.6);
margin: 0.4em;
transition: 1000ms;
background: #0000ff;
border: 0.63em solid gold;
}

.frontFace, .backFace {
display: flex;
flex-wrap: wrap;    
flex-basis: 31%;
position: absolute; 
height: 100%;
width: 100%;
backface-visibility: hidden;
color: white;
/*Temporary*/
text-shadow: -0.13em 0 red, 0 0.13em red, 
0.13em 0 red, 0 -0.13em red;
}

.backFace {
transform: rotateY(180deg);
height: 100%
width: 100%;

}

.frontFace img, .backFace img {
position: absolute;
margin-top: 18%;
margin-left: 20%;
background: white;
border: gold 0.19em solid;
width: 60%;
height: auto;
}



.name{
width: 100%;
text-align: center;
font-size: 1.5em;
overflow:auto;
}

.frontName {
font-size: 1.5em;
text-align: center;
margin-top: 2%;
width: 100%;
max-width: 100%;

}

.type {
margin-top: 70%;
margin-left: 66%;
}

.id {
position: absolute;
margin-left: 4%;
margin-top: 4%;
height: auto;
}

JS:

const container = document.getElementById('main-container');

function getPokemon(callback) {
    const xhr = new XMLHttpRequest();
    const url = 'https://pokeapi.co/api/v2/pokemon/';

    xhr.onload = function() {
        if(xhr.status === 200) {
            const pokemon = JSON.parse(xhr.responseText);
            pokemon.results.forEach((poke, index)=>{

                let cardContainer = document.createElement('div');
                cardContainer.className = 'card-container';
                container.appendChild(cardContainer);
                let frontFace = document.createElement('div');
                frontFace.className = 'frontFace';
                cardContainer.appendChild(frontFace);
                let sprite = document.createElement('img')
                sprite.src = `https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${(index + 1).toString()}.png`
                frontFace.appendChild(sprite);
                let backName = document.createElement('h4');
                backName.className = 'name';
                function capitalName(string) {
                    backName.innerText = string.charAt(0).toUpperCase() + string.slice(1);
                }
                capitalName(poke.name)
                frontFace.appendChild(backName);    
            })

            callback();
        }
    }
    xhr.open('GET', url, true);
    xhr.send();
}

function cardBack() {
    const endPoint = this.innerText.charAt(0).toLowerCase() + this.innerText.slice(1);
    const card = this.parentElement;
    const xhr = new XMLHttpRequest();

    xhr.onload = function() {
        if(xhr.status === 200) {
            if(card.childNodes.length === 2) {
                card.style.transform = 'rotateY(180deg)';
            }
            else {
                const details = JSON.parse(xhr.responseText); 
                let backFace = document.createElement('div');
                backFace.className = 'backFace';
                backFace.addEventListener('click', ()=>{
                card.style.transform = ''
                })
                card.appendChild(backFace);
                let sprite = document.createElement('img')
                sprite.src = `https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${(details.id).toString()}.png`
                backFace.appendChild(sprite);
                let name = document.createElement('h4');
                name.className = 'frontName';
                name.innerHTML = details.name;
                let type = document.createElement('h4');
                type.className = 'type';
                type.innerHTML = details.types[0].type.name;
                backFace.appendChild(name);
                backFace.appendChild(type);
                let ids = document.createElement('h4');
                ids.className = 'id';
                ids.innerHTML = `#${details.id}`;
                backFace.appendChild(ids);
                card.style.transform = 'rotateY(180deg)';
            }
        }
    }
    xhr.open('GET', 'https://pokeapi.co/api/v2/pokemon/' + endPoint, true);
    xhr.send();
}

getPokemon(()=>{
    const cardFront = document.querySelectorAll('.frontFace');
    cardFront.forEach((card)=> {
        card.addEventListener('click', cardBack);
    })
});
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.