Чтобы лучше понять DOM, давайте вместе создадим проект калькулятора ссуды!
Для начала откройте свой VS Code и назовите папку: Loan Calculator. Итак, мы будем использовать BootStrap для создания нашего пользовательского интерфейса за считанные минуты. Поскольку нас больше интересует JS.
Поэтому создайте файл index.html в папке Loan Calculator и добавьте требуемый Bootsrap CDN после добавления шаблона HTML.
‹! - Обязательные мета-теги →
‹Meta charset =” utf-8 ›
‹Meta name =” viewport ”content =” width = device-width, initial-scale = 1, shrink-to-fit = no ”›
‹! - Bootstrap CSS →
‹Ссылка rel =” таблица стилей ”href =” https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css целостность = ”sha384-ggOyR0iXCbMQv3Xipma34MD + dH / 1fQ784 / j6cYCYORVOINXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX «Анонимный» ›
Так как же выглядит наш калькулятор ссуды? Тадаааа …… ..
Теперь сначала нам нужно понять структуру DOM, стоящую за ним.
Вы можете переставлять и перестраивать структуру DOM по своему выбору и интересам. Как только вы закончите с правильной маркировкой классов и идентификаторов, код JS будет работать лучше.
Это структура HTML:
‹! Doctype html›
‹Html lang =” en ”›
‹! - Обязательные мета-теги →
‹Meta charset =” utf-8 ›
‹Meta name =” viewport ”content =” width = device-width, initial-scale = 1, shrink-to-fit = no ”›
‹! - Bootstrap CSS →
‹Ссылка rel =” таблица стилей ”href =” https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css целостность = ”sha384-ggOyR0iXCbMQv3Xipma34MD + dH / 1fQ784 / j6cYCYORVOINXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX «Анонимный» ›
‹Title› Кредитный калькулятор ‹/title›
# загрузка, # результаты
{
дисплей: нет;
}
#Информация
{
выравнивание текста: центр;
padding-top: 10 пикселей;
}
‹Body class =« bg-dark »›
‹Div class =” container ”›
‹Div class =” row ”›
‹Div class =” col-md-6 mx-auto ”›
‹Div class =” card-body text-center mt-5 ›
‹H1 class =” заголовок display-5 pb-3 ›Кредитный калькулятор ‹/h1›
‹Form id =” ссудная форма ”›
‹Div class =” form-group ”›
‹Div class =” input-group ”›
‹Span class =” input-group-addon ”› $ ‹/span›
‹Input type =” number ”class =” form-control ”id =” amount ”placeholder =« Loan Amount »›
‹/Div›
‹/Div›
‹Div class =” form-group ”›
‹Div class =” input-group ”›
‹Span class =" input-group-addon "›% ‹/span›
‹Тип ввода =" число "класс =" форма-контроль "id =" интерес "заполнитель =" Интерес "›
‹/Div›
‹/Div›
‹Div class =” form-group ”›
‹Div class =” input-group ”›
‹Input type =» number »class =» form-control »id =« years »placeholder =« Years to Repay »›
‹/Div›
‹/Div›
‹Div class =” form-group ”›
‹Input type =" submit "value =" Calculate "class =" btn btn-dark btn-block "›
‹/Div›
‹! - Загрузчик здесь →
‹Div id =” loading ”›
‹Img src =” img / loading.gif ”alt =” ”›
‹/Div›
‹! - Результаты →
‹Div id =» results »class =» pt-4 ›
‹H5› Результаты ‹/h5›
‹Div class =” form-group ”›
‹Div class =” input-group ”›
‹Span class =” input-group-addon ”› Ежемесячный платеж ‹/span›
‹Input type =” number ”class =” form-control ”id =” month-payment ”placeholder =” Ежемесячный платеж ”отключен›
‹/Div›
‹/Div›
‹Div class =” form-group ”›
‹Div class =” input-group ”›
‹Span class =” input-group-addon ”› Общий платеж ‹/span›
‹Input type =” number ”class =” form-control ”id =” total-payment ”placeholder =” Total Payment ”отключен›
‹/Div›
‹/Div›
‹Div class =” form-group ”›
‹Div class =” input-group ”›
‹Span class =” input-group-addon ”› Общий процентный платеж ‹/span›
‹Input type =” number ”class =” form-control ”id =” total-Interest ”placeholder =” Total Interest ”отключен›
‹/Div›
‹/Div›
‹/Div›
‹/Div›
‹Div id =” info ”›
‹A href="https://www.google.com/ target="_blank"› ‹h4 class =” btn btn-dangerous ”› Ознакомьтесь с Кодексом! ‹/H4› ‹/a›
‹/Div›
‹/Div›
‹/Div›
‹/Div›
‹! - Дополнительный JavaScript →
‹! - сначала jQuery, затем Popper.js, затем Bootstrap JS →
‹Скрипт src =” https://code.jquery.com/jquery-3.3.1.slim.min.js целостность = ”sha384-q8i / X + 965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH + 8abtTE1Pi6jizo =” перекрестный скрипт ”
‹Скрипт src =” https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js целостность = ”sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMzr86dIq3s
‹Скрипт src =” https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js целостность = ”sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf / nJGz4xIxFDs +
‹Скрипт src =” app.js ”› ‹/script›
‹/Html›
Нам также нужна папка img для хранения изображения loading.gif для лучшего взаимодействия с пользователем.
Хватит UI, давайте сразу перейдем к JS-части, которая более интересна.
Первый шаг - захват всех элементов пользовательского интерфейса, которые нам нужны для добавления функций или прослушивателей событий. Увидев пользовательский интерфейс, вы можете увидеть, что кнопка отправки - единственное, что заставляет этот пользовательский интерфейс работать как единое целое.
Итак, взяв идентификатор формы, мы можем получить все детали, которые USER введет в него.
Теперь все, что нам нужно, это добавить к нему соответствующий прослушиватель событий.
На данный момент все на веб-странице видно, даже раздел результатов и загружаемый gif, который нам нужно отобразить после нажатия кнопки отправки.
Для этого мы добавим прослушиватель событий для отправки const:
Итак, что происходит здесь, после нажатия кнопки отправки: 1. Скройте раздел результатов и отобразите загружаемый файл gif по блокам, чтобы почувствовать пользовательский интерфейс с таймером для выполнения calculateResults () с интервалом 2 мс.
Теперь пришло время вызвать calculateResults (): -
Объяснение :
Первое изображение: - Нам нужно получить все элементы пользовательского интерфейса, отвечающие за ввод и вывод результатов, с помощью getElementById ().
Нам нужно применить формулу: и рассчитать основную сумму, начисленные проценты, рассчитанные платежи и соответственно вычислить ежемесячные платежи.
За ним следует условие if-else: проверить, является ли ежемесячный расчет конечным или нет. Если конечный, рассчитайте результаты соответствующим образом и отобразите результат в блоке, скрывая при этом loading.gif как display: none. Если не конечный, выполняется showError («Пожалуйста, проверьте свой номер»).
В showerror () скройте как результаты, так и раздел loading.gif как none. Затем создайте errorGif const с div в нем в DOM, добавьте к нему имя класса и добавьте в него текст ошибки. Добавьте div error, в частности, перед заголовком карты «Ссудный калькулятор». Вы также можете устранить ошибку через 3 мс, используя setTimeOut (), который соответственно вызовет clearError ().
ClearError () найдет добавленное имя класса’alert ’для errorGif и немедленно удалит его.
Вот так прекрасно работает LoanCalculator.
