From 3f96b0cdf094f240f9fb15140aea12f395d062cb Mon Sep 17 00:00:00 2001
From: Mike Smith <89040888+smiggiddy@users.noreply.github.com>
Date: Wed, 10 Jan 2024 22:21:55 -0500
Subject: [PATCH] feat: css animations

---
 .../src/components/imageCarousel.js           | 23 ++++++++++---------
 .../src/components/mobileMenu.js              |  2 --
 dynamicProgrammingExamples/src/style.css      |  9 +++++++-
 3 files changed, 20 insertions(+), 14 deletions(-)

diff --git a/dynamicProgrammingExamples/src/components/imageCarousel.js b/dynamicProgrammingExamples/src/components/imageCarousel.js
index 4e0054f..86b84db 100644
--- a/dynamicProgrammingExamples/src/components/imageCarousel.js
+++ b/dynamicProgrammingExamples/src/components/imageCarousel.js
@@ -7,8 +7,8 @@ class Carousel {
         this.imagePointer = 0; // starting index
         this.careouselCards = [];
 
-        this.previousImage = this.previousImage.bind(this);
-        this.nextImage = this.nextImage.bind(this);
+        // this.previousImage = this.previousImage.bind(this);
+        // this.nextImage = this.nextImage.bind(this);
 
         // setup styling
         this.carouselPickerStyles();
@@ -49,16 +49,17 @@ class Carousel {
         // Make sure the first card renders
 
         this.showActiveSlide();
-        this.container.append(this.carousel, this.RightButton, this.leftButton);
+        this.container.append(this.carousel, this.rightButton, this.leftButton);
     }
 
     showActiveSlide() {
-        console.log(this.imagePointer);
         this.careouselCards.forEach((e) => {
             if (Number(e.dataset.itemNo) === this.imagePointer) {
                 e.style.display = 'block';
+                e.firstChild.classList.add('active');
             } else {
                 e.style.display = 'none';
+                e.firstChild.classList.remove('active');
             }
         });
     }
@@ -83,22 +84,22 @@ class Carousel {
         this.leftButton.style.top = '50%';
         this.leftButton.style.left = '2%';
 
-        this.leftButton.addEventListener('click', this.previousImage);
+        this.leftButton.addEventListener('click', () => this.previousImage());
     }
 
     carouselRightButton() {
-        this.RightButton = document.createElement('i');
-        this.RightButton.classList.add(
+        this.rightButton = document.createElement('i');
+        this.rightButton.classList.add(
             'carousel-right-btn',
             'fas',
             'fa-angle-right',
             'fa-10x',
         );
-        this.RightButton.style.position = 'absolute';
-        this.RightButton.style.top = '50%';
-        this.RightButton.style.right = '2%';
+        this.rightButton.style.position = 'absolute';
+        this.rightButton.style.top = '50%';
+        this.rightButton.style.right = '2%';
 
-        this.RightButton.addEventListener('click', this.nextImage);
+        this.rightButton.addEventListener('click', () => this.nextImage());
     }
 
     previousImage() {
diff --git a/dynamicProgrammingExamples/src/components/mobileMenu.js b/dynamicProgrammingExamples/src/components/mobileMenu.js
index 982b9d4..c0874f3 100644
--- a/dynamicProgrammingExamples/src/components/mobileMenu.js
+++ b/dynamicProgrammingExamples/src/components/mobileMenu.js
@@ -51,7 +51,6 @@ class Menu {
 
     burgerIconSetter() {
         const isSmallScreen = window.innerWidth <= 600;
-        console.log(window.screen.width);
         if (isSmallScreen) {
             this.adjustStylesForSmallScreen();
             this.burgerIconClickListener();
@@ -62,7 +61,6 @@ class Menu {
 
     burgerIconClickListener() {
         this.burgerIcon.addEventListener('click', () => {
-            console.log(this.container.style.display);
             this.container.style.display =
                 this.container.style.display === 'none' ? 'flex' : 'none';
             return;
diff --git a/dynamicProgrammingExamples/src/style.css b/dynamicProgrammingExamples/src/style.css
index 5026668..2989214 100644
--- a/dynamicProgrammingExamples/src/style.css
+++ b/dynamicProgrammingExamples/src/style.css
@@ -13,9 +13,16 @@ a:hover {
 
 .carousel img {
     object-fit: contain;
-
 }
 
 .active-slide {
     display: block;
 }
+
+.carousel-img {
+    transform: 200%;
+}
+
+.carousel-img .active {
+    transition: transform 200ms ease-out;
+}