8.0 KiB
id, title, challengeType, forumTopicId, dashedName
| id | title | challengeType | forumTopicId | dashedName |
|---|---|---|---|---|
| bd7158d8c442eddfaeb5bd17 | Створіть калькулятор JavaScript | 3 | 301371 | build-a-javascript-calculator |
--description--
Примітка: React 18 містить відомі несумісності з тестами цього проєкту (див. проблему)
Мета: створити застосунок, функціонально схожий до https://javascript-calculator.freecodecamp.rocks/.
Виконайте історію користувача та пройдіть тести. Використовуйте необхідні вам бібліотеки або API. Оформте за власним стилем.
Для виконання цього проєкту можна використати різне поєднання HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux та jQuery. Потрібно використати фронтенд фреймворк (наприклад, React), оскільки цей розділ стосується їх вивчення. Ми не рекомендуємо використовувати інші технології та ресурси, що не були вказані вище, але ви можете застосовувати їх на власний розсуд. Ми розглядаємо використання інших фронтенд фреймворків, серед яких Angular та Vue, але наразі вони не підтримуються. Ми візьмемо до уваги і спробуємо виправити всі звіти, що використовують запропонований технологічний стек у цьому проєкті. Щасливого програмування!
Історія користувача №1: мій калькулятор містить активний елемент, що містить = (знак рівності) з відповідним id="equals".
Історія користувача №2: мій калькулятор містить 10 активних елементів, кожен з яких позначає цифру від 0 до 9 відповідним ID: id="zero", id="one", id="two", id="three", id="four", id="five", id="six", id="seven", id="eight" та id="nine".
Історія користувача №3: мій калькулятор містить 4 активні елементи, кожен з яких позначає один математичний оператор відповідним ID: id="add", id="subtract", id="multiply", id="divide".
Історія користувача №4: мій калькулятор містить активний елемент, що містить . (десятковий розділювач) з відповідним id="decimal".
Історія користувача №5: мій калькулятор містить активний елемент з id="clear".
Історія користувача №6: мій калькулятор містить елемент з відповідним id="display", що показує значення.
Історія користувача №7: якщо натиснути кнопку clear, то очистяться введені та виведені дані, а калькулятор повернеться до початкового стану; в елементі з id зі значенням display має бути 0.
Історія користувача №8: коли я ввожу числа, то я бачу введені дані в елементі з id зі значенням display.
Історія користувача №9: я можу додати, відняти, помножити та поділити числа будь-якої довжини, а якщо натисну =, то побачу правильну відповідь в елементі з id зі значенням display.
Історія користувача №10: мій калькулятор не дозволяє вводити числа, які починаються з декількох нулів.
Історія користувача №11: якщо натиснути десятковий розділювач, то до поточного значення має приєднатись .; в одному числі заборонено використовувати два елементи ..
Історія користувача №12: я можу виконати будь-яку операцію (+, -, *, /) з числами, що містять десятковий розділювач.
Історія користувача №13: якщо введено 2 чи більше операторів послідовно, то потрібно виконати дію останнього оператора (не враховуючи знак мінус (-)). Наприклад, якщо ввести 5 + * 7 =, то результатом має бути 35 (тобто 5 * 7); якщо ввести 5 * - 5 =, то результатом має бути -25 (тобто 5 * (-5)).
Історія користувача №14: якщо натиснути оператор одразу після =, то розпочнеться нове обчислення на основі відповіді попереднього розрахунку.
Історія користувача №15: мій калькулятор показує декілька знаків після десяткового розділювача, коли мова йде про округлення чисел (зверніть увагу, що не існує точного стандарту, але ваш калькулятор має виконувати обчислення типу 2 / 7 та відповідати з принаймні чотирма знаками після коми).
Примітка щодо логіки калькулятора: варто зазначити, що існує дві школи стосовно логіки введення даних до калькулятора: логіка негайного виконання та логіка формули. Наш приклад використовує логіку формули та дотримується порядку виконання операцій. Логіка негайного виконання цього не робить. Можете використати будь-яку логіку, але зауважте, що ваш калькулятор може видати інші результати для певних прикладів (див. приклад нижче). Якщо ваші розрахунки можна перевірити іншим калькулятором, то не вважайте це помилкою.
ПРИКЛАД: 3 + 5 x 6 - 2 / 4 =
- Логіка негайного виконання:
11.5 - Логіка формул/виразів:
32.5
Ви можете створити свій проєкт, використавши цей шаблон CodePen та натиснувши Save. Або ж ви можете скористатися цим посиланням CDN, щоб виконати тести в будь-якому середовищі: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
Як тільки закінчите, надайте посилання на свій проєкт з усіма пройденими тестами.
--solutions--
// solution required