Привет, это Блажей, Работа над проектом «Калькулятор» была довольно забавной и, я бы сказал, совершенно другим опытом. В отличие от 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 вызова для нее. Один для щелчка мышью, а второй для нажатия клавиши. Мне удалось отсортировать все цифры и кнопки равенства, но я решил не использовать операторы, так как мне пришлось бы изменить свою логику с помощью объекта оператора. Эту настройку кажется более простой для понимания, если мне понадобится просмотреть ее позже. Однако я могу ошибаться, поэтому не принимайте это как должное. Готовый проект можно увидеть здесь: КАЛЬКУЛЯТОР Размышления и извлеченные уроки Какой урок здесь был? Мне понравился процесс создания приложения и его проектирования, и я узнал МНОГО о событиях. Я очень рекомендую вам пройти процедуру дополнительного кредита с этим! Если вам понравилась эта история и советы оказались полезными, подписывайтесь на меня в , чтобы получать больше обновлений и советов по программированию. Мне бы хотелось услышать о ваших собственных проблемах и успехах в программировании в комментариях ниже! Твиттере
