From bfa5fa5ed7cbb8a91c0304923bcdf6c9ed51a26c Mon Sep 17 00:00:00 2001 From: Maksim Tananykin Date: Tue, 18 Oct 2022 20:54:06 +0300 Subject: [PATCH] fix bugs --- about.html | 3 +- css/style.css | 18 ++++-- index.html | 2 +- script.js | 146 ++++++++++++++++++------------------------------- scriptAbout.js | 53 ++++++++++++++++++ style.scss | 27 ++++++--- 6 files changed, 142 insertions(+), 107 deletions(-) diff --git a/about.html b/about.html index a45bfbe..d486848 100644 --- a/about.html +++ b/about.html @@ -7,7 +7,7 @@ About Course - +
@@ -102,5 +102,6 @@
+ diff --git a/css/style.css b/css/style.css index b9e424b..2ec54a7 100644 --- a/css/style.css +++ b/css/style.css @@ -192,9 +192,8 @@ main { .cards { display: grid; - grid-template-columns: repeat(4, 23.7%); - margin-bottom: 40px; - grid-column-gap: 20px; + grid-template-columns: repeat(4, 25%); + margin: 0 -10px 20px; } .card { @@ -202,6 +201,13 @@ main { font-size: 12px; 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 { width: 100%; } @@ -233,6 +239,9 @@ main { .card-inf .date::before { content: url("../icons/calendar2.svg"); } +.card .buttow-wrapper { + margin: 0 10px; +} .card .subscribe { display: inline-block; width: 100%; @@ -426,8 +435,7 @@ footer { @media (max-width: 1024px) { .cards { - grid-template-columns: repeat(2, 49%); - grid-column-gap: 20px; + grid-template-columns: repeat(2, 50%); } .about-more { flex-direction: column; diff --git a/index.html b/index.html index 3aacfc0..589f44c 100644 --- a/index.html +++ b/index.html @@ -7,7 +7,7 @@ Courses - +
diff --git a/script.js b/script.js index 3730571..bf214c1 100644 --- a/script.js +++ b/script.js @@ -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 = ` - card-image -
    - ${card.themes.map((theme) => { - return `
  • ${theme}
    • `; - })} -
-

${card.title}

-

- ${ - card.describe - } -

-
-

${card.time}

-

${card.date}

-
- - `; - - 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 = ` -

- ${cardFromStorage.describe} -

-
- card-image -
-

- ${cardFromStorage.fullDescription} -

-

${cardFromStorage.date}

-

${cardFromStorage.time}

-

до ${cardFromStorage.people}

- -
-
- `; - - const div2 = document.createElement("div"); - div2.innerHTML = ` -
-

Тема:

-

- ${cardFromStorage.describe} -

-
-
-

Для кого:

-

- ${cardFromStorage.forWhome} -

-
-
-

Описание:

-

- ${cardFromStorage.fullDescription} -

-
- `; - - 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 = ` +
+ card-image +
    + ${card.themes.map((theme) => { + return `
  • ${theme}
    • `; + })} +
+

${card.title}

+

+ ${ + card.describe + } +

+
+

${card.time}

+

${card.date}

+
+
+
+ +
+ `; + + 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"; + }); + }); } diff --git a/scriptAbout.js b/scriptAbout.js index e69de29..cbb079a 100644 --- a/scriptAbout.js +++ b/scriptAbout.js @@ -0,0 +1,53 @@ +function fillAboutPage() { + const cardFromStorage = JSON.parse(localStorage.getItem("card")); + + const div = document.createElement("div"); + div.innerHTML = ` +

+ ${cardFromStorage.describe} +

+
+ card-image +
+

+ ${cardFromStorage.fullDescription} +

+

${cardFromStorage.date}

+

${cardFromStorage.time}

+

до ${cardFromStorage.people}

+ +
+
+ `; + + const div2 = document.createElement("div"); + div2.innerHTML = ` +
+

Тема:

+

+ ${cardFromStorage.describe} +

+
+
+

Для кого:

+

+ ${cardFromStorage.forWhome} +

+
+
+

Описание:

+

+ ${cardFromStorage.fullDescription} +

+
+ `; + + document.querySelector(".about-card").append(div); + document.querySelector(".about-card").after(div2); + + setCards(cards.slice(0, 4)); +} diff --git a/style.scss b/style.scss index 49bce5d..02d70d2 100644 --- a/style.scss +++ b/style.scss @@ -193,9 +193,8 @@ main { .cards { display: grid; - grid-template-columns: repeat(4, 23.7%); - margin-bottom: 40px; - grid-column-gap: 20px; + grid-template-columns: repeat(4, 25%); + margin: 0 -10px 20px; } .card { @@ -203,6 +202,15 @@ main { font-size: 12px; margin: 15px 0; + &-inner { + padding: 0 10px; + border-left: 1px solid rgba(255, 166, 0, 0.566); + } + + &-inner.extreme{ + border-left: none; + } + &__image { width: 100%; } @@ -243,6 +251,10 @@ main { } } + .buttow-wrapper{ + margin: 0 10px; + } + .subscribe { display: inline-block; width: 100%; @@ -467,8 +479,7 @@ footer { @media (max-width: 1024px) { .cards { - grid-template-columns: repeat(2, 49%); - grid-column-gap: 20px; + grid-template-columns: repeat(2, 50%); } .about { @@ -577,20 +588,20 @@ footer { } @media (max-width: 460px) { - .card{ + .card { &__describe { min-height: 120px; } &-inf__item { font-size: 8px; - + &::before { top: -2px; } } - &-description{ + &-description { display: block; } }