fix bugs

2022-10-18 20:54:06 +03:00
parent 134f3dcf92
commit bfa5fa5ed7
6 changed files with 142 additions and 107 deletions
--- a/about.html
+++ b/about.html
@@ -7,7 +7,7 @@
    <link rel="stylesheet" href="css/style.css" />
    <title>About Course</title>
  </head>
-  <body>
+  <body onload="fillAboutPage()">
    <div class="wrapper">
      <header>
        <div class="container header">
@@ -102,5 +102,6 @@
      </footer>
    </div>
    <script src="script.js"></script>
+    <script src="scriptAbout.js"></script>
  </body>
 </html>
--- 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;
--- a/index.html
+++ b/index.html
@@ -7,7 +7,7 @@
    <link rel="stylesheet" href="css/style.css" />
    <title>Courses</title>
  </head>
-  <body>
+  <body onload="fillMainPage()">
    <div class="wrapper">
      <header>
        <div class="container header">
--- 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,13 +133,20 @@ navigationItems.forEach((item) => {
  };
 });

-const cardsToShow =
-  url === "/" || url === "/index.html" ? cards : cards.slice(0, 4);
+function fillMainPage() {
+  setCards(cards);
+}

-cardsToShow.forEach((card, index) => {
+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) => {
@@ -153,73 +163,25 @@ cardsToShow.forEach((card, index) => {
        <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 = [
+  subscribe = [
    ...document.querySelectorAll(".subscribe"),
    ...document.querySelectorAll(".more"),
-];
+  ];

-subscribe.forEach((el) => {
+  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);
+  });
 }
--- 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 = `
+  <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));
+}
--- 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,7 +588,7 @@ footer {
 }

@media (max-width: 460px) {
-  .card{
+  .card {
    &__describe {
      min-height: 120px;
    }
@@ -590,7 +601,7 @@ footer {
      }
    }

-    &-description{
+    &-description {
      display: block;
    }
  }