<main id="app">
  <h1>Top 10 Movies (via IMDB)</h1>
  <h2>Original Titles</h2>
  <ol v-if="movies">
    <li v-for="movie in movies">{{ movie }}</li>
  </ol>
  <h2>Formatted Titles</h2>
  <ol v-if="formattedMovies">
    <li v-for="movie in formattedMovies">{{ movie }}</li>
  </ol>
</main>

body {
  padding: 10px;
}

function formatTitle(title) {
  const articles = ['a', 'an', 'the'];
  const titleWords = title.split(' ');
  const firstWord = titleWords.shift();
  if (articles.includes(firstWord.toLowerCase())) {
    const formattedTitle = `${titleWords.join(' ')}, ${firstWord}`;
    return formattedTitle;
  } else {
    return title;
  }
}

const movies = [
  'The Shawshank Redemption',
  'The Godfather',
  'The Godfather: Part II',
  'The Dark Knight',
  '12 Angry Men',
  "Schindler's List",
  'The Lord of the Rings: The Return of the King',
  'Pulp Fiction',
  'The Good, the Bad and the Ugly',
  'Fight Club'
];
const sortedMovies = movies.sort();

const formattedMovies = movies.map(formatTitle);
const sortedFormattedMovies = formattedMovies.sort();

const app = new Vue({
  el: '#app',
  data: {
    movies: sortedMovies,
    formattedmovies: sortedFormattedMovies
  }
});