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
91 changes: 91 additions & 0 deletions js-core/homeworks/homework-17/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,91 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Homework-17</title>
<style>
.container {
width: 90%;
max-width: 1170px;
margin: auto;
}
.carousel {
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;

}
.arrow {
width: 20px;
padding: 5px;
border: 1px solid #000;
border-radius: 5px;
cursor: pointer;
}
.carousel .carousel-images {
width: 1000px;
height: 600px;
overflow: hidden;
}
.carousel .carousel-images ul {
width: 9999px;
padding-left: 0;
position: relative;
}
.carousel .carousel-images ul li {
position: absolute;
list-style-type: none;
}
.carousel .carousel-images ul li img {
width: 1170px;
height: auto;
display: block;
}
.carousel .navigation {
margin: auto;
}
.carousel .navigation li {
list-style-type: none;
display: inline;
padding: 0 5px;
color: #000;
}
.carousel .navigation li.active {
color: blue;
}
</style>
</head>
<body>
<div class="container">
<div class="carousel" id="carousel">
<div class="arrow prev"><=</div>
<div class="carousel-images">
<ul>
<li>
<img src="https://cs10.pikabu.ru/post_img/2018/06/21/10/1529597665124189599.jpg">
</li>
<li>
<img src="https://cs7.pikabu.ru/post_img/2018/06/21/10/1529597652134517558.jpg">
</li>
<li>
<img src="https://cs7.pikabu.ru/post_img/2018/06/21/10/152959764518437593.jpg">
</li>
<li>
<img src="https://cs7.pikabu.ru/post_img/2018/06/21/10/1529597617155826805.jpg">
</li>
<li>
<img src="https://cs10.pikabu.ru/post_img/2018/06/21/10/152959760815609960.jpg">
</li>
</ul>
</div>
<div class="arrow next">=></div>
</div>

</div>


<script src="src/main.js"></script>
</body>
</html>
219 changes: 219 additions & 0 deletions js-core/homeworks/homework-17/src/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,219 @@
/*
TASK 0
Отобразите всех лидеров массива.
*
*
* Элемент лидер если он больше чем все последующие элементы
* после него ( элементы справа ).
* Последний элемент всегда лидер. Например в массиве [16,17,4,3,5,2]
* лидеры 17, 5 и 2.
*
* */

const solution = arr => {
let newArr =[];
for ( let i = 0; i <arr.length; i++) {
let count = 0;
for (let j = i + 1; j < arr.length; j ++) {
if (arr[i] > arr[j]) {
count ++;
}
}
if (count === arr.length - i - 1) {
newArr.push(arr[i]);
}
}
return newArr;
};

console.log(solution([16, 17, 4, 3, 5, 2])); // === [17, 5, 2]
console.log(solution([4, 3, 7, 12, 6, 67, 5, 45, 34, 35, 2, 8])); // [67, 45, 35, 8]
console.log(solution([12, 10, 12, 8, 7, 6])); // [12, 8, 7, 6]
console.log(solution([1, 2, 3, 4, 5, 4])); // [5, 4]
console.log(solution([12, 12, 12])); // [5, 4]


/* TASK 1
* Сделайте карусель.
* При клике по кнопке "<=" показывается первое изображение по "=>" следующее.
*/

class Carousel {
constructor (element) {
this.elementToApply = element.elementToApply,
this.widthImg = element.widthImg,
this.transition = element.transition,
this.infinity = element.infinity,
this.nav = element.nav,
this.timer = element.timer
}
start() {
/*Объявляем перменные */
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');
let next = carousel.querySelector('.next');
let list = carousel.querySelectorAll('li');

let widthImg = this.widthImg;
let count = this.transition;
let infinity = this.infinity;
let nav = this.nav;

/* Нумеруем картинки*/

const div = document.createElement('div');
div.setAttribute('class', 'navigation');
const ul = document.createElement('ul');
for (let i = 0; i < list.length; i++) {
const li = document.createElement('li');
li.setAttribute('class', 'nav');
li.innerHTML = i + 1;
ul.appendChild(li);
}
div.appendChild(ul);
let navs = [];

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

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

/* Один круг карусели */

const newRoundCarusel = () => {
for (let i = 0; i < list.length; i ++) {
list[0].classList.add('active');
list[list.length-1].classList.remove('active');
list[i].style.top = 0;
list[i].style.left = widthImg * count * i + 'px';
if (nav === true) {
navs[0].classList.add('active');
navs[list.length-1].classList.remove('active');
}
}
prev.onclick = function () {
if (!list[0].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');
if (nav === true) {
navs[i].classList.add('active');
}

} else {
list[i].classList.remove('active');
if (nav === true) {
navs[i].classList.remove('active');
}
}
}
}
};
next.onclick = function () {
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');
if (nav === true) {
navs[i].classList.add('active');
}
} else {
list[i].classList.remove('active');
if (nav === true) {
navs[i].classList.remove('active');
}
}
}
} else if (list[last].classList.contains('active') && infinity === true) {
newRoundCarusel();

}
};
};

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

newRoundCarusel();


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

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')
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.

what about toggle? :)

} else {
list[i].classList.remove('active')
}
}
} else if (list[last].classList.contains('active') && infinity === true) {
newRoundCarusel();
}
}, this.timer);
}
}
static initialize(properties) {
var myInitializedCarousel = new Carousel(properties);
myInitializedCarousel.start();
}
}

Carousel.initialize({
elementToApply: '.carousel',
widthImg: 1170,
transition: 1,
infinity: true,
nav: true,
timer: 0
});


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

/* Не получилось */
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.

а здесь дело в том, что получится только при помощи appendChild :)

//
// class Style {
// topStyle (className, yourStyle) {
// document.head.innerHTML =
// `<style>
// .${className} {
// ${yourStyle}
// }
// </style>`
// }
// }
// const newStyle = new Style();
// newStyle.topStyle('fetch', {backgroundColor:'blue'});