Movie page

frontend/src/components/MovieInfos.vue

 <template>
   <div class="parent">
-    <h1>{{ movieTitle }}</h1>
-    <h4>{{ movieVoteAverage }}</h4>
-    <h4>{{ genreArray }}</h4>
-    <h4>{{ movieOverview }} {{ movieOverview }} {{ movieOverview }}</h4>
+    <div class="child">
+      <h1>{{ movieTitle }}</h1>
+      <div class="mark">
+        <h2>{{ movieVoteAverage }} ★</h2>
+      </div>
+    </div>
+    <h4>Genres : {{ genreArray.join(", ") }}</h4>
+    <h4>{{ movieOverview }}</h4>
   </div>
 </template>
 
@@ -27,12 +31,9 @@ export default {
   methods: {
     developGenre: async function (genreId) {
       try {
-        console.log("g");
         const response = await axios
           .get(backendURL + "/genres/genre/id/" + genreId)
           .then();
-        console.log("oi");
-        console.log(response.data);
         return response.data;
       } catch (error) {
         console.log(error);
@@ -40,10 +41,6 @@ export default {
     },
     developGenres: function (genreIdArray) {
       try {
-        var res = [];
-        console.log("f");
-        console.log(genreIdArray);
-        // console.log([12, 16].map(this.developGenre));
         const genreArray = genreIdArray.map(this.developGenre);
         return Promise.all(genreArray);
       } catch (error) {
@@ -53,11 +50,7 @@ export default {
     },
   },
   created() {
-    console.log("a");
-    console.log();
-
-    console.log("b");
-    this.genreArray = this.developGenres([12, 16]).then((results) => {
+    this.developGenres(this.movieGenres).then((results) => {
       this.genreArray = results;
     });
   },
@@ -70,4 +63,17 @@ export default {
   flex-direction: column;
   height: 100%;
 }
+.child {
+  display: flex;
+  justify-content: flex-start;
+}
+.mark {
+  text-align: center;
+  vertical-align: center;
+  width: 10%;
+  height: auto;
+  background-color: #912f56;
+  border-radius: 25%;
+  margin-left: auto;
+}
 </style>