Как сделать калькулятор в html

JavaScript — создаем калькулятор

Обзор посвящен созданию JavaScript-калькулятора. Домашнее задание для каждого начинающего JavaScript-ниндзя! ) В коде используется не чистый JavaScript, а JavaScript + jQuery.

Пример и материал не является оригинальным, основан на зарубежном источнике. Указывать источник не буду, потому что это не имеет смысла — таких кратких видеоуроков просто огромное количество — выбирай любой, какой понравится. )

HTML разметка

HTML-разметка для будущего калькулятора основана на HTML-элементах , , . Ничего сверхестественного в ней нет.

Единственный момент — вопрос компоновки кнопок, куда правильно “засунуть” кнопки с арифметическими операциями:

CSS стили

Со стилизацией будущего калькулятора тоже проблем не должно возникнуть. Я использовал flexbox для выравнивания кнопок:

JavaScript код

Переходим к самому интересному — созданию JavaScript-кода для калькулятора. В своем примере я использовал JavaScript + jQuery.

Последний применил только из-за удобства манипуляции с DOM. Недавно узнал о существовании библиотеки Underscore.js как альтернативы jQuery, но меньшего размера. Надо опробовать Underscore.js обязательно! )

Первым делом инициализируем кнопки калькулятора. Для этого забираем значения из атрибута кнопок и динамически вставляем в HTML-разметку:

Исходный вид калькулятора подготовили — он теперь выглядит как настоящий калькулятор! Если не принимать во внимание кошмарных цветов и их сочетания ) Ну мы не дизайнеры, нам простительно )

Теперь стоит задача — при нажатии на кнопку калькулятора чтобы ее значение появлялось в окошке последнего. Тоже ничего сложного, если подумать.

Просто нужно забрать у активной кнопки значение ее атрибута и передать как значение элемента .

Небольшая тонкость здесь — нужно конкатенировать текущее значение элемента с текущим значением элемента ; иначе будет происходить простое замещение предыдущего значения элемента текущим значением элемента :

Полная очистка экрана калькулятора элементарно проста — достаточно при нажатии на соответствующую кнопку передать в элемент пустое значение:

Дальше уже немного интереснее — будем оживлять кнопку . То есть — ввели в окошко калькулятора, к примеру, . По нажатии на кнопку в окошке должен появиться результат этой арифметической операции.

На помощь приходит функция JavaScript под названием . На javascript.ru эта функция подробно расписана.

В результате код для “оживления” кнопки будет выглядеть “скромно”:

Наш калькулятор почти готов. Осталось добавить жизни к двум последним кнопкам — возведения в степень и посимвольной очистки экрана калькулятора.

Для возведения в степень воспользуемся стандартной JavaScript-библиотекой и ее методом .

Заберем у элемента его текущее значение и передадим в качестве одного из аргументов в метод . Второй аргумент в нашем случае — это константа 3:

Последний шаг к успеху создания калькулятора — это “оживление” кнопки посимвольной очистки экрана калькулятора.

В этом случае воспользуемся стандартным методом JavaScript — . Это метод JavaScript(), который извлекает из строки подстроку и возвращает ее в виде новой строки — почитать с примерами.

В качестве аргументов принимает два параметра — начальную и конечную позицию, которые выступают как начальный и конечный индекс массива. Массивом в данном случае является строка.

Функция (на кнопке посимвольной очистки) в нашем случае будет работать так — забираем у элемента его текущее значение. Значение возвращается в виде строки, конечно.

Поэтому находим ее длину ( ) и укорачиваем на один (последний) символ — . Таким образом мы динамически укорачиваем текущее значение в окне калькулятора на один символ.

Затем нам нужно заменить текущее значение окна калькулятора укороченным на один символ значением. Для этого берем метод и с помощью него “обрезаем” текущую строку; этот метод возвращает “обрезанный” вариант. Нам осталось только вставить его в окно калькулятора.

Результат будет выглядеть таким образом:

Вот наш калькулятор и готов — ниже полный JavaScript-код:

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

Поэтому привожу ссылку на готовый вариант калькулятора, который создавался в этой статье. На CodePen можно его посмотреть и разобрать детально (при желании).

Как вариант для сравнения, можно взглянуть на более сложный пример создания калькулятора, на чистом JavaScript. Пример был найден мною на просторах CodePen.

Заключение

Рассмотренный в статье пример лично для меня оказался на удивление прост — я ожидал большей (и более запутанной) кучи кода.

На этом все. В дальнейшем буду продолжать флудить на тему JavaScript, ибо для себя с удивлением обнаружил, что мне в последнее вермя доставляет удовольствие разбирать и рассматривать готовые примеры на JavaScript.

Единственное, что меня огорчает — тот факт, что они чужие )

Красивая функция trackBy

Пример красивой функции trackBy для Angular. Функция понравилась своей лаконичностью:<% highlight typescript %>public trackByNumber = (_. … Continue reading

Create a simple calculator using HTML, CSS and Javascript

In this tutorial we will create a fully working calculator using only HTML, CSS and vanilla Javascript. You’ll learn about event handling, and DOM manipulations throughout the project. In my opinion this is a really good beginner project for those who want to become web developers.

Video Tutorial

If you would watch a detailed step-by-step video instead you can check out the video I made covering this project on my Youtube Channel:

The html will be pretty simple for this project. We’ll start out with a standard HTML5 boilerplate. At the bottom of our body I included the index.js script that we will create later. This needs to be at the bottom, because this way, when our javascript runs, the html elements required for the calculator will be in the DOM.
In the body we have a section and inside that a div with a container class. We will use these wrappers to position our calculator on the page. Inside our container we have an empty div with the id of display , and this will be the display of our calculator. It is empty, because we will modify its content from Javascript. Then we have a div with the class of buttons which will represent the keypad of the calculator.

Exit fullscreen mode

The buttons container will hold all of the buttons. Each button will be a div with a class of button . This will make the styling easy, and also will help us to gather the user input. Here we have a div for every button that we want on our keypad. You can notice that we have a weird looking label between the buttons: &larr; . This is a HTML entity and it renders a back arrow (←), and we’ll use this as a backspace. Also please not that for the equal sign button we have a separate id equal . We will use this Id to distinguish this special button, and evaluate the expression provided to the calculator.

Exit fullscreen mode

And this is all of the HTML markup that we need for this project, let’s jump into CSS.

Don’t forget to link the CSS styleshead in the head of the HTML file:

Exit fullscreen mode

Let’s create a style.css file.
We set a width for the container and center it using margin (also give it a decent top margin of 10vh), and apply a little box shadow.

Exit fullscreen mode

For the display we set a fixed height, and to center the text vertically we need to set the line-height to the exact same amount. The text should be right align, because this is how most calculator displays work. Also set the font-size and give a decent amount paddings.

Exit fullscreen mode

To position the buttons we use CSS grid. By setting 4 x 1fr in- grid-template-coloumns we’ll have 4 equally sized buttons in each row. We only set bottom and left borders, so we won’t get double borders. We’ll set the other two sides in the next CSS rule.

Exit fullscreen mode

Apply the missing two sides of the borders for every button:

Exit fullscreen mode

For the button we’ll set borders, font-size and 100px of line height to center it vertically, and set text-align: center to center the button labels horizontally. To have a better user experience set cursor to pointer, so the user will know that this is a clickable element.

Exit fullscreen mode

We want the equal button to stand out so, we’ll set a blue background color and white text to it. Also to have a nice hover effect we’ll set a darker background color and white text color on hover. To make the transition smoot set: transition: 0.5s ease-in-out; .

Exit fullscreen mode

Javascript

This will be the heart of our application. Let’s create the index.js file. The first thing we need to do is to save a reference to our display dom element. We can easily do that because it has an id of display .

Exit fullscreen mode

Next we have to get references for the buttons. We’ll store the button references in an array. To gather the buttons we can select them by document.getElementsByClassName(‘button’) , but this function gives back a NodeCollection instead of an array so we have to convert it to an array using Array.from() .

Exit fullscreen mode

The next and last step we have to make is to add event listener to the buttons and build the functionalities. To add event listeners for the buttons, we’ll map through the buttons array and add a click event listener for each. (An advanced solution would be to only add event listener to the buttons container and use event bubbling but this is a more beginner-friendly solution.)

To determine what should we do, we’ll use e.target.innerText , which will simply give back the label of the button that was clicked.

In the first case, when the user hits the «C» button we’d like to clear the display. To do that we can access our display reference and set the innerText to an empty string. Don’t forget to add break; at the end, because it is needed to prevent the execution of the code defined in other case blocks.

For the equal button we’ll use javascript built in eval function. We need to provide the display’s content to eval and it will evaluate and return the result, so we should set the result of the eval call to the display’s innerText. We need to wrap this into a try catch block to handle errors. Erros can happen when we have syntactically wrong math expressions, for example //(9( , ine these cases we’ll set the display’s innerText to display ‘Error’.

⚠️ You should not use eval in user facing applications, because it can be abused and external code can be run with it. More details If you want to replace eval I suggest using Math.js lib.

If the user hits the back arrow we need to remove the last character from the display’s innerText. To do that we’ll use the String.slice() method, but we only want to do that if the display has any value.

In the default case, so whenever the user don’t hit these special symbols we just want to append the clicked button’s innerText to the display’s innerText. We can use the += operator to do that.

Exit fullscreen mode

The whole project is available on GitHub
And that’s it you have a working calculator.

Thanks for reading.

Where you can learn more from me?

I create education content covering web-development on several platforms, feel free to �� check them out.

I also create a newsletter where I share the week’s or 2 week’s educational content that I created. No bull�� just educational content.

JavaScript Calculator — Beginner Project

In this tutorial, we are going to create a simple JavaScript calculator. The calculator is able to perform addition, subtraction, multiplication, and division on 2 or more than 2 numbers.

Calculator can come out to be a very useful application in day-to-day life. You can use a calculator to calculate your shopping bill, calculate your loan, perform simple mathematical calculations, etc.

We are going to create a simple calculator in this article prerequisites for this tutorial are:

Before proceeding further let's have a look at what we are going to build.

Simple JavaScript Calculator

A simple calculator is used to perform simple mathematical calculations like addition, subtraction, multiplication, and division.

Let's start creating our simple calculator. We are going to use:

1. HTML (index.html) — To create the structure of the calculator
2. CSS (style.css) — To style the calculator
3. JavaScript (script.js) — To create the logic of the calculator

We will start building our calculator step by step. First, the structure of the calculator will be created (using HTML), then we will style it (using CSS), and finally, we will create the logic of the calculator (using JavaScript).

1. HTML — Creating the structure of the calculator

When you create the structure of anything in HTML, the structure need not be perfect in the first attempt. You can always modify the structure later. So, let's start creating the structure of our calculator.

To start with first create a container (a div element with a class container) and inside it create another div element with a class calculator. This div element will be our calculator container.

Now, inside the calculator container, create 2 div elements one to display the result and another to display the input.

The output element will further contain 2 pre elements. The first one is called upper output, which displays the expression, and the second one is called lower output, which displays the result.

The input element will contain all kinds of input buttons we can have like, numbers, operators, clear, brackets, etc. Also, attach onclick event to all these buttons with a javascript function.

In the above code, you can see the buttons are in a certain order because we want our buttons to be in specific places. With different orders, we can create different layouts of the calculator.

Finally, connect the CSS and Javascript files to the HTML file. Also, add font-awesome icons to the HTML file.

Here is the complete HTML code of the calculator. Save it as index.html file.

Complete HTML Code

Here is how it looks:

2. CSS — Styling the calculator

To style the calculator, you need to create a CSS file. In the CSS file, target the elements using the CSS selector and add the styles to them.:

For buttons direction and flow, you can use CSS flexbox.

Here is the complete CSS code of the calculator. Save it as a style.css file.

Complete CSS Code

We have completed the design of the calculator. Now, we need to create the JavaScript code to make the calculator work.

3. Javascript Calculator Code

Let's now write javascript code for the calculator.

I. Selecting the elements

In the HTML part, you can see there are 2 output elements. Select both of them using the querySelector method.

'outputLower' is a place where the expression given by the user and the output of the result will be shown.

'outputUpper' is a place where the expression given by the user will be shown in small size just above the result so that the user can see both their expression and result at the same time.

II. Now create a function to input the numbers

The above function will be called when any number button is pressed. It will check if the outputLower (expression) is 0 or not. If it is 0, then it will replace the 0 with the number pressed. If it is not 0, then it will add the number pressed to the outputLower.

The function is getting the number pressed by using this keyword.

III. Now create a function to input the operators

The above function will be called when any operator button is pressed. It will check if the last operator in the expression is +, -, ×, or ÷. If it is +, -, ×, or ÷, then it will replace the last operator with the operator pressed. If it is not +, -, × or ÷, then it will add the operator pressed to the outputLower.

We are checking and replacing the last operator because if someone presses + operator more than once then it becomes ++ or +++ which is not a valid operator. Or there could be a case of +*, +/+, etc. So we replace the last operator with the newly pressed operator.

IV. Now create a function to clear the calculator

We have 2 buttons to clear the calculator. One is clear button and other is clear all button.

To clear one number, we will use 'outputLower.innerHTML.slice(0, -1)' method. This will remove the last number from the expression. To clear all numbers, we will use 'outputLower.innerHTML = '0';' method. This will replace the expression with 0.

V. Create function for writing dot and brackets

VI. Now create function to calculate the result

The above function will be called when the equal button (=) is pressed. It will calculate the result of the expression and show it in the outputLower .

We are using the eval() method to calculate the result.

Here, we are executing the expression within the try and catch block. If there is any error in the expression, then it will show an error.

We are also checking if the result is a decimal number or not. If it is a decimal number, then we will show it with 4 decimal places.

Finally, the result is shown in the outputLower and the corresponding expression is shown in the outputUpper .

VII. Now create function to clear expression and all clear screen

To clear one number, we will use 'outputLower.innerHTML.slice(0, -1)' method. This will remove the last number from the expression. To clear all numbers, we will use 'outputLower.innerHTML = '0';' method. This will replace the expression with 0.

VIII. Now add event listeners for keyboard buttons

Finally, add an event listener for keyboard buttons, so that when any button is pressed, it will call the corresponding function and the user will be able to run the calculator from the keyboard itself.

In the above code, you can see we are using a button position to get the button. We are using 'document.querySelector('button:nth-child(2)')' to get the button with position 2. This will get the button with the number 0. and so on.

Complete JavaScript Calculator Program

Here is the complete code for a simple calculator.

Conclusion

In this complete guide to JavaScript calculator, you have learned to create an awesome simple calculator. You can use it to calculate any mathematical expression. The keyboard event is also attached to the calculator. You can also use the calculator on your website or mobile app.

Stay Ahead, Learn More

alt=»Ezoic» width=»» height=»» /> report this ad alt=»Ezoic» width=»» height=»» /> report this ad

Как сделать калькулятор в HTML

Основная проблема любых интерактивных форм и онлайн-расчётов – это математический аппарат и логика, которые стоят за работой web-интерфейса. Если простейшие формы и элементы ввода может реализовать практически любой школьник (всё это «голый» HTML: чекбоксы, флажки, ползунки, поля и т.п.), но вот с алгоритмом расчёта и обработкой введённых данных всё не так просто.

В настоящее время большинство сайтов создаётся с помощью онлайн-конструкторов, CMS-систем или фреймворков (последние рассчитаны только на профи). К любому из таких сайтов в 99% случаев можно добавить свой HTML-код. Обычно это делается либо с помощью специальных блоков, либо благодаря прямому доступу к коду шаблонов.

Где взять код калькулятора или как его вообще получить/создать? Для этого есть всего несколько доступных способов (разумеется, для новичков и начинающих web-мастеров):

1. Использование специальных онлайн-сервисов, таких как uCalc (наш обзор).
2. Использование профильных плагинов и расширений (подбираются или пишутся на основе API вашей CMS-системы / фреймворка).
3. Создание HTML-форм и скриптов расчёта вручную (для этого нужно задействовать языки программирования PHP, JavaScript и т.п., всё зависит от возможностей и настроек вашего сервера).

Единственный универсальный вариант для любого типа сайтов – сервисы создания онлайн-калькуляторов. Рассмотрим процедуру в разрезе использования uCalc и чистого HTML+JavaScript.

Как сделать онлайн-калькулятор для HTML-сайта в uCalc

uCalc – это лучший претендент на роль профильного конструктора сложных форм и интерактивных калькуляторов. Здесь есть всё, что нужно и даже немного больше: инструменты для приёма платежей, SMS и email-рассылки, возможность интеграции сторонних сервисов, таких как CRM-системы.

Сами калькуляторы создаются в специальном графическом редакторе, который легко осваивается без какого-либо опыта программирования или навыков web-разработки. Нужные элементы просто перетягиваются мышкой и настраиваются. Логика обсчёта может быть как максимально простой, так и очень сложной – всё зависит только от ваших желаний и требований.

Для быстрого старта есть готовые шаблоны. Калькуляторы можно публиковать самостоятельно (будут доступны при переходе по прямой ссылке), встраивать в любые HTML-страницы, интегрировать в конструкторы сайтов (подходят любые популярные платформы, например, uKit, Wix, mottor, Tilda и т.п.), а также можно делиться ссылкой в мессенджерах, соцсетях, рассылках и т.п.

Условно общий алгоритм создания калькулятора выглядит следующим образом:

1. Вы создаёте калькулятор в редакторе uCalc (настраиваете внешний вид и логику).
2. Получаете HTML-код формы.
3. Встраиваете виджет калькулятора в нужную вам страницу в нужном месте.

Теперь каждый шаг рассмотрим детально.

Непосредственно создание формы/калькулятора в uCalc

После того, как вы создали новый аккаунт или вошли под уже существующим, нужно инициировать процедуру добавления новой формы.

Нажмите кнопку «+» в панели управления (страница «Мои формы»).

Рекомендуем начать с готового тематического шаблона (пункт «Использовать шаблон»). Так вам будет проще разобраться с возможностями конструктора.

Шаблоны можно отфильтровать по популярности или по заданной тематике («Экономика и финансы», «Автосервис», «Строительство и ремонт», и т.п.).

Понравившуюся форму можно посмотреть в деле – для этого нажмите кнопку «Посмотреть».

Если вас всё устраивает – нажмите пункт «Выбрать» (или кнопку «Создать калькулятор» в режиме предпросмотра шаблона).

В случае, если вы выберете пункт «Собрать самостоятельно», сразу попадёте в режим редактирования, но без готовых элементов ввода и формул. Всё, что вам нужно, придётся собирать с нуля.

Окно редактора по умолчанию открывается на вкладке «Дизайн». Здесь вы можете перемещать элементы ввода, добавлять свои или удалять ненужные, настраивать их свойства:

• Фон и цветовые схемы;
• Темы оформления;
• Положение;
• Шрифт;
• Тип полей;
• Заголовки и описания;
• Отступы;
• Необходимость и логика округления результатов;
• Наличие разделителей разрядов (для видимых результатов);
• И т.п.

Наибольшее количество возможностей у кнопок. Здесь есть настройки показа уведомлений и их отправки владельцу формы или клиенту, который её заполнил (в SMS или в email-сообщении), антиспам, согласие на сбор персональных данных (типовое или собственный текст документа), подключение систем аналитики, онлайн-оплата, обмен данными с CRM и т.д.

Вы можете создавать сложный интерфейс формы, разбитый на несколько шагов/страниц. Логика переходов между этими страницами настраивается отдельно – во вкладке «Логические ветвления».

Наиболее ответственная часть (настройка алгоритма расчёта) вынесена во вкладку «Формула».

Вам будут доступны все самые востребованные математические операции, включая возведение в степень и взятие процента, а также логические операнды (отображаются в расширенном режиме):

• И/ИЛИ;
• ЕСЛИ;
• РАВНО/НЕРАВНО;
• БОЛЬШЕ/МЕНЬШЕ.

С таким набором возможностей вы сможете собрать любую математическую формулу. При наборе формул вы можете пользоваться клавиатурой или только мышкой.

Когда вы закончите с редактированием, нажмите кнопку «Сохранить» (или «Предпросмотр», если вам нужно испытать свой новый калькулятор в действии).

Получение кода калькулятора

uCalc работает по схеме с загрузкой внешнего JavaScript’а. Иными словами, на выходе вы получаете скрипт своей формы, который нужно встроить в код любой страницы. Код полей ввода, логика их обработки, стили оформления и другие свойства подгружаются автоматически – из сервиса uCalc при рендеринге вашей страницы в браузере.

Таким образом, уже созданную форму можно вставлять на любом количестве сайтов и в любое количество страниц. Управление калькулятором будет производиться централизованно – через панель конструктора uCalc. Даже если вы что-то измените во внешнем виде формы или в её логике, код не придётся менять везде, где она используется. Всё это произойдёт автоматически.

Итак, чтобы получить код для вставки онлайн-калькулятора uCalc, вам нужно вернуться на страницу со всеми вашими формами в панели управления и навести указатель на калькулятор. Во всплывающем меню выберите пункт «Получить код» и нажмите кнопку «Скопировать…». Готово! Код формы в буфере обмена.

Вставка кода калькулятора внутрь HTML-страницы

Если вы используете платформу онлайн-конструктора, то в наборе блоков нужно найти элемент с возможностью вставки своего HTML-кода.

Примеры для разных конструкторов:

• Wix: Редактор –> Добавить блок –> Ещё –> HTML-код.
• uKit: перетащите виджет uCalc на страницу, при необходимости привяжите аккаунт uCalc и выберите нужную форму.
• uCoz: переключитесь в режим редактирования HTML (для материалов) или вставьте код в шаблоне.
• Tilda: Добавить блок –> Другое –> HTML-код.

Если вы используете CMS-систему, то вы можете организовать вставку кода с помощью встроенных виджетов (как в WordPress), с помощью встроенных редакторов страниц (если таковой имеется в CMS) или напрямую изменить код шаблона (в любом текстовом редакторе при FTP/SFTP-подключении к хостингу).

Все примеры вставки для готовых движков можно изучить в документации uCalc – здесь.

Если у вас просто HTML-страница, в том числе созданная с помощью оффлайн-конструкторов, то достаточно будет открыть её в любом удобном вам текстовом редакторе и вставить код виджета uCalc в нужном месте.

Будьте внимательны – не нарушайте структуру имеющихся HTML-тегов.

Не забудьте сохранить свои изменения!

Создание калькулятора для HTML-сайта с помощью JavaScript

Этот способ подходит только тем, кто понимает, что делает и как нужно работать со скриптами / HTML-кодом.

Итак, для работы скрипта нужны элементы ввода (инпуты), кнопка, которая будет запускать процедуру расчёта, и место/поле вывода (это может быть любой HTML-элемент, внутри которого будет показываться результат расчёта).

Сначала визуальная составляющая для понятности процедуры. Внутри тегов <!— XXX —> будет написан текст комментария, их можно смело удалить.

HTML-элементы можно вставить в нужном вам месте страницы и декорировать с помощью CSS-стилей (например, с помощью добавления уже имеющихся CSS-классов).

Теперь написание «логики», то есть скрипта JS, который будет собирать данные из этих двух полей ввода и умножать для получения площади. Комментарии в JavaScript начинаются с «//».

Сам скрипт можно вставить в любой части страницы или даже загрузить отдельным файлом. Хотя для простого блока калькулятора вполне допустимо будет совместное написание с HTML – единым текстом.

Наиболее распространённые проблемы при создании своих скриптов

Скрипт может работать неправильно, если на странице уже есть элементы с идентификаторами, которые участвуют в формуле. Чтобы этого избежать, нужно использовать свои уникальные значения.

Второй момент – необходимость проверки полей ввода. Обычно за это отвечают другие скрипты. Они позволяют избегать ситуаций, когда в поля вписываются неправильные значения или формат данных не соответствует (например, буквы вместо цифр), а ещё когда нужна очистка от лишних символов при копировании и т.п.

Ну и наконец – отсутствие комплексного бэкграунда. Такие простенькие JS-скрипты не способны принимать оплату, подстраиваться под ширину окружающих элементов, менять стиль оформления на лету, интегрироваться с CRM-системами и выполнять любые другие дополнительные функции. Всё это можно реализовать в коде, но для этого нужны навыки программирования и детальное знание HTML.

При использовании JavaScript вся логика работы будет видна пользователям (она загружается и отрабатывается браузером). Конечно маловероятно, что кто-то из ваших клиентов полезет изучать ваш код, но вот конкуренты… Особое значение эта проблема приобретает тогда, когда выполняемые в коде функции – это ваше конкурентное преимущество. А ещё такой код легко скопировать к себе на сайт и переделать под свои нужды.

Выход – реализация расчёта в серверной части, например, с помощью PHP. Но тогда нужен специальный хостинг и сам скрипт станет заметно сложнее (так как данные из форм нужно будет отправлять методами POST / GET).

Разобраться с синтаксисом и написать свою формулу в действительности смогут только программисты или очень опытные пользователи.

Выводы

Если у вас сложная бизнес-логика, то её лучше реализовывать на стороне сервера, так алгоритм будет защищён от чужих глаз. Если логика простая – можно использовать JavaScript. Но в любом случае с написанием и редактированием собственных скриптов справятся только профи (web-разработчики или программисты).

Если у вас нет денег на программистов, но нужен красивый и качественный онлайн-калькулятор, логично для его создания использовать специальный сервис, такой как конструктор uCalc. Последний надёжно защищает алгоритм расчёта и позволяет реализовать массу вспомогательных функций. Но самое главное, все действия можно сделать своими руками (без привлечения сторонних специалистов). Хотя и услуги разработки калькуляторов под ключ тоже имеются.