Для выполнения этого задания сделайте следующие шаги

домашнем задании мы улучшим наш проект следующим образом: добавим переключатель автомобилей Sport | Luxury и будем отображать разные автомобили в зависимости от категории.

Для выполнения этого задания сделайте следующие шаги:

1. Перейдите в файл app.component.html и поставьте курсор мыши в редакторе в конце строки

Наш автопарк

.
2. Сделайте перенос строки и вставьте туда следующий код верстки для переключателя активной категории:

Sport

Luxury

3. Перейдите в файл app.component.css и вставьте туда следующий код стилей для нового переключателя категорий:
.car-toggle {
display: flex;
width: 194px;
border: 1px solid gray;
margin: 20px 0;
}

.car-toggle div {

padding: 20px;
background: white;
box-sizing: border-box;
text-align: center;
font-weight: bold;
font-size: 16px;
letter-spacing: 0.02em;
text-transform: uppercase;
color: black;
transition: background-color .5s;
cursor: pointer;
}

.car-toggle div.active {

background: #030305;
color: #FFFFFF;
}

.car .container {

display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
4. Перейдите в файл app.service.ts и найдите строчку:
getData() {
Замените на:
getData(category: any) {
5. Следующую строчку:
return this.http.get('https://testologia.site/intensive-data');
Замените на:
return this.http.get('https://testologia.site/intensive-data', {params: {category: category}});
6. Перейдите в файл app.component.ts и добавьте новую функцию для переключения активной категории, для этого вставьте следующий код между функциями onScroll и goScroll:
category: string = 'sport';
toggleCategory(category: string) {
this.category = category;
this.ngOnInit();
}
7. Теперь перейдите в файл app.component.ts и замените строку
this.appService.getData().subscribe(carsData => this.carsData = carsData);
на
this.appService.getData(this.category).subscribe(carsData => this.carsData = carsData);
8. Перейдите на страницу, дождитесь её обновления и проверьте, изменяются ли товары при нажатии на переключатель, который находится справа от заголовка "Наш автопарк".
9. Вернитесь в проект, удалите папку dist.
10. Остановите выполнение проекта, нажав курсором на терминал и нажав комбинацию клавиш Ctrl + C. Далее вставьте туда команду ng build --deploy-url /cars-hw/ --base-href /cars-hw/ и выполните её.
11. После этого создайте новый репозиторий с названием cars-hw (!важно) на github и загрузите файлы из папки dist на github.
12. Создайте новый Github Pages, чтобы опубликовать свой сайт на хостинге.
Если после публикации сайта на хостинге у вас белый экран – перепроверьте правильность написания команды сборки, название репозитория исходя из задания. Обратитесь к файлу возможных ошибок в уроке. Если не решите вопрос - обратитесь в общий чат интенсива.