Создайте калькулятор на JavaScript
Цель: создать приложение CodePen.io , функционально похожее на это: https://codepen.io/freeCodeCamp/full/wgGVVX . Выполните приведенные ниже истории пользователей и получите все тесты для прохождения. Дайте ему свой личный стиль. Вы можете использовать любое сочетание HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux и jQuery для завершения этого проекта. Вы должны использовать фреймворк frontend (например, React), потому что этот раздел посвящен изучению интерфейсных фреймворков. Дополнительные технологии, не перечисленные выше, не рекомендуются, и использование их на свой страх и риск. Мы смотрим на поддержку других интерфейсных фреймворков, таких как Angular и Vue, но в настоящее время они не поддерживаются. Мы примем и попытаемся исправить все отчеты о проблемах, которые используют предлагаемый стек технологий для этого проекта. Счастливое кодирование! User Story # 1: Мой калькулятор должен содержать интерактивный элемент, содержащий знак = (знак равенства) с соответствующим id="equals" . User Story # 2: Мой калькулятор должен содержать 10 интерактивных элементов, содержащих по одному номеру от 0 до 9, со следующими идентификаторами: id="zero" , id="one" , id="two" , id="three" , id="four" , id="five" , id="six" , id="seven" , id="eight" и id="nine" . User Story # 3: Мой калькулятор должен содержать 4 элемента с возможностью клика, каждый из которых содержит один из 4 основных математических операторов со следующими идентификаторами: id="add" , id="subtract" , id="multiply" , id="divide" , User Story # 4: Мой калькулятор должен содержать интерактивный элемент, содержащий a . (десятичной точки) с соответствующим id="decimal" . User Story # 5: Мой калькулятор должен содержать интерактивный элемент с id="clear" . User Story # 6: Мой калькулятор должен содержать элемент для отображения значений с соответствующим id="display" . User Story # 7: В любое время нажатие кнопки очистки очищает входные и выходные значения и возвращает калькулятор в исходное состояние; 0 должен отображаться в элементе с идентификатором display . User Story # 8: Когда я вводил числа, я должен был видеть мой ввод в элементе с идентификатором display . User Story # 9: В любом порядке я должен иметь возможность добавлять, вычитать, умножать и делить цепочку чисел любой длины, а когда я нажимаю = , правильный результат должен отображаться в элементе с идентификатором display . User Story # 10: при вводе чисел мой калькулятор не должен допускать, чтобы число начиналось с нескольких нулей. User Story # 11: После нажатия десятичного элемента a . следует добавить к отображаемому в данный момент значению; два . в одном номере не должны приниматься. User Story # 12: Я должен выполнять любую операцию (+, -, *, /) для чисел, содержащих десятичные точки. User Story # 13: Если последовательно введено 2 или более операторов, выполняемая операция должна быть последним введенным оператором. User Story # 14: нажатие оператора, следующего за = должно начать новый расчет, который работает в результате предыдущей оценки. User Story # 15: Мой калькулятор должен иметь несколько десятичных знаков точности, когда дело доходит до округления (обратите внимание, что нет точного стандарта, но вы должны иметь возможность обрабатывать вычисления, такие как 2 / 7 с разумной точностью, по крайней мере, до 4 знаков после запятой) , Примечание. В калькуляторе калькулятора. Следует отметить, что есть две основные школы мышления в логике ввода калькулятора: логика непосредственного выполнения и логика формулы . В нашем примере используется логика формулы и соблюдается порядок приоритетности операций, немедленное выполнение не выполняется. Любой из них является приемлемым, но учтите, что в зависимости от того, какой вы выбираете, ваш калькулятор может давать разные результаты, чем наши, для определенных уравнений (см. Пример ниже). Пока ваша математика может быть проверена другим калькулятором производства, пожалуйста, не считайте это ошибкой. ПРИМЕР: 3 + 5 x 6 - 2 / 4 =
- Немедленная логика выполнения:
11.5 - Логика формулы / выражения:
32.5
https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js Как только вы закончите, отправьте URL-адрес своей рабочей проект с прохождением всех его тестов. Не забудьте использовать метод Read-Search-Ask, если вы застряли.