#CleanCode Code structure and separation

@echo75 You have a very fine grained sense for domain seperation - keep that up. E.g. the css style seperation of files.
I also like your formatting of the code. It makes it enjoyable and understandable to read it.
WatchedList.vue
           <tbody>
                <tr v-for="movie in movies" :key="movie.id">
                  <td class="td_image">
                    <ul class="enlarge">
                      <!--We give the list a class so that we can style it seperately from other unordered lists-->
                      <!--First Image-->
                      <li>
                        <img
                          v-if="movie.Poster === 'N/A'"
                          src="@/assets/placeholder.jpg"
                          width="27"
                          height="40"
                          alt="No Poster Available"
                        />
                        <img
                          v-else="movie.Poster"
                          :src="movie.Poster"
                          width="27"
                          height="40"
                          alt="Movie Poster"
                        /><!--thumbnail image-->
                        <span>
                          <!--span contains the popup image-->
                          <img
                            v-if="movie.Poster === 'N/A'"
                            src="@/assets/placeholder.jpg"
                            style="width: 800%; height: 800%"
                            alt="No Poster Available"
                          />
                          <img
                            v-else="movie.Poster"
                            :src="movie.Poster"
                            style="width: 800%; height: 800%"
                            alt="Movie Poster"
                          />
                          <!--popup image-->
                        </span>
                      </li>
                    </ul>
                  </td>
                  <td>{{ movie.Title }}</td>
                  <td>{{ movie.Year }}</td>
                  <td class="td_delete" @click="handleButtonClick">
                    <button
                      type="button"
                      class="btn btn-secondary btn-sm about"
                      style="margin: 1px 2px"
                      :data-imdbid="movie.imdbID"
                      data-bs-toggle="modal"
                      data-bs-target=".movie-modal"
                    >
                      About this movie
                    </button>
                    <button
                      type="button"
                      class="btn btn-secondary btn-sm watched"
                      style="margin: 1 2px"
                      :data-imdbid="movie.imdbID"
                      data-bs-toggle="modal"
                      data-bs-target=".review-modal"
                    >
                      Rate this movie
                    </button>
                    <button
                      type="button"
                      class="btn btn-secondary btn-sm delete"
                      style="margin: 1px 2px"
                      :data-imdbid="movie.imdbID"
                    >
                      Delete
                    </button>
                  </td>
                </tr>
              </tbody>
echo75 / my-movie-db

#CleanCode Code structure and separation #10
