Как написать калькулятор на javascript

Помогите написать калькулятор на JS

Помогите пожалуйста написать функцию, которая выполняет арифметические операции двух чисел в виде строки и возвращает строку с результатом. вот требования: 1.Калькулятор умеет выполнять операции сложения, вычитания, умножения и деления с двумя числами: a + b, a — b, a * b, a / b. Данные передаются в виде одной строки! 2.Калькулятор умеет работать как с арабскими (1,2,3,4,5…), так и с римскими (I,II,III,IV,V…) числами. Оба операнда должны быть либо арабскими, либо римскими. 3.Операнды должны лежать в диапазоне от 1 до 10 включительно, без ноля. Ответ может быть больше 10. 4.Калькулятор умеет работать только с целыми числами, принимает и возвращает. 5.Результат на выходе всегда строка с целым числом. В делении учитываем только целую часть — десятичную отбрасываем, например 2 / 4 = 0,5 — вернём 0. 6.Калькулятор умеет работать только с арабскими или римскими цифрами одновременно, при вводе пользователем строки вроде 3 + II калькулятор должен выбросить исключение (ошибку) и прекратить свою работу. 7.Поскольку в римской системе счисления нет нуля и отрицательных чисел, то вместо них возвращаем пустую строку. (например I — II = ‘’) 8.При вызове калькулятора с неподходящими числами, функция выбрасывает исключение и завершает свою работу. 9.При вызове калькулятора со строкой, которая не является математическим примером с одной из арифметических операций, описанных в требовании, приложение выбрасывает исключение и завершает свою работу. и вот что я сделала, а дальше ступор. не пойму 🙁

function calculator(string) < const [num1, operator, num2] = string.split(' '); const a = Number(num1); // преобразовываем в число const b = Number(num2); // Вычисляем результат в зависимости от оператора let result; switch (operator) < case '+': result = a + b; break; case '-': result = a - b; break; case '*': result = a * b; break; case '/': if (b === 0) < throw new Error('Division by zero'); >result = a / b; break; default: throw new Error('Invalid operator'); > // Возвращаем результат в виде строки return String(result); > 

Дальше мне видимо нужно обозначить как то римские цифры, затем перевести их в арабские, а дальше что?

Отслеживать

9,159 6 6 золотых знаков 15 15 серебряных знаков 30 30 бронзовых знаков

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

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

  
+
 равняется. function func() 

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

  
+ - x : 
 равняется. 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») и т.д.

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

Как написать приложение на JavaScript: Создаем калькулятор на JS

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

Основы JavaScript для создания калькулятора

Прежде чем мы начнем, давайте рассмотрим несколько основных концепций JavaScript, которые нам понадобятся:

• Переменные: В JavaScript переменные используются для хранения данных, таких как числовые значения для вычислений.
• Функции: Функции в JavaScript используются для выполнения определенных действий. В нашем случае мы будем использовать функции для вычисления результатов математических операций.
• Обработчики событий: Обработчики событий позволяют выполнять код в ответ на определенные действия пользователя, например, при нажатии кнопки.

Подготовка к работе

Вам понадобится текстовый редактор для написания кода и веб-браузер для его просмотра. Можно использовать любой текстовый редактор, такой как Sublime Text, Atom или Visual Studio Code. Что касается веб-браузера, вы можете использовать любой современный браузер, например, Chrome, Firefox или Safari.

Создание HTML-структуры онлайн калькулятора

Прежде чем начать писать JavaScript, нам нужно создать основную структуру нашего калькулятора с помощью HTML. Наш HTML-код может выглядеть примерно так:

      
  
7
 
8
 
9
 
/
 
4
 
5
 
6
 
*
 
1
 
2
 
3
 
-
 
0
 
.
 
=
 
+
 
 
   

Этот код создает веб-страницу с калькулятором, который имеет дисплей для вывода результатов и кнопки для ввода чисел и выполнения операций. Класс ‘ button ‘ добавлен к каждой кнопке калькулятора, что позволяет легко манипулировать этими кнопками в JavaScript.

Добавление стилей CSS для калькулятора

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

Давайте рассмотрим, как мы можем написать наш CSS, чтобы сделать наш калькулятор более привлекательным.

Стилизуем калькулятор в целом

 /* Стилизация для всего калькулятора */ #calculator

Стилизуем дисплей калькулятора

/* Стилизация для дисплея */ #display

Делаем стили для кнопок

 /* Стилизация для кнопок */ .button

Добавляем дополнительные стили для наведения и кнопки «=»

/* Изменение цвета при наведении на кнопку / .button:hover < background-color: #0056b3; >/ Дополнительное оформление для кнопки равно */ .button.equals < background-color: #4CAF50; >.button.equals:hover

Финальний вид CSS калькулятора

 #calculator < width: 300px; margin: auto; padding: 20px; background-color: #f3f3f3; border-radius: 20px; box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1); >#display < width: 100%; height: 50px; text-align: right; margin-bottom: 10px; padding-right: 10px; box-sizing: border-box; border: none; background-color: #fff; font-size: 20px; border-radius: 10px; >.button < width: 66px; height: 40px; margin: 5px; display: inline-block; background-color: #007BFF; color: white; text-align: center; line-height: 40px; cursor: pointer; border-radius: 5px; font-size: 18px; transition: background-color 0.3s ease; >.button:hover < background-color: #0056b3; >.button.equals < background-color: #4CAF50; >.button.equals:hover 

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

Пишем логику калькулятора с использованием JavaScript

Следующим шагом является добавление логики калькулятора с использованием JavaScript. Это включает сохранение введенных чисел и выполнение вычислений на основе нажатой кнопки.

Сначала добавим JavaScript-код для обработки событий кликов по кнопкам.

Получаем все кнопки из документа:

 var keys = document.querySelectorAll('#calculator span'); var operators = ['+', '-', 'x', '/']; var decimalAdded = false; 

Добавляем событие onclick ко всем клавишам и выполняем действия

 for (var i = 0; i < keys.length; i++) < keys[i].onclick = function(e)  

 var input = document.querySelector('#display'); var inputVal = input.innerHTML; var btnVal = this.innerHTML; 

 if (btnVal == 'C')

 else if (btnVal == '=') < var equation = inputVal; var lastChar = equation[equation.length - 1]; 

 equation = equation.replace(/x/g, '*'); 

 if (operators.indexOf(lastChar) > -1 || lastChar == '.') equation = equation.replace(/.$/, ''); if (equation) input.innerHTML = eval(equation); decimalAdded = false; 

 else if (operators.indexOf(btnVal) > -1)  

 var lastChar = inputVal[inputVal.length - 1]; 

 if (inputVal != '' && operators.indexOf(lastChar) == -1) input.innerHTML += btnVal; 

 else if (inputVal == '' && btnVal == '-') input.innerHTML += btnVal; 

 if (operators.indexOf(lastChar) > -1 && inputVal.length > 1)  

 input.innerHTML = inputVal.replace(/.$/, btnVal); > decimalAdded =false; 

 else if (btnVal == '.') < if (!decimalAdded) < input.innerHTML += btnVal; decimalAdded = true; >> 

 else

 e.preventDefault();