Created input fields

js-tasks-ru · Jan 1, 2025 · e837f5e · e837f5e
1 parent 613e17e
commit e837f5e
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 1 deletion.
diff --git a/07-lection5/04-input/index.html b/07-lection5/04-input/index.html
@@ -7,6 +7,8 @@
     <link rel="stylesheet" href="./input.css">
 
     <title>Input</title>
+
+    <script src="https://unpkg.com/feather-icons"></script>
 </head>
 
 <body>
@@ -19,10 +21,29 @@
 
         <div class="input">
             <label for="success" class="input__label">Success</label>
-            <input class="input__field input__field_success" type="text" placeholder="Success" id="success">
+            <div class="input-wrapper">
+                <input class="input__field input__field_success" type="text" placeholder="Success" id="success">
+                <i class="input__icon" data-feather="check-circle"></i>
+            </div>
         </div>
 
+        <div class="input">
+            <label for="error" class="input__label">Error</label>
+            <div class="input-wrapper">
+                <input class="input__field input__field_invalid" type="text" placeholder="Error" id="error">
+                <i class="input__icon" data-feather="alert-triangle"></i>
+            </div>
+
+            <div class="input">
+                <label for="disabled" class="input__label">Disable</label>
+                <input class="input__field" type="text" placeholder="Disable" id="default" disabled>
+            </div>
+
     </div>
+
+    <script>
+        feather.replace();
+    </script>
 </body>
 
 </html>
diff --git a/07-lection5/04-input/input.css b/07-lection5/04-input/input.css
@@ -26,6 +26,7 @@
     font-style: normal;
     font-weight: 400;
     line-height: 1.3;
+    width: 100%;
 }
 
 .input__field::placeholder {
@@ -37,3 +38,38 @@
     outline: none;
     color: var(--grey-4, #495057);
 }
+
+.input-wrapper {
+    position: relative;
+    display: flex;
+    align-items: center;
+}
+
+.input__icon {
+    fill: none;
+    color: var(--blue, #374FC7);
+    position: absolute;
+    right: 16px;
+}
+
+.input__field_success::placeholder {
+    color: var(--grey-4,#495057);
+}
+
+.input__field_invalid {
+    border-color: var(--error, #F03D3E);
+}
+
+.input__field_invalid::placeholder {
+    color: var(--grey-4,#495057);;
+}
+
+.input__field_invalid ~ .input__icon {
+    color: var(--error, #F03D3E);
+}
+
+.input__field_disabled {
+    background-color: var(--grey-1, #F8F9FA);
+    border-color: var(--grey-2, #DDE2E5);
+    color: var(--grey-3, #ACB5BD);
+}