index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Shopping List App</title>
    <link rel="stylesheet" href="main.css" />
    <!-- End head. -->
  </head>
  <body>
    <div id="shopping-list">
      <div class="header">
        <h1>{{ header.toLocaleUpperCase() }}</h1>
        <button
          v-if="state === 'default'"
          class="btn btn-primary"
          @click="changeState('add')"
        >
          Add Item
        </button>
        <button v-else class="btn btn-cancel" @click="changeState('default')">
          Cancel Adding Item
        </button>
      </div>
      <div v-if="state === 'add'" class="add-item-form">
        <input
          v-model="newItem"
          type="text"
          placeholder="Add an item"
          @keyup.enter="addItem"
        />
        <button class="btn btn-primary" @click="addItem">
          Save Item
        </button>
      </div>
      <ul>
        <item v-for="item in sortedItems" :product="item"></item>
      </ul>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
      Vue.component('item', {
        props: ['product'],
        template: `<li :class="{strikeout: product.purchased}" @click="togglePurchased(product)">
          {{ product.label }}
        </li>`,
        methods: {
          togglePurchased: (item) => {
            item.purchased = !item.purchased;
          }
        }
      });

      var shoppingList = new Vue({
        el: '#shopping-list',
        data: {
          state: 'default',
          header: 'shopping list app',
          newItem: '',
          sortDirection: 1,
          items: [
            {
              label: '10 party hats',
              purchased: false,
              highPriority: false,
            },
            {
              label: '2 board games',
              purchased: true,
              highPriority: false,
            },
            {
              label: '20 cups',
              purchased: false,
              highPriority: false,
            },
          ],
        },
        computed: {
            reversedItems() {
                return this.items.slice(0).reverse();
            },
            sortedItems() {
                return this.items.slice(0).sort( (a, b) => {
                  return a.label.localeCompare(b.label);
                })
            }
        },
        methods: {
          addItem: function () {
            this.items.push({
              label: this.newItem,
              purchased: false,
            });
            this.newItem = '';
          },
          changeState: function (newState) {
            this.state = newState;
            this.newItem = '';
          },
          togglePurchased(item) {
            item.purchased = !item.purchased;
          },
        },
      });
    </script>
  </body>
</html>