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

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

Требования:

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

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

<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);
});
More from @webdevlair
  1. Oct 4, 2026Моя эпопея с Elementor: 9 выводов после одного убитого сайта Год назад мы с корешем собира…
  2. Oct 2, 2026Post #4667
  3. Oct 2, 2026😅 Айтишник отправил в одну компанию три одинаковых резюме и только одно дошло до финала О…
  4. Oct 2, 2026🤣 Правильно расставленные приоритеты в моей жизни би лайк: 💥 xCode Journal
  5. Oct 1, 2026🤯 Люди взбунтовались против «пыточной для ИИ» На GitHub заметили открытый проект AI Tortu…
  6. Sep 29, 2026Подъехал официальный гайд по Claude Sonnet 5.5 Внутри без воды: в каких случаях выгоднее в…
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 →