Skip to content

add 0 Task + carousel, confused in numbers and called a branch of hom… #19

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
olgakuzminagithub wants to merge 5 commits into
base: master
Choose a base branch
from
Open

add 0 Task + carousel, confused in numbers and called a branch of hom… #19

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
0cdbe4e
add 0 Task + carousel, confused in numbers and called a branch of hom…
olgakuzminagithub Jul 26, 2018
b0ee022
add method initialize
olgakuzminagithub Jul 26, 2018
7b8e597
add TASK 2
olgakuzminagithub Jul 30, 2018
493655f
add TASK 2
olgakuzminagithub Jul 30, 2018
b2afbfb
after lesson
olgakuzminagithub Jul 31, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 11 additions & 0 deletions js-core/homeworks/homework-17/index2.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HomeWork 17 Part 2</title>
</head>
<body>
<div class="fetch"></div>
<script src="src/top-style.js"></script>
</body>
</html>
89 changes: 32 additions & 57 deletions js-core/homeworks/homework-17/src/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,9 +45,31 @@ class Carousel {
this.transition = element.transition,
this.infinity = element.infinity,
this.nav = element.nav,
this.timer = element.timer
this.timer = element.timer,
this.list = carousel.querySelectorAll('li');
}
start() {
static initialize(properties) {
let myInitializedCarousel = new Carousel(properties);
myInitializedCarousel.start();
}
infinityCarousel () {
let last = this.list.length - 1;
if (!this.list[last].classList.contains('active')) {
Copy link
Member

@OlegLustenko OlegLustenko Jul 31, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

there a bunch of calculations, want to think about it optimization a bit

for (let i = 0; i < this.list.length; i ++) {
let nextPosition = parseInt(this.list[i].style.left) - this.widthImg * this.count;
this.list[i].style.left = nextPosition + 'px';
let position = parseInt(this.list[i].style.left);
if (position === 0) {
this.list[i].classList.add('active')
Copy link
Member

@OlegLustenko OlegLustenko Jul 31, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

what about method toggle ? do you remember any ?:)

} else {
this.list[i].classList.remove('active')
}
}
} else if (this.list[last].classList.contains('active') && this.infinity === true) {
Copy link
Member

@OlegLustenko OlegLustenko Jul 31, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this.list[last].classList.contains('active') && this.infinity === true
well, having such conditionals is a tech-debt.

We can ask user for set default active element for example to avoid such construction or something else

this.startCarousel();
}
}
startCarousel () {
/*Объявляем перменные */
let carousel = document.querySelector(this.elementToApply);
Copy link
Member

@OlegLustenko OlegLustenko Jul 27, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

that method VERY BIG, can we split some logic to other methods?

let prev = carousel.querySelector('.prev');
Expand All @@ -64,7 +86,7 @@ class Carousel {
const div = document.createElement('div');
div.setAttribute('class', 'navigation');
const ul = document.createElement('ul');
for (let i = 0; i < list.length; i++) {
for (let i = 0; i < this.list.length; i++) {
const li = document.createElement('li');
li.setAttribute('class', 'nav');
li.innerHTML = i + 1;
Expand All @@ -73,14 +95,14 @@ class Carousel {
div.appendChild(ul);
let navs = [];

/* Добавьте внизу цифры с текущим активным изображением.*/

if (nav === true) {
carousel.appendChild(div);
navs = carousel.querySelectorAll('.nav');
}

/* Один круг карусели */
/* Не получилось разделить метод на несколько, потому что при событии onclick
не получаеться обращаться к глобальной переменной this.list и надо переопредлять переменную list в саом методе */

const newRoundCarusel = () => {
for (let i = 0; i < list.length; i ++) {
Expand Down Expand Up @@ -139,37 +161,20 @@ class Carousel {
}
};
};

/*Запускаем карусель */

newRoundCarusel();

}
start () {
this.startCarousel();

/*Запускаем таймер, если он есть*/

if (this.timer !== 0) {
setInterval(() => {
let last = list.length - 1;
if (!list[last].classList.contains('active')) {
for (let i = 0; i < list.length; i ++) {
let nextPosition = parseInt(list[i].style.left) - widthImg * count;
list[i].style.left = nextPosition + 'px';
let position = parseInt(list[i].style.left);
if (position === 0) {
list[i].classList.add('active')
} else {
list[i].classList.remove('active')
}
}
} else if (list[last].classList.contains('active') && infinity === true) {
newRoundCarusel();
}
this.infinityCarousel()
}, this.timer);
}
}
static initialize(properties) {
var myInitializedCarousel = new Carousel(properties);
myInitializedCarousel.start();

}
}

Expand All @@ -183,36 +188,6 @@ Carousel.initialize({
});


/*
* TASK 2
* Сделайте класс, который будет иметь метод topStyle
* метод topStyle принимает объект с CSS стилями и добавляет в <head>
* новый элемент с данными стилями
*
*
* */
// .topStyle('fetch', {backgroundColor:'blue'})
/*
*
* <style>.fetch {
* background-color
* */

/* Не получилось */
//
// class Style {
// topStyle (className, yourStyle) {
// document.head.innerHTML =
// `<style>
// .${className} {
// ${yourStyle}
// }
// </style>`
// }
// }
// const newStyle = new Style();
// newStyle.topStyle('fetch', {backgroundColor:'blue'});




Expand Down
38 changes: 38 additions & 0 deletions js-core/homeworks/homework-17/src/top-style.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@

/*
* TASK 2
* Сделайте класс, который будет иметь метод topStyle
* метод topStyle принимает объект с CSS стилями и добавляет в <head>
* новый элемент с данными стилями
*
*
* */
// .topStyle('fetch', {backgroundColor:'blue'})
/*
*
* <style>.fetch {
* background-color
* */

/* Не получилось */

class Style {
standartViewStyle (property) {
return property.replace(/([a-z])([A-Z])/, '$1-$2').toLowerCase();
}
topStyle (className, yourStyle) {
const style = document.createElement('style');
let properties = '';
for (let key in yourStyle) {
properties += `${this.standartViewStyle(key)}: ${yourStyle[key]};
`;
}
style.innerHTML = `.${className} {
${properties}
}`;
document.head.appendChild(style);

}
}
const newStyle = new Style();
newStyle.topStyle('fetch', {backgroundColor:'blue', width: '100px', height: '100px', marginLeft: '100px', marginTop: '100px'});