<h1>Cards</h1>
<button id="cards">New card</button>
<br>
<div class = "card hidden">
  <p>I swim in a pool</p>
  <p>I am swimming in a pool</p>
  <p>I have swum in a pool</p>
</div>
<div class = "card hidden">
  <p>I walk along the river</p>
  <p>I am walking along the river</p>
  <p>I have walked along the river</p>
</div>
<div class = "card hidden">
  <p>I wait for you</p>
  <p>I am waiting for you</p>
  <p>I have waited for you</p>
</div>
<div class = "card hidden">
  <p>I look at the cat</p>
  <p>I am looking at the cat</p>
  <p>I have looked at the cat</p>
</div>
<div class = "card hidden">
  <p>I enter by the door</p>
  <p>I am entering by the door</p>
  <p>I have entered by the door</p>
</div>
<div class = "card hidden">
  <p>I show it</p>
  <p>I am showing it</p>
  <p>I have showed it</p>
</div>
<div class = "card hidden">
  <p>I read a book</p>
  <p>I am reading a book</p>
  <p>I have read a book</p>
</div>
<div class = "card hidden">
  <p>I run fast</p>
  <p>I am running fast</p>
  <p>I have run fast</p>
</div>
<div class = "card hidden">
  <p>I eat </p>
  <p>I am eating</p>
  <p>I have eaten</p>
</div>
<div class = "Card hidden">
  <p>I write it</p>
  <p>I am writing it</p>
  <p>I have written it</p>
</div>
<div class = "Card hidden">
  <p>I went to the park</p>
  <p>I was going to the park</p>
  <p>I have gone to the park</p>
</div>
<div class = "Card hidden">
  <p>I ate a pizza</p>
  <p>I was eating a pizza</p>
  <p>I have eaten the pizza</p>
</div>

p {
  margin: 0;
}

.card {
  background-color: #98FB98;
  width: 200px;
  height: 60px;
  border: 1px solid black;
  border-radius: 5px;
  float: right;
  padding: 0.5em;
  margin: 2px;
}

.hidden {
  display: none;
}

document
  .getElementById('cards')
  .addEventListener(
    'click',
    e => {
      const cards = document.querySelectorAll('.card.hidden')
      const hiddenCard = document.querySelector('.card:not(.hidden)')
      if (hiddenCard !== null) {
        hiddenCard.classList.add('hidden')
      }
      const rnd = Math.floor(Math.random() * cards.length)
  cards[rnd].classList.remove('hidden')
    }
  )