Минималистичный лендинг с рабочим калькулятором в центре: тактильные кнопки, лента вычислений, живой предпросмотр результата и четыре цветовые темы. Без библиотек и фреймворков.
Калькулятор — самый скучный инструмент на телефоне. Захотелось сделать такой, которым приятно пользоваться: чтобы кнопки отвечали на нажатие, а сам лендинг состоял из одного экрана с продуктом, а не из лозунгов.
Корпус и клавиши нарисованы на чистом CSS: «толщина» клавиши — это тень, которая схлопывается при нажатии. Операторы круглые, «=» — акцентная с каплей-углом. Выражения разбирает собственный рекурсивный парсер, без eval.
На телефоне калькулятор встаёт под заголовок и занимает всю ширину — клавиши остаются крупными и не требуют прицельного нажатия.
Отдельной мобильной раскладки нет: сетка кнопок квадратная и сама подстраивается под экран, горизонтального скролла нет.
зависимостей: чистые HTML, CSS и JavaScript
цветовые темы, переключаются без перезагрузки
строк JS вместе с парсером и звуком
работает с клавиатуры и тачскрина