HTML: Калькулятор

Обновлено: 25 июля, 02:17
1635
Студентов
82%
Завершения

Реализуйте калькулятор по следующему макету:

Калькулятор на CSS

В шаблоне реализовано центрирование калькулятора по всем осям. Подробнее это вы изучите в курсе по Flex.

Стили обёртки

  • Ширина: 300 пикселей
  • Цвет фона: #2c3e50
  • Шрифт: Roboto Mono. Файлы шрифтов находятся в директории assets

Стили блока с результатом вычислений

  • Внутренние отступы: по 30 пикселей
  • Цвет текста: белый
  • Цвет фона: #505c68
  • Выравнивание по правому краю

Внутри располагается два параграфа:

  • Выражение имеет цвет #ced4d9 и размер шрифта в 80%
  • Результат вычисления имеет шрифт размером 3em

Параграфы имеют отступы по 5 пикселей сверху и снизу.

Стили кнопок

Создайте обёртку под каждую строчку с кнопками. Внутри строчки равномерно размещается по 4 элемента.

  • Высота кнопок: 75px
  • Кнопки являются блочным элементом. Используйте свойство display со значением block
  • Размер шрифта: 1.2em
  • Сбросьте стандартные стили кнопок. Это свойства border и background
  • Установите курсор pointer. Для этого используйте свойство cursor
  • При наведении на кнопку её фон меняется на #364c63
  • Кнопка Delete имеет размер шрифта в 80%

Каждая четвёртая кнопка в строке имеет синий цвет. Для этого в CSS файле существуют стили для класса .bg-blue.

Используйте спецсимволы HTML для встраивания правильных символов. Это делается с помощью специальных мнемоник — конструкций, которые сообщают браузеру отобразить символ, которого нет в стандартной раскладке клавиатуры. Эти символы вставляются напрямую в HTML разметку. Каждая мнемоника имеет определённый синтаксис: начинается с амперсанда & и заканчивается точкой с запятой ;

  • Минус: −
  • Плюс-минус: ±
  • Деление: ÷
  • Умножение: ×

Подсказки

  • Обратите внимание на доступные классы внутри файла app.css. Некоторые из них могут пригодиться.
  • Для кнопок используйте специальный тег <button>. Это обеспечит правильную семантику и доступность.
  • Путь к шрифту: ../assets/fonts/RobotoMono-Regular.woff2

Для полного доступа к испытанию нужен базовый план

Базовый план откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.

Получить доступ
1000
упражнений
2000+
часов теории
3200
тестов