<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>League Summoner Stats</title>
  <link rel="stylesheet" href="app.css">
</head>
<body>
  <div id="app">
    <div class="summoner-selector">
      <ul>
        <li v-for="summoner in summoners" @click="selectedSummoner = summoner" v-bind:class="{'highlight' : summoner.name == selectedSummoner.name}"><a href="#">{{ summoner.name }}</a></li>
        <li class="add-summoner">
          <form>
            <input type="text" v-model="newSummonerInput" id="newSummonerInput">
            <input type="submit" @click="addNewSummoner" value="+" id="newSummonerButton"></input>
          </form>
        </li>
      </ul>
    </div>

    <div class="summoner-container">
      <h2> {{ selectedSummoner.name }} </h2>
    </div>

  </div>
  <script src="vue.js"></script> <!-- Use vue.min.js for production -->
  <script src="script.js"></script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>League Summoner Stats</title>
  <link rel="stylesheet" href="app.css">
</head>
<body>
  <div id="app">
    <div class="summoner-selector">
      <ul>
        <li v-for="summoner in summoners" @click="selectedSummoner = summoner" v-bind:class="{'highlight' : summoner.name == selectedSummoner.name}"><a href="#">{{ summoner.name }}</a></li>
        <li class="add-summoner">
          <form>
            <input type="text" v-model="newSummonerInput" id="newSummonerInput" placeholder="Add New Summoner">
            <input type="submit" @click="addNewSummoner" value="+" id="newSummonerButton"></input>
          </form>
        </li>
      </ul>
    </div>

    <div class="summoner-container">
      <h2> {{ selectedSummoner.name }} </h2>
    </div>

  </div>
  <script src="vue.js"></script> <!-- Use vue.min.js for production -->
  <script src="script.js"></script>
</body>
</html>

Add placeholder text for input to make it more clear
Add placeholder text for input to make it more clear
