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">

70
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,13 +133,20 @@ navigationItems.forEach((item) => {
}; };
}); });
const cardsToShow = function fillMainPage() {
url === "/" || url === "/index.html" ? cards : cards.slice(0, 4); setCards(cards);
}
cardsToShow.forEach((card, index) => { function setCards(cards) {
cards.forEach((card, index) => {
const div = document.createElement("div"); const div = document.createElement("div");
div.className = "card"; div.className = "card";
div.innerHTML = ` 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" /> <img class="card__image" src="/images/house.jpg" alt="card-image" />
<ul class="themes"> <ul class="themes">
${card.themes.map((theme) => { ${card.themes.map((theme) => {
@@ -153,7 +163,10 @@ cardsToShow.forEach((card, index) => {
<p class="card-inf__item time">${card.time}</p> <p class="card-inf__item time">${card.time}</p>
<p class="card-inf__item date">${card.date}</p> <p class="card-inf__item date">${card.date}</p>
</div> </div>
</div>
<div class="buttow-wrapper">
<button value=${index} class="subscribe">Записаться</button> <button value=${index} class="subscribe">Записаться</button>
</div>
`; `;
document.querySelector(".cards").append(div); document.querySelector(".cards").append(div);
@@ -171,55 +184,4 @@ subscribe.forEach((el) => {
location.href = "about.html"; 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);
} }

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));
}

21
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 {