maksim.tananikin/a3-global
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add main page

Browse Source
This commit is contained in:
Maksim Tananykin
2022-10-16 16:41:47 +03:00
parent f74db3e013
commit ceeb5b14a2
8 changed files with 606 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

102
script.js
View File

@@ -1,7 +1,76 @@
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")
);
@@ -10,3 +79,36 @@ navigationItems.forEach((item) => {
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);
});