Merge branch 'js-tasks-ru:master' into master

js-tasks-ru · Sep 2, 2024 · 98b278e · 98b278e
2 parents 7c38480 + a3f6aaf
commit 98b278e
Show file tree

Hide file tree

Showing 10 changed files with 190 additions and 0 deletions.
diff --git a/5-module/1-task/README.md b/5-module/1-task/README.md
@@ -0,0 +1,25 @@
+# Спрятать себя
+
+Напишите функцию `hideSelf`, которая сделает так, чтобы кнопка с классом `hide-self-button` скрывала себя по нажатию. Чтобы скрыть кнопку, добавьте ей атрибут `hidden`.
+
+```js
+function hideSelf() {
+  // ваш код...
+}
+
+hideSelf();
+```
+
+Сама кнопка:
+```html
+<button class="hide-self-button">Нажмите, чтобы спрятать</button>
+```
+
+В файле `index.html` вы можете найти пример использования функции.
+
+<details>
+<summary><i>Подсказка об использовании hidden атрибута</i></summary>
+<p style="padding: 16px">
+<bold>hidden</bold> - стандартный атрибут, поэтому он представлен в виде свойства в DOM-елементе: <code>button.hidden</code>. Подробнее можно прочитать <a href="https://learn.javascript.ru/basic-dom-node-properties#svoystvo-hidden">здесь</a>
+<p>
+</details>
diff --git a/5-module/1-task/index.css b/5-module/1-task/index.css
@@ -0,0 +1,14 @@
+.hide-self-button {
+  font-size: 20px;
+  font-weight: bold;
+  border: 2px solid #bada55;
+}
+
+.hide-self-button:active {
+  background-color: #cfcccc;
+}
+
+body {
+  padding-top: 50px;
+  padding-left: 50px;
+}
diff --git a/5-module/1-task/index.html b/5-module/1-task/index.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Спрятать себя</title>
+  <link rel="stylesheet" href="./index.css">
+</head>
+
+<body>
+  <button class="hide-self-button">Нажмите, чтобы спрятать</button>
+
+  <script src="./index.js"></script>
+  <script>
+    hideSelf();
+  </script>
+</body>
+
+</html>
diff --git a/5-module/1-task/index.js b/5-module/1-task/index.js
@@ -0,0 +1,3 @@
+function hideSelf() {
+  // ваш код...
+}
diff --git a/5-module/1-task/task.test.js b/5-module/1-task/task.test.js
@@ -0,0 +1,24 @@
+describe('5-module-1-task', () => {
+  let buttonElement;
+
+  beforeEach(() => {
+    buttonElement = document.createElement('button');
+    buttonElement.textContent = 'Нажмите, чтобы спрятать';
+    buttonElement.className = 'hide-self-button';
+
+    document.body.append(buttonElement);
+
+    hideSelf();
+  });
+
+  afterEach(() => {
+    buttonElement.remove();
+  });
+
+  it('после клика по кнопке она должна исчезнуть', () => {
+    let clickEvent = new MouseEvent('click', { bubbles: true });
+    buttonElement.dispatchEvent(clickEvent);
+
+    expect(buttonElement.hidden).toBeTruthy();
+  });
+});
diff --git a/5-module/2-task/README.md b/5-module/2-task/README.md
@@ -0,0 +1,19 @@
+# Скрыть элемент по нажатию кнопки
+
+Напишите функцию `toggleText`, которая сделает так, чтобы при первом нажатии на кнопку с классом `toggle-text-button` текст `<div id="text">Текст</div>` исчезал, а при повторном нажатии появлялся. Чтобы скрыть текст, добавьте ему атрибут `hidden` и наоборот.
+
+```js
+function toggleText() {
+  // ваш код...
+}
+
+toggleText();
+```
+
+Вёрстка для задачи:
+```html
+<button class="toggle-text-button">Нажмите, чтобы спрятать/показать текст</button>
+<div id="text">Текст</div>
+```
+
+В файле `index.html` вы можете найти пример использования функции.
diff --git a/5-module/2-task/index.css b/5-module/2-task/index.css
@@ -0,0 +1,22 @@
+.toggle-text-button {
+  font-size: 20px;
+  font-weight: bold;
+  border: 2px solid #bada55;
+}
+
+.toggle-text-button:active {
+  background-color: #cfcccc;
+}
+
+body {
+  padding-top: 50px;
+  padding-left: 50px;
+}
+
+#text {
+  width: 30%;
+  margin-top: 10px;
+  padding: 20px;
+  border-left: 5px solid #ccc;
+  font-size: 20px;
+}
diff --git a/5-module/2-task/index.html b/5-module/2-task/index.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Спрятать/показать текст</title>
+  <link rel="stylesheet" href="./index.css">
+</head>
+
+<body>
+  <button class="toggle-text-button">Нажмите, чтобы спрятать/показать текст</button>
+  <div id="text">Текст</div>
+
+  <script src="./index.js"></script>
+  <script>
+    toggleText();
+  </script>
+</body>
+
+</html>
diff --git a/5-module/2-task/index.js b/5-module/2-task/index.js
@@ -0,0 +1,3 @@
+function toggleText() {
+  // ваш код...
+}
diff --git a/5-module/2-task/task.test.js b/5-module/2-task/task.test.js
@@ -0,0 +1,39 @@
+describe('5-module-2-task', () => {
+  let buttonElement;
+  let textElement;
+
+  beforeEach(() => {
+    buttonElement = document.createElement('button');
+    buttonElement.textContent = 'Нажмите, чтобы спрятать/показать текст';
+    buttonElement.className = 'toggle-text-button';
+
+    textElement = document.createElement('div');
+    textElement.id = 'text';
+    textElement.textContent = 'Текст';
+
+    document.body.append(buttonElement);
+    document.body.append(textElement);
+
+    toggleText();
+  });
+
+  afterEach(() => {
+    buttonElement.remove();
+    textElement.remove();
+  });
+
+  it('после первого клика по кнопке текст должен исчезнуть', () => {
+    let clickEvent = new MouseEvent('click', { bubbles: true });
+    buttonElement.dispatchEvent(clickEvent);
+
+    expect(textElement.hidden).toBeTruthy();
+  });
+
+  it('после повторного клика по кнопке текст должен появиться', () => {
+    let clickEvent = new MouseEvent('click', { bubbles: true });
+    buttonElement.dispatchEvent(clickEvent);
+    buttonElement.dispatchEvent(clickEvent);
+
+    expect(textElement.hidden).toBeFalsy();
+  });
+});