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 @@
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}`;
+ }
}