Как сделать калькулятор в html javascript
Перейти к содержимому

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

  • автор:

Как сделать калькулятор для интернет-магазина на HTML

Представьте себе ситуацию: вы открываете интернет-магазин и хотите предоставить своим клиентам возможность быстро и удобно рассчитывать стоимость своих покупок, учитывая различные параметры. Как решить эту задачу? Ответ прост: создайте калькулятор для своего интернет-магазина! В этой статье мы покажем вам, как это сделать с использованием HTML, CSS и JavaScript.

Если вы еще не начали карьеру в IT, приходите на наш бесплатный вебинар, чтобы узнать, как начать зарабатывать с помощью зерокодинга и нейросетей!

Инструкция

Шаг 1: подготовка рабочей среды

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

Шаг 2: создание HTML-структуры

Для начала, создадим основную структуру калькулятора с использованием HTML. Вот пример:

Калькулятор для интернет-магазина

Пишем свой калькулятор на JS

Калькулятор — прекрасная задача для начинающего программиста. Она помогает понять основы работы с арифметическими и строковыми операциями. Если Вы ещё не сделали свой калькулятор, то советую закрыть этот пробел вместе с этим уроком. HTML:

Используется javascript-функции: eval() — преобразует строку в javascript и выполняет его. innerHTML — получает и присваивает внутренний HTML текст DOM-элементу (div, span, label и т.д.)

// код начнёт выполняться после загрузки страницы
// когда окно загрузится, сработает метод window.onLoad
window.addEventListener( ‘load’ , function OnWindowLoaded() < // набор кнопок // форма калькулятора var calc = document.getElementById( 'calc' ); // текстовое поле с математическим выражением var textArea = document.getElementById( 'inputVal' ); // Добавление кнопок к форме калькулятора signs.forEach( function (sign) < var signElement = document.createElement( 'div' ); signElement.className = 'btn' ; signElement.innerHTML = sign; calc.appendChild(signElement); // проходит по всем кнопкам калькулятора // добавляет обработчик на клик document.querySelectorAll( '#calc-wrap .btn' ).forEach( function (button) < // Добавляем действие, выполняемое при клике на любую кнопку button.addEventListener( 'click' , onButtonClick); // функция клика по кнопке калькулятора function onButtonClick(e) < // e - MouseEvent (содержит информацию о клике) if (e.target.innerHTML === 'c' ) < // Если нажата кнопка "с", то стирает все из текстового поля textArea.innerHTML = '0' ; > else if (e.target.innerHTML === ‘=’ ) <

// Если нажата кнопка » line number42 index41 alt1″> // в текстовом поле к javascript, вычислить значение

textArea.innerHTML = eval(textArea.innerHTML);
> else if (textArea.innerHTML === ‘0’ ) < // Если textarea содержит только "0", то // стереть "0" и записать // значения кнопки в текстовое поле textArea.innerHTML = e.target.innerHTML; // Добавление значения кнопки в текстовое поле textArea.innerHTML += e.target.innerHTML;

Используются CSS-свойства: line-height — устанавливает высоту строки для текста. Текст выравнивается по центру этой высоты. text-align — выравнивает текст по горизонтали (принимает значения: left,right,center) resize — устанавливает возможно изменение размеров текстового поля (принимает значения: vertical, horizontal,both,none)

Как сделать простой калькулятор на HTML и Javascript

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

  

+

function func()

код сложения

До сих пор, нет сомнений. Но сейчас, мне хотелось бы заменить статичный знак плюса (+) четырьмя кнопками для всех базовых операций: сложения (+), вычитания (-), умножения (x), деления (:). Интерфейс и распределения кнопок умею вставить, но не успеваю создать функцию, которая изменяет оператор в переменной result в зависимости от избранной кнопки операции. Нужно ли делать отдельную функцию для каждой кнопки операторов? Или можно вставить всю программу в функцию кнопки выполнения («равняется. «)? Вот код, написанный до сих пор:

  
function func()

разные операторы

Какой будет функция переменной result? Спасибо за помощь!

Пишем калькулятор на JavaScript

В этой статье мы с вами, как следует из названия, напишем простой калькулятор на JavaScript.

Желание написать калькулятор возникло у меня после просмотра одного туториала, посвященного созданию «simple calculator», который оказался далеко не симпл и толком ничего не умел делать.

Наш калькулятор будет true simple (42 строки кода, включая пробелы между блоками), но при этом полнофункциональным и масштабируемым.

Без дальнейших предисловий, приступаем к делу.

Наша разметка выглядит так:

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

Подключаем стили:

* < margin: 0; padding: 0; box-sizing: border-box; >body < height: 100vh; background: radial-gradient(circle, skyblue, steelblue); display: flex; justify-content: center; align-items: center; >.calculator < width: 320px; height: 480px; background: #eee; border-radius: 5px; box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.2), -2px -2px 3px rgba(0, 0, 0, 0.2); >output < display: flex; justify-content: center; align-items: center; width: 300px; height: 40px; background: #fff; margin: 10px auto; border-radius: 5px; font-size: 1.4em; font-weight: bold; box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.3), inset -1px -1px 1px rgba(0, 0, 0, 0.3); >.keyboard < height: 440px; display: flex; flex-wrap: wrap; justify-content: space-evenly; align-items: flex-start; >button

Вот что мы имеем на данный момент:

Кнопки будут генерироваться программно.

Переходим к скрипту.

Определяем поле для вывода результата и создаем контейнер для клавиатуры:

const output = document.querySelector('output') const div = document.createElement('div') div.classList.add('keyboard') document.querySelector('.calculator').appendChild(div) 

Наша строка с символами выглядит так:

'C CE % / 7 8 9 * 4 5 6 - 1 2 3 + 0 ( ) =' 

Преобразуем данную строку в массив и создаем кнопки:

// разделителем служит пустая строка // можно было бы обойтись без пробелов, если бы у нас не было "CE" 'C CE % / 7 8 9 * 4 5 6 - 1 2 3 + 0 ( ) ='.split(' ') // пробегаемся по массиву // для каждого символа // создаем кнопку с помощью строкового литерала // записываем значение символа в атрибут "value" кнопки .map(symbol => < div.insertAdjacentHTML('beforeend', `">$ `) >) 

Находим созданные кнопки и добавляем к ним обработчик события «клик»:

document.querySelectorAll('button').forEach(button => < button.addEventListener('click', function () < // по клику вызывается функция со значением кнопки в качестве параметра calc(this.value) >) >) 

Мы также хотим иметь возможность вводить символы с помощью клавиатуры. Для этого нам необходимо добавить обработчик события «нажатие клавиши» к объекту «Document» или «Window», затем отфильтровать ненужные значения свойства «ключ» клавиши, например, с помощью регулярного выражения:

document.addEventListener('keydown', event => < if ((event.key).match(/[0-9%\/*\-+\(\)=]|Backspace|Enter/)) calc(event.key) >) 

Метод «match» в данном случае играет роль фильтра: он не позволяет передавать функции «calc» аргумент, не соответствующий заданному в нем условию.

Само условие звучит так: если значением event.key является один из символов, указанных в квадратных скобках ([]; цифра от 0 до 9, знаки деления, умножения, сложения, вычитания, открывающая, закрывающая круглые скобки или знак равенства; обратная косая черта — экранирование) или (| — альтерация) Backspace, или Enter, то вызываем calc с event.key в качестве параметра, иначе ничего не делаем (Shift также успешно отбрасывается).

Наша главная (и единственная) функция «calc» выглядит следующим образом (код следует читать снизу вверх):

// функция принимает значение кнопки или ключ клавиши function calc(value) < // если нажат знак равенства или Enter if (value.match(/=|Enter/)) < // пробуем выполнить операцию try < // вычисляем значение строки // это возможно благодаря методу "evaluate" объекта "math" // Math.trunc используется для округления до целого числа output.textContent = Math.trunc(math.evaluate(output.textContent)) // если операцию выполнить невозможно >catch < // сохраняем значение поля let oldValue = output.textContent // создаем новую переменную let newValue = 'недопустимое выражение' // выводим значение новой переменной в поле output.textContent = newValue // через полторы секунды возвращаем полю старое значение setTimeout(() =>< output.textContent = oldValue >, 1500) > // если нажат символ "C" > else if (value === 'C') < // очищаем поле output.textContent = '' // если нажат символ "СЕ" или Backspace >else if (value.match(/CE|Backspace/)) < // уменьшаем строку на один символ output.textContent = output.textContent.substring(0, output.textContent.length - 1) // если нажата любая другая (отфильтрованная) кнопка или клавиша >else < // записываем ее значение в поле output.textContent += value >> 

В завершение, парочка слов о заявленной масштабируемости и полнофункциональности.

Метод «evaluate» (ранее «eval») и другие методы Math.js имеют очень большие возможности. Опираясь на эти возможности, мы можем легко расширить функционал нашего калькулятора, добавив в него новые символы и операторы, предусмотрев возможность работы с числами с плавающей точкой (регулируя количество знаков после запятой с помощью переключателя и метода «toFixed») и т.д.

Благодарю за внимание. Надеюсь, вы нашли для себя что-то полезное. Хороших выходных и счастливого кодинга.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *