diff --git a/dynamicProgrammingExamples/.prettierrc b/dynamicProgrammingExamples/.prettierrc index 0a02bce..9b0bb43 100644 --- a/dynamicProgrammingExamples/.prettierrc +++ b/dynamicProgrammingExamples/.prettierrc @@ -1,3 +1,4 @@ { - "tabWidth": 4 + "tabWidth": 4, + "singleQuote": true } diff --git a/dynamicProgrammingExamples/src/components/dropDown.js b/dynamicProgrammingExamples/src/components/dropDown.js index 206faaa..f662c3b 100644 --- a/dynamicProgrammingExamples/src/components/dropDown.js +++ b/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.classList.add("menu-bar"); + this.div = document.createElement('div'); + 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.classList.add("menu-items"); + this.dropdownItems = document.createElement('div'); + this.dropdownItems.classList.add('menu-items'); - this.dropdownItems.style.display = "flex"; - this.dropdownItems.style.flexDirection = "column"; - this.dropdownItems.style.visibility = "hidden"; - this.dropdownItems.style.gap = "10px"; - this.dropdownItems.style.lineHeight = "1.7"; - this.dropdownItems.style.fontSize = "18px"; - this.dropdownItems.style.position = "absolute"; - this.dropdownItems.style.top = "100px"; - this.dropdownItems.style.background = "#FFF"; - this.dropdownItems.style.width = "100%"; - this.dropdownItems.style.alignItems = "center"; - this.dropdownItems.style.border = "1px solid black"; - this.dropdownItems.style.color = "black"; - this.dropdownItems.style.boxSizing = "border-box"; + this.dropdownItems.style.display = 'flex'; + this.dropdownItems.style.flexDirection = 'column'; + this.dropdownItems.style.visibility = 'hidden'; + this.dropdownItems.style.gap = '10px'; + this.dropdownItems.style.lineHeight = '1.7'; + this.dropdownItems.style.fontSize = '18px'; + this.dropdownItems.style.position = 'absolute'; + this.dropdownItems.style.top = '100px'; + this.dropdownItems.style.background = '#FFF'; + this.dropdownItems.style.width = '100%'; + this.dropdownItems.style.alignItems = 'center'; + this.dropdownItems.style.border = '1px solid black'; + this.dropdownItems.style.color = 'black'; + this.dropdownItems.style.boxSizing = 'border-box'; this.menu.forEach((e) => { - const a = document.createElement("a"); - a.href = "#"; + const a = document.createElement('a'); + a.href = '#'; a.textContent = e; - a.style.textDecoration = "none"; - a.style.display = "inline-block"; - a.style.width = "calc(100% - 10px)"; - a.style.textAlign = "center"; - a.style.padding = "5px"; + a.style.textDecoration = 'none'; + a.style.display = 'inline-block'; + a.style.width = 'calc(100% - 10px)'; + a.style.textAlign = 'center'; + a.style.padding = '5px'; - a.addEventListener("mouseover", () => { - a.style.background = "#E8E8E8"; + a.addEventListener('mouseover', () => { + a.style.background = '#E8E8E8'; // a.style.background = 'black' }); a.addEventListener( - "mouseleave", - () => (a.style.background = "#FFF"), + 'mouseleave', + () => (a.style.background = '#FFF'), ); this.dropdownItems.appendChild(a); }); } createMenuButton() { - this.button = document.createElement("button"); - this.button.classList.add("menu-btn,btn"); + this.button = document.createElement('button'); + 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; }); } diff --git a/dynamicProgrammingExamples/src/components/imageCarousel.js b/dynamicProgrammingExamples/src/components/imageCarousel.js index eb03be5..4e0054f 100644 --- a/dynamicProgrammingExamples/src/components/imageCarousel.js +++ b/dynamicProgrammingExamples/src/components/imageCarousel.js @@ -1,18 +1,115 @@ class Carousel { - constructor() { - this.container = document.createElement("div"); + constructor(imgArr = []) { + 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.style.height = "60vh"; + this.container.classList.add('container'); + 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; diff --git a/dynamicProgrammingExamples/src/components/mobileMenu.js b/dynamicProgrammingExamples/src/components/mobileMenu.js index f11e45e..982b9d4 100644 --- a/dynamicProgrammingExamples/src/components/mobileMenu.js +++ b/dynamicProgrammingExamples/src/components/mobileMenu.js @@ -1,27 +1,27 @@ class Menu { constructor(menuItems) { this.menuItems = menuItems; - this.menu = document.createElement("nav"); - this.burgerIcon = document.createElement("i"); - this.container = document.createElement("div"); + this.menu = document.createElement('nav'); + this.burgerIcon = document.createElement('i'); + this.container = document.createElement('div'); this.setupMenuStructure(); this.setupResizeListener(); } setupMenuStructure() { - this.container.classList.add("navbar"); - this.container.style.display = "flex"; - this.container.style.padding = "20px"; + this.container.classList.add('navbar'); + this.container.style.display = 'flex'; + 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.burgerIcon.style.display = "inline-block"; - this.container.style.gap = "20px"; - this.container.style.alignItems = "center"; - this.container.style.display = "none"; + this.container.style.flexDirection = 'column'; + this.burgerIcon.style.display = 'inline-block'; + this.container.style.gap = '20px'; + this.container.style.alignItems = 'center'; + this.container.style.display = 'none'; } adjustStylesForLargeScreen() { - this.container.style.display = "flex"; - this.container.style.flexDirection = "row"; - this.container.style.justifyContent = "space-around"; - this.burgerIcon.style.display = "none"; + this.container.style.display = 'flex'; + this.container.style.flexDirection = 'row'; + this.container.style.justifyContent = 'space-around'; + this.burgerIcon.style.display = 'none'; } burgerIconStyles() { - this.burgerIcon.classList.add("fas", "fa-bars", "fa-2x"); - this.burgerIcon.style.margin = "10px"; + this.burgerIcon.classList.add('fas', 'fa-bars', 'fa-2x'); + 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() { diff --git a/dynamicProgrammingExamples/src/index.js b/dynamicProgrammingExamples/src/index.js index dc7381d..33e69ad 100644 --- a/dynamicProgrammingExamples/src/index.js +++ b/dynamicProgrammingExamples/src/index.js @@ -1,26 +1,33 @@ -import { Carousel } from "./components/imageCarousel"; -import { DropDown } from "./components/dropDown"; -import { Menu } from "./components/mobileMenu"; -import "./style.css"; +import { Carousel } from './components/imageCarousel'; +import { DropDown } from './components/dropDown'; +import { Menu } from './components/mobileMenu'; +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"); - script.src = "https://kit.fontawesome.com/24f16b96cf.js"; - script.crossOrigin = "anonymous"; + let script = document.createElement('script'); + script.src = 'https://kit.fontawesome.com/24f16b96cf.js'; + 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(); diff --git a/dynamicProgrammingExamples/src/static/img1.jpg b/dynamicProgrammingExamples/src/static/img1.jpg new file mode 100644 index 0000000..a538993 Binary files /dev/null and b/dynamicProgrammingExamples/src/static/img1.jpg differ diff --git a/dynamicProgrammingExamples/src/static/img2.jpg b/dynamicProgrammingExamples/src/static/img2.jpg new file mode 100644 index 0000000..d7eaff5 Binary files /dev/null and b/dynamicProgrammingExamples/src/static/img2.jpg differ diff --git a/dynamicProgrammingExamples/src/static/img3.jpg b/dynamicProgrammingExamples/src/static/img3.jpg new file mode 100644 index 0000000..c466159 Binary files /dev/null and b/dynamicProgrammingExamples/src/static/img3.jpg differ diff --git a/dynamicProgrammingExamples/src/static/img4.jpg b/dynamicProgrammingExamples/src/static/img4.jpg new file mode 100644 index 0000000..1f59052 Binary files /dev/null and b/dynamicProgrammingExamples/src/static/img4.jpg differ diff --git a/dynamicProgrammingExamples/src/style.css b/dynamicProgrammingExamples/src/style.css index eb67bd4..5026668 100644 --- a/dynamicProgrammingExamples/src/style.css +++ b/dynamicProgrammingExamples/src/style.css @@ -10,3 +10,12 @@ a { a:hover { color: black; } + +.carousel img { + object-fit: contain; + +} + +.active-slide { + display: block; +}