Skip to content

Hw 18 #20

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
wants to merge 11 commits into
base: master
Choose a base branch
from
Open

Hw 18 #20

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
6bb77c6
classwork 17
viskosa Jul 24, 2018
8662cc0
classwork 17
viskosa Jul 28, 2018
a6e2838
classwork 17 was continued
viskosa Jul 28, 2018
de03f95
tasks for hw-17 were added
viskosa Jul 28, 2018
5c78082
hw_17 was partially done
viskosa Jul 29, 2018
6d2206a
slider was refactored
viskosa Jul 31, 2018
5687fad
hw_18
viskosa Jul 31, 2018
fe55896
hw_18 part 1
viskosa Aug 1, 2018
7533acd
hw_18 almost finished
viskosa Aug 2, 2018
f6d1273
hw_18 was refactored
viskosa Aug 3, 2018
4997eed
new way to binding
viskosa Aug 5, 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
25 changes: 25 additions & 0 deletions js-core/classworks/classwork-17/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Lesson_17</title>
<style type="text/css">
.active {
border-radius: 50%;

}
</style>

</head>
<body>
<h1>Classwork 17</h1>

<div id="app"></div>

<div id='next'
style="width: 100px; height: 100px; background: yellow; position: relative; transition:.2s"
class="active main_bitton"></div>

<script type="text/javascript" src="main.js"></script>
</body>
</html>
178 changes: 178 additions & 0 deletions js-core/classworks/classwork-17/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,178 @@
/* -----------------------PREVIOUS HOMEWORK--------------------------

0 Алгоритмы
Реализуйте функцию которая будет превращать трехмерный массив
в двухмерный, а если массив двухмерный, тогда в трехмерный массив

ИСПОЛЬЗУЙТЕ МЕТОДЫ МАССИВОВ !
*/
solution = arr => {
// каким-то образом понять, сколько должно быть на выходе
return arr[0].map((_, index) => { // это чтобы понять, сколько должно быть массивов на выходе
return arr.map((value) => { //value - это в первом случае [1, 3, 5]. Этот ретерн сработает 3 раза, т.е. вернет 3 массива
return value[index];// верни из [1, 3, 5] первое значение, потом второе, потом третье -
// в зависимости от итерации по маленькому массиву
})
})

}
/*Мое решение - так себе
solution = arr => {
let counter = 0;
let resultArray = [];

while (counter != arr[0].length) {

let smallArray = arr.map(item => { // [1, 'a']
return item[counter];
})

resultArray.push(smallArray);
counter++;
}

return resultArray;

}*/
//console.log(solution([ [1, 3, 5], [2, 4, 6] ])) //=> [ [1, 2], [3, 4], [5, 6] ];
//console.log(solution([ [1, 'a'], [2, 'b'], [3, 'c'] ])) //=> [ [1, 2, 3], [a, b, c] ];
//console.log(solution([[]]))// => []
//console.log(solution([ [ [ ] ] ])) // = [ [] ]



//--------------CLASSWORK 17---------------------------
//------createDocumentFragment--------------------------
//Создает “виртуальный документ”, в которым можно генерировать разметку и работать с элементами.
//При вставке в документ document fragment исчезает, остается только разметка.
//Удобно при создание виртуальной разметки….
//css нету

let myDocument = document.createDocumentFragment();
const div = document.createElement('div');
div.textContent = 'qwerty';

myDocument.appendChild(div);
document.body.appendChild(myDocument);

//-------documentWrite-----------------------------------
//напишется прям в том месте дома, где встретился по коду

//document.write('<h1>qwert</h1>')

let myNext = document.getElementById('next');
console.log(myNext);
//сделать по клику, чтобы менялся цвет зеленый-желтый-красный-------
//green
//yellow
//red

/*myNext.onclick = function(){
const {style} = next;

if (style.backgroundColor === 'green') {
style.backgroundColor = 'yellow';

} else if (style.backgroundColor === 'yellow'){
style.backgroundColor = 'red';
} else {
style.backgroundColor = 'green';
}

}*/

//сделать, чтобы цвет менялся каждую секунду------------------

/*let arr = ['green', 'yellow', 'red'];

let counter = 0;

setInterval(()=>{
next.style.backgroundColor = arr[counter];
counter++;
if(counter === arr.length) {
counter = 0;
}
}, 1000)*/

//увеличивайте ширину next на 10 px каждую 1 сек----------------
let arr = ['green', 'yellow', 'red'];

let counter = 0;
//let widthCounter = 10

/*setInterval(()=>{
next.style.backgroundColor = arr[counter];
const newWidth = parseInt(next.style.width) + 10;

next.style.width = newWidth + 'px';
//next.style.left = newWidth + 'px';

console.log(next.style.width);
counter++;
if(counter === arr.length) {
counter = 0;
}
}, 100)*/

//-----------------------------КЛАССЫ----------------------
//элемент.className - вернет список классов элемента в виде строки
console.log(next.classList) //выводит весь список классов в виде псевдомассива
//element.classList.contains()//содержит
//element.classList.add()//добавить
//element.classList.remove()//удалить
//element.classList.toggle()//переключить

//через 1 сек делать квадрат то кругом, то квадратом
setInterval(()=>{
next.style.backgroundColor = arr[counter];
//const newWidth = parseInt(next.style.width) + 10;
//next.style.width = newWidth + 'px';

next.classList.toggle('active');
counter++;
if(counter === arr.length) {
counter = 0;
}
}, 500);

//---------------------------------------
/*element.clientTop ~ css border, высота бордера верхнего
element.clientLeft ~ css border, ширина левого бордера
element.clientWidth ~ css width + padding - (scroll-bar)
element.clientHeight ~ css height + padding//без единиц измерения, только цифры

offsetHeight ~ css height + border + padding, То же, что и clientHeight, но возвращает ширину/высоту элемента с учетом и паддинга, и бордера
offsetWidth ~ css width + border + padding
offsetTop - положение сверху относительно offsetParent элемента
offsetLeft - положение слева относительно offsetParent элемента
offsetParent - Свойство offsetParent содержит первый родительский элемент у которого CSS свойство position не равно static, либо body если его нет.
То есть родителя относительно которого происходит позиционирование элемента. */

setInterval(()=>{
next.style.backgroundColor = arr[counter];
//const newWidth = parseInt(next.style.width) + 10;
//next.style.width = newWidth + 'px';

next.classList.toggle('active');
counter++;
if(counter === arr.length) {
counter = 0;
}
}, 500);

//element.scrollTop - позиция скролла относительно блока элемента (px) считывает или устанавлиет
// количество пикселей, прокрученных от верха элемента. scrollTop измеряет
// дистанцию от верха элемента до верхней точки видимого контента. Когда контент
// элемента не создаёт вертикальную прокрутку, его scrollTop равно 0.
//element.scrollLeft - позиция скролла относительно горизонтального элемента (px)

//element.scrollIntoView() - скролл к элементу
//elem.scrollIntoView(true) - Прилепит элемент elem, на котором вызывается метод, к верху страницы
//elem.scrollIntoView(false) - Прилепит элемент elem, на котором вызывается метод, к низу страницы

//window.pageYOffset - скролл Y относительно окна window. хранит текущую прокрутку страницы в px, не работает в IE
//window.pageXoffset - скролл X относительно окна window. хранит текущую прокрутку страницы в px, не работает в IE

//document.documentElement.scrollTop - то же самое для IE и FF
//document.body.scrollTop - то же самое, работает в хроме, в файрфоксе не работает
140 changes: 140 additions & 0 deletions js-core/classworks/classwork-18/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,140 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Lesson_18</title>
<style type="text/css">
td {
border: 2px solid black;
width: 50px;
height: 50px;
}
</style>
<style type="text/css">
.block {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
position: absolute;
border: 2px solid black;
}
.block1 {
width: 300px;
height: 300px;
background: #000;
}
.block2 {
width: 200px;
height: 200px;
background: aquamarine;
}

.block3 {
width: 100px;
height: 100px;
background: blueviolet;
}
</style>
</head>
<body>
<h1>Classwork 18</h1>
<div class="block block1">
<div class="block block2">
<div class="block block3">

</div>
</div>
</div>

<table>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>

<script type="text/javascript" src="main.js"></script>
</body>
</html>
Loading