Привет, мой юный падаван!
Если ты только вчера узнал, что JavaScript — это не кофе и не скрипт для стиральной машины, а сегодня уже хочешь создать что-то работающее — ты попал по адресу.
Мы напишем калькулятор. Да-да, тот самый, с кнопочками, который считает лучше, чем твой кот после обеда. Это будет твой первый полноценный проект на JS, который можно кинуть другу и сказать: "Смотри, я гений!".
Поехали кодить! 🚀
🤔 А что мы вообще делаем?
Калькулятор — программулинка вообще всеобъемлющая. Тут тебе и кнопки, и логика, и магия превращения чисел. Ты поймешь, как работает JavaScript в связке с HTML и CSS, и сможешь почувствовать себя фронтенд-разработчиком
.
Спойлер: будет просто, даже если ты никогда не писал код сложнее "Hello World".
🏗 Этап 1: Скелет (HTML)
Любой уважающий себя калькулятор должен иметь кнопки и экранчик. Создадим файл index.html и набросаем базовую структуру.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Калькулятор для гениев</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="calculator">
<!-- Поле вывода (дисплей) -->
<input type="text" id="display" readonly placeholder="0">
<!-- Кнопки -->
<div class="buttons">
<button class="operator">C</button>
<button class="operator">⌫</button>
<button class="operator">/</button>
<button class="operator">*</button>
<button>7</button>
<button>8</button>
<button>9</button>
<button class="operator">-</button>
<button>4</button>
<button>5</button>
<button>6</button>
<button class="operator">+</button>
<button>1</button>
<button>2</button>
<button>3</button>
<button class="equals">=</button>
<button class="zero">0</button>
<button>.</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
Гениально просто, правда?
. У нас есть дисплей (поле input), куда будет выводиться результат, и куча кнопок с цифрами и операциями.
🎨 Этап 2: Красота (CSS)
Чтобы наш калькулятор не выглядел как таблица в Excel 1995 года, наведем марафет. Создадим файл style.css.
body {
margin: 0;
padding: 0;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.calculator {
background: rgba(255, 255, 255, 0.95);
border-radius: 20px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
padding: 20px;
width: 320px;
}
#display {
width: 100%;
height: 60px;
font-size: 24px;
text-align: right;
padding: 10px;
box-sizing: border-box;
border: 2px solid #ddd;
border-radius: 10px;
margin-bottom: 15px;
background: #f8f9fa;
font-weight: bold;
}
.buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}
button {
padding: 20px;
font-size: 18px;
border: none;
border-radius: 10px;
cursor: pointer;
transition: all 0.3s;
background: #f1f3f4;
color: #202124;
font-weight: 600;
}
button:hover {
background: #e1e3e4;
transform: scale(1.05);
}
.operator {
background: #dadce0;
color: #1a73e8;
font-weight: bold;
}
.operator:hover {
background: #bdc1c6;
}
.equals {
background: #1a73e8;
color: white;
grid-row: span 2;
}
.equals:hover {
background: #1557b0;
}
.zero {
grid-column: span 2;
}
Теперь
наш калькулятор выглядит так, что его не стыдно показать даже бабушке.
Кнопки красивые, тени модные, градиент сочный — всё как мы любим
.
⚡️ Этап 3: Мозги (JavaScript)
А теперь самое интересное — заставим всё это работать. Создадим файл script.js.
// Получаем элементы
const display = document.getElementById('display');
const buttons = document.querySelectorAll('button');
let currentInput = '';
let previousInput = '';
let operation = null;
// Навешиваем обработчики на все кнопки
buttons.forEach(button => {
button.addEventListener('click', () => {
const value = button.textContent;
// Обработка разных кнопок
if (!isNaN(value) || value === '.') {
// Если цифра или точка
appendNumber(value);
} else if (value === 'C') {
// Очистка всего
clear();
} else if (value === '⌫') {
// Удаление последнего символа
backspace();
} else if (value === '=') {
// Вычисление результата
calculate();
} else {
// Оператор (+, -, *, /)
chooseOperation(value);
}
// Обновляем дисплей
updateDisplay();
});
});
// Функции логики
function appendNumber(number) {
// Защита от множественных точек
if (number === '.' && currentInput.includes('.')) return;
currentInput += number;
}
function clear() {
currentInput = '';
previousInput = '';
operation = null;
}
function backspace() {
currentInput = currentInput.slice(0, -1);
}
function chooseOperation(op) {
if (currentInput === '') return;
if (previousInput !== '') {
calculate();
}
operation = op;
previousInput = currentInput;
currentInput = '';
}
function calculate() {
let result;
const prev = parseFloat(previousInput);
const current = parseFloat(currentInput);
// Если введена фигня — выходим
if (isNaN(prev) || isNaN(current)) return;
switch (operation) {
case '+':
result = prev + current;
break;
case '-':
result = prev - current;
break;
case '*':
result = prev * current;
break;
case '/':
if (current === 0) {
alert('На ноль делить нельзя! Ты чего?');
clear();
return;
}
result = prev / current;
break;
default:
return;
}
currentInput = result.toString();
operation = null;
previousInput = '';
}
function updateDisplay() {
display.value = currentInput || '0';
}
Вот так просто! Теперь калькулятор умеет складывать, вычитать, умножать, делить, стирать и не падает при делении на ноль
.
🧠 Как это работает (объясняю на пальцах)
Мы создали три переменные:
- currentInput — то, что сейчас набираем
- previousInput — предыдущее число (для операций)
- operation — выбранное действие
Когда пользователь жмет цифры, они добавляются в currentInput. При нажатии на оператор (+, -, *, /) мы запоминаем текущее число и выбранную операцию. Когда жмут =, достаем калькулятор и считаем
.
Логика простая, как угол дома, но работает безотказно.
🐛 Подводные камни (чтобы ты не попал)
- eval() — зло! Никогда не используй eval() для вычислений. Это опасно. Мы использовали честный switch — так правильнее
- Точка. Мы добавили проверку, чтобы нельзя было ввести 2.2.2. Бред же получится.
- Деление на ноль. Обработали отдельно, чтобы калькулятор не взорвался.
🚀 Прокачиваем до максимума
Хочешь больше? Добавь фишки:
// Кнопка +/- (смена знака)
function toggleSign() {
if (currentInput) {
currentInput = (parseFloat(currentInput) * -1).toString();
updateDisplay();
}
}
// Процент
function percentage() {
if (currentInput) {
currentInput = (parseFloat(currentInput) / 100).toString();
updateDisplay();
}
}
// Поддержка клавиатуры
document.addEventListener('keydown', (e) => {
if (e.key >= '0' && e.key <= '9') appendNumber(e.key);
if (e.key === '.') appendNumber('.');
if (e.key === '+' || e.key === '-' || e.key === '*' || e.key === '/') chooseOperation(e.key);
if (e.key === 'Enter' || e.key === '=') calculate();
if (e.key === 'Escape') clear();
if (e.key === 'Backspace') backspace();
updateDisplay();
});
Теперь калькулятором можно пользоваться и с клавиатуры. Красота!
Ты сделал это! Твой первый настоящий рабочий проект на JavaScript можно размещать на сайтах.
💡 Что дальше?
Этот калькулятор — база. Теперь ты можешь:
- Добавить скобки для сложных выражений
- Сделать историю вычислений
- Нарисовать дизайн в стиле iOS
- Добавить научные функции (синусы, косинусы)
А теперь вопрос к тебе, о великий кодер:
Какую фичу ты хочешь добавить в калькулятор? Может, перевод валют? Или голосовое управление, чтобы кричать "ПЛЮС ДВА ДВА"? Пиши в комментарии!
Самые безумные идеи реализуем в следующей статье 👇🔥
Не забудь подписаться, чтобы не пропустить новый выпуск, где мы будем что-нибудь еще интересненькое пилить на JS!