Added task Поле ввода

js-tasks-ru · Dec 30, 2024 · 6e8a052 · 6e8a052
1 parent cc5c19c
commit 6e8a052
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 0 deletions.
diff --git a/07-lection5/04-input/README.md b/07-lection5/04-input/README.md
@@ -0,0 +1,17 @@
+# Поле ввода
+
+figma: [https://www.figma.com/file/LavZmQfQccqyrTMzoSJYNu/CSS-Course?node-id=18342%3A1](https://www.figma.com/file/LavZmQfQccqyrTMzoSJYNu/CSS-Course?node-id=18342%3A1)
+
+Самое обычное - `input type="text"`.
+
+Не забудьте учесть состояния:
+- `:focus`
+- `_invalid`
+- `_success`
+- `_success:focus`
+- `_invalid:focus`
+
+Для `_success` и `_invalid` используем БЭМ-модификаторы, а не их CSS-братья `:valid` и `:invalid`, так как возможности CSS в данном случае не так велики, как JS. Если в форме регистрации придет ошибка, что такой email уже зарегистрирован, то нужно уметь выставить состояние `invalid` через JS. Также не всегда момент валидации через CSS совпадает с желаемым моментом валидации поля по дизайну.
+
+В общем случае можно сделать `input` недоступным для ввода через `:disabled`.
+Можно предусмотреть и это состояние - задание по желанию, со звездочкой :D
diff --git a/07-lection5/04-input/index.html b/07-lection5/04-input/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<!-- Страница с полем ввода -->
+<html lang="ru">
+    <head>
+        <link rel="stylesheet" href="../../assets/css/main.css">
+        <link rel="stylesheet" href="./input.css">
+    </head>
+    <body>
+
+    </body>
+</html>
diff --git a/07-lection5/04-input/input.css b/07-lection5/04-input/input.css
diff --git a/07-lection5/04-input/test/solution.test.js b/07-lection5/04-input/test/solution.test.js
@@ -0,0 +1,7 @@
+const expect = require('chai').expect;
+
+describe('lection5/input', () => {
+  it('Поле ввода', () => {
+    expect(1).to.equal(1);
+  });
+});