Последние 4 недели я полностью самостоятельно создавал клон Amazon. Это был хороший учебный процесс для меня, дающий мне много проблем, чтобы думать и решать. Мне понравилось использовать ООП (объектно-ориентированное программирование) Javascript, и теперь это мой предпочтительный способ создания приложений после экспериментов с процедурными и функциональными парадигмами программирования в языке Javascript во время предыдущих проектов.

Технологии

Я использовал HTML Tailwind CSS и ООП-подход Javascript. Я выбрал эти технологии, так как изучал их до сих пор, но я хотел изучить структуру CSS, поэтому я использовал этот проект, чтобы сделать это с помощью Tailwind CSS. Tailwind создан для быстрого создания CSS-шаблонов с гораздо меньшим количеством кода. Во время этого проекта я стал более комфортно использовать Git и командную строку, а также многое узнал о языке Javascript.

Проект

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

Проблемы, с которыми я столкнулся

Одна проблема, с которой я столкнулся, заключалась в том, как я мог хранить данные и получать к ним доступ, даже когда браузер закрыт. Решением этого стал window.localStorage, который позволяет вам получить доступ к объекту хранилища для источника документов, это сохраняет данные между сеансами браузера.

Другой был, как я мог построить тележку. Для этого я использовал массив объектов для каждого элемента корзины и использовал его для создания HTML, когда пользователь загружает страницу корзины.

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

Мне пришлось использовать класс корзины на разных страницах, для этого я использовал импорт и экспорт ES6, чтобы экспортировать класс корзины и использовать его в различных файлах. Это сократило мой код, сделав его чище и проще для понимания.

Новые вещи, которые я узнал

  • Объектно-ориентированный Javascript
  • Попутный ветер CSS
  • Сетка
  • Нажмите подальше от div
  • окно.sessionStorage
  • окно.localStorage
  • DOMContentLoaded событие
  • Обычные выражения
  • Минимальные дробные цифры
  • Импорт Экспорт
  • Выпадающие меню
  • Всплывающие меню

Будущие функции, которые я хочу добавить

В настоящее время я изучаю Node Js и буду изучать базы данных в будущем. Я хотел бы вернуться к этому проекту, чтобы добавить функции по мере того, как я узнаю, в том числе:

  • Функциональность входа
  • Оставить на потом (Корзина)
  • Разрешить пользователю оставлять отзывы и оценки

Краткое содержание

Один из самых забавных проектов по кодированию, над которым я когда-либо работал. При создании этого проекта я многое узнал о языке Javascript, как он работает, новых функциях и реализации того, что я уже изучил. Я развивал свои навыки, изучая новую технологию, и столкнулся с некоторыми проблемами, что дало мне хорошую практику, чтобы стать лучшим разработчиком.

Чтобы просмотреть код, вы можете перейти в репозиторий GitHub здесь, все отзывы приветствуются, спасибо.