Калькулятор - это классическая задача для начинающих разработчиков, и она отлично подходит для освоения основ JavaScript, работы с событиями и DOM-манипуляциями. В этом проекте мы создадим простой калькулятор, который позволит пользователю выполнять базовые математические операции, такие как сложение, вычитание, умножение и деление.
В этой статье я покажу, как с помощью Vanilla JavaScript реализовать калькулятор, который будет реагировать на клики и обновлять результаты на странице без перезагрузки.
1. Создание структуры калькулятора (HTML)
Начнем с создания структуры калькулятора на HTML. Мы будем использовать кнопки для цифр и операций, а также поле для отображения результата.
Файл: index.html
Объяснение:
Мы создаем поле ввода (<input>) для отображения результатов и ввода.
Для чисел и операций используем кнопки (<button>), каждая из которых имеет атрибут data-value, который будет хранить значение кнопки.
Есть отдельная кнопка для очистки экрана (C) и кнопка для вычисления результата (=).
Также добавляем стили (которые мы создадим позже) для улучшения визуального восприятия.
2. Стилизация калькулятора (CSS)
Теперь давайте добавим немного стилей, чтобы калькулятор выглядел красиво и удобно.
Файл: style.css
Объяснение:
Мы используем grid для кнопок калькулятора, чтобы они красиво располагались в виде сетки.
Для кнопок операций добавляем класс operator, чтобы выделить их цветом.
Ввод (display) занимает всю ширину контейнера и стилизован для удобного отображения текста.
3. Написание JavaScript для обработки событий
Теперь самое интересное - добавим функциональность для калькулятора с помощью JavaScript. Мы будем слушать события на кнопках и обновлять экран калькулятора.
Файл: script.js
Объяснение:
Мы получаем все кнопки с классом btn и добавляем обработчик события для каждой из них.
Когда пользователь нажимает на кнопку, мы получаем её значение через getAttribute('data-value').
Если нажата кнопка "C", очищаем экран.
Если нажата кнопка "=", мы пытаемся вычислить результат с помощью функции eval() (используем её для простоты, но будьте осторожны с её применением в реальных проектах).
Для остальных кнопок просто добавляем цифры или операторы к текущему вводу и обновляем экран.
Заключение
Мы только что создали простой калькулятор с использованием JavaScript, событий и DOM-манипуляций. Теперь, при нажатии на кнопки, калькулятор будет выполнять математические операции и отображать результат без перезагрузки страницы.
Мой совет: Этот калькулятор - это отличная отправная точка для изучения работы с DOM и событий. Вы можете улучшить его, добавив более сложные функции, такие как обработка ошибок, работа с десятичными числами или создание более сложных математических операций.
Название файлов и расширений:
index.html - основной HTML-файл для проекта.
style.css - файл с CSS-стилями.
script.js - файл с JavaScript-кодом, который содержит логику калькулятора.
Теперь у вас есть всё для создания своего первого калькулятора на JavaScript! Попробуйте улучшить его, добавив новые функции и возможности.
📖 Читайте также:
→ Основы DOM-манипуляций: как изменить структуру и стиль элементов страницы с помощью JavaScript
→ Основы работы с событиями в JavaScript: от кликов до кастомных событий