From 6e8a05233f8637d680f8c755a76e94e13cad8ced Mon Sep 17 00:00:00 2001
From: javascriptru <67475495+jsru-1@users.noreply.github.com>
Date: Tue, 31 Dec 2024 00:14:01 +0300
Subject: [PATCH] =?UTF-8?q?Added=20task=20=D0=9F=D0=BE=D0=BB=D0=B5=20?=
=?UTF-8?q?=D0=B2=D0=B2=D0=BE=D0=B4=D0=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
07-lection5/04-input/README.md | 17 +++++++++++++++++
07-lection5/04-input/index.html | 11 +++++++++++
07-lection5/04-input/input.css | 0
07-lection5/04-input/test/solution.test.js | 7 +++++++
4 files changed, 35 insertions(+)
create mode 100644 07-lection5/04-input/README.md
create mode 100644 07-lection5/04-input/index.html
create mode 100644 07-lection5/04-input/input.css
create mode 100644 07-lection5/04-input/test/solution.test.js
diff --git a/07-lection5/04-input/README.md b/07-lection5/04-input/README.md
new file mode 100644
index 0000000..a4fdc54
--- /dev/null
+++ 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
new file mode 100644
index 0000000..ef02cb9
--- /dev/null
+++ b/07-lection5/04-input/index.html
@@ -0,0 +1,11 @@
+
+
+
+
+
+
+
+
+
+
+
diff --git a/07-lection5/04-input/input.css b/07-lection5/04-input/input.css
new file mode 100644
index 0000000..e69de29
diff --git a/07-lection5/04-input/test/solution.test.js b/07-lection5/04-input/test/solution.test.js
new file mode 100644
index 0000000..75bec11
--- /dev/null
+++ 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);
+ });
+});