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

3
about.html
View File

@@ -7,7 +7,7 @@
<link rel="stylesheet" href="css/style.css" /> <link rel="stylesheet" href="css/style.css" />
<title>About Course</title> <title>About Course</title>
</head> </head>
<body> <body onload="fillAboutPage()">
<div class="wrapper"> <div class="wrapper">
<header> <header>
<div class="container header"> <div class="container header">
@@ -102,5 +102,6 @@
</footer> </footer>
</div> </div>
<script src="script.js"></script> <script src="script.js"></script>
<script src="scriptAbout.js"></script>
</body> </body>
</html> </html>

18
css/style.css
View File

@@ -192,9 +192,8 @@ main {
.cards { .cards {
display: grid; display: grid;
grid-template-columns: repeat(4, 23.7%); grid-template-columns: repeat(4, 25%);
margin-bottom: 40px; margin: 0 -10px 20px;
grid-column-gap: 20px;
} }
.card { .card {
@@ -202,6 +201,13 @@ main {
font-size: 12px; font-size: 12px;
margin: 15px 0; margin: 15px 0;
} }
.card-inner {
padding: 0 10px;
border-left: 1px solid rgba(255, 166, 0, 0.566);
}
.card-inner.extreme {
border-left: none;
}
.card__image { .card__image {
width: 100%; width: 100%;
} }
@@ -233,6 +239,9 @@ main {
.card-inf .date::before { .card-inf .date::before {
content: url("../icons/calendar2.svg"); content: url("../icons/calendar2.svg");
} }
.card .buttow-wrapper {
margin: 0 10px;
}
.card .subscribe { .card .subscribe {
display: inline-block; display: inline-block;
width: 100%; width: 100%;
@@ -426,8 +435,7 @@ footer {
@media (max-width: 1024px) { @media (max-width: 1024px) {
.cards { .cards {
grid-template-columns: repeat(2, 49%); grid-template-columns: repeat(2, 50%);
grid-column-gap: 20px;
} }
.about-more { .about-more {
flex-direction: column; flex-direction: column;

2
index.html
View File

@@ -7,7 +7,7 @@
<link rel="stylesheet" href="css/style.css" /> <link rel="stylesheet" href="css/style.css" />
<title>Courses</title> <title>Courses</title>
</head> </head>
<body> <body onload="fillMainPage()">
<div class="wrapper"> <div class="wrapper">
<header> <header>
<div class="container header"> <div class="container header">

146
script.js
View File

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

53
scriptAbout.js
View File

@@ -0,0 +1,53 @@
function fillAboutPage() {
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);
setCards(cards.slice(0, 4));
}

27
style.scss
View File

@@ -193,9 +193,8 @@ main {
.cards { .cards {
display: grid; display: grid;
grid-template-columns: repeat(4, 23.7%); grid-template-columns: repeat(4, 25%);
margin-bottom: 40px; margin: 0 -10px 20px;
grid-column-gap: 20px;
} }
.card { .card {
@@ -203,6 +202,15 @@ main {
font-size: 12px; font-size: 12px;
margin: 15px 0; margin: 15px 0;
&-inner {
padding: 0 10px;
border-left: 1px solid rgba(255, 166, 0, 0.566);
}
&-inner.extreme{
border-left: none;
}
&__image { &__image {
width: 100%; width: 100%;
} }
@@ -243,6 +251,10 @@ main {
} }
} }
.buttow-wrapper{
margin: 0 10px;
}
.subscribe { .subscribe {
display: inline-block; display: inline-block;
width: 100%; width: 100%;
@@ -467,8 +479,7 @@ footer {
@media (max-width: 1024px) { @media (max-width: 1024px) {
.cards { .cards {
grid-template-columns: repeat(2, 49%); grid-template-columns: repeat(2, 50%);
grid-column-gap: 20px;
} }
.about { .about {
@@ -577,20 +588,20 @@ footer {
} }
@media (max-width: 460px) { @media (max-width: 460px) {
.card{ .card {
&__describe { &__describe {
min-height: 120px; min-height: 120px;
} }
&-inf__item { &-inf__item {
font-size: 8px; font-size: 8px;
&::before { &::before {
top: -2px; top: -2px;
} }
} }
&-description{ &-description {
display: block; display: block;
} }
} }