diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..485dee6 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +.idea diff --git a/README.md b/README.md deleted file mode 100644 index ca16e82..0000000 --- a/README.md +++ /dev/null @@ -1 +0,0 @@ -# anna_kondratiuk \ No newline at end of file diff --git a/move-boll/README.md b/move-boll/README.md new file mode 100644 index 0000000..d593746 --- /dev/null +++ b/move-boll/README.md @@ -0,0 +1,14 @@ +Передвигать мяч по полю +важность: 5 +Сделайте так, что при клике по полю мяч перемещался на место клика. + +Требования: + +Мяч после перелёта должен становиться центром ровно под курсор мыши, если это возможно без вылета за край поля. +CSS-анимация не обязательна, но желательна. +Мяч должен останавливаться у границ поля, ни в коем случае не вылетать за них. +При прокрутке страницы с полем ничего не должно ломаться. +Замечания: + +Код не должен зависеть от конкретных размеров мяча и поля. +Вам пригодятся свойства event.clientX/event.clientY diff --git a/move-boll/images/ball.svg b/move-boll/images/ball.svg new file mode 100644 index 0000000..b9203d0 --- /dev/null +++ b/move-boll/images/ball.svg @@ -0,0 +1,17 @@ + + + + ball + Created with Sketch. + + + + + + + + + + + + \ No newline at end of file diff --git a/move-boll/index.html b/move-boll/index.html new file mode 100644 index 0000000..c874c05 --- /dev/null +++ b/move-boll/index.html @@ -0,0 +1,16 @@ + + + + + Move The Ball + + + + +
+ +
+ + + + diff --git a/move-boll/main.js b/move-boll/main.js new file mode 100644 index 0000000..ae8284e --- /dev/null +++ b/move-boll/main.js @@ -0,0 +1,25 @@ +'use strict'; +const ball = document.querySelector('.ball'); +const field = document.querySelector('.field'); +const fieldY = field.getBoundingClientRect().top + field.clientTop; +const fieldX = field.getBoundingClientRect().left + field.clientLeft; +const ballY = ball.clientHeight/2; +const ballX = ball.clientWidth/2; +field.addEventListener('click', function(event) { + ball.style.left = event.clientX - fieldX - ballY +"px"; + ball.style.top = event.clientY - fieldY - ballX +"px"; + if (event.clientX > field.clientWidth) { + ball.style.left = field.clientWidth - fieldX - ballX + 'px'; + } + if (event.clientY > field.clientHeight) { + ball.style.top = field.clientHeight - fieldY - ballY +"px"; + } + if (event.clientX < fieldX + ballX) { + ball.style.left = fieldX - ballX + 'px'; + } + if (event.clientY < fieldY + ballY) { + ball.style.top = fieldY - ballY + 'px'; + } +}); + + diff --git a/move-boll/style.css b/move-boll/style.css new file mode 100644 index 0000000..04ed0a4 --- /dev/null +++ b/move-boll/style.css @@ -0,0 +1,19 @@ +.field { + position: relative; + width: 200px; + height: 150px; + border: 10px solid black; + background: #67d30b; + cursor: pointer; + overflow: hidden; +} + .ball { + position: absolute; + left: 0; + top: 0; + width: 40px; + height: 40px; + transition: all 1s; + } + + diff --git a/tree_from_object/index.html b/tree_from_object/index.html new file mode 100644 index 0000000..d82797c --- /dev/null +++ b/tree_from_object/index.html @@ -0,0 +1,14 @@ + + + + + Tree + + + + +
+ + + + diff --git a/tree_from_object/main.js b/tree_from_object/main.js new file mode 100644 index 0000000..f8cf73d --- /dev/null +++ b/tree_from_object/main.js @@ -0,0 +1,35 @@ +'use strict'; +const container = document.getElementById('container'); +let objectTree = { + "Рыбы": { + "Форель": {}, + "Щука": {} + }, + + "Деревья": { + "Хвойные": { + "Лиственница": {}, + "Ель": {} + }, + "Цветковые": { + "Берёза": {}, + "Тополь": {} + } + } + }; + +function createTree(element, object) { + const ul = document.createElement("ul"); + element.append(ul); + for (const tree in object) { + const li = document.createElement("li"); + li.innerHTML = tree; + ul.append(li); + + if (Object.keys(object[tree]).length > 0) { + createTree(li, object[tree]); + } + } +} + +createTree(container, objectTree); \ No newline at end of file diff --git a/tree_from_object/style.css b/tree_from_object/style.css new file mode 100644 index 0000000..e69de29