Мое обучение новой профессии на Hexlete продолжается! За этот не большой период времени я многому научился, допустил еще больше ошибок и иду дальше. Обучение и выполнение заданий это хорошо, но необходимо это все подкреплять практикой.

В этом посте я расскажу как я делал простой калькулятор и использовал для этого лишь HTML, CSS и JavaScript. Постоянное усложнение и добавление новых задач, сделает мой прогресс в профессии еще быстрее. Поэтому я еще постараюсь опубликовать данный проект на github. В своем обучении я использую ОС Ubuntu и VC Code.

У моего калькулятора будут стандартные функции такие как: сложение, вычитание, умножение и деление. Также будут присутствовать функции стереть последний символ и стереть все выражение сразу.

Создание репозитория

Сперва создадим на github репозиторий и назовем его Simple-JavaScript-Calculator (вы можете выбрать любое другое название). Отмечаем галочками, что наш репозиторий будет общедоступным и создаем фаил README.md.

Затем клонируем репозиторий на компьютер. Со страницы репозитория я копирую URL нового репозитория и с помощью команды git clone <URL>, в терминале, я скачиваю проект. VC Code отличный редактор исходного кода, он прост в работе и удобен, поэтому я использую его.

Проект калькулятор будут состоять из трех файлов — это index.html, style.css и script.js. Создаем их с помощью команды touch <name> в терминале VS Code. Да! Там есть даже терминал.

Создания фаилов

В html фаиле начинаем вводить «!» и жмем кнопку «ввод» и у нас сразу появляется начальная структура html фаила. Подключаем к html фаилу .js и .css. Атрибут rel= «stylesheet» определяет, что подключаемый фаил хранит таблицу стилей, а атрибут defer говорит о том, что необходимо отложить загрузку скрипта, пока не будет загружена страница.

<link href="style.css" rel="stylesheet>
<script src="script.js" defer></script>

Калькулятор состоит из «экрана ввода» и кнопок, поэтому в тег body помещаем div который будет содержать в себе все div и button.

«Экран ввода» состоит из двух блочных элементов, первый div содержит в себе первый операнд который мы ввели, а второй div содержит второй операнд который мы ввели последним. Эти два div также необходимо обернуть в другой div.

Так выглядит html фаил в браузере

С кнопками все намного проще. Калькулятор содержит всего две кнопки которые занимают ширину двух кнопок это — «AC» и «=». Для них сразу прописываем один класс. Все остальные кнопки пишем как обычно.

<div class="calculator-grid">
      <div class="output"> // экран ввода
        <div class="first-operand"></div>  //первый операнд + знак
        <div class="second-operand"></div> //второй операнд
      </div>
      <button class="doubled-grid">AC</button> //кнопка "стереть все"
      <button>DEL</button>    //обычная кнопка

На данном этапе с html покончено, теперь необходимо задать стили.

В фаиле styles.css используем псевдоэлементы ::before и ::after. Эти псевдоэлементы определяет содержимое для вставки — соответственно «до и после». Задаем значение box-sizing, шрифты выбираем стандартные и насыщенность шрифта — normal.

Теперь сделаем красивый фон для калькулятора. Отступы уберем, а цвет фона будет у нас плавно меняться от левого края к правому и зададим два цвета.

Фон

Теперь необходимо задать стили классу калькулятор. Далее я постараюсь описать только важные вещи (в репозитории github можно будет скачать все файлы). С помощью свойства display: grid; укажем, что элемент должен быть расположен в сетке. Далее мы указываем, что калькулятор содержит 4 колонки шириной по 100px. Похожие манипуляции мы должны проделать со строками, за исключением нескольких моментов. Калькулятор содержит 5 строк и они также будут шириной по 100px каждая, а вот строка ввода должна изменятся относительно того на сколько большое число мы вводим. В этом нам поможет функция minmax(120px, auto), где первым значением записывается минимальное значение, а вторым максимальное. Так как мы не знаем максимальное значение, то ставим — auto.

.calculator-grid {
  display: grid;
  justify-content: center;
  align-content: center;
  min-height: 100vh;
  grid-template-columns: repeat(4, 100px);
  grid-template-rows: minmax(120px, auto) repeat(5, 100px);
}

Следующим этапом мы выбираем все кнопки и устанавливаем форму курсора при наведении на элемент, а также разделяем кнопки, границами белого цвета, между собой. Для более удобного использования нашего калькулятора изменении цвет фона кнопки при наведении. В этом нам поможет псевдокласс :hover, который срабатывает когда пользователь наводит курсор.

Для того чтобы две наши кнопки «AC» и «=» занимали две ширины «кнопки», воспользуемся классом который мы им присвоили и зададим значения.

.calculator-grid > button {
  cursor: pointer;
  font-size: 2rem;
  border: 1px solid white;
  outline: none;
  background-color: rgba(255, 255, 255, 0.75);
}

.calculator-grid > button:hover {
  background-color: rgba(255, 255, 255, 0.9);
}

.doubled-grid {
  grid-column: span 2;
}

Затем мы должны перейти к «экрану ввода значений». Для более понятного отображения, что мы меняем рекомендую в html файле в div first и second указать любые значения. Примерно вот так:

Напомню что «экран ввода значений» будет черного цвета и значения будут расположены один над другим. Значение которое было введено последним, должно быть более светлым и размером больше чем первое.

С помощью свойства word-wrap: break-word будем переносить автоматически длинные «строки». А с помощью word-break: break-all укажем как переносить «строку». Для первого и второго значения задаем цвет и размер шрифта.

На данном этапе первая часть как сделать простой калькулятор заканчивается. В первой части я создал репозиторий на github, скачал его и практически полностью закончил написания того, как будет выглядеть калькулятор. Следующим этапом я постараюсь написать .js файл и сделать так, чтоб калькулятор выполнял свою главную цель.