В ноябре 2022 года я начал самостоятельно обучаться фронтенд-разработке через курсы YouTube и Udemy, и с тех пор я оценил (и до сих пор ценю) возможности этих замечательных технологий, которые я изучал и продолжаю изучать — HTML, CSS и JavaScript. Я сделал несколько бесполезных веб-сайтов и проектов, чтобы углубить знания, которые я изучил; такие концепции, как структурирование макетов, применение стилей и небольшие взаимодействия здесь и там.
Меня как дизайнера продуктов, который очень интересовался программированием, это приложение для ведения дел — TaskPal — утомило меня. Я имею в виду, буквально. Я чувствую, что это решающий момент в моем путешествии, и я решил задокументировать его; отсюда и эта запись.
Первое впечатление
Я наткнулся на этот руководство по YouTube для проекта, и мне понравилось, насколько простыми были функции:
- Меню смены темы
- Добавить задачу
- Удалить задачу
После просмотра всего руководства я не понял большую часть того, что сделал человек, поскольку его JS-программирование сильно отличалось от того, что я узнал, и я решил взять на себя задачу воспроизвести проект, но сделать это по-своему. . Я знал Grid и Flexbox в CSS и как перемещаться по DOM, createElement и т. д., поэтому я попробовал. Я не предвидел препятствий, которые встретятся мне на пути. 😊
Дизайн и функциональность
Во-первых, я начал делать скриншоты всех взаимодействий в видео, которые происходили в приложении, чтобы знать, как будет построен пользовательский интерфейс и задействованные взаимодействия. Именно здесь мне пригодилась должность дизайнера продукта, поскольку я мог легко визуализировать концепция блочной модели и то, как значки, модальные окна, тексты, всплывающие окна и элементы ввода размещаются на странице и размещаются на своих законных позициях.
Проблемы и решения
Я быстро приступил к созданию основы для приложения с помощью HTML, обязательно использовал синтаксис HTML5 и стилизовал его с помощью CSS. Для макета я в основном использовал сетку или флексбокс, в зависимости от области, которую я оформлял — хотя флексбокс делал большую часть работы. JavaScript был гладким, пока у меня не возникли проблемы с зацикливанием массива, чтобы сделать галочку видимой на всех созданных задачах — я продолжал получать Uncaught TypeError. ChatGPT пришел на помощь после более чем 10 минут моих безуспешных попыток разобраться. 🎉
Еще одна небольшая проблема, с которой я столкнулся, заключалась в переключении «+ Добавить задачу» на круглое кольцо, когда кто-то щелкает ввод, чтобы ввести задачу.
Мне удалось выяснить это, сгруппировав «+ Добавить задачу» в отдельный div, отображаемый во Flex, и поместив его вместе с круглым кольцом в другой div, также отображаемый во Flex. Таким образом, я мог бы легко использовать JS для таргетинга каждого и переключения по клику.
Чтобы удалить задачи, я изучил Event Bubbling, и это пригодилось, так как ранее я прикреплял addEventListener() к кнопке удаления и обнаружил, что когда я добавляю задачу, кнопка удаления для этой недавно добавленной задачи не работал. Event Bubbling заставил меня понять, что addEventListener() должен находиться в div, содержащем все добавленные задачи вместе, чтобы любая операция влияла на последующие добавленные задачи.
Баги😬
Хотя мне удалось сделать большую часть приложения, я заметил некоторые ошибки (которые я все еще исправляю):
- когда я создаю более одной задачи и пытаюсь ее удалить, появляется приветственное заявление; Я несколько раз пытался сделать так, чтобы это происходило только при удалении последнего элемента задачи, но не смог. 😥
- галочки не появляются при клике в созданных задачах, работает только состояние наведения.
Заключение
Я очень рад этому проекту, обучению, разучению и переобучению, которые происходили повсюду, и тому, как концепции становятся конкретными. Для меня это — писать о проектах, которые я создаю, — будет продолжаться, поскольку я планирую улучшить свои навыки разработки внешнего интерфейса с долгосрочной целью — полностью перейти на UX-инженерию.
На данный момент я все еще дизайнер продукта, изучаю Frontend-разработку (и люблю дизайн).
Не стесняйтесь протестировать проект ниже и поделиться отзывами или советами (мне может пригодиться 🙏🏽):
https://classy-douhua-e39c69.netlify.app/
Вы можете проверить мой репозиторий GitHub и разветвить код (если хотите 😉)
Увидимся в следующем!
