html код для калькулятора для сайта
Простой калькулятор на JavaScript
Сегодня сделаем простейший калькулятор на JavaScript, но не просто так, а с умыслом. Позднее мы представим, что мы тестировщики, и попробуем протестировать этот калькулятор. Вернее, не протестировать, а дико сломать.
Что делаем
На старте у нас будет самый простой калькулятор, который сможет только складывать, вычитать, умножать и делить два числа. Этого уже будет достаточно, чтобы потренироваться и в коде, и в дальнейшем тестировании.
Логика работы
Так как это простой калькулятор, то поступим так:
Размещаем кнопки и поля ввода на странице
Разместим кнопки с полями на странице, а потом будем писать скрипт.
Обрабатываем нажатия на кнопки математических действий
Сейчас у нас есть 4 кнопки, но нажимать их бесполезно — всё равно ничего не произойдёт, потому что нет обработчиков нажатий. Но что нам прописывать в обработчике?
Первый вариант — привязать к каждой кнопке свою функцию, а потом для каждой операции выполнять свои действия внутри этого обработчика. Но раз у нас есть кнопка «Посчитать», то нам придётся при нажатии на неё из этих четырёх функций вытаскивать действие и нужные команды, запоминать выбранное и как-то использовать в вычислениях. Сложно и громоздко.
Второй вариант — просто записывать в какую-то переменную, какая кнопка была нажата. А потом, при нажатии «Посчитать», просто смотреть в эту переменную и выполнять соответствующее действие. Так и поступим.
👉 Воспользуемся хитростью, про которые многие забывают: в обработчике onclick необязательно писать только функцию — туда можно отправить любую JS-команду. Главное, не забыть потом в скрипте предусмотреть эту переменную, которую мы используем.
Пишем скрипт
Сам скрипт тоже будет простой:
Сразу привяжем функцию func() к нажатию на кнопку «Посчитать»:
Выводим результат
Сейчас в скрипте есть проблема: он всё считает, но ничего не выводит. А всё потому, что мы не предусмотрели на странице место для вывода. Исправим это и добавим строчку в скрипт.
Это — добавим на страницу после кнопки с расчётом:
А это — в функцию func(), чтобы она сразу отправляла результат на страницу:
Собираем всё вместе и смотрим результат
Отлично, калькулятор работает и складывает всё как нужно! Мы выполнили свою задачу — быстро запилили калькулятор на JavaScript, можно закрывать задачу в таск-трекере и браться за новую.
Что дальше
Дальше мы этот код отправим тестировщикам — вряд ли они в нём найдут что-то критичное или вообще какие-то ошибки, но правила есть правила. А если тестировщики тут что-то найдут, мы обязательно расскажем об этом в новой статье.
Попробуйте сами побыть тестировщиком и протестировать эту программу, а результатами тестирования поделитесь в комментариях.
Простой html код калькулятора для сайта, который поможет узнать все прелести языка гипертекстовой разметки
Здравствуйте, подписчики и случайные гости моего блога. В предыдущих публикациях я рассказывал вам о большом количестве тегов, свойств и атрибутов, которыми снабжены такие веб-языки, как html и css, приводил множество примеров, касающихся оформления и структурирования веб-страниц.
Если следовать логике, то у вас должен был возникнуть вопрос: «Неужели перечисленные языки годятся только для верстки сайтов?». Ответ на этот вопрос отрицательный.
Человек, который отлично владеет языком разметки и с легкостью при помощи стилей задает дизайн своим творениям, может использовать знания для написания учебных приложений, игр и других видов программ. Именно поэтому после прочтения данной статьи вы научитесь писать html код калькулятора для сайта. Начнем обучение!
Инструменты для создания калькулятора
В просторах интернета можно найти бесконечно множество разнообразных реализаций одного и того же вида калькулятора, с использованием разных языков и плагинов. Наша с вами задача состоит создать простой ипотечный калькулятор при помощи средств и языков, которые вы уже знаете. К ним относятся html, css и их встроенный инструментарий.
Ипотечный калькулятор связан с расчетом погашения кредита, взятого на покупку жилья. Поэтому в программе должны быть предусмотрены текстовые поля ввода и кнопки для отправки и очистки введенной информации. Также признаком хорошего тона считается замена простого текстового поля с вводом данных вручную на выпадающий список, если нужные пункты заранее известны.
Элемент используется для создания различных важных объектов, позволяющих осуществлять ввод, редактирование и обработку данных.
При помощи данного тега на странице вашего веб-сервиса можно создать:
С появлением платформы html5 данный тег пополнился множеством дополнительных встроенных типов полей, при указании которых производится автоматическая проверка корректности написанных данных.
Хочу обратить внимание на один атрибут, который позже я задействую в программе. Это required. Указание данного параметра запрещает оставлять поле незаполненным, предотвращая тем самым возникающие в будущем ошибки.
Тег — очень важный инструмент, без которого не может обойтись ни один уважающий себя интернет-сервис.
Формы нужны для связи клиентского приложения (в данном случае калькулятора) с сервером. Так, используют для организации страниц регистрации или входа, отправки сообщений, мультимедиа, комментариев и другой информации, которую нужно каким-то образом обработать.
задает каркас для списка с раскрывающимися пунктами меню, а создает один пункт открывающегося списка.
Пришло время запрограммировать ипотечный калькулятор
Выше я подробно описал каждый тег и атрибут, который использовал при программной реализации калькулятора, так что теперь весь код вам будет понятен. Как всегда небольшой совет от меня: при возможности обязательно опробуйте данный пример практически, а лучше постарайтесь повторить код самостоятельно. Это ускорит ваш процесс обучения.
Калькулятор для сайта — готовый код онлайн
Еще в начале прошлого десятилетия большинство людей для выполнения различных математических операций пользовалось электронными калькуляторами. Сегодня на смену электронным устройствам пришли новые возможности, которые позволяют в онлайн создавать различные расчетные системы.
Что такое онлайн-калькулятор?
Современные технологии, используемые в веб-разработке, предоставляют возможность создавать специальные html-калькуляторы для применения в различных сферах деятельности. Еще несколько лет назад для выполнения данных операций привлекались специалисты организаций по созданию узкопрофильных расчетных программ. Услуги таких специалистов стоили достаточно дорого. Сегодня все изменилось.
Зачем необходим калькулятор для сайта? Главной задачей этого инструмента является выполнение расчетов, которые могут заинтересовать потенциальных партнеров и обычных посетителей. На основании этих расчетов они, как правило, принимают окончательное решение относительно покупки какого-либо товара или применения услуги. Данные, необходимые для проведения расчетов, задаются на этапе программирования и находятся в сфере деятельности администратора. Обычный онлайн калькулятор для сайта состоит из следующих компонентов:
Как использовать html-калькулятор
Наличие калькулятора способствует увеличению количества посетителей и повышению спроса на продукцию или услугу, для расчета стоимости которой и разработан данный инструмент. Онлайн-калькулятор также необходим для обеспечения возрастания заинтересованности клиентов и налаживания с ними более плотного партнерства. Учитывая такие особенности html-калькуляторов, они чаще всего используются на сайтах компаний, предоставляющих услуги в сфере строительства, грузоперевозок, продажи косметики, мобильного производства, ремонтных работ и т.д. Онлайн-калькулятор также является неотъемлемой частью сайтов банков и клиринговых компаний.
Основная задача данного инструмента – обеспечение потенциального партнера достоверной информацией по товару или услуге, которая его интересует. При этом онлайн-калькуляторы способствуют налаживанию связи с потенциальным клиентом без сбора каких-либо сведений о нем и проведения дополнительных опросов.
К тому же калькулятор на сайте зачастую используется в качестве своеобразного индикатора заинтересованности клиентов в конкретном товаре. Именно поэтому html-калькулятор рекомендуется дополнять возможностью связи клиента с менеджером компании. Такая возможность позволит потенциальному партнеру уточнить все интересующие вопросы. Максимально быстрый ответ менеджеров позволит «зацепить» клиента, сохранить его интерес к товару и, наконец, «конвертировать» из статуса «потенциальный партнер» в покупателя.
Для того чтобы успешно выполнить все перечисленные задачи, калькулятор на сайте должен быть удобным и интуитивно понятным. Он не должен вызывать раздражения у клиента, иначе тот достаточно быстро покинет страницу.
Как создать html-калькулятор?
Для создания онлайн-калькулятора не требуется каких-либо специфических знаний в программировании. Специальный конструктор калькулятора позволяет без проблем устанавливать его на любой странице сайта. К тому же самостоятельное создание и установка этого инструмента принесет новый опыт и удовлетворение полученными результатами. Среди других преимуществ можно отметить экономию времени и денежных средств, затраченных на разработку калькулятора. Еще один плюс – возможность собирать различные варианты калькулятора под требования определенного сайта. Сегодня можно без проблем создать инструмент для расчета:
Если в процессе разработки и программирования калькулятора потребовалось использование дополнительных сложных сервисов, то в этом случае целесообразно обратиться к фрилансерам, которые за определенную плату создадут индивидуальный html-калькулятор, соответствующий всем требованиям заказчика. Стоит добавить, что опытные и квалифицированные фрилансеры способны обеспечить заказчика сразу несколькими вариантам html-калькулятора. Благодаря этому, они могут смоделировать свою разработку под технические возможности используемого сайта.
Но услуги фрилансеров имеют и некоторые недостатки.
Онлайн-калькулятор на сайт: выбор готового виджета
UPDATE: 29 июня 2021
Добавлены новые виджеты калькуляторов.
Мы уже привыкли к виджетам на сайтах. Выпрыгиваюшие онлайн-консультанты и кнопки обратного звонка. Предлагаю к ознакомлению еще один интересный способ собирать заявки на сайте — онлайн-калькуляторы. Конечно, можно заказать разработку собственного калькулятора, но есть сервисы, предоставляющие готовые решения. Это отличный способ быстро внедрить и протестировать новый инструмент на сайте.
Где применить онлайн-калькулятор?
В некоторых отраслях калькуляторы на сайтах начали применяться задолго до моды на «виджетизацию». Например, в строительных услугах и продаже строй-материалов:
Другие сферы, где очень часто можно встретить онлайн-расчеты: кредиты, страховка, продажа автомобилей, продажа билетов и туров, службы такси и грузоперевозок, клининг и так далее. Калькулятор можно внедрить практически в любую сферу бизнеса. Это добавит сайту интерактива и поможет собирать больше заявок.
Чтобы открыть сервис в новой вкладке — нажмите на заголовок.
Moclients.com
Сервис состоит из 6 виджетов для сайта. Среди них есть онлайн-калькулятор. На самом деле это не калькулятор — просто форма сбора заявок с шагами. В нем не производятся никакие расчеты. Клиенты проходит шаг-1, шаг-2, шаг-3 и получают предложение отправить результат на их почту.
Работает? — Да. Очень рекомендую протестировать данный сервис в сравнении с нижеприведенными калькуляторами. В моей практике был случай, когда на сайте по ремонту квартир, онлайн-калькуляция с реальными ценами сильно «уронила» объем получаемых заявок. Любой из виджетов в этой статье считает грубее человека. Такие расчеты могут отпугнуть потенциального клиента + нет возможности сгладить цену другими факторами при первом телефонном контакте. Так называемый contact wall — «оставь контакты и получи», работает практически всегда.
Вернемся к Моклиентс. В вашем распоряжении есть бесплатная версия любого виджета на любое количество сайтов, но при этом c ограничением в 10 заявок/месяц. Платная версия любого калькулятора для 1 сайта стоит 490 рублей /месяц + 2 недели бесплатного использования.
Можно настроить цели и передавать события в Яндекс Метрику и Google Analytics.
Сайт предоставляет 5 различных способов оплаты, техническая поддержка быстро консультирует через чат или почту. Я сам пользуюсь этим виджетом несколько месяцев и мой отзыв: стоит попробовать. Встречались ошибки в программной/фронт-енд части, но их довольно быстро устраняли. Интерфейс админ-панели можно назвать «сыроватым».
uCalc.pro
Сервис от легендарного конструктора сайтов Ucoz. У этого калькулятора есть три важных преимущества.
Слово «бесплатно» — одно из самых используемых на посадочной странице. Бесплатный тариф ограничен 100 E-mail уведомлениями, отсутствием возможности редактировать код калькулятора, присутствием копирайта и т.д.
FormDesigner
Многофункциональный конструктор форм. В простом редакторе можно собрать опросы, квизы, калькулятор и различные веб-формы заявки. Отличительная особенность — огромное количество шаблонов под все сферы бизнеса.
Каждый шаблон можно отредактировать:
ФормДизайнер — полноценный калькулятор с формулами, он действительно может считать. Для расчета значения в конструкторе есть специальный элемент «Формула», в котором можно настроить самые сложные формулы.
При этом сами формы имеют качественный дизайнер, а интерфейс настройки максимально простой. Можно интегрировать формы с сервисами E-mail рассылки, CRM и CMS-системами. Интеграций много. Мы написали отдельный обзор на данный сервис.
Calccreator.com
Сalccreator.com – это настоящий drug-n-drop конструктор калькуляторов. Вам придется собирать виджет по кнопочкам, флажочкам и другим элементам. С 0, никаких шаблонов здесь нет. Потребуется выдержка и талант. Плюсом этого калькулятора для сайта можно назвать полную гибкость. Можно собирать варианты с любыми формами, слайдерами, выпадающими списками и т.д. При большом желании можно получить целый интернет-магазин. Дизайн прихрамывает на обе ноги.
Можно скачать получившийся код или вставить его на сайт через iframe. Этот сервис отлично подойдет разработчикам или веб-мастерам, которые хотят создавать для своих клиентов сложные конструкторы и передавать исходный код.
Есть 5 бесплатных проектов. Дальше 1 месяц будет стоить 795 руб, 3 месяца — 1390, 6 месяцев – 1810 руб.
BitCalc
Конструктор BitCalc, представляет сайт Bitronica.com. Рекордсмен по сложности. Начиная с покупки, заканчивая настройкой.
Дизайна как такового нет. Но наиболее удобным признаётся выбор любого калькулятора прямо из имеющегося набора шаблонов, пока без привязки к конкретному сайту. Пользователь просто выбирает шаблон, указывает его параметры и «опускает в корзину». Таким образом, появляется возможность собрать целый пакет, который можно будет потом распределить по сайтам.
Любой созданный калькулятор имеет бесплатный начальный период использования – 14 дней. В дальнейшем устанавливается стоимость в 240 руб за месяц на один сайт. Протестировать виджет до принятия окончательного решения можно и бесплатно.
Есть дополнительные виджеты – форма заказа, всплывающее окно акции, подписка на рассылку, каталог продукции.
Web-forms.ru
Сервис от создателей CMS Webasyst. Данный конструктор ориентируется на реализацию форм любого назначения. Можно строить формы заказов, опросов, обратной связи.
В течение 14 дней любой виджет можно использовать бесплатно, далее аренда в месяц одного виджета на одном сайте – 659 рублей. Приобретение при неограниченном сроке использования и постоянной технической поддержке — 2999 руб.
Вывод
Я бы рекомендовал поочередно попробовать на своем сайте виджеты калькуляторов от Moclients и uCalc. Первый, собирающий заявки, второй, производящий реальные расчеты. Обязательно проработать дизайн, шаги, настроить интеграцию с Яндекс Метрикой/Google Analytics для отслеживания эффективности. Если вы планируете разрабатывать калькуляторы своими руками, для клиентов под заказ, и вам важно получить исходный код — Calccreator.
Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.
Делаем более-менее универсальный калькулятор услуг для сайта
Беглый анализ открытых данных показывает, что ежедневно в среднем 5 человек оставляют заявки на создание калькулятора на биржах фриланса — а еще несколько сотен интересуются вопросом в поиске. Часто запросы стандартны — и, конечно, на рынке сложился целый набор готовых предложений: от плагинов для конкретных CMS до калькуляторов, которые можно приобрести у студий. Рекорд, обнаруженный нами (см. в первом комментарии) — 24 999 рублей за довольно обычное решение.
Да, рынок есть рынок. Но поскольку мы в основном работаем с людьми, чьи сайты сделаны на конструкторах, у них нет 25 тысяч на один виджет. Вот и возникло желание написать калькулятор, которым они смогли бы пользоваться самостоятельно — и без изучения HTML, JS, JQuery и CSS.
В процессе работы над проектом нам удалось реализовать несколько находок в логике работы и дизайне калькулятора. Ими, а также полезными инструментами, и хотим поделиться с сообществом.
По сути, у нас получился довольно универсальный онлайн-конструктор калькуляторов, результат работы в котором можно встроить на любую платформу, поддерживающую вставку HTML.
Как устроен конструктор калькуляторов
Пишем свою адаптивность
Лайфхак: как упростить формулы до азбуки
Чистим код с GULP (а не тем, о чем вы могли подумать)
Есть ли жизнь после жизни?
Как устроен конструктор калькуляторов
Начиная проект, мы обсуждали довольно хардкорные идеи, но в итоге пришли к drag-n-drop интерфейсу сборки, плюс админке, в которой человек может хранить и настраивать свои калькуляторы.
В начале было пустое поле. Регистрируясь на сервисе впервые, человек действительно видит пустую страницу с единственной кнопкой добавления нового проекта-калькулятора.
В будущем на этой странице будут появляться снимки-ссылки на калькуляторы пользователя, вот как тут:
Для создания скриншота-превью калькулятора в кабинете мы использовали PhantomJS. Штука очень удобная, когда ты уже создал несколько калькуляторов, — при входе в кабинет сразу понятно, где какой из проектов.
Люди любят ползунок. Это стало понятно, когда мы запустили первых людей на сервис, и они стали выбирать, из каких элементов создать виджет.
Сам интерфейс создания калькулятора устроен похоже с ЛК — есть большое пустое поле, на которое можно добавлять элементы из боковой панели. Для старта мы выбрали 8 элементов. Пять отвечают непосредственно за калькулятор — это ползунок, выпадающий список, галочка, текстовое поле (для сбора почт, адресов и т.д.) и переключатель. Еще три — за привлекательность (картинка) и опцию заказа — текстовый блок и кнопка. Самым востребованным элементом из всех оказался ползунок.
Сначала для создания ползунка мы выбрали расширения jQuery Scrollbar, но штука странно себя вела на мобильных. Поэтому мы взяли и модифицировали расширение JQuery-Range-Slider. Остальные элементы написали и стилизовали сами
Манипуляции с элементами и данными калькуляторов производятся на клиентской части проекта — поэтому в процессе важно было придумать, как максимально экономить ресурсы браузера.
Этот момент стал одним из самых хлопотных при отладке. Но зато сейчас запись процессов, происходящих на странице, когда человек перетаскивает элемент в калькулятор (это самый ресурсозатратный момент), выглядит так:
Мы максимально порезали обработчики, оставив только необходимый минимум. С оптимизацией на клиентской части нам здорово помог инструмент Timeline из Google Chrome Developer Tools.
Исходно все элементы хранятся в объекте FIELDS — у каждого есть типовой HTML-шаблон и список опций. После перетаскивания элемента в рабочую область, нужные опции прилетают с сервера и подставляются в шаблон — например, на кнопку навешены отправка информации о заказе владельцу и клиенту: по почте через наш сервер, либо по смс — пока через API SmsSimple, но мы ищем другой сервис (и будем рады рекомендациям).
Чтобы подставлять опции, к прототипу строки мы написали свой метод Signe. Работает он так:
Drag’n’drop по-своему. Идея «бери больше — кидай дальше», на наш взгляд, это самый удобный способ сборки чего бы то ни было для обычного пользователя. Ну хотя бы потому, что красиво.
Когда мы рассматривали существующие решения для создания калькуляторов, в них смущала некая «прибитость элементов гвоздями» — факт, что элементы можно расположить довольно строго определенным образом: например, только друг под другом, а не рядом. Хотелось уйти от этого, для чего мы придумали систему точек.
Cетка невидимых пользователю точек
Перед перетаскиванием нового элемента мы формируем карту точек, в которые можно добавить новое поле — для этого скрипт обращается ко всем элементам рабочей области и оценивает их границы.
Что это дает? Пользователь сразу может выбрать между таким:
И вот таким вариантом расположения элемента:
При движении мы постоянно проверяем, находится ли мышь над калькулятором, а под капотом запоминаем тип перетаскиваемого поля и позицию, в которую нужно его бросить.
Перетаскивание элемента само по себе не затрачивает много ресурсов браузера, однако проверка того, куда прицелился пользователь, прямо зависит от количества полей, которые уже добавлены в калькулятор. Чтобы сэкономить ресурсы браузера, мы стали определять только координаты полей, которые находятся рядом с мышью, и выявлять ближайшее к ней поле:
Для создания самих визуальных эффектов при сборке калькулятора мы использовали jQuery UI и Animate.css
Абстрагируемся от системы мер и весов. Поскольку решение хотелось сделать универсальным и простым, мы отказались от дополнительных полей, в которых при создании калькулятора человек бы выбирал метры, граммы или рубли. Условные обозначения можно вписать — но чисто для удобства и ориентира. Для всех текстовых элементов мы использовали движок Medium Editor – очень удобный и простой текстовый редактор.
Чтобы доказать, что конструктор подходит для чего угодно, мы наделали разных примеров. А один из примеров наделал шума среди первых тестеров:
«Шаблон «расчет количества мяса» — просто убил: по картинке понятно, что шашлык, а по градациям — такое впечатление, будто из всех этих людей собрались шашлык делать) Ржали всем отделом».
Пощупать калькулятор-шаблон, который развеселил целый отдел, можно здесь
Картинки — это важно. Для лучшего знакомства с товаром или услугой логично добавить изображения над теми же галочками или иным полем, отвечающем за выбор. Благодаря сетке точек, получилось реализовать вставку картинки в любую область рабочего поля. Иногда это полезно:
За тему с ёлочками спасибо Владимиру Гынгазову, автору канала “Adobe Muse по-русски”
Сама реализация загрузки картинок сделана через FileSystem API&File API — весь процесс отлично описан в этой статье.
«А поиграться с. » Логично дать пользователю возможность подстроить цвета текстов, кнопок, фона и т.д. под цвета сайта. Для вызова и создания цветовой палитры мы использовали виджет Spectrum.
Хранение данных и автосохранение. Данные о клиентской части калькулятора хранятся в формате JSON. Вы можете увидеть их структуру, просто написав в консоли SAVER.json на сервисе.
Автосохранение происходит при каждом действии, если в калькуляторе есть активность. Изменения параллельно сохраняются и в DOM, причем каждый раз мы проверяем:
Если же в пределах 4 секунд ничего не происходит, калькулятор останавливает автосохранение до новых правок — так мы избавляемся от бессмысленных запросов к серверу.
Превью. Чтобы не затрачивать ресурсы браузера клиента, мы решили не анимировать интерфейс предпросмотра с помощью jQuery — поскольку с анимацией отлично справляется и CSS3: достаточно поменять класс в корне интерфейса, и у области просмотра изменится ширина и наружное оформление, стилизованное под смартфон и планшет.
Внимание на консоль
Само создание адаптивной версии калькулятора стало отдельной песней.
Div-ная верстка: пишем свою адаптивность
В конструкторе сайтов uKit, для которого исходно создавался наш проект, используется сетка Twitter Bootstrap — популярное и заслуженное решение, чтобы адаптировать веб-элементы под экран посетителя. Но бутстреп предполагает два варианта дизайна: таблицу или колонку. Поэтому мы разработали собственный вариант адаптации калькулятора.
Т.к. структура калькулятора хранится в JSON, у нас есть родительский массив со строками, а в каждой строке — массив ячеек. Помимо этого, в ячейке есть массив суб-строк (и суб-ячеек), чтобы внутри было не одно поле, а несколько. Структура ячеек показана ниже:
У калькулятора есть родительский блок со стилем display: table, внутри у него есть table-row и table-cell, соответственно. Сам калькулятор отрисовывается на сайте во фрейме. Внутри фрейма размещены стили для адаптации — и когда фрейм становится достаточно узким, калькулятор без изменения HTML-сетки перебрасывает поля на новые строки. Сделано это с помощью изменения стиля display: если на широком калькуляторе это table-cell, то на узком становится block, и наше поле оказывается на новой строке.
Исходно-десктопный вид калькулятора зависит от ширины контейнера, в котором он находится, а калькулятор стремится показать в одной строке как можно больше полей. При сужении экрана функция, которая перестраивает сетку, проходит по всем строкам калькулятора, и если в строке есть «лишние» ячейки, ниже создается новая строка.
Упрощаем работу с формулами
Так как у нас есть полноценный кабинет управления калькулятором, мы решили отказаться от использования чего-то внешнего и экселеподобного, а в идеале — и сложных формул при создании и редактировании форм.
Вместо этого всего в отдельной вкладке есть элементы калькулятора в виде схемы. Схема содержит названия переменных и диапазоны значений для каждого из элементов калькулятора.
Чтобы задействовать какое-то поле в расчете, достаточно указать его переменную в окошке слева. Формул может быть несколько: в этом случае в калькуляторе отображается несколько результатов, например “Обычная цена” и “Цена со скидкой”.
Переменные начинаются с буквы “A”. Если полей больше, чем букв в латинском алфавите, к имени переменной добавится еще одна буква: “AA” и так далее. Каждая буква связана с числовым id конкретного поля в калькуляторе. Найти готовое решение для преобразования числа в латинские буквы и комбинации букв нам не удалось. Поэтому мы написали следующий метод:
DAT.varName(9) // I
DAT.varName(39) // AM
DAT.varName(9650215) // UCALC
Будем рады, если он вам пригодится (с вопросами можно стучаться к condor-bird).
Оптимизируем скорость загрузки
Чем дальше, тем больше мы занимались интерфейсом сервиса. Но конечная цель — чтобы человек не только собрал у нас свой калькулятор, но и поставил его к себе на сайт в виде виджета (хотя можно и опубликовать калькулятор по ссылке и использовать в каком-нибудь соцсети).
То есть, пора было отрезать ломоть калькулятор от сервиса. Встал выбор между двумя путями:
Быстрым. В том же превью грузится виджет калькулятора — можно скрыть все элементы интерфейса конструктора, оставив поля, сетку и калькулирование — и вот он, по сути, виджет для стороннего сайта.
Но быстрый путь был отвергнут — потому что он замедлял загрузку: мы получили бы 1959 килобайт, 269 из которых заняли бы все CSS-ки, используемые в сервисе. А ведь одно из главных требований к виджету на сайте — чтобы он грузился быстро.
И правильным. Тут мы пошли к GULP — чтобы обрезать все лишнее, вроде переноса строк, и собрать один минифицированный файл с максимально чистым кодом. Почему GULP? На то есть важная причина — у нас был 41 файл (и, соответственно, 41 запрос к серверу), а мы хотели уместить все в один запрос. И мы получили то, что хотели.
Это наш дефолтный шаблон. Была скорость загрузки курильщика
Стала скорость загрузки здорового человека
Теперь мы оставляем от 140 до 180 килобайт — в зависимости от числа полей. Для каждого типа поля есть две версии: короткая и вдвое короче — для стороннего сайта.
А что насчет скорости исполнения скрипта, спросите вы?
Это огромный калькулятор расходов на свадьбу, созданный реальным пользователем. Было так.
Тот же проект. Стало так
Как видно на картинке ниже, самым тяжеловесным остается текстовое поле — его мы будем оптимизировать дальше, отдавая на сайт только опцию, которую выбрал пользователь (в настройках поля есть выбор между телефоном, почтой, текстом, числовым значением и т.д.). В остальном для каждого калькулятора мы подключаем только используемые модули.
После загрузки на стороннем сайте калькулятор больше не обращается к нашему серверу: все формулы и прочее необходимое зашиты в загруженный на сайте код.
Упрощаем автообновление калькулятора, встроенного на сайт
В идеальном случае пользователь собрал калькулятор, получил код для встраивания на сайт — и наступило счастье.
Но установка на сайт не всегда значит, что человек больше не будет трогать готовый калькулятор. Самый очевидный случай, когда требуется внести изменения, — это рост или снижение цены на услугу.
Поэтому для каждого встроенного калькулятора мы делаем две версии:
Именно для этого в системе присутствует большая зеленая кнопка «Сохранить» — пока вы её не тронули, мы не переносим на сайт изменения, сделанные в версии для редактирования, а просто запоминаем их через автосохранение.
Первые выводы
Состоят в том, что при создании онлайн-калькулятора и его админки, — задаче, имеющей массу готовых решений, — много места для новинок. Кому-то в новинку все, как brizing — конструктор калькуляторов стал первым боевым проектом, в котором ему доверили работу джуниора. Но и остальные открыли для себя много нового.
Открытий явно станет больше — и вы можете подкинуть нам еще идей и задачек: uCalc находится на стадии открытого тестирования, и мы будем благодарны всем, кто найдет время пощупать решение и отписать мысли и ощущения в комментариях, либо в личку мне, brizing и condor-bird.
UPD. Спасибо всем, кто принял участие в тестировании сервиса. Список ближайших обновлений вы можете найти здесь.