TGViewer
Логово верстальщика Логово верстальщика @webdevlair · 7.94K subscribers
Post #4175 953
👩‍💻 Простой калькулятор с динамическим вводом

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

Требования:

• Два текстовых поля для ввода чисел.
• Выпадающий список для выбора операции.
• Динамическое отображение результата при изменении любого из входных значений.

Решение задачи🔽

<div>
<input type="number" id="num1" placeholder="Введите первое число">
<select id="operation">
<option value="add">+</option>
<option value="subtract">-</option>
<option value="multiply">×</option>
<option value="divide">÷</option>
</select>
<input type="number" id="num2" placeholder="Введите второе число">
</div>
<div>
<h3>Результат: <span id="result">0</span></h3>
</div>

const num1 = document.getElementById('num1');
const num2 = document.getElementById('num2');
const operation = document.getElementById('operation');
const result = document.getElementById('result');

function calculate() {
const value1 = parseFloat(num1.value) || 0;
const value2 = parseFloat(num2.value) || 0;

let res = 0;
switch (operation.value) {
case 'add':
res = value1 + value2;
break;
case 'subtract':
res = value1 - value2;
break;
case 'multiply':
res = value1 * value2;
break;
case 'divide':
res = value2 !== 0 ? value1 / value2 : 'Ошибка (деление на 0)';
break;
}

result.textContent = res;
}

[num1, num2, operation].forEach(element => {
element.addEventListener('input', calculate);
});
  • ❤ 1
  • 👍 1
  • 😁 1
More from @webdevlair
  1. Sep 29, 2026Post #4649
  2. Sep 29, 2026Подъехал официальный гайд по Claude Sonnet 5.5 Внутри без воды: в каких случаях выгоднее в…
  3. Sep 29, 2026🤣 Преподал урок информационной безопасности 💥 xCode Journal
  4. Sep 27, 2026Бумага и ручка: стартап заставил соискателей писать сопроводительные вручную Стартап Dumb…
  5. Sep 27, 2026Сигналы добрались до React-Redux В React Status #492 — React-Redux 9.4 Alpha притащил опци…
  6. Sep 26, 2026500+ баксов в месяц за ChatGPT? Не, у нас столько не завалялось Запуска пока нет. Но новый…
Threads Profile ViewerView any public Threads profile without an account.Open ThreadLook →Writing with AI? Make it sound human.Metric37 rewrites AI drafts so they read naturally. Free AI detector, 1,500 words free.Try Metric37 →