Как сделать PIN Pad с помощью HTML CSS и JavaScript

Основной рабочий механизм PIN Pad заключается в том, что когда пользователь вводит PIN-код и нажимает «ОК», этот код подтверждает правильность PIN-кода и выдает уведомление о том, правильно или неправильно введен PIN-код.

Подготовить:

Случаи использования

Создайте структуру HTML, используя теги
укажите имя проекта и основной контейнер, содержащий все компоненты. Этот контейнер имеет максимальную ширину 100%.
Создайте структуру, подобную тегу, шириной 30% от основного контейнера и отцентрируйте ее на странице, установив для левого и правого полей значение «авто».
Здесь мы используем flexbox для форматирования различных кнопок и карточек.
Создайте текстовое поле вверху, в котором будет отображаться введенный PIN-код в формате пароля.
Создайте несколько строк, где каждая строка содержит по 3 кнопки, причем последняя строка содержит кнопку Del для удаления последнего введенного номера и кнопку ОК для отправки PIN-кода.
Добавьте соответствующие стили к элементам, используя их класс и значение идентификатора.
В файле JS сначала установите для заранее определенного правильного значения PIN-кода желаемое числовое значение.
При нажатии текущих цифровых кнопок этот номер будет добавлен к значению PIN-кода, отображаемому на кнопке управления вводом вверху.
Когда вы нажимаете Del, самые последние введенные данные будут удалены из полученного текстового поля. При нажатии кнопки «ОК» он проверит введенный PIN-код на основе ранее определенного PIN-кода и уведомит пользователя о том, правильно ли введен PIN-код или нет.
Пользователи не могут ничего вводить непосредственно в поле ввода.
Пользователь может нажать на эту кнопку, и она отобразится в поле ввода вверху.
Все события кликов JS обрабатываются из файлов JavaScript.

Структура проекта

Например, приведенный ниже код реализует базовое приложение с PIN-картой с использованием HTML, CSS и JavaScript.

JavaScript

// Script.js // Правильное значение PIN-кода let CorrectPin = “1234”; let btns = document.getElementsByClassName(“pinpad-btn”); let pinInput = document.getElementById(“pinpad-input”); for (let i = 0; i { pinInput.value += e.target.value; }); } Let submitBtn = document.getElementById(“submit-btn”); let delBtn = document.getElementById(“delete-btn”); let modal = document.getElementById(“модальный”); пусть результат = document.getElementById(“результат”); let closeBtn = document.getElementById(“закрыть”); submitBtn.addEventListener( “click”, () => { if ( !pinInput || !pinInput.value || pinInput.value === “” ) { alert( “Сначала введите PIN-код”); } else if ( pinInput.value === CorrectPin ) { alert(“Правильный PIN-код”); } else { alert(“Неверный PIN-код”); } // Сбрасываем ввод pinInput.value = “”; } ); delBtn.addEventListener(“click”, () => { if (pinInput.value) pinInput.value = pinInput.value.substr( 0, pinInput.value.length – 1 ); }); closeBtn.addEventListener( “click”, () => { modal.style.display = “none”; } );

HTML

Контактная площадка

Аккумуляторная площадка

1 2 3 4 5 6 7 8 9 Дел 0 Ок ×

CSS

/* Style.css */ .text-center { text-align: center; } .container { ширина: 100%; } .card { граница: 1 пиксель, сплошной черный; радиус границы: 5 пикселей; ширина: 30%; поле справа: авто; поле слева: авто; дисплей: гибкий; гибкое направление: столбец; } .card-header { display: flex; оправдание-содержание: центр; поле: 10 пикселей; выравнивание текста: по центру; } .row { display: flex; гибкое направление: строка; оправдание-содержание: центр; } .pinpad-btn { ширина: 25%; высота: 75 пикселей; поле: 5 пикселей; отступ: 5 пикселей; граница: 1 пиксель, сплошная черная; радиус границы: 20%; размер шрифта: 2em; дисплей: гибкий; оправдание-содержание: центр; выровнять-элементы: по центру; курсор: указатель; цвет фона: белый; } .pinpad-btn:hover { цвет фона: светло-серый; } #pinpad-input { border-radius: 10px; высота: 1,5ем; размер шрифта: 1,5em; выравнивание текста: по центру; ширина: 80%; }

Шаги для запуска приложения: Откройте Live Server, затем введите следующий URL-адрес в ссылку:

Результат:

Готово! Надеюсь, статья окажется для вас полезной.

В приведенной выше статье вы познакомились с «Как создать PIN-Pad с использованием HTML CSS и JavaScript». СоветыНадейтесь, что эта статья вам поможет! Если эта статья кажется вам интересной и полезной, не забудьте поделиться ею. Спасибо!