Создайте базовый калькулятор с vanilla JS
Добро пожаловать, ребята, сегодня я расскажу вам, как сделать приложение-калькулятор на HTML, CSS и vanilla JS. Это простой проект, который абсолютно необходим, так как он поможет вам понять, как связать ваш HTML с JS, а также заставить ваш HTML DOM изменяться и взаимодействовать с вашим пользователем. Мы начнем с создания структуры папок для нашего проекта, так как рекомендуется хранить наш код отдельно, чтобы нам было легче его отлаживать позже, а также это повышает удобство использования нашего кода. Затем сделаем HTML-разметку для веб-сайта и добавим некоторые стили CSS, после чего мы придадим нашему веб-сайту интерактивность с помощью JS, и на этом все готово. ПРОСТО ПРАВО?? Итак начнем😉.
1:) Создание разметки для нашего проекта
i:)Структура папок
Я бы порекомендовал вам использовать VSCode для разработки, но подойдет любой редактор кода (включая блокнот🤣). Вам просто нужно убедиться, что файлы имеют те же расширения, что и у меня. Для HTML (имя_файла.html), для CSS (имя_файла.css) и, наконец, для JS (имя_файла.js). Теперь, когда мы прояснили основы и находимся на одной странице, давайте начнем кодировать настоящую вещь.
ii:) Шаблон и контейнеры
Теперь начните с создания шаблонного HTML-кода, как я показал на изображении, а также добавьте контейнерные элементы div, которые дадут вам представление о том, как вы должны соответствующим образом стилизовать элементы div. После этого мы добавим в разметку несколько кнопок, а затем перейдем к стилю нашего проекта.
iii:) Размещение клавиш
Теперь мы завершили работу с HTML-разметкой и готовы приступить к стилизации. На изображении выше я сделал несколько кнопок для управления калькулятором. Я дал класс «func» операторам, «num» — цифрам и соответственно остальным. Я бы также использовал идентификатор кнопки, чтобы определить ее значение в JS, хотя вы можете использовать и другие подходы, такие как присвоение им атрибута «значение» или атрибута «ключ-данные» или чего-либо, что вы можете использовать в качестве значения в JS. Я также не использовал классы bootstrap, так как для стилизации я использовал макет сетки CSS.
2:) Создание таблицы стилей нашего проекта
i:) Применение основных стилей к телу и контейнеру
Итак, ребята, это стиль, который будет применен к корпусу и контейнеру нашего калькулятора. Я использовал свойство CSS flexbox, чтобы центрировать калькулятор по телу. Я также сделал то же самое с нашим контейнером, чтобы правильно расположить дисплей и клавиши без каких-либо хлопот. Таким образом, вы можете создавать отличные адаптивные дизайны с минимальными усилиями.
ii:) Стилизовать дисплей и клавиши, присвоив им свойство сетки CSS
Здесь, на изображении выше, я придал стиль дисплею, клавишам и кнопкам. В блоке ключей я задал свойство отображения сетки, которое обеспечивает позиционирование всех ключей в таблице, похожей на сетку, без дополнительного кода. Это встроенная функция CSS, которая работает как макет таблицы HTML. Макет почти готов, осталось только стилизовать отдельные кнопки, но это я оставляю вам. Я придал базовый стиль всем моим кнопкам, которые вы можете использовать, если хотите, но я бы порекомендовал написать свой CSS, так как это позволит вам персонализировать ваш проект и поможет выделиться из толпы. Теперь давайте перейдем к JS, чтобы дать калькулятору функциональность для расчета.
3:) Делаем JavaScript нашего проекта
i:)объявление переменных
Во-первых, мы должны создать переменные, которые помогут нам манипулировать и получать входные данные из нашего HTML DOM. Вы можете поймать элемент по его имени идентификатора, имени класса или имени тега. Далее мы будем перебирать все кнопки и прослушивать входные данные, данные кнопками. На этом шаге вы также рассчитаете и отобразите результаты.
ii:) Перебор кнопок и вызов calculate
Переменная кнопки, которую мы получили, является объектом всех кнопок, поэтому мне нужно преобразовать ее в массив, чтобы я мог использовать цикл forEach для итерации всех кнопок и проверки того, какая из них нажата. «elem» — это переменная цикла, которая получит значение всех кнопок, а прослушиватель событий будет прослушивать событие щелчка и, если будет нажат, отправит кнопку для вычисления функции, которую мы проверим дальше.
iii:) Функция, которая вычисляет и отображает значение
Вот оно, ребята! здесь начинается все волшебство. Эта функция примет кнопку щелчка как «лексический this» и сохранит ее «id» в переменной digit. Если это «C», то внутренний текст дисплея будет установлен на «», если это «AC», то функция выдвинет последнюю цифру из внутреннего текста «дисплея». Я использовал функцию «eval()», которая является встроенной функцией JavaScript, которая выполняет математические операции со строкой.
Вы также можете преобразовать строку в число и выполнить математические вычисления. Я не хотел влезать в эти неприятности, поэтому пошел по этому пути.
Я также ограничил количество цифр на дисплее максимум 13 цифрами, чтобы я мог контролировать точность, но это совершенно необязательно.
4:) Рабочий калькулятор
Итак, ребята, после всей этой тяжелой работы мы успешно создали наш собственный работающий калькулятор с помощью старого доброго HTML, CSS и JS. Гордитесь тем, что вы сделали что-то замечательное, что может сделать вас великим веб-разработчиком в будущем. Наслаждайтесь и не забудьте подписаться на меня, чтобы получать такие уроки, которые я публикую в этом блоге каждое воскресенье.
