${this.obj[i]["productType"]}

${this.obj[i]["productName"]}

${this.obj[i]["productDescp"]}

` ; carouselListContent += carouselListElement; } $carouselView.innerHTML = `

${carouselListContent}

`; this._$nextButton = $carouselView.querySelector('.carousel-next-button'); this._$carouselList = $carouselView.querySelector('.carousel-list'); this._$prevButton = $carouselView.querySelector('.carousel-prev-button'); const $carouselCard = $carouselView.querySelector('.carousel-card'); this.container.appendChild($carouselView); console.log('check2'+ $carouselView.offsetWidth +',' + $carouselCard.offsetWidth); this._cardToViewRatio = Math.floor($carouselView.offsetWidth / $carouselCard.offsetWidth); console.log('check'+ this._cardToViewRatio); this._amountToMove = this._cardToViewRatio * $carouselCard.offsetWidth; console.log('check3'+ this._amountToMove); console.log(this); } Carousel.prototype.resize = () => { const $carouselView = this.container.querySelector('.carousel-view'); const $carouselCard = this.container.querySelector('.carousel-card'); this._cardToViewRatio = $carouselView.offsetWidth / $carouselCard.offsetWidth; this._amountToMove = cardToViewRatio * $carouselCard.offsetWidth; } Carousel.prototype.listen = function() { // window.addEventListener('resize', this.resize) // console.log('this'); // console.log(this); this._moveNextHandler = this._moveNext.bind(this); this._$nextButton.addEventListener('click', this._moveNextHandler, {passive:true}); this._movePrevHandler = this._movePrev.bind(this); this._$prevButton.addEventListener('click', this._movePrevHandler, {passive:true}); } Carousel.prototype._moveNext = function(){ // console.log('test'); // console.log(this); this._positionToMove = this._positionToMove - this._amountToMove; // console.log(this._amountToMove); // console.log(this._positionToMove); requestAnimationFrame(()=>{this._slide(this._positionToMove)}); } Carousel.prototype._movePrev = function(){ this._positionToMove = this._positionToMove + this._amountToMove; requestAnimationFrame(()=>{this._slide(this.positionToMove)}); } Carousel.prototype._slide = function(positionToTransform){ console.log(this); console.log(this._$carouselList); this._$carouselList.style.color = 'red'; // this._$carouselList.style.marginLeft = positionToTransform + 'px'; this._$carouselList.style.transform = 'translateX('+ positionToTransform + ')px'; } Carousel.prototype.destroy = ()=>{ this._$nextButton.removeEventListener('click', this._moveNextHandler); this._$prevButton.removeEventListener('click', this._moveNextHandler); this.container.innerHTML = ""; } function initialize(data){ let container = document.querySelector('#container'); let newCarousel = new Carousel(container, data); let carousel2 = new Carousel(container, data); } var URL = "https://api.darksky.net/forecast/ce7e13b6b5351f1b76b3a03242ca146e/42.3601,-71.0589"; asyncCall("GET",URL, initialize); // newCarousel.generate(); })();

Stripe style dropdown menu

Stripe style dropdown menu

Fancy Navigation (WIP)

r1rxWfB6E

r1HVqQ0Mr

Test time 260819

Code Challenge: Animated Nav Bar

rJrguTSSE

BJikt1Jh4

BkDQiwHPV

S1YOPpJQB

SJBS3DBrE

HkS_-nFsN