БЛОГ НА HUSL


Как отрисовать добавить карточки товаров с помощью js или ts? Надо создавать карточки динамически

Автор вопроса: Vitaliy Mironov 

'use strict'
function app () {
   const buttons = document.querySelectorAll ('.button');
   const cards = document.querySelectorAll ('.card');

   function filter (category, items) {
      items.forEach((item) => {
         const isItemFiltered = !item.classList.contains (category);
         const isShowAll = category.toLowerCase () === 'all';
         if (isItemFiltered && !isShowAll) {
            item.classList.add ('hide');            
         } else {            
            item.classList.remove ('hide');
            item.classList.remove ('hidden');
         };
      });
   }
   buttons.forEach ((button) => {
      button.addEventListener ('click', () => {
         const currentCategory = button.dataset.btn;
         filter (currentCategory, cards);
      });
   });
   cards.forEach ((card) => {
      card.ontransitionend = function () {
         if (card.classList.contains ('hide')) {
            card.classList.add ('hidden');
         }
      }
   })
}
app ()
body {
  font-family: Arial, Helvetica, sans-serif;
}

header {
  margin: 0 auto;
  padding: 1%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  text-align: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
header .header__title {
  display: inline-block;
  width: 100%;
  margin: 1.5% auto;
  font-size: 2.5rem;
  letter-spacing: 1.5px;
  color: chocolate;
  text-shadow: 1px 1px 2px black;
}
header .header__title hr {
  width: 100px;
  height: 3px;
  margin: 10px auto;
  background-color: chocolate;
}
header .header__nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
header .header__nav .nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  width: 100%;
  margin: 0 auto;
  -ms-flex-line-pack: center;
      align-content: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-column-gap: 40px;
     -moz-column-gap: 40px;
          column-gap: 40px;
  font-size: 1.5rem;
  letter-spacing: 1.5px;
  color: lightskyblue;
  text-shadow: 1px 1px 2px black;
  cursor: pointer;
}
header .header__nav .nav li {
  width: 200px;
  height: 35px;
  padding: 5px;
}
header .header__nav .nav li:active {
  color: red;
}
header .header__nav .nav li:hover {
  text-decoration: underline;
  text-shadow: 1px 1px 3px blue;
  -webkit-transform: scaleX(1.1);
          transform: scaleX(1.1);
  display: inline-block;
  -webkit-box-shadow: 1px 1px 10px chocolate;
          box-shadow: 1px 1px 10px chocolate;
}

.content {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin: 10px;
  padding: 10px;
}
.content .card {
  min-width: 420px;
  min-height: 160px;
  margin: 20px;
  padding: 10px;
  -webkit-transition: all 2s ease-in-out;
  transition: all 2s ease-in-out;
}
.content .card:hover {
  cursor: pointer;
  -webkit-transform: scale(1.02);
          transform: scale(1.02);
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  -webkit-box-shadow: 1px 1px 10px chocolate;
          box-shadow: 1px 1px 10px chocolate;
}
.content .card img {
  width: 180px;
  -webkit-box-shadow: 1px 1px 1px chocolate;
          box-shadow: 1px 1px 1px chocolate;
  border: 1px solid chocolate;
  border-radius: 10px;
  display: inline-block;
}
.content .card .card__body {
  display: inline-block;
  margin-left: 10px;
  width: 200px;
  height: 30px;
  color: grey;
  font-size: 1.1rem;
}
.content .card .card__body .card__top {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  font-weight: bold;
  color: chocolate;
}
.content .card .card__body .card__top span:first-child {
  color: black;
  letter-spacing: 1px;
  opacity: 0.6;
  font-size: 1.1rem;
}
.content .card .card__body .discription__text {
  display: inline-block;
  margin-top: 5px;
  padding-top: 20px;
  width: 200px;
  height: 100px;
  border-top: 0.5px dotted grey;
  font-size: 1.2rem;
  letter-spacing: 0.8px;
  opacity: 0.8;
}

.hide {
  opacity: 0;
  -webkit-transform: scale(0);
          transform: scale(0);
  max-width: 0;
  max-height: 0;
  margin: 0;
  padding: 0;
  visibility: hidden;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.hidden {
  display: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Task 2.2</title>
    <link rel="stylesheet" href="./css/null.css">
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>
    <header>
        <div class="header__title">
            <h1>Our menu</h1>
            <hr>
        </div>
        <nav class="header__nav">
            <ul class="nav">
                <li data-btn="all" class="all button"><span>All</span></li>
                <li data-btn="card__breakfast" class="card__breakfast button"><span>Breakfast</span></li>
                <li data-btn="card__lunch" class="card__lunch button"><span>lunch</span></li>
                <li data-btn="card__dinner" class="card__dinner button"><span>Dinner</span></li>
                <li data-btn="card__shakes" class="card__shakes button"><span>Shakes</span></li>
            </ul>
        </nav>
    </header>
    <section class="content">
        <div class="card__breakfast card">
            <img src="./img/breakfast_1.png" alt="">
            <div class="card__body">
                <div class="card__top">
                    <span class="name">Breacfast</span>
                    <span class="prise">$140.00</span>
                </div>
                <div class="discription__text">
                    <span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem nostrum excepturi esse</span>                
                </div>
            </div>  
        </div>
        <div class="card__lunch card">
            <img src="./img/lunch_1.jpg" alt="">
            <div class="card__body">
                <div class="card__top">
                    <span class="name">Lunch</span>
                    <span class="prise">$180.00</span>
                </div>
                <div class="discription__text">
                    <span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem nostrum excepturi esse</span>                
                </div>
            </div>  
        </div>
        <div class="card__dinner card">
            <img src="./img/dinner_1.jpg" alt="">
            <div class="card__body">
                <div class="card__top">
                    <span class="name">Dinner</span>
                    <span class="prise">$120.00</span>
                </div>
                <div class="discription__text">
                    <span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem nostrum excepturi esse</span>                
                </div>
            </div>  
        </div>
        <div class="card__shakes card">
            <img src="./img/shakes_1.jpg" alt="">
            <div class="card__body">
                <div class="card__top">
                    <span class="name">Shakes</span>
                    <span class="prise">$14.00</span>
                </div>
                <div class="discription__text">
                    <span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem nostrum excepturi esse</span>                
                </div>
            </div>  
        </div>
        <div class="card__breakfast card">
            <img src="./img/breakfast_1.png" alt="">
            <div class="card__body">
                <div class="card__top">
                    <span class="name">Breacfast</span>
                    <span class="prise">$140.00</span>
                </div>
                <div class="discription__text">
                    <span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem nostrum excepturi esse</span>                
                </div>
            </div>  
        </div>
        <div class="card__lunch card">
            <img src="./img/lunch_1.jpg" alt="">
            <div class="card__body">
                <div class="card__top">
                    <span class="name">Lunch</span>
                    <span class="prise">$180.00</span>
                </div>
                <div class="discription__text">
                    <span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem nostrum excepturi esse</span>                
                </div>
            </div>  
        </div>
        <div class="card__dinner card">
            <img src="./img/dinner_1.jpg" alt="">
            <div class="card__body">
                <div class="card__top">
                    <span class="name">Dinner</span>
                    <span class="prise">$120.00</span>
                </div>
                <div class="discription__text">
                    <span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem nostrum excepturi esse</span>                
                </div>
            </div>  
        </div>
        <div class="card__shakes card">
            <img src="./img/shakes_1.jpg" alt="">
            <div class="card__body">
                <div class="card__top">
                    <span class="name">Shakes</span>
                    <span class="prise">$14.00</span>
                </div>
                <div class="discription__text">
                    <span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem nostrum excepturi esse</span>                
                </div>
            </div>  
        </div>
        <div class="card__breakfast card">
            <img src="./img/breakfast_1.png" alt="">
            <div class="card__body">
                <div class="card__top">
                    <span class="name">Breacfast</span>
                    <span class="prise">$140.00</span>
                </div>
                <div class="discription__text">
                    <span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem nostrum excepturi esse</span>                
                </div>
            </div>  
        </div>
        <div class="card__lunch card">
            <img src="./img/lunch_1.jpg" alt="">
            <div class="card__body">
                <div class="card__top">
                    <span class="name">Lunch</span>
                    <span class="prise">$180.00</span>
                </div>
                <div class="discription__text">
                    <span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem nostrum excepturi esse</span>                
                </div>
            </div>  
        </div>
        <div class="card__dinner card">
            <img src="./img/dinner_1.jpg" alt="">
            <div class="card__body">
                <div class="card__top">
                    <span class="name">Dinner</span>
                    <span class="prise">$120.00</span>
                </div>
                <div class="discription__text">
                    <span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem nostrum excepturi esse</span>                
                </div>
            </div>  
        </div>
        <div class="card__shakes card">
            <img src="./img/shakes_1.jpg" alt="">
            <div class="card__body">
                <div class="card__top">
                    <span class="name">Shakes</span>
                    <span class="prise">$14.00</span>
                </div>
                <div class="discription__text">
                    <span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem nostrum excepturi esse</span>                
                </div>
            </div>  
        </div>
        <div class="card__breakfast card">
            <img src="./img/breakfast_1.png" alt="">
            <div class="card__body">
                <div class="card__top">
                    <span class="name">Breacfast</span>
                    <span class="prise">$140.00</span>
                </div>
                <div class="discription__text">
                    <span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem nostrum excepturi esse</span>                
                </div>
            </div>  
        </div>
        <div class="card__lunch card">
            <img src="./img/lunch_1.jpg" alt="">
            <div class="card__body">
                <div class="card__top">
                    <span class="name">Lunch</span>
                    <span class="prise">$180.00</span>
                </div>
                <div class="discription__text">
                    <span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem nostrum excepturi esse</span>                
                </div>
            </div>  
        </div>
        <div class="card__dinner card">
            <img src="./img/dinner_1.jpg" alt="">
            <div class="card__body">
                <div class="card__top">
                    <span class="name">Dinner</span>
                    <span class="prise">$120.00</span>
                </div>
                <div class="discription__text">
                    <span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem nostrum excepturi esse</span>                
                </div>
            </div>  
        </div>
        <div class="card__shakes card">
            <img src="./img/shakes_1.jpg" alt="">
            <div class="card__body">
                <div class="card__top">
                    <span class="name">Shakes</span>
                    <span class="prise">$14.00</span>
                </div>
                <div class="discription__text">
                    <span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem nostrum excepturi esse</span>                
                </div>
            </div>  
        </div>
        <div class="card__breakfast card">
            <img src="./img/breakfast_1.png" alt="">
            <div class="card__body">
                <div class="card__top">
                    <span class="name">Breacfast</span>
                    <span class="prise">$140.00</span>
                </div>
                <div class="discription__text">
                    <span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem nostrum excepturi esse</span>                
                </div>
            </div>  
        </div>
        <div class="card__lunch card">
            <img src="./img/lunch_1.jpg" alt="">
            <div class="card__body">
                <div class="card__top">
                    <span class="name">Lunch</span>
                    <span class="prise">$180.00</span>
                </div>
                <div class="discription__text">
                    <span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem nostrum excepturi esse</span>                
                </div>
            </div>  
        </div>
        <div class="card__dinner card">
            <img src="./img/dinner_1.jpg" alt="">
            <div class="card__body">
                <div class="card__top">
                    <span class="name">Dinner</span>
                    <span class="prise">$120.00</span>
                </div>
                <div class="discription__text">
                    <span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem nostrum excepturi esse</span>                
                </div>
            </div>  
        </div>
        <div class="card__shakes card">
            <img src="./img/shakes_1.jpg" alt="">
            <div class="card__body">
                <div class="card__top">
                    <span class="name">Shakes</span>
                    <span class="prise">$14.00</span>
                </div>
                <div class="discription__text">
                    <span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem nostrum excepturi esse</span>                
                </div>
            </div>  
        </div>
    </section>
    <script src="./JS/main.js"></script>
</body>
</html>


Источник

Ответы (1 шт):

Автор решения: Александр Сычёв

Если я правильно понял, то Вам нужно создать например массив объектов, потом его перебрать и сформировать карточку и вывести ее на экран, например так

const menuItem = [
    {
        'id' : 1,
        'header' : 'Breacfast',
        'title' : 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem nostrum excepturi esse',
        'price' : 140,
    },
    {
        'id' : 2,
        'header' : 'Breacfast',
        'title' : 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem nostrum excepturi esse',
        'price' : 240,
    },
    {
        'id' : 3,
        'header' : 'Lunch',
        'title' : 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem nostrum excepturi esse',
        'price' : 140,
    }
]

let cardItem = ''

let out = document.getElementById('out')
menuItem.forEach ((menu) => {
    cardItem +=
    `

    <div style="border:2px solid #ccc;width: 300px">
    <p>${menu.header}</p>
    <p>${menu.title}</p>
    <p>${menu.price} <span>$</span></p>
    <a href="${menu.id}">Перейти</a>
    </div>

    `
})
out.insertAdjacentHTML('afterbegin', cardItem);
    <section class="content" id = "out">
        
    </section>

→ Ссылка

licensed under cc by-sa 3.0 with attribution.