feat: carousel componenet complete

dynamicProgrammingExamples/.prettierrc

@@ -1,3 +1,4 @@
 {
-    "tabWidth": 4
+    "tabWidth": 4,
+    "singleQuote": true
 }

dynamicProgrammingExamples/src/components/dropDown.js

@@ -3,7 +3,7 @@ class DropDown {
         this.menu = menu;
     }
 
-    title = "Menu";
+    title = 'Menu';
     clicked = false;
 
     getMenu = () => {
@@ -15,68 +15,68 @@ class DropDown {
         this.createDropdownItems();
         this.createMenuButton();
 
-        this.div = document.createElement("div");
+        this.div = document.createElement('div');
-        this.div.classList.add("menu-bar");
+        this.div.classList.add('menu-bar');
         this.div.style =
-            "margin-left: 50px; display: flex; flex-direction: column; width: 200px; align-items: center;";
+            'z-index: 1; margin-left: 50px; display: flex; flex-direction: column; width: 200px; align-items: center;';
 
-        this.div.style.position = "relative";
+        this.div.style.position = 'relative';
 
         this.div.append(this.button, this.dropdownItems);
         return this.div;
     }
 
     createDropdownItems() {
-        this.dropdownItems = document.createElement("div");
+        this.dropdownItems = document.createElement('div');
-        this.dropdownItems.classList.add("menu-items");
+        this.dropdownItems.classList.add('menu-items');
 
-        this.dropdownItems.style.display = "flex";
+        this.dropdownItems.style.display = 'flex';
-        this.dropdownItems.style.flexDirection = "column";
+        this.dropdownItems.style.flexDirection = 'column';
-        this.dropdownItems.style.visibility = "hidden";
+        this.dropdownItems.style.visibility = 'hidden';
-        this.dropdownItems.style.gap = "10px";
+        this.dropdownItems.style.gap = '10px';
-        this.dropdownItems.style.lineHeight = "1.7";
+        this.dropdownItems.style.lineHeight = '1.7';
-        this.dropdownItems.style.fontSize = "18px";
+        this.dropdownItems.style.fontSize = '18px';
-        this.dropdownItems.style.position = "absolute";
+        this.dropdownItems.style.position = 'absolute';
-        this.dropdownItems.style.top = "100px";
+        this.dropdownItems.style.top = '100px';
-        this.dropdownItems.style.background = "#FFF";
+        this.dropdownItems.style.background = '#FFF';
-        this.dropdownItems.style.width = "100%";
+        this.dropdownItems.style.width = '100%';
-        this.dropdownItems.style.alignItems = "center";
+        this.dropdownItems.style.alignItems = 'center';
-        this.dropdownItems.style.border = "1px solid black";
+        this.dropdownItems.style.border = '1px solid black';
-        this.dropdownItems.style.color = "black";
+        this.dropdownItems.style.color = 'black';
-        this.dropdownItems.style.boxSizing = "border-box";
+        this.dropdownItems.style.boxSizing = 'border-box';
 
         this.menu.forEach((e) => {
-            const a = document.createElement("a");
+            const a = document.createElement('a');
-            a.href = "#";
+            a.href = '#';
             a.textContent = e;
-            a.style.textDecoration = "none";
+            a.style.textDecoration = 'none';
-            a.style.display = "inline-block";
+            a.style.display = 'inline-block';
-            a.style.width = "calc(100% - 10px)";
+            a.style.width = 'calc(100% - 10px)';
-            a.style.textAlign = "center";
+            a.style.textAlign = 'center';
-            a.style.padding = "5px";
+            a.style.padding = '5px';
 
-            a.addEventListener("mouseover", () => {
+            a.addEventListener('mouseover', () => {
-                a.style.background = "#E8E8E8";
+                a.style.background = '#E8E8E8';
                 // a.style.background = 'black'
             });
             a.addEventListener(
-                "mouseleave",
+                'mouseleave',
-                () => (a.style.background = "#FFF"),
+                () => (a.style.background = '#FFF'),
             );
             this.dropdownItems.appendChild(a);
         });
     }
 
     createMenuButton() {
-        this.button = document.createElement("button");
+        this.button = document.createElement('button');
-        this.button.classList.add("menu-btn,btn");
+        this.button.classList.add('menu-btn,btn');
         this.button.textContent = this.title;
 
-        this.button.style = "padding: 20px; margin: 20px;";
+        this.button.style = 'padding: 20px; margin: 20px;';
 
-        this.button.addEventListener("click", () => {
+        this.button.addEventListener('click', () => {
             this.clicked = !this.clicked;
-            let visibilityToggle = this.clicked ? "visible" : "hidden";
+            let visibilityToggle = this.clicked ? 'visible' : 'hidden';
             this.dropdownItems.style.visibility = visibilityToggle;
         });
     }

dynamicProgrammingExamples/src/components/imageCarousel.js

@@ -1,18 +1,115 @@
 class Carousel {
-    constructor() {
+    constructor(imgArr = []) {
-        this.container = document.createElement("div");
+        this.container = document.createElement('div');
+        this.carousel = document.createElement('div');
+        this.imgArr = imgArr;
+        this.totalImages = imgArr.length;
+        this.imagePointer = 0; // starting index
+        this.careouselCards = [];
 
+        this.previousImage = this.previousImage.bind(this);
+        this.nextImage = this.nextImage.bind(this);
+
+        // setup styling
+        this.carouselPickerStyles();
+        this.carouselLeftButton();
+        this.carouselRightButton();
+
+        // setup structure
         this.setupCarouselStructure();
     }
 
     setupCarouselStructure() {
-        this.container.classList.add("container");
+        this.container.classList.add('container');
-        this.container.style.height = "60vh";
+        this.container.style.maxHeight = '75vh';
+        this.container.style.position = 'absolute';
 
-        this.carousel = document.createElement("div");
+        this.carousel.classList.add('carousel');
-        this.carousel.classList.add("carousel");
+        this.carousel.style.maxHeight = '75vh';
+        this.carousel.style.overflow = 'hidden';
 
-        this.container.append(this.carousel);
+        // generate an image thing for each item in carousel array
+        this.imgArr.forEach((element, i) => {
+            //TODO create method to load images from path
+            const item = document.createElement('div');
+            item.classList.add('carousel-item');
+            item.dataset.itemNo = i;
+            item.style.display = 'none';
+
+            let img = new Image();
+            img.classList.add('img', 'carousel-img');
+            img.style.maxWidth = '100%';
+            img.src = element;
+
+            item.appendChild(img);
+            this.carousel.appendChild(item);
+            this.careouselCards.push(item);
+        });
+
+        // Make sure the first card renders
+
+        this.showActiveSlide();
+        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';
+            } else {
+                e.style.display = 'none';
+            }
+        });
+    }
+
+    carouselPickerStyles() {
+        this.pickerActive = document.createElement('i');
+        this.pickerActive.classList.add('fas', 'fa-circle', 'carousel-active');
+
+        this.pickerInActive = document.createElement('i');
+        this.pickerInActive.classList.add('far', 'fa-circle');
+    }
+
+    carouselLeftButton() {
+        this.leftButton = document.createElement('i');
+        this.leftButton.classList.add(
+            'carousel-left-btn',
+            'fas',
+            'fa-angle-left',
+            'fa-10x',
+        );
+        this.leftButton.style.position = 'absolute';
+        this.leftButton.style.top = '50%';
+        this.leftButton.style.left = '2%';
+
+        this.leftButton.addEventListener('click', this.previousImage);
+    }
+
+    carouselRightButton() {
+        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.addEventListener('click', this.nextImage);
+    }
+
+    previousImage() {
+        this.imagePointer =
+            (this.imagePointer - 1 + this.totalImages) % this.totalImages;
+        this.showActiveSlide();
+    }
+
+    nextImage() {
+        this.imagePointer = (this.imagePointer + 1) % this.totalImages;
+        this.showActiveSlide();
     }
 
     getCarousel = () => this.container;

dynamicProgrammingExamples/src/components/mobileMenu.js

@@ -1,27 +1,27 @@
 class Menu {
     constructor(menuItems) {
         this.menuItems = menuItems;
-        this.menu = document.createElement("nav");
+        this.menu = document.createElement('nav');
-        this.burgerIcon = document.createElement("i");
+        this.burgerIcon = document.createElement('i');
-        this.container = document.createElement("div");
+        this.container = document.createElement('div');
 
         this.setupMenuStructure();
         this.setupResizeListener();
     }
 
     setupMenuStructure() {
-        this.container.classList.add("navbar");
+        this.container.classList.add('navbar');
-        this.container.style.display = "flex";
+        this.container.style.display = 'flex';
-        this.container.style.padding = "20px";
+        this.container.style.padding = '20px';
 
         // Determine if Burger Icon should show
         this.burgerIconStyles();
         this.burgerIconSetter();
 
         this.menuItems.forEach((element) => {
-            const li = document.createElement("li");
+            const li = document.createElement('li');
             li.textContent = element;
-            li.style.listStyleType = "none";
+            li.style.listStyleType = 'none';
 
             this.container.appendChild(li);
         });
@@ -30,27 +30,28 @@ class Menu {
     }
 
     adjustStylesForSmallScreen() {
-        this.container.style.flexDirection = "column";
+        this.container.style.flexDirection = 'column';
-        this.burgerIcon.style.display = "inline-block";
+        this.burgerIcon.style.display = 'inline-block';
-        this.container.style.gap = "20px";
+        this.container.style.gap = '20px';
-        this.container.style.alignItems = "center";
+        this.container.style.alignItems = 'center';
-        this.container.style.display = "none";
+        this.container.style.display = 'none';
     }
 
     adjustStylesForLargeScreen() {
-        this.container.style.display = "flex";
+        this.container.style.display = 'flex';
-        this.container.style.flexDirection = "row";
+        this.container.style.flexDirection = 'row';
-        this.container.style.justifyContent = "space-around";
+        this.container.style.justifyContent = 'space-around';
-        this.burgerIcon.style.display = "none";
+        this.burgerIcon.style.display = 'none';
     }
 
     burgerIconStyles() {
-        this.burgerIcon.classList.add("fas", "fa-bars", "fa-2x");
+        this.burgerIcon.classList.add('fas', 'fa-bars', 'fa-2x');
-        this.burgerIcon.style.margin = "10px";
+        this.burgerIcon.style.margin = '10px';
     }
 
     burgerIconSetter() {
         const isSmallScreen = window.innerWidth <= 600;
+        console.log(window.screen.width);
         if (isSmallScreen) {
             this.adjustStylesForSmallScreen();
             this.burgerIconClickListener();
@@ -60,14 +61,16 @@ class Menu {
     }
 
     burgerIconClickListener() {
-        this.burgerIcon.addEventListener("click", () => {
+        this.burgerIcon.addEventListener('click', () => {
+            console.log(this.container.style.display);
             this.container.style.display =
-                this.container.style.display === "none" ? "flex" : "none";
+                this.container.style.display === 'none' ? 'flex' : 'none';
+            return;
         });
     }
 
     setupResizeListener() {
-        window.addEventListener("resize", () => this.burgerIconSetter());
+        window.addEventListener('resize', () => this.burgerIconSetter());
     }
 
     buildMenu() {

dynamicProgrammingExamples/src/index.js

@@ -1,26 +1,33 @@
-import { Carousel } from "./components/imageCarousel";
+import { Carousel } from './components/imageCarousel';
-import { DropDown } from "./components/dropDown";
+import { DropDown } from './components/dropDown';
-import { Menu } from "./components/mobileMenu";
+import { Menu } from './components/mobileMenu';
-import "./style.css";
+import Icon from './static/img1.jpg';
+import Icon2 from './static/img2.jpg';
+import Icon3 from './static/img3.jpg';
+import Icon4 from './static/img4.jpg';
+import './style.css';
 
 function fontAwesome() {
-    let script = document.createElement("script");
+    let script = document.createElement('script');
-    script.src = "https://kit.fontawesome.com/24f16b96cf.js";
+    script.src = 'https://kit.fontawesome.com/24f16b96cf.js';
-    script.crossOrigin = "anonymous";
+    script.crossOrigin = 'anonymous';
 
     document.head.appendChild(script);
 }
 
 function website() {
-    const _menu = ["main", "about", "store", "blog", "contact"];
+    // create component objects and assets
+    const images = [Icon, Icon2, Icon3, Icon4];
+    const _menu = ['main', 'about', 'store', 'blog', 'contact'];
     const dropdown = new DropDown(_menu);
     const mobile = new Menu(_menu);
-    const carouselObj = new Carousel();
+    const carouselObj = new Carousel(images);
-
+    // render the things
     const div = dropdown.dropdownComponent();
-    const h1 = document.createElement("h1");
+    const h1 = document.createElement('h1');
     const carousel = carouselObj.getCarousel();
-    h1.textContent = "DEEZ NUTS MAN";
+
+    h1.textContent = 'DEEZ NUTS MAN';
 
     const menuMobile = mobile.buildMenu();
 

dynamicProgrammingExamples/src/style.css

@@ -10,3 +10,12 @@ a {
 a:hover {
     color: black;
 }
+
+.carousel img {
+    object-fit: contain;
+
+}
+
+.active-slide {
+    display: block;
+}