Flash Cards

by thewolff

HTML

<div class="vertical flip-container card-stack" ontouchstart="this.classList.toggle('hover');">
	<div class="flipper">
	</div>
</div>
<div class="prev">
    Prev
  </div>
  <div class="next">
    Next
  </div>

CSS

.card-stack {
  width: 100%;
  height: 800px;
  background-color: red;
}

.card {
   opacity: 0;
}

.card.current {
  opacity: 1;
}
/* entire container, keeps perspective */
.flip-container {
	perspective: 1000px;
}
	/* flip the pane when hovered */
	.flip-container:hover .flipper, .flip-container.hover .flipper {
		transform: rotateY(180deg);
	}

.flip-container, .front, .back {
	width: 320px;
	height: 200px;
  text-align: center;
}

/* flip speed goes here */
.flipper {
	transition: 0.6s;
	transform-style: preserve-3d;

	position: relative;
}

/* hide back of pane during swap */
.front, .back {
	backface-visibility: hidden;

	position: absolute;
	top: 0;
	left: 0;
}

/* front pane, placed above back */
.front {
	z-index: 2;
	/* for firefox 31 */
	transform: rotateY(0deg);
}

/* back, initially hidden pane */
.back {
	transform: rotateY(180deg);
}

.vertical.flip-container {
	position: relative;
}

	.vertical .back {
		transform: rotateX(180deg);
	}

	.vertical.flip-container .flipper {
		transform-origin: 100% 100px; /* half of height */
	}

	.vertical.flip-container:hover .flipper {
		transform: rotateX(-180deg);
	}

JavaScript

const data = [
	{front: 1, back: 100},
  {front: 2, back: 200},
  {front: 3, back: 300},
  {front: 4, back: 400},
  {front: 5, back: 500},
  {front: 6, back: 600},
  {front: 7, back: 700},
  {front: 8, back: 800},
  {front: 9, back: 900},
];

/*const data = [
	{front: 1, back: 100},
];*/
const stackElem = document.querySelectorAll('.card-stack .flipper')[0];

const prevElem = document.querySelectorAll('.prev')[0]
const nextElem = document.querySelectorAll('.next')[0]

console.log(stackElem)

data.forEach((card, i) => {
	let cardDiv = document.createElement('div');
  cardDiv.classList.add('card');
  if(!i) {
  	cardDiv.classList.add('current')
  }
  let frontCard = document.createElement('div');
  frontCard.classList.add('front');
  let frontContent = document.createTextNode(card.front); 
  let backCard = document.createElement('div');
  backCard.classList.add('back');
  let backContent = document.createTextNode(card.back); 
  backCard.appendChild(backContent)
  frontCard.appendChild(frontContent);
  cardDiv.appendChild(frontCard)
  cardDiv.appendChild(backCard)
  stackElem.appendChild(cardDiv)
})