115 lines
3.8 KiB
JavaScript
115 lines
3.8 KiB
JavaScript
const cards = [
|
|
{
|
|
themes: ["Lorem", "Theme1"],
|
|
title: "Lorem ipsum dolor sit.",
|
|
describe:
|
|
"Lorem ipsum dolor sit amet consectetur adlores quos autem est aut, animi numquam fugiatvoluptatem, vero vel, magni expedita aliquid. Tempore vel quastenetur ipsa at ab?",
|
|
time: "20:00 - 22:00",
|
|
date: "05 Нояб 2022",
|
|
},
|
|
{
|
|
themes: ["Lorem", "Theme2"],
|
|
title: "Lorem ipsum dolor sit.",
|
|
describe:
|
|
"Lorem ipsum dolor sit amet consectetur adlores quos autem est aut, animi numquam fugiatvoluptatem, vero vel, magni expedita aliquid. Tempore vel quastenetur ipsa at ab?",
|
|
time: "20:00 - 22:00",
|
|
date: "05 Нояб 2022",
|
|
},
|
|
{
|
|
themes: ["Theme1"],
|
|
title: "Lorem ipsum dolor sit.",
|
|
describe:
|
|
"Lorem ipsum dolor sit amet consectetur adlores quos autem est aut, animi numquam fugiatvoluptatem, vero vel, magni expedita aliquid. Tempore vel quastenetur ipsa at ab?",
|
|
time: "20:00 - 22:00",
|
|
date: "05 Нояб 2022",
|
|
},
|
|
{
|
|
themes: ["Lorem", "Theme1", "Theme2"],
|
|
title: "Lorem ipsum dolor sit.",
|
|
describe:
|
|
"Lorem ipsum dolor sit amet consectetur adlores quos autem est aut, a",
|
|
time: "20:00 - 22:00",
|
|
date: "05 Нояб 2022",
|
|
},
|
|
{
|
|
themes: ["Lorem", "Theme1"],
|
|
title: "Lorem ipsum dolor sit.",
|
|
describe:
|
|
"Lorem ipsum dolor sit amet consectetur adlores quos autem est aut, animi numquam fugiatvoluptatem, vero vel, magni expedita aliquid. Tempore vel quastenetur ipsa at ab?",
|
|
time: "20:00 - 22:00",
|
|
date: "05 Нояб 2022",
|
|
},
|
|
{
|
|
themes: ["Lorem", "Theme1"],
|
|
title: "Lorem ipsum dolor sit.",
|
|
describe:
|
|
"Lorem ipsum dolor sit amet consectetur adlores quos autem est aut, animi numquam fugiatvoluptatem, vero vel, magni expedita aliquid. Tempore vel quastenetur ipsa at ab?",
|
|
time: "20:00 - 22:00",
|
|
date: "05 Нояб 2022",
|
|
},
|
|
{
|
|
themes: ["Lorem", "Theme1"],
|
|
title: "Lorem ipsum dolor sit.",
|
|
describe:
|
|
"Lorem ipsum dolor sit amet consectetur adlores quos autem est aut, animi numquam fugiatvoluptatem, vero vel, magni expedita aliquid. Tempore vel quastenetur ipsa at ab?",
|
|
time: "20:00 - 22:00",
|
|
date: "05 Нояб 2022",
|
|
},
|
|
{
|
|
themes: ["Lorem", "Theme1"],
|
|
title: "Lorem ipsum dolor sit.",
|
|
describe:
|
|
"Lorem ipsum dolor sit amet consectetur adlores quos autem est aut, animi numquam fugiatvoluptatem, vero vel, magni expedita aliquid. Tempore vel quastenetur ipsa at ab?",
|
|
time: "20:00 - 22:00",
|
|
date: "05 Нояб 2022",
|
|
},
|
|
];
|
|
|
|
const navigationItems = document.querySelectorAll(".nav__item");
|
|
|
|
navigationItems.forEach((item) => {
|
|
item.onclick = (elem) => {
|
|
elem.preventDefault();
|
|
|
|
navigationItems.forEach((item2) =>
|
|
item2.classList.remove("nav__item_active")
|
|
);
|
|
|
|
!item.classList.contains("nav__item_active") &&
|
|
item.classList.add("nav__item_active");
|
|
};
|
|
});
|
|
|
|
/* function createThemes(card) {
|
|
const ul = document.createElement("ul");
|
|
ul.className = "themes";
|
|
card.themes.forEach((theme) => {
|
|
ul.innerHTML = `<li class="themes__name">Lorem</li>`;
|
|
document.ul.append();
|
|
});
|
|
} */
|
|
|
|
cards.forEach((card, index) => {
|
|
const div = document.createElement("div");
|
|
div.className = "card";
|
|
div.innerHTML = `
|
|
<img class="card__image" src="/images/house.jpg" alt="card-image" />
|
|
<ul class="themes">
|
|
${card.themes.map((theme) => {
|
|
return `<li class="themes__name">${theme}</li>`;
|
|
})}
|
|
</ul>
|
|
<p class="card__title">${card.title}</p>
|
|
<p class="card__describe">
|
|
${card.describe}<a href="#" class="more">См. подробнее...</a>
|
|
</p>
|
|
<div class="card-inf">
|
|
<p class="card-inf__item time">${card.time}</p>
|
|
<p class="card-inf__item date">${card.date}</p>
|
|
</div>
|
|
<button class="subscribe">Записаться</button>
|
|
`;
|
|
|
|
document.querySelector(".cards").append(div);
|
|
});
|