Merge pull request #5 from Robertw8/hero

created API folder, api-events.js, slider-events.js, class dark-theme

src/js/API/api-events.js

@@ -0,0 +1,15 @@
+import axios from 'axios';
+// import Notiflix from 'notiflix';
+
+const URL = 'https://tasty-treats-backend.p.goit.global/api/events';
+
+const getEvents = async () => {
+  try {
+    return await axios.get(`${URL}`);
+  } catch (error) {
+    console.log(error);
+    // Notiflix.Notify.failure('Sorry ERROR. Please try again.');
+  }
+};
+
+export { getEvents };

src/js/slider-events.js

@@ -0,0 +1,16 @@
+import { getEvents } from './API/api-events.js';
+
+const galleryEl = document.querySelector('.hero-img-wrap');
+
+getEvents().then(data => {
+  renderGallery(data.data);
+  // return data;
+}).catch(error => console.log(error));
+
+
+function renderGallery(data) {
+  // console.log(data);
+  const img = data.map(itm => {
+    // console.log(itm);
+  });
+}

src/main.js

@@ -4,3 +4,5 @@ testFn();
 import { filtersList, onFilterItemClick } from './js/search-filter';
 
 filtersList?.addEventListener('click', onFilterItemClick);
+
+import './js/slider-events.js'

src/partials/hero.html

@@ -1,5 +1,5 @@
-<section class='hero'>
-  <div class='container'>
+<section class='hero container'>
+  <div class='hero-container'>
     <div class='hero-text-wrap'>
       <h1 class='hero-title'>
         Learn to Cook <span class='hero-item'>Tasty Treats'</span> Customizable Masterclass

src/scss/partials/_hero.scss

@@ -2,15 +2,11 @@
   padding-top: 90px;
 }
 
-.container
+.hero-container
 {
   display: flex;
   flex-direction: column;
 
-  @media screen and (min-width: $tablet) {
-
-  }
-
   @media screen and (min-width: $desktop) {
     flex-direction: row;
     gap: 32px;
@@ -45,6 +41,10 @@
   }
 }
 
+.dark-theme .hero-title {
+  color: $color-white;
+}
+
 .hero-text {
   font-size: 14px;
   font-weight: 400;
@@ -57,6 +57,10 @@
   }
 }
 
+.dark-theme .hero-text {
+  color: $color-white;
+}
+
 .hero-btn {
   width: 111px;
   height: 37px;
@@ -83,6 +87,11 @@
   }
 }
 
+.dark-theme .hero-btn {
+  color: $color-white;
+  background-color: $color-black;
+}
+
 .hero-img-wrap {
   display: flex;
   width: 200px;