Не могу заставить мои карты перевернуться с помощью Vanilla JS, CSS и HTML с помощью CSS-анимации - PullRequest
Новая
       15

Не могу заставить мои карты перевернуться с помощью Vanilla JS, CSS и HTML с помощью CSS-анимации

0 голосов
/ 03 мая 2019

Я пытаюсь создать простое приложение на основе флэш-карт, используя примеры, которые вы видите во многих онлайн-кодах. Я ввожу базу данных карт из Rails и хочу отобразить все карты на странице для переворачивания.

Прямо сейчас я могу заставить все карты загружаться с данными, но они не переворачиваются. Я думаю, что что-то не так с тем, как я пытаюсь добавить все карты в EventListener 'click', используя querySelectorAll и classItems.toggle.

Вот код:

HTML 

<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="src/style.css">
  <!-- Compiled and minified CSS -->
  <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> -->

  <title>CrashCard</title>
</head>

<body>
  <header>
    <h1 style="text-align: center">Crash Card</h1>
  </header>

  <form class="ui form" id="form">
    <div class="field">
      <label>Card Front</label>
      <input type="text" name="card-front" placeholder="Card Front" id="card-front" value="">
    </div>
    <div class="field">
      <label>Card Back</label>
      <input type="text" name="card-back" placeholder="Card Back" id="card-back" value="">
    </div>
    <div class="field">
    </div>
    </div>
    <button class="ui button" type="submit">Submit</button>
  </form>

  <div class="container" id="card-container">

  </div>



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

</html>

CSS: 


body { font-family: sans-serif; }

.scene {
  width: 200px;
  height: 260px;
  border: 1px solid #CCC;
  margin: 40px 0;
  perspective: 600px;
}

.card {
  position: relative;
  width: 100%;
  height: 100%;
  cursor: pointer;
  transform-style: preserve-3d;
  transform-origin: center right;
  transition: transform 1s;
}

.card.is-flipped {
  transform: translateX(-100%) rotateY(-180deg);
}

.card__face {
  position: absolute;
  width: 100%;
  height: 100%;
  line-height: 260px;
  color: white;
  text-align: center;
  font-weight: bold;
  font-size: 40px;
  backface-visibility: hidden;
}

.card__face--front {
  background: black;
}

.card__face--back {
  background: rgb(227, 230, 236);
  transform: rotateY(180deg);
}

Javascript: 

document.addEventListener('DOMContentLoaded', () => {
    console.log("DOM is loaded");


    let allFlashcards = [];
    let cardToggle = false

        const form = document.getElementById('form')
        const cardContainer = document.getElementById('card-container')



    // fetch all cards

    const fetchCards = () => {
        fetch('http://localhost:9000/api/v1/flashcards')
            .then(res => res.json())
            .then(flashcards => {
                allFlashcards = flashcards
                getFlashcards()
            });
    }


    // flip action 

    const getFlashcards = () => {
        return allFlashcards.map(c => {
            return cardContainer.innerHTML += `
            <div class="scene scene--card">
             <div class="card">
                <div class="card__face card__face--front">${c.body_front}</div>
                <div class="card__face card__face--back">${c.body_back}</div>
             </div>
            </div>
            <br />   
            `
        })
    };

    // listen for card click

    const cards = document.querySelectorAll('.card');
        cards.forEach(c => c.addEventListener("click",  () => c.classList.toggle('is-flipped')))


    // create new card form 

    form.addEventListener('submit', (e) => {
        e.preventDefault();
        const cardFront = document.getElementById('card-front').value
        const cardBack = document.getElementById('card-back').value
        fetch('http://localhost:9000/api/v1/flashcards', {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
                "Accept": "application/json"
            },
            body: JSON.stringify({
                body_front: cardFront,
                body_back: cardBack
            })
        }).then(res => res.json())
            .then(newCard => {
                allFlashcards.push(newCard)

            })
    });

    fetchCards()

}); // end DOMContentLoaded

Мне нужно, чтобы карты переворачивались по одной. Нужно ли делать сравнение с набором данных? Или этой CSS-анимации будет достаточно, чтобы узнать, какая карта нажата.

...