diff --git a/src/app/movie-poster/movie-poster.component.html b/src/app/movie-poster/movie-poster.component.html index 0656628..829bb10 100644 --- a/src/app/movie-poster/movie-poster.component.html +++ b/src/app/movie-poster/movie-poster.component.html @@ -2,7 +2,7 @@ Movie Poster
- +
diff --git a/src/app/movie-rating/movie-rating.component.html b/src/app/movie-rating/movie-rating.component.html index 1b155aa..fd273c8 100644 --- a/src/app/movie-rating/movie-rating.component.html +++ b/src/app/movie-rating/movie-rating.component.html @@ -1 +1,3 @@ -FSK 12 + + {{ getRatingText() }} + diff --git a/src/app/movie-rating/movie-rating.component.ts b/src/app/movie-rating/movie-rating.component.ts index ce30aaa..1e87bc1 100644 --- a/src/app/movie-rating/movie-rating.component.ts +++ b/src/app/movie-rating/movie-rating.component.ts @@ -1,4 +1,4 @@ -import { Component } from '@angular/core'; +import { Component, Input } from '@angular/core'; @Component({ selector: 'app-movie-rating', @@ -7,5 +7,23 @@ import { Component } from '@angular/core'; styleUrl: './movie-rating.component.css' }) export class MovieRatingComponent { + @Input() rating: number = 0; + getRatingColor(): string { + if (this.rating >= 18) { + return 'bg-red-500'; + } else if (this.rating >= 16) { + return 'bg-blue-500'; + } else if (this.rating >= 12) { + return 'bg-green-500'; + } else if (this.rating >= 6) { + return 'bg-yellow-300'; + } else { + return 'bg-white'; + } + } + + getRatingText(): string { + return `FSK ${this.rating}`; + } }