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

fix bugs

Browse Source
This commit is contained in:
Maksim Tananykin
2022-10-18 20:54:06 +03:00
parent 134f3dcf92
commit bfa5fa5ed7
6 changed files with 142 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

146
script.js
View File

@@ -115,8 +115,11 @@ const cards = [
const navigationItems = document.querySelectorAll(".nav__item");
const url = window.location.pathname;
const width = window.innerWidth;
let subscribe;
console.log(width);
navigationItems.forEach((item) => {
item.onclick = (elem) => {
elem.preventDefault();
@@ -130,96 +133,55 @@ navigationItems.forEach((item) => {
};
});
const cardsToShow =
url === "/" || url === "/index.html" ? cards : cards.slice(0, 4);
cardsToShow.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
} <button value=${index} class="more">См. подробнее...</button>
</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 value=${index} class="subscribe">Записаться</button>
`;
document.querySelector(".cards").append(div);
});
subscribe = [
...document.querySelectorAll(".subscribe"),
...document.querySelectorAll(".more"),
];
subscribe.forEach((el) => {
el.addEventListener("click", () => {
console.log(el.value);
localStorage.setItem("card", JSON.stringify(cards[el.value]));
location.href = "about.html";
});
});
if (url === "/about.html") {
const cardFromStorage = JSON.parse(localStorage.getItem("card"));
const div = document.createElement("div");
div.innerHTML = `
<p class="about__title">
${cardFromStorage.describe}
</p>
<div class="about-more">
<img
src="./images/house.jpg"
alt="card-image"
class="about__image"
/>
<div class="about-text">
<p class="text">
${cardFromStorage.fullDescription}
</p>
<p class="card-inf__item date">${cardFromStorage.date}</p>
<p class="card-inf__item time">${cardFromStorage.time}</p>
<p class="card-inf__item people">до ${cardFromStorage.people}</p>
<button class="enroll">Записаться</button>
</div>
</div>
`;
const div2 = document.createElement("div");
div2.innerHTML = `
<div class="card-description">
<p class="card-description__header">Тема:</p>
<p class="card-description__text">
${cardFromStorage.describe}
</p>
</div>
<div class="card-description">
<p class="card-description__header">Для кого:</p>
<p class="card-description__text">
${cardFromStorage.forWhome}
</p>
</div>
<div class="card-description">
<p class="card-description__header">Описание:</p>
<p class="card-description__text last">
${cardFromStorage.fullDescription}
</p>
</div>
`;
document.querySelector(".about-card").append(div);
document.querySelector(".about-card").after(div2);
function fillMainPage() {
setCards(cards);
}
function setCards(cards) {
cards.forEach((card, index) => {
const div = document.createElement("div");
div.className = "card";
div.innerHTML = `
<div class='${
(width <= 1024 && index % 2 === 0) || (width > 1024 && index % 4 === 0)
? "card-inner extreme"
: "card-inner"
}'>
<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
} <button value=${index} class="more">См. подробнее...</button>
</p>
<div class="card-inf">
<p class="card-inf__item time">${card.time}</p>
<p class="card-inf__item date">${card.date}</p>
</div>
</div>
<div class="buttow-wrapper">
<button value=${index} class="subscribe">Записаться</button>
</div>
`;
document.querySelector(".cards").append(div);
});
subscribe = [
...document.querySelectorAll(".subscribe"),
...document.querySelectorAll(".more"),
];
subscribe.forEach((el) => {
el.addEventListener("click", () => {
console.log(el.value);
localStorage.setItem("card", JSON.stringify(cards[el.value]));
location.href = "about.html";
});
});
}