diff --git a/src/app/core/commons/variables.less b/src/app/core/commons/variables.less
deleted file mode 100644
index d9bc831..0000000
--- a/src/app/core/commons/variables.less
+++ /dev/null
@@ -1,10 +0,0 @@
-@color-white: white;
-@color-gray: #f2f3f7;
-@color-gray1: #f2f3f7df;
-@color-gray2: #d9dbe3;
-@color-gray3: #979cac;
-@color-black: #414452;
-@color-green: #9bc837;
-@color-green1: #8cc837;
-@color-blue: #30b6dd;
-@color-blue1: #64b6dd;
diff --git a/src/app/core/directives/change-border-color.directive.ts b/src/app/core/directives/change-border-color.directive.ts
new file mode 100644
index 0000000..d3b356d
--- /dev/null
+++ b/src/app/core/directives/change-border-color.directive.ts
@@ -0,0 +1,34 @@
+import { Directive, ElementRef, Input, OnInit, Renderer2 } from '@angular/core';
+import { DatePipe } from '@angular/common';
+
+const DAYS_IN_MILLISEC: number = 1.21e+9;
+
+@Directive({
+ selector: '[appChangeBorderColor]'
+})
+
+export class ChangeBorderColorDirective implements OnInit {
+ @Input() private createdAtDate: string;
+ constructor (
+ private el: ElementRef,
+ private renderer: Renderer2,
+ public datepipe: DatePipe) { }
+
+ public ngOnInit(): void {
+ this.setColor(this.createdAtDate);
+ }
+
+ public setColor(creationDate: string): void {
+ const currentDate: Date = new Date();
+ const createdAtDateTransform: Date = new Date(creationDate);
+ const dateDiff: boolean = currentDate.getTime() - createdAtDateTransform.getTime() > DAYS_IN_MILLISEC;
+
+ if (createdAtDateTransform < currentDate && dateDiff) {
+ this.renderer.addClass(this.el.nativeElement, 'border--color-green');
+ }
+
+ if (createdAtDateTransform > currentDate) {
+ this.renderer.addClass(this.el.nativeElement, 'border--color-blue');
+ }
+ }
+}
diff --git a/src/app/core/mocks/mocked-data.ts b/src/app/core/mocks/mocked-data.ts
index bfb19d2..4cb0385 100644
--- a/src/app/core/mocks/mocked-data.ts
+++ b/src/app/core/mocks/mocked-data.ts
@@ -3,9 +3,10 @@ import { CourseItemInfo } from '../models';
export const fakeVideoList: CourseItemInfo[] = [
{
id: 1,
- title: 'video_1',
- createdAtDate: new Date,
+ title: 'Video about Denmark',
+ createdAtDate: new Date(2019, 1, 1),
durationTime: 120,
+ topRated: true,
description:
`Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Fuga at magni dignissimos accusamus asperiores enim corrupti nobis dolorem ducimus
@@ -16,9 +17,10 @@ export const fakeVideoList: CourseItemInfo[] = [
} ,
{
id: 2,
- title: 'video_2',
+ title: 'Video about Canada',
createdAtDate: new Date,
durationTime: 180,
+ topRated: true,
description:
`Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Fuga at magni dignissimos accusamus asperiores enim corrupti nobis dolorem ducimus
@@ -29,9 +31,10 @@ export const fakeVideoList: CourseItemInfo[] = [
},
{
id: 3,
- title: 'video_3',
- createdAtDate: new Date,
+ title: 'Video about Brazil',
+ createdAtDate: new Date(2021, 12, 14),
durationTime: 180,
+ topRated: false,
description:
`Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Fuga at magni dignissimos accusamus asperiores enim corrupti nobis dolorem ducimus
@@ -42,9 +45,10 @@ export const fakeVideoList: CourseItemInfo[] = [
},
{
id: 4,
- title: 'video_4',
- createdAtDate: new Date,
+ title: 'Video about Australia',
+ createdAtDate: new Date(2020, 10, 20),
durationTime: 132,
+ topRated: false,
description:
`Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Fuga at magni dignissimos accusamus asperiores enim corrupti nobis dolorem ducimus
@@ -55,9 +59,10 @@ export const fakeVideoList: CourseItemInfo[] = [
},
{
id: 5,
- title: 'video_5',
- createdAtDate: new Date,
+ title: 'Video about Russia',
+ createdAtDate: new Date(2014, 1, 1),
durationTime: 120,
+ topRated: true,
description:
`Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Fuga at magni dignissimos accusamus asperiores enim corrupti nobis dolorem ducimus
diff --git a/src/app/core/models/course-item.interface.ts b/src/app/core/models/course-item.interface.ts
index a5361ca..312c951 100644
--- a/src/app/core/models/course-item.interface.ts
+++ b/src/app/core/models/course-item.interface.ts
@@ -5,4 +5,5 @@ export interface CourseItemInfo {
createdAtDate: Date;
durationTime: number;
description: string;
+ topRated: boolean;
}
diff --git a/src/app/core/modules/course-page.module.ts b/src/app/core/modules/course-page.module.ts
new file mode 100644
index 0000000..fb6bd6f
--- /dev/null
+++ b/src/app/core/modules/course-page.module.ts
@@ -0,0 +1,10 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { CoursePageComponent } from '../../course-page/course-page.component';
+
+@NgModule({
+ declarations: [CoursePageComponent],
+ exports: [CoursePageComponent],
+ imports: [CommonModule]
+})
+export class CoursePageModule { }
diff --git a/src/app/core/pipes/orderByDateCreation.pipe.ts b/src/app/core/pipes/orderByDateCreation.pipe.ts
new file mode 100644
index 0000000..9950b05
--- /dev/null
+++ b/src/app/core/pipes/orderByDateCreation.pipe.ts
@@ -0,0 +1,25 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { CourseItemInfo } from '../models';
+/*
+ * Sort the array asceding by creational date
+ * Usage:
+ * array | orderByDateCreation
+ * Example:
+ * {{ arrayData | orderByDateCreation }}
+ * sort asceding by creational date
+*/
+
+@Pipe({name: 'orderByDateCreation'})
+
+export class OrderByDateCreationPipe implements PipeTransform {
+ public transform(array: CourseItemInfo[]): CourseItemInfo[] {
+ if (!Array.isArray(array)) {
+ return;
+ }
+ return array.sort((firstElem, secondElem) => {
+ const firstElemDateMs: number = new Date(firstElem.createdAtDate).getTime();
+ const secondElemDateMs: number = new Date(secondElem.createdAtDate).getTime();
+ return firstElemDateMs - secondElemDateMs;
+ });
+ }
+}
diff --git a/src/app/core/pipes/orderByTitleName.pipe.ts b/src/app/core/pipes/orderByTitleName.pipe.ts
new file mode 100644
index 0000000..76c2927
--- /dev/null
+++ b/src/app/core/pipes/orderByTitleName.pipe.ts
@@ -0,0 +1,23 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { CourseItemInfo } from '../models';
+/*
+ * Sort the array asceding by title name
+ * Usage:
+ * array | orderByTitleName
+ *
+ * Result:
+ * Return sorted array by title name
+*/
+
+@Pipe({name: 'orderByTitleName'})
+
+export class OrderByTitleNamePipe implements PipeTransform {
+ public transform(array: CourseItemInfo[]): CourseItemInfo[] {
+ if (!Array.isArray(array)) {
+ return;
+ }
+ return array.sort((one, two) => {
+ return one.title < two.title ? -1 : 1;
+ });
+ }
+}
diff --git a/src/app/home-page/course-list/course-item/course-item.component.html b/src/app/home-page/course-list/course-item/course-item.component.html
index d3b6d33..317f1d3 100644
--- a/src/app/home-page/course-list/course-item/course-item.component.html
+++ b/src/app/home-page/course-list/course-item/course-item.component.html
@@ -1,13 +1,25 @@
-
+