Здравствуйте читатели,
Надеюсь у тебя все хорошо. Этот блог посвящен проекту, который мы реализовали в рамках Недели конструирования модуля-2 в школе масаи.
Прежде чем перейти к объяснению проекта, я хотел бы упомянуть, что это был командный проект. И мы команда из четырех человек.
- Нагендра Патил (я).
- Шриканта Банерджи
- Яшрадж Махешвари
- ХАКСЛИ Сингх
Все мы ученики школы Масаи. Masai School предлагает различные курсы для тех, кто хочет продолжить свою карьеру в ИТ-индустрии. Учебная программа в масаи настолько хорошо разработана, что, даже если вы человек с другим образованием, вы все равно можете чему-то научиться и улучшить свои навыки. Так что в конце курса вы будете готовы к работе!. В школе масаи каждый учащийся вместе с членами своей команды должен создать проект в конце каждого блока, от блока 2 до блока 4.
Все четверо из нас прошли полный курс веб-разработки. так как мы находимся в конце нашего модуля-2, нам дали сайт для клонирования с максимально возможным количеством функций и сделать его максимально похожим.
Когда мы познакомились с нашим проектом, первое, что мы сделали, это изучили сайт и высказали друг другу мнения, поскольку Shoppers Stop — это веб-сайт с большим количеством функций. В первый день мы смогли разобраться с техническим стеком, функциональными возможностями и потоком веб-сайта. После чего распределили задачи между собой.
Для создания этого проекта мы использовали,
- HTML
- CSS
- JavaScript
Изначально мы начали работать над разными страницами и стремились завершить весь проект за 4 дня. План тоже сработал, мы смогли создать макет каждой страницы, чтобы он был похож на исходный. Поскольку у нас оставалось еще немного времени, мы решили изменить несколько функций, чтобы они производили положительное впечатление на нашу работу.
Вот несколько фрагментов нашей работы и какие в ней функции.
- ДОМАШНЯЯ СТРАНИЦА
Целевая страница приветствует пользователей каруселью трендовых товаров. Таймер карусели установлен на 2 секунды для автопрокрутки.
По мере того, как мы скользим вниз, пользователи могут выбирать из большего количества разделов, пользователи могут войти в систему или зарегистрироваться, наведя курсор на значок профиля.
2. ВХОД И РЕГИСТРАЦИЯ
Вот так выглядят наши страницы входа и регистрации. После того, как пользователи введут свою информацию при регистрации и отправят ее, они получат OTP для аутентификации. Профиль пользователя будет сформирован только после проверки OTP. Для этого мы генерируем случайное число в консоли и сопоставляем его с тем, которое находится в локальном хранилище. Если OTP не совпадает с одним в бэкэнде, он уведомит вас о необходимости ввести правильный OTP.
Пользовательские данные будут храниться в LocalStorage и могут быть извлечены по мере необходимости. После того, как профиль пользователя создан, пользователь может войти в систему напрямую. Здесь идентификатор и пароль сопоставляются с данными локального хранилища для каждого пользователя. Если человек вводит неправильный пароль или идентификатор или если они не совпадают друг с другом, хранящимся в объекте пользователя, это не позволит пользователю войти в систему.
3. СТРАНИЦА КАТЕГОРИИ
Пользователи могут сортировать и искать товары по интересам.
Например, если пользователь хочет отфильтровать товары по торговым маркам, он может выбрать марку и нажать уточнить поиск. Затем код выводит и отображает только те товары из локального хранилища, название которых совпадает со значением ключа «Бренд» из массива объектов products.
так же и по предложениям, размеру, цвету, цене. Для этого метод addeventlistener используется каждый раз, когда пользователи нажимают уточнить поиск.
Кроме того, если пользователь наведет курсор мыши на изображение продукта, он отобразит другое изображение того же продукта. Здесь все данные динамически изменяются.
4. СТРАНИЦА ПРОДУКТА
Пользователи могут наводить курсор на изображения, чтобы увеличить их, проверить наличие, вариант доставки и т. д. Увеличение и уменьшение изображения продукта полностью выполняется с помощью CSS.
Если размер доступен, отображается «выбранный размер доступен», это делается путем добавления элемента при выборе размера.
Также для проверки возможности доставки в конкретное место пин-код сравнивается с пин-кодами, хранящимися в локальном хранилище. Если он не совпадает, будет отображаться «вариант доставки недоступен».
при нажатии «добавить в корзину» и «добавить в список желаний» количество товаров в корзине и массив списка желаний обновляются и отображаются поверх значков на панели навигации.
5. СПИСОК ПОЖЕЛАНИЙ И КОРЗИНА
Если пользователь заинтересован в продукте, он может добавить его в список желаний или корзину.
Если пользователь добавляет продукт в список пожеланий, он будет сохранен в массиве локального хранилища и будет отображаться, как только пользователь откроет список пожеланий.
Точно так же данные корзины также хранятся в массиве объектов в локальном хранилище, и общая стоимость всех продуктов в корзине будет отображаться в верхней части корзины.
Пользователи также могут удалять продукты из списка желаний и корзины, в этом случае они также будут удалены из локального хранилища. Количество товаров в корзине и списке желаний отображается над значками корзины и списка желаний.
6. АДРЕС и ОПЛАТА
Пользователям необходимо указать правильный адрес и перейти на страницу оплаты.
без ввода действительного адреса пользователь не может двигаться дальше. Всплывающее окно «Введите адрес» будет отображаться, если пользователь попытается пропустить эту часть.
На странице оформления заказа пользователи могут ввести ПРОМО-код, чтобы получить дополнительную скидку. Если код совпадает с кодом в бэкенде, общая сумма соответственно изменится.
7. ОПЛАТА и ПОДТВЕРЖДЕНИЕ
Во время обработки заказа страница в течение 5 секунд перенаправляется на страницу подтверждения.
После оплаты пользователь получит уведомление о том, что «Платеж прошел успешно». И теперь корзина будет автоматически опорожнена для пользователя.
Итак, вот как течет поток. Мы также предоставили пользователям возможность войти в систему с помощью OTP и сбросить пароль, если они его забыли.
Все вышеупомянутые функции и отображаемые изображения создаются в течение оговоренного времени в 1 неделю.
И последнее, но не менее важное: я хотел бы также упомянуть несколько вещей о моих товарищах по команде,
‣ Сриканта Банерджи — человек с замечательными лидерскими качествами, который руководил ходом работы, и мы оба работали вместе в Js и в конце концов соединили точки.
‣ Яшрадж Махесвари и Хаксли Джерард Сингх стали двумя хорошими друзьями, с которыми приятно работать, и они неплохо разбираются в HTML и CSS.
Как говорится в старой поговорке: «Даже у хороших вещей есть возможности для улучшения», мы тоже считаем, что и в нашем проекте есть возможности для улучшения. Мы планируем улучшить и оптимизировать производительность этого сайта в ближайшие дни. Мы будем держать вас в курсе.
Большое спасибо за то, что потратили свое драгоценное время на этот блог. Надеемся, что это вам понравится
Это мой первый групповой проект в школе масаи, и я усвоил много знаний за минимальное время. Я рад поделиться этим блогом со всеми вами, и я надеюсь, что вам всем нравится наша работа.
