made requested changes

mate-academy · Jul 30, 2024 · e01181f · e01181f
1 parent a4345d1
commit e01181f
Show file tree

Hide file tree

Showing 8 changed files with 89 additions and 13 deletions.
diff --git a/src/images/slider/photo-slider.png b/src/images/slider/photo-slider.png
diff --git a/src/images/slider/photo-slider1.png b/src/images/slider/photo-slider1.png
diff --git a/src/images/slider/photo-slider2.png b/src/images/slider/photo-slider2.png
diff --git a/src/images/slider/photo-slider3.jpg b/src/images/slider/photo-slider3.jpg
diff --git a/src/index.html b/src/index.html
@@ -1,5 +1,8 @@
 <!doctype html>
-<html lang="en">
+<html
+  lang="en"
+  class="page"
+>
   <head>
     <meta charset="UTF-8" />
     <meta
@@ -124,20 +127,39 @@ <h1 class="hero__screen_title">Strategic Agency</h1>
           </div>
 
           <div class="hero__slider">
-            <div class="hero__slider_photos">
+            <div
+              class="hero__slider_photos"
+              id="slider"
+            >
+              <img
+                src="images/slider/photo-slider.png"
+                alt="photo slider"
+                class="hero__slider_photos-item active"
+              />
               <img
-                src="images/slider/photo.png"
+                src="images/slider/photo-slider1.png"
+                alt="photo slider"
+                class="hero__slider_photos-item"
+              />
+              <img
+                src="images/slider/photo-slider2.png"
                 alt="photo slider"
                 class="hero__slider_photos-item"
               />
             </div>
 
             <div class="hero__slider_controlle">
               <div>
-                <button class="hero__slider_controlle-button">
+                <button
+                  id="prev"
+                  class="hero__slider_controlle-button"
+                >
                   <span class="icon icon--arrow-left"></span>
                 </button>
-                <button class="hero__slider_controlle-button">
+                <button
+                  id="next"
+                  class="hero__slider_controlle-button"
+                >
                   <span class="icon icon--arrow-right"></span>
                 </button>
               </div>
@@ -468,9 +490,10 @@ <h2 class="vision__content_title">Vision, Passion, Results</h2>
       <section class="contacts__contact">
         <form
           class="form"
+          id="form"
           onsubmit="this.reset();return false;"
           action="#"
-          method="post"
+          method="POST"
         >
           <div class="form__content">
             <h2 class="form__content_title">Send us a message</h2>
@@ -501,7 +524,12 @@ <h2 class="form__content_title">Send us a message</h2>
               class="form__content_textarea"
             ></textarea>
 
-            <button class="form__content_button">Send</button>
+            <button
+              type="submit"
+              class="form__content_button"
+            >
+              Send
+            </button>
           </div>
         </form>
 

diff --git a/src/scripts/main.js b/src/scripts/main.js
@@ -1 +1,44 @@
 'use strict';
+
+const form = document.getElementById('form');
+form.addEventListener('submit',function(event){
+  event.preventDefault();
+
+  window.scrollTo({
+    top:0,
+    behavior:'smooth'
+  })
+})
+
+
+
+  document.addEventListener('DOMContentLoaded', function () {
+    const slider = document.getElementById('slider');
+    const images = slider.getElementsByClassName('hero__slider_photos-item');
+    const prevButton = document.getElementById('prev');
+    const nextButton = document.getElementById('next');
+    let currentIndex = 0;
+
+    function updateSlider() {
+      for (let i = 0; i < images.length; i++) {
+        images[i].classList.remove('active');
+      }
+      images[currentIndex].classList.add('active');
+    }
+
+    function showPrev() {
+      currentIndex = (currentIndex > 0) ? currentIndex - 1 : images.length - 1;
+      updateSlider();
+    }
+
+    function showNext() {
+      currentIndex = (currentIndex < images.length - 1) ? currentIndex + 1 : 0;
+      updateSlider();
+    }
+
+    prevButton.addEventListener('click', showPrev);
+    nextButton.addEventListener('click', showNext);
+
+    updateSlider();
+  });
+
diff --git a/src/styles/_header.scss b/src/styles/_header.scss
@@ -1,9 +1,7 @@
 .header {
-  // position:relative;
   width: 100%;
   box-sizing: border-box;
 
-  // height: 100vh;
   background-color: $accent-color;
   color: $primary-color;
   border-radius: 0 0 30px 30px;
@@ -148,9 +146,14 @@
         width: 100%;
         height: 100%;
         object-fit: cover;
+        display: none;
       }
     }
 
+    .hero__slider_photos-item.active {
+      display: block;
+    }
+
     &_controlle {
       position: absolute;
       bottom: 0;

diff --git a/src/styles/main.scss b/src/styles/main.scss
@@ -14,11 +14,13 @@
 @import 'nav-bar';
 @import 'contacts';
 
-.page__body {
-  font-family: 'Open Sans', 'Helvetica Neue', sans-serif;
-  background-color: $body-bg-color;
+.page {
   scroll-behavior: smooth;
-  box-sizing: border-box;
+  &__body {
+    font-family: 'Open Sans', 'Helvetica Neue', sans-serif;
+    background-color: $body-bg-color;
+    box-sizing: border-box;
+  }
 }
 
 .content {