<button class="clear"><i class="far fa-trash-alt"></i></button>

<button class="show"><i class="far fa-plus-square"></i></button>

<div class="cards"></div>

<nav>
  <p class="current"></p>
  <button class="prev"><i class="fas fa-chevron-left"></i></button>
  <button class="next"><i class="fas fa-chevron-right"></i></button>
</nav>

<form>
  <button class="close"><i class="fas fa-times"></i></button>

  <label for="question">Question</label>
  <input type="text" id="question" placeholder="Enter question">

  <label for="answer">Answer</label>
  <input type="text" id="answer" placeholder="Enter answer">

  <button class="add"><i class="fas fa-plus"></i></button>
</form>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  height: 100vh;
  background: radial-gradient(circle, lightgreen, darkgreen);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: helvetica;
  overflow: hidden;
}

button {
  font-size: 2em;
  outline: none;
  border: none;
  background: none;
  cursor: pointer;
}

.clear {
  position: absolute;
  bottom: 20px;
  left: 20px;
}

.show,
.add {
  padding: 20px 0;
}

.cards {
  perspective: 1000px;
  position: relative;
  width: 500px;
  height: 300px;
}

.card {
  position: absolute;
  opacity: 0;
  font-size: 2em;
  width: 100%;
  height: 100%;
  transform: translateX(50%) rotateY(-10deg);
  transition: transform 0.4s ease, opacity 0.4s ease;
  user-select: none;
}

.card.active {
  opacity: 1;
  transform: translateX(0) rotateY(0deg);
  cursor: pointer;
}

.card.left {
  transform: translateX(-50%) rotateY(10deg);
}

.inner {
  width: 100%;
  height: 100%;
  position: relative;
  border-radius: 4px;
  box-shadow: 0 1px 10px rgba(0, 0, 0, 0.3);
  transform-style: preserve-3d;
  transition: transform 0.4s ease;
}

.card.swap .inner {
  transform: rotateX(180deg);
}

.front,
.back {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: linear-gradient(skyblue, steelblue);
  backface-visibility: hidden;
}

.front {
  transform: rotateX(0deg);
}

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

.front::after,
.back::after {
  content: "\f021";
  font-family: "Font Awesome 5 Free";
  position: absolute;
  top: 10px;
  right: 10px;
  font-weight: bold;
  font-size: 0.6em;
  color: rgba(255, 255, 255, 0.6);
  text-shadow: 0 0 1px #999;
}

nav {
  margin: 20px 0;
  position: relative;
}

nav button {
  font-size: 1.2em;
  margin: 0 4em;
}

nav p {
  text-align: center;
  font-size: 1.2em;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

form {
  opacity: 0;
  z-index: -1;
  background: linear-gradient(hotpink, darkorange);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: absolute;
  width: 100%;
  height: 100%;
  transition: 0.2s ease;
}

form.show {
  opacity: 1;
  z-index: 1;
}

label {
  margin: 20px 0 10px;
}

input {
  padding: 0.8em;
  width: 500px;
  font-size: 1em;
  border: 1px solid #aaa;
  border-radius: 3px;
}
const cardsBox = document.querySelector(".cards");
const prevBtn = document.querySelector(".prev");
const nextBtn = document.querySelector(".next");
const showBtn = document.querySelector(".show");
const closeBtn = document.querySelector(".close");
const current = document.querySelector(".current");
const question = document.querySelector("#question");
const answer = document.querySelector("#answer");
const addBtn = document.querySelector(".add");
const clearBtn = document.querySelector(".clear");
const form = document.querySelector("form");

let currentCard = 0;

const cardsArr = [];

const cardsData = JSON.parse(localStorage.getItem("cards")) || [];

cardsData.forEach((data, i) => createCard(data, i));

function createCard(data, i) {
  const card = document.createElement("div");
  card.classList.add("card");

  if (i === 0) {
    card.classList.add("active");
  }

  card.innerHTML = `
    <div class="inner">
      <div class="front">
        <p>
          ${data.q}
        </p>
      </div>
      <div class="back">
        <p>
          ${data.a}
        </p>
      </div>
    </div>
`;
  card.addEventListener("click", () => card.classList.toggle("swap"));

  cardsArr.push(card);

  cardsBox.appendChild(card);

  updateText();
}

function updateText() {
  current.textContent = `${currentCard + 1}/${cardsArr.length}`;
}

nextBtn.addEventListener("click", () => {
  cardsArr[currentCard].className = "card left";

  currentCard = currentCard + 1;

  if (currentCard > cardsArr.length - 1) currentCard = cardsArr.length - 1;

  cardsArr[currentCard].className = "card active";

  updateText();
});

prevBtn.addEventListener("click", () => {
  cardsArr[currentCard].className = "card right";

  currentCard = currentCard - 1;

  if (currentCard < 0) {
    currentCard = 0;
  }

  cardsArr[currentCard].className = "card active";

  updateText();
});

showBtn.addEventListener("click", () => form.classList.add("show"));

closeBtn.addEventListener("click", () => form.classList.remove("show"));

addBtn.addEventListener("click", () => {
  const q = question.value;
  const a = answer.value;

  if (q.trim() && a.trim()) {
    const c = { q, a };

    createCard(c);

    question.value = "";
    answer.value = "";

    form.classList.remove("show");

    cardsData.push(c);

    localStorage.setItem("cards", JSON.stringify(cardsData));
  }
});

clearBtn.addEventListener("click", () => {
  localStorage.clear();
  cardsBox.innerHTML = "";
  location.reload();
});
Run Pen

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.