Използване на JavaScript, HTML, CSS — Team-Titans-Boron
Връзка към проекта: https://github.com/suraj588/Decathlon-clone
Както обещах, върнах се тук с нов проект, който екипът ни изгради с помощта на същите инструменти, но с добавени функции. В този спринт всъщност научихме доста с някои от усъвършенстваните и най-новите функции на JavaScript и също така използвахме jQuery, за да изградим този проект.
Членове на екипа и ръководител на екипа
- Абишек Джайн и Алберт Себастиан (наставник — технически)
- Йогеш Бхат (съосновател и ментор — меки умения)
- Пушпал Чакраборти
- Сурадж Кумар
- Анай Бхораскар
Концепции, обхванати в целия модул до момента
Команден ред
Използване на Git терминал
JavaScript
Език за маркиране на хипертекст (HTML)
Каскадни стилови таблици (CSS)
Обектен модел на документ (DOM)
Git Collab
Разклоняване на Git
GitHub
JS конструктори
JS цикли на събития
JS прототипи
Локално хранилище
JS Set-Timeout и модел клиент-сървър
JS XHR
JS затваряния
ES6 — (I и II)
ES6 — Функции със стрелки
ES6 — Класове
ES6 — Promises и Async, Await
Въведение в React.js
React — компоненти, стилове и реквизити
React — управление на състоянието
React — списък с ключове
Декларация на проекта
Този път ни беше дадено да клонираме уебсайта на Decathlon.in, който се занимава с продажба на спортни материали от дрехи до фитнес тракери и оборудване.
Този уебсайт има различни разновидности на продукти за повечето спортове и така има много функционалности от филтър до сортиране, въз основа на цена и продукт. И така, нашата задача беше основно да покрием повечето аспекти на уебсайта, които дават усещане за оригиналния уебсайт.
Роли и отговорности
Правилното планиране води до по-добри резултати. Определено винаги има вълнение да започнете изграждането на проекта, без да губите време, но планът, към който да се придържате, ви държи винаги на правилния път и можете да имате и пътека за бъдещата цел. И така, имайки предвид тези точки, първо разделихме задачата между нашите сътрудници заедно със сроковете. Това ни помогна да постигнем дори повече от очакваното по отношение на завършването на проекта.
За разлика от миналия проект, този път решихме да вземем по-малко страници, но решихме да завършим функционалностите, както и статичната част на страниците заедно, за да предотвратим последното време. Освен това, за разлика от последния път, основното ни намерение беше да направим страниците динамични и работещи колкото е възможно повече. С други думи, въпреки че се фокусирахме върху външния вид на страниците, беше решено да изпълняваме максимално възможните функционалности, които научихме в този спринт. Дори приложихме функционалността CRUD, която е най-основната част, когато става въпрос за динамичност на страниците. CRUD означава Създаване, четене, актуализиране, изтриване, т.е. можем да създаваме, четем, изтриваме и актуализираме определени данни в уеб страницата. И така, най-накрая успяхме да създадем следните страници:
Целевата страница
Фитнес и основни неща
Продукти за крикет
Страница за вход
Плащане
Селектор на ПИН код
Количка
Често избирани продукти
Кратко описание на отделни страници
Ако отидете на уебсайта на нашия проект, първото нещо, което трябва да направите, за да видите нашия проект, е да клонирате цялото хранилище във вашата локална система. Както и да е, дори и да не клонирате репото, пак можете да видите кодовете в хранилището. Ако сте нов в GitHub, моля, преминете през тази връзка, за да научите за клонирането. Главният клон, можете да кажете, е клонът, където можете да намерите окончателната и пълна работа по проекта. Просто отидете на VS Code и отворете папката на клонирано репо. Ще намерите всички файлове във вашата система. Просто копирайте пътя на файла landingPage.html и го поставете във вашия уеб браузър и готово. Сега ще видите целевата страница на уебсайта, както е показано по-долу. Ако видите в прозореца си и виждате всичко разхвърляно, не се притеснявайте, просто увеличете или намалете, така че да пасне според разделителната способност на екрана ви.
Това е нашата целева страница. Той съдържа накратко всички данни относно рекламите на основните продукти, но това не е наша грижа тук. Основното нещо, върху което трябва да се съсредоточите тук, е ефектът на преход, добавен към рекламите, поради което рекламите продължават да преминават след известно забавяне. Това беше нещо ново за нас. Но използвайки част от анимацията на CSS и променяйки някои свойства по подразбиране (web-kit и ключови кадри), успяхме да го постигнем.
Тъй като индивидуалното изграждане на компонентите за продуктите отнема доста време и е тромава задача, ние създадохме макет сървър, където съхранявахме всички наши данни относно продуктите и беше също толкова важно за добавяне на артикули в количката и изтриване от нея. Отляво можете да видите филтрите, които са 100% функционални, а също така сме внедрили множествено филтриране. Има превключвател на цените, който дава продукти в диапазона от 0 до 999. Можете да го превключвате, за да получите цената от 0 до всеки желан диапазон. При щракване върху който и да е продукт ще бъдете пренасочени към страница, където можете да изберете размер и необходими неща, за да продължите за плащане:
След като добавите в количката, можете да изберете броя артикули и ще видите, че общата цена се изчислява едновременно.
Така че, след като изберете артикулите, можете действително да платите и да изберете адрес. На можете да намерите опция за промяна на пин кода. Използвахме REST API за ПИН код на Индияза да добавим функционалността. Сега последната част е изборът на вашия адрес и след това вие сте там, за да получите вашия продукт на прага ви. (Майтапя се)
Това беше само малък поглед към нашия проект. Честно казано, може да има някои грешки в нашия код и ще се радваме да получим всякакви предложения от ваша страна. Преминете през предоставената връзка към GitHub, за да разберете нещата и никога да не се притеснявате да попитате дали сте блокирали в даден момент. Може би съм споменавал това и преди, всеки път, когато завършим проект, се чувстваме донякъде надградени от предишната единица. Ако вече сте преминали през предишните ми проекти, можете да сравните предишните проекти като боклук пред този проект, добре, аз се чувствах същото, но вярвам, че така се напредва. Започвате от основното и бавно продължавате да се изкачвате по стълбата и се надявате да се справите по-добре в сравнение с последния път. И така, сега е време да кажем сбогом, но дотогава продължавайте да кодирате, продължавайте да се отличавате и продължавайте да се изкачвате по стълбата.
И следващия път е най-вероятно да изградите проект с помощта на REACT. Това ще бъде вълнуващо!
Забележка: Всички връзки към изображения и икони са взети от основния уебсайт (https://www.decathlon.in/ ) и някои други интернет източници и може да са обект на авторски права. Така че, опитайте се да не използвате изображенията или иконите за бизнес цели или да ги възпроизвеждате без предварително одобрение от собственика. Изображенията и иконите, използвани тук, са само за създаване на този проект и за учебна цел.
