Добавить изображение карты в список при нажатии на изображение карты ⇐ Javascript

[Anonymous]

Я пытаюсь создать строитель палубы, где пользователь может нажать на карту, и он добавляет соответствующую карту карты в список палубы на стороне в другом контейнере. Является ли этот подход, который у меня есть ниже правильного направления и хорошего начала, или я должен посмотреть на другое решение? Прямо сейчас, когда я нажимаю «Добавить», он добавит только одну из карт. В конце концов я хочу отслеживать, какие карты находятся в списке, и количество. Я также хочу включить GSAP, чтобы анимировать карт-каркас, перемещающийся в контейнер списка. < /P>




ADD!

ADD!

















function addItem() {
const node = document.querySelector(".card-body");
const clone = node.cloneNode(true);
document.getElementById("box").appendChild(clone);
}



.container {
display: grid;
grid-template-columns: 250px 250px 300px;
grid-column-gap: 10px;
grid-row-gap: 10px;

}

.card-image {
background-color: rgb(223, 223, 223);
padding: 10px;
border: 2px solid #b60606;
}

.card-frame {
background-color: rgb(204, 204, 204);
padding: 20px;
border: 2px solid #000000;
object-fit: cover;
}

.card-image img {
background-color: #b60606;
padding: 10px;
border: 2px solid #ddd;
height: 300px;
}

.card-frame img{
height: 50px;
padding: 0px 0px 20px 0px;
}

.card-body img {
height: 50px;
padding: 0px 0px 10px 0px;
}


Подробнее здесь: https://stackoverflow.com/questions/795 ... card-image