закончил inputs

assets/js/_gp-function.js

@@ -121,4 +121,5 @@ export function toggleHeader(button, content, blockheight, removeBlock, removeCl
         }
     }
 }
+
 // function

assets/js/gp-form.js

@@ -0,0 +1,146 @@
+'use strict';
+
+inputPhone('.form-input__phone', '.form-input-phone__icon', '.form-input-phone__code', '.form-input-phone__input', '.form-input-phone__list', '.form-input-phone-list__item', '.form-input-phone-list-item__icon', '.form-input-phone-list-item__code');
+
+function inputPhone(main, mainFlag, mainCode, input, list, selects, selectIcon, selectCode) {
+    let inputs = document.querySelectorAll(main);
+
+    inputs.forEach(e => {
+        let thisMainFlag = e.querySelector(mainFlag), 
+            thisMainCode  = e.querySelector(mainCode),
+            thisInput  = e.querySelector(input),
+            thisList  = e.querySelector(list),
+            thisSelects  = e.querySelectorAll(selects);
+
+        e.onclick = function (event) {
+            thisInput.focus();
+
+            thisList.classList.add('active');            
+        }
+
+        thisSelects.forEach(e => {
+            let newIcon = e.querySelector(selectIcon),
+                newCode = e.querySelector(selectCode);
+
+            e.onclick = function () {
+                thisMainFlag.style.cssText = `background-image:url("${newIcon.src}");`;
+                thisMainCode.textContent = newCode.textContent;
+                
+
+                setTimeout(() => {
+                    thisList.classList.remove('active');
+                }, 0);
+            }
+            
+        })
+    })
+}
+
+checkPhone('.form-input-phone__input');
+
+function checkPhone(input) {
+    document.querySelector(input).addEventListener('input', function(event) {
+        let text = event.target.value;
+        let length = text.length;
+        let newSymbol = event.data;
+
+        if (!(/^\d+$/.test(text.replaceAll(' ', '')))) {
+            event.target.value = text.slice(0, -1);
+            return;
+        }
+
+        if (length == 4 || length == 8) {
+            if (newSymbol != null) {
+                event.target.value = text.slice(0, -1) + ' ' + newSymbol;
+            }
+        }
+    })
+}
+
+inputTwo('.form-input__two', '.form-input-two__button', '.form-input-two__oval', '.form-input-two__input')
+
+function inputTwo(inputTwo, button, oval, input) {
+    let inputTwos = document.querySelectorAll(inputTwo);
+    
+    inputTwos.forEach(e => {
+        let thisButtons = e.querySelectorAll(button),
+            thisOval = e.querySelector(oval),
+            thisInput = e.querySelector(input),
+            thisMain = e;
+
+        thisButtons.forEach(button => {
+            button.onclick = function () {
+                let newLeft = button.clientWidth;
+                let newValue = button.textContent;
+
+                if (button.classList.contains('alternative')) {
+                    thisMain.classList.add('alternative');
+                    thisInput.value = newValue;
+                    thisOval.style.left = `${newLeft}px`;
+                }else{
+                    thisMain.classList.remove('alternative');
+                    thisInput.value = newValue;
+                    thisOval.style.left = `2px`;
+                }
+            }
+        })
+    })
+}
+
+inputRadio('.form-input__radio', '.form-input-radio__item', '.form-input-radio__title', '.form-input-radio__input')
+
+function inputRadio(main ,item, textClass, input) {
+    let inputRadios = document.querySelectorAll(main);
+
+    inputRadios.forEach(inputRadio => {
+        let items = inputRadio.querySelectorAll(item),
+            thisInput = inputRadio.querySelector(input);
+
+        items.forEach(radio => {
+            let thisText = radio.querySelector(textClass).textContent;
+
+            radio.onclick = function () {
+                if (inputRadio.querySelector(`${item}.active`)) {
+                    inputRadio.querySelector(`${item}.active`).classList.remove('active');
+                }
+                thisInput.value = thisText;
+                radio.classList.add('active');
+            }
+        })
+    })
+}
+
+listInputRadio('.form-input__list' ,'.form-input-list__item', '.form-input-list-item__text', '.form-input-list__input', '.form-input-list__content', '.form-input-list__block-content');
+
+function listInputRadio(main ,item, textClass, input, content, block) {
+    let listInputRadios = document.querySelectorAll(main);
+
+    listInputRadios.forEach(listInputRadio => {
+        let thisInput = listInputRadio.querySelector(input),
+            items = listInputRadio.querySelectorAll(item),
+            thisContent = listInputRadio.querySelector(content),
+            thisBlock = listInputRadio.querySelector(block);
+
+        thisInput.onclick = function () {
+            thisBlock.classList.add('active');
+            thisBlock.style.height = '192px';
+        }
+
+        items.forEach(item => {
+            item.onclick = function () {
+                let newText = item.querySelector(textClass).textContent;
+
+                thisInput.value = newText;
+                
+                if (thisContent.querySelector('.active')) {
+                    thisContent.querySelector('.active').classList.remove('active');
+                }
+
+                item.classList.add('active');
+
+                thisBlock.classList.remove('active');
+                thisBlock.style.height = '0px';
+            }
+        })
+    })
+}