Проект «Калькулятор»: почему он был проще, но полон препятствий

Привет, это Блажей,

Работа над проектом «Калькулятор» была довольно забавной и, я бы сказал, совершенно другим опытом. В отличие от Etch-a-Sketch, который казался более сложным. Как же тогда это возможно?

Думаю, ответ может заключаться не в сложности упражнения, а в чем-то другом. Начнем с самого начала.

Запуск проекта калькулятора

Я начал работать над Калькулятором 2 мая 2024 года. Первый сеанс занял у меня три часа, за которые мне удалось его настроить и запустить. Было около полудня, поэтому я решил сделать последнее обязательство, поужинать и потренироваться.

В тот день мне хотелось еще немного программировать, потому что я знал, что на следующий день моя подруга придет в гости и останется там на три ночи.

Как и другие преданные сторонники Одина, я не хотел делать перерывы в кодировании, особенно в работе с Калькулятором, который, по моему мнению, является самым важным проектом в Foundations.

Неожиданное вдохновение

Я собирался выключить компьютер, когда на YouTube появилось видео ForrestKnight . Я немного посмотрел и остановился сразу после того, как он рассказал об удовольствии программировать.

Я обдумал это, и вот моя точка зрения как новичка, который только что закончил кодирование и до сих пор часто задает себе этот вопрос.

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

Однако я никогда раньше не программировал!

Начальный опыт программирования

Однако я заметил, что чем больше я пишу и вижу, как это работает, тем больше мне нравится этот процесс. Особенно это касается калькулятора, который в целом прошел гладко, и мне удалось избежать СЕРЬЕЗНЫХ ЗАСТРЯНИЙ — ну, по большей части. Я коснусь этого позже.

Этот проект показался мне значительно проще, чем проект Etch-a-Sketch, в котором я два дня боролся с реализацией логики изменения цвета градиента. Программирование, конечно, непростое дело, но этому проекту я посвящал от 1,5 до 2 часов каждый день в течение четырех дней, и это был управляемый и полезный опыт.

Каждый раз, открывая VSCode, я чувствовал себя очень продуктивно, что помогало мне быстро решать поставленные задачи. Самое увлекательное во время работы над ним было то, что я мог представить себе другие варианты решения этого упражнения.

Я чувствовал себя ребенком, собирающим какую-то сумасшедшую машинку Lego Technic и придумывающим, какие функции еще добавить. Забавное ощущение.

Наслаждаемся процессом

Что именно я имею в виду? Я знал, что мог бы создать одну функцию с событиями для всех цифровых кнопок вместо девяти отдельных.

Однако я забыл, как это сделать правильно, и решил перейти к 9 различным вариантам, но пообещал себе, что вернусь и прочитаю документацию, содержащую несколько уроков назад о том, как решить эту проблему. Как я и думал.

Я ожидал, что застряну на чем-то еще на пять часов или около того, но этого не произошло. Я заставил его работать с 244 строками кода.

Проблемы с CSS

Теперь пришло время начать экспериментировать с CSS и немного стилизовать этот проект. Ну вот тогда я и застрял. Казалось, это сложнее, чем создавать JavaScript.

Я не мог в это поверить! Я знал, что для этого проекта мне нужно использовать Flexbox, но кнопки выглядели немного иначе, чем в Etch-a-Sketch, который я сделал ранее. В Etch-a-Sketch мне сказали создать сетку с помощью циклов:

Всякий раз, когда я застреваю в Flexbox, я всегда обращаюсь к сообщению в блоге Джоша. Лучшего объяснения того, как они работают, ИМХО, нет.

Однако я не был уверен, сработает ли это для калькулятора, поскольку не все кнопки одинаковы. Например, я хотел, чтобы 0 было больше.

Я прокрутил статью вниз, потому что вспомнил, что там упоминался CSS Grid. Оказалось, что мне действительно нужно использовать его здесь.

Более того, калькулятор, показанный Одином в качестве примера, также был разработан с использованием CSS Grid.

Знакомство с CSS Grid

В этот момент я немного растерялся, потому что, насколько я помню, сетку мы вообще не трогали.

Я начал гуглить. Что я нашел? Большая статья с довольно подробным объяснением того, как ее использовать. Я подумал, что еще не время для этого, и предположил, что с сеткой мы познакомимся позже.

Кроме того, в упражнении упоминался только Flexbox, оооо да, НАДЕЮСЬ, что мы тоже изучим сетку. Если нет, то я вернусь к этому в какой-то момент сам.

НЕБОЛЬШОЕ ОБНОВЛЕНИЕ — на следующий день я увидел этот пост на Odin Discord:

Окончательные корректировки и дизайн пользовательского интерфейса

Я решил использовать пару элементов div и просто перегруппировать кнопки в HTML.

После очередного занятия калькулятор выглядел чем-то знакомым обычному устройству.

Добавление поддержки клавиатуры

Последним шагом для меня было сделать поддержку клавиатуры.

Кровавый ад! Это было непросто, и мне пришлось вернуться к уроку и несколько раз прочитать документацию, чтобы понять, как работают эти клавиши клавиатуры.

Это было довольно сложно, так как всплытие событий сбивало меня с толку. Это был подходящий момент сделать 1 функцию, которая будет нажимать кнопки, и 2 вызова для нее. Один для щелчка мышью, а второй для нажатия клавиши.

Мне удалось отсортировать все цифры и кнопки равенства, но я решил не использовать операторы, так как мне пришлось бы изменить свою логику с помощью объекта оператора.

Эту настройку кажется более простой для понимания, если мне понадобится просмотреть ее позже.

Однако я могу ошибаться, поэтому не принимайте это как должное.

Готовый проект можно увидеть здесь:

КАЛЬКУЛЯТОР

Размышления и извлеченные уроки

Какой урок здесь был? Мне понравился процесс создания приложения и его проектирования, и я узнал МНОГО о событиях. Я очень рекомендую вам пройти процедуру дополнительного кредита с этим!

Если вам понравилась эта история и советы оказались полезными, подписывайтесь на меня в Твиттере , чтобы получать больше обновлений и советов по программированию. Мне бы хотелось услышать о ваших собственных проблемах и успехах в программировании в комментариях ниже!