I'm trying to set up a flip card in css, on hover, but having trouble getting it to work.
Note: I know I'm going to need to use JS to make the click work how I want it to, but I am just trying to figure out what properties need to be set to get the effect I want, and using hover as an intermediary.
JS explanation(code at bottom):
I have a function that makes pokemon cards from an API, and puts them into a div class called "frontFace". That function has a callback function that sets up event handlers for a click, and returns the specific pokemons expanded details with another AJAX request on click, in a separate(dynamically generated on click) div called "backface". Both of those divs, are children to a div class called "card-container", each card has its own container, so 151 containers in all, and those are all in the main container. If it isn't obvious, backface sits behind frontface, and needs to show on flip.
https://jsfiddle.net/qfzmxvty/
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;
}
h1 {
background: red;
color: white;
font-size: 48px;
text-align: center;
}
#main-container {
position: absolute;
display: flex;
flex-wrap: wrap;
}
.card-container {
position: relative;
display: flex;
transform-style: preserve-3d;
flex-wrap: wrap;
justify-content: center;
align-content: center;
flex-basis: 31%;
height: 400px;
width:400px;
border: black 3px solid;
margin: 3px;
}
.frontFace, .backFace {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-content: center;
flex-basis: 31%;
border: 1px black solid;
text-align: center;
position: absolute;
height: 100%;
width: 100%;
backface-visibility: hidden;
}
.backFace {
transform: rotateY(180deg);
height: 100%
width: 100%;
}
img {
border: black 1px solid;
}
#main-container:hover.card-container {
transform: rotateY(180deg);
}
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 name = document.createElement('h4');
name.innerText = poke.name;
frontFace.appendChild(name);
})
callback();
}
}
xhr.open('GET', url, true);
xhr.send();
}
function cardBack() {
const endPoint = this.lastChild.innerText;
const card = this;
console.log(this)
const xhr = new XMLHttpRequest();
xhr.onload = function() {
if(xhr.status === 200) {
const details = JSON.parse(xhr.responseText);
let backFace = document.createElement('div');
backFace.className = 'backFace';
card.appendChild(backFace);
let name = document.createElement('h4');
name.innerHTML = details.name;
let type = document.createElement('h4');
type.innerHTML = details.types[0].type.name;
backFace.appendChild(name);
backFace.appendChild(type);
}
}
xhr.open('GET', 'https://pokeapi.co/api/v2/pokemon/' +
endPoint, true);
xhr.send();
}
getPokemon(()=>{
const cardFront = document.querySelectorAll('.card-
container');
cardFront.forEach((card)=> {
card.addEventListener('click', cardBack);
})
});