annakondr · annakondr · May 20, 2019 · May 20, 2019 · ost-ptk · May 21, 2019
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+.idea
diff --git a/README.md b/README.md
diff --git a/move-boll/README.md 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
diff --git a/move-boll/index.html b/move-boll/index.html
@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Move The Ball</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+
+  <div class="field">
+    <img class="ball" src="images/ball.svg">
+  </div>
+
+<script type="text/javascript" src="main.js"></script>
+</body>
+</html>
diff --git a/move-boll/main.js 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
@@ -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
@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Tree</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+
+<div id="container"></div>
+
+<script type="text/javascript" src="main.js"></script>
+</body>
+</html>
diff --git a/tree_from_object/main.js 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);
diff --git a/tree_from_object/style.css b/tree_from_object/style.css