index-old.html

<html>
  <head>
    <title>Notebook</title>
    <!-- Icons & Stylesheets -->
    <link href="https://fonts.googleapis.com/icon?
    family=Material+Icons" rel="stylesheet">
    <link rel="stylesheet" href="style.css" />
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">
    <!-- Compiled and minified JavaScript -->
  </head>
  <body>
    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script> -->
    <!-- Include the library in the page -->
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/marked"></script>
    <script src="https://unpkg.com/moment"></script>
    <!-- Notebook app -->
    <div id="notebook" class="row">
      <aside class="side-bar col s2 green lighten-4">
        <div class="toolbar container">
          <button 
            class="btn"
            @click="addNote">
            Add note
          </button>
          <div class="notes">
            <div 
              @click="selectNote(note)"
              v-for="note in sortedNotes"
              :class="{ selected: note === selectedNote }"
              :key="note.id">
              <p>
                <i class="material-icons" v-if="note.favorite">star</i>
                {{ note.title }}
              </p>
            </div>
          </div>
        </div>
      </aside>
      <template v-if="selectedNote">
        <section class="main col s10 grey lighten-5">
          <div class="toolbar">
            <!-- our toolbar -->
            <input
              v-model="selectedNote.title"
              type="text"
              placeholder="note title"/>
              <button @click="favoriteNote" title="Favorite note">
                <i class="material-icons">
                  {{ selectedNote.favorite ? 'star' : 'star_border' }}
                </i>
              </button>
              <button @click="deleteNote()">
                delete
              </button>
          </div>
          <div class="row">
            <!-- Main pane -->
            <textarea class="col s6" v-model="selectedNote.content" cols="30" rows="10" placeholder="you can write in markdown"></textarea>  
            <aside class="preview col s6" v-html="notePreview"></aside>  
          </div>
          <div class="toolbar status-bar">
            <span class="date">
              <span class="label">
                Created 
              </span>
              <span class="value">
                {{ selectedNote.created | date }}
              </span>
            </span>
            <span class="lines">
              <span class="label">
                Lines
              </span>
              <span class="value">
                {{ linesCount }}
              </span>
            </span>
            <span class="words">
              <span class="label">
                Words
              </span>
              <span class="value">
                {{ wordsCount }}
              </span>
            </span>
            <span class="characters">
              <span class="label">
                Characters
              </span>
              <span class="value">
                {{ charactersCount }}
              </span>
            </span>
          </div>
        </section>
      </template>
    </div>
    <!-- Some JavaScript -->
    <script src="script.js"></script>
    <script src="main.js"></script>
  </body>
</html>