Клонирование веб-сайта с использованием HTML, CSS и JavaScript (Dom и локальное хранилище)
Ссылка на проект: https://github.com/alhassan069/BigBasket_clone
Я клонировал веб-сайт BigBasket, это индийский продуктовый веб-сайт. Он предоставляет множество категорий продуктов для покупки.
Автор:
Алимул Хассан
Обязанности:
Сначала я просмотрел исходный веб-сайт и проанализировал все функции, то, как он работает, макет веб-страниц и основную повестку дня веб-сайта. Затем, после того, как я разделил работу в соответствии со сложностью, я отдал приоритет сложной работе, поэтому я следую принципу «съешь эту лягушку». Я ссылался на официальную документацию из документации MDN и других ресурсов. Меня больше интересовал функционал сайта.
Целевая страница:
На целевой странице веб-сайта BigBasket отображаются различные категории продуктов на выбор. Когда мы прокручиваем различные категории продуктов на целевой странице, показывая ссылки на разные страницы, которые переходят на страницу продукта этой конкретной категории.
Страница продукта:
Вы можете увидеть страницу продукта, просто щелкнув категории напитков, доступные в раскрывающемся списке «Магазин по категориям» или в основной части страницы. На странице продукта пользователь может получить все продукты, а также отсортировать их по цене. Выберите любой товар в соответствии с вашими требованиями и, нажав кнопку «Добавить», он добавится в корзину. После этого перейдите на страницу моей корзины, чтобы увидеть выбранные продукты и общую стоимость.
Войти и зарегистрироваться:
После нажатия на значок mybasket пользователь перейдет на страницу корзины, но сначала ему необходимо зарегистрироваться. Таким образом, появится всплывающее окно для входа/регистрации, и пользователю необходимо указать номер телефона. И после этого появится окно OTP, и пользователь должен будет предоставить OTP. (В этом случае OTP будет присутствовать в консоли).
Страница корзины:
На странице корзины пользователь может увидеть сводку заказа. Теперь пользователь может использовать промокод, чтобы получить скидку. (тестовый промокод — «Bigbasket30»). После этого нажмите «Оформить заказ», и он будет перенаправлен на страницу оплаты.
Страница оплаты:
Здесь пользователю необходимо ввести данные карты, после чего в консоли будет сгенерирован otp. После ввода правильного OTP страница будет перенаправлена на страницу подтверждения, и оттуда пользователь сможет вернуться в главное меню.
Это был отличный и замечательный опыт для меня, я узнал много нового, изучил веб-сайт, чтобы понять каждый закоулок его функциональности, разделил работу по времени и, наконец, выполнил этот проект в заданное время.
Речь идет не только о кодировании, но и о решении проблем, координации, дисциплине и управлении временем.
Спасибо за прочтение
