smig/odin-codespace
1
0
Fork 0
mirror of https://gitea.smigz.com/smiggiddy/odin-codeprojects.git synced 2024-12-25 22:10:43 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: css animations

Browse source
This commit is contained in:
Mike 2024-01-10 22:21:55 -05:00
parent 3f89b3b557
commit 3f96b0cdf0
3 changed files with 20 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
dynamicProgrammingExamples/src/components/imageCarousel.js
View file

@ -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() {

2
dynamicProgrammingExamples/src/components/mobileMenu.js
View file

@ -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;

9
dynamicProgrammingExamples/src/style.css
View file

@ -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;
}