Merge pull request #1 from KristinaHranovska/quote

Quote

package.json

@@ -16,6 +16,7 @@
   "license": "ISC",
   "dependencies": {
     "axios": "^1.6.7",
+    "date-fns": "^3.3.1",
     "izitoast": "^1.4.0",
     "modern-normalize": "^2.0.0",
     "simplelightbox": "^2.14.2",

src/css/components/variables.css

@@ -9,6 +9,7 @@
     --star: #EEA10C;
     --not-color-star: rgba(27, 27, 27, 0.2);
     --border-color: rgba(27, 27, 27, 0.4);
+    --text-color-alfa: rgba(246, 246, 246, 0.6);
     --white-color: #FFFFFF;
     --hover-button-icon: #5F6560;
 }

src/css/quote.css

@@ -0,0 +1,143 @@
+.quote {
+    background-color: var(--dark-grey-background);
+    border-radius: 30px;
+
+    padding: 40px 20px;
+}
+
+.quote-main-title {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+
+    margin-bottom: 16px;
+}
+
+.quote-title {
+    font-weight: 500;
+    font-size: 20px;
+    line-height: 1.4;
+    color: var(--text-light);
+}
+
+.icon-quote {
+    fill: var(--white-color);
+
+    margin-left: auto;
+}
+
+.quote-thumb {
+    padding-left: 46px;
+}
+
+.quote-paragraf {
+    font-size: 14px;
+    line-height: 1.29;
+    color: var(--text-color-alfa);
+
+    margin-bottom: 14px;
+}
+
+.quote-author {
+    font-weight: 500;
+    font-size: 16px;
+    line-height: 1.5;
+    color: var(--text-light);
+}
+
+.quote-img {
+    height: 335px;
+    background-image: url('../img/quote/quote_mobile.webp');
+    background-repeat: no-repeat;
+    background-size: contain;
+}
+
+@media screen and (min-width: 320px) and (min-resolution: 192dpi) {
+    .quote-img {
+        background-image: url('../img/quote/quote_mobile@2x.webp');
+    }
+}
+
+
+@media screen and (min-width: 768px) {
+    .quote {
+        position: relative;
+        padding: 64px 80px;
+    }
+
+    .quote-title {
+        font-size: 24px;
+        line-height: 1.33;
+    }
+
+    .icon-quote {
+        width: 38px;
+        height: 38px;
+    }
+
+    .quote-main-title {
+        gap: 16px;
+    }
+
+    .icon-quote {
+        position: absolute;
+        top: 32px;
+        right: 80px;
+    }
+
+    .quote-paragraf {
+        font-size: 16px;
+        line-height: 1.5;
+    }
+
+    .quote-author {
+        font-size: 16px;
+        line-height: 1.5;
+    }
+
+    .quote-img {
+        height: 302px;
+        background-image: url('../img/quote/quote_tablet.webp');
+    }
+
+    @media screen and (min-width: 768px) and (min-resolution: 192dpi) {
+        .quote-img {
+            background-image: url('../img/quote/quote_tablet@2x.webp');
+        }
+    }
+}
+
+@media screen and (min-width: 1440px) {
+    .quote-block {
+        display: flex;
+        align-items: stretch;
+    }
+
+    .quote {
+        width: 704px;
+        padding: 64px;
+    }
+
+    .icon-quote {
+        right: 64px;
+    }
+
+    .quote-paragraf {
+        line-height: 1.5;
+    }
+
+    .quote-author {
+        bottom: 64px;
+    }
+
+    .quote-img {
+        width: 704px;
+        background-image: url('../img/quote/quote_1440.webp');
+    }
+
+    @media screen and (min-width: 1440px) and (min-resolution: 192dpi) {
+        .quote-img {
+            background-image: url('../img/quote/quote_1440@2x.webp');
+        }
+    }
+}

src/js/quote.js

@@ -0,0 +1,45 @@
+import { getAccess } from "./helper/get-access";
+import { format } from 'date-fns';
+
+function getQuote() {
+    const quotePage = document.querySelector('.js-quote');
+    const authorPage = document.querySelector('.js-author');
+
+    const date = new Date();
+    const formattedDate = format(date, 'dd.MM.yyyy');
+    const getDate = localStorage.getItem('dateNow');
+
+    if (getDate === formattedDate) {
+        const localInfo = JSON.parse(localStorage.getItem('quoteDay'))
+        const { author, quote } = localInfo;
+        quotePage.textContent = quote;
+        authorPage.textContent = author;
+
+        return;
+    }
+
+    if (!getDate || getDate !== formattedDate) {
+        localStorage.setItem('dateNow', formattedDate);
+
+        getAccess({
+            typeFilter: 'quote',
+        })
+            .then(({ data }) => {
+                const { author, quote } = data;
+
+                const quoteOfTheDay = {
+                    author: author,
+                    quote: quote
+                };
+                localStorage.setItem('quoteDay', JSON.stringify(quoteOfTheDay));
+
+                quotePage.textContent = quote;
+                authorPage.textContent = author;
+
+            })
+            .catch(() => { console.log(err); })
+    }
+
+}
+
+getQuote();

src/partials/quote.html

@@ -0,0 +1,21 @@
+<section class="section">
+  <div class="container quote-block">
+    <div class="quote">
+      <div class="quote-main-title">
+        <svg class="icon-quote-fitness" width="34" height="32">
+          <use href="./img/icons/sprite.svg#icon-quote-fitness"></use>
+        </svg>
+        <h2 class="quote-title">Quote of the day</h2>
+        <svg class="icon-quote" width="28" height="28">
+          <use href="./img/icons/sprite.svg#icon-quote"></use>
+        </svg>
+      </div>
+
+      <div class="quote-thumb">
+        <p class="quote-paragraf js-quote"></p>
+        <p class="quote-author js-author"></p>
+      </div>
+    </div>
+    <div class="quote-img"></div>
+  </div>
+</section>