index.html

<script src="https://apis.google.com/js/client.js?onload=handleClientLoad"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="send.js"></script>
<script src="playlist.js"></script>

<input id="uid" placeholder="uid"></input> <button onclick="javascript: updateUID()">Update UID</button>
<p>&nbsp;</p>
<input id="name" placeholder="YT 2 SP" value="YT 2 SP"></input>
<input id="description" placeholder="Your New Playlist Awaits" value="Your New Playlist Awaits"></input>

<button onclick="javascript: updateInfo()">Update Info</button>

<main id="app">
  <template v-if="me">
    <button @click="login" onclick="javascript: updateInfo()">Login with Spotify</button>
  </template>
  <template v-else>
    <button @click="login" onclick="javascript: updateInfo()">Login with Spotify</button>
  </template>
</main>


for now it just creates a playlist


<div class="container">
  <h1>Youtube Playlists</h1>

  <button id="sign-in-or-out-button" style="margin-left: 25px">Sign In/Authorize</button>
  <button id="revoke-access-button" style="display: none; margin-left: 25px">Revoke access</button>

  <div id="auth-status" style="display: inline; padding-left: 25px"></div>
  <hr>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script async defer src="https://apis.google.com/js/api.js" onload="this.onload=function(){};handleClientLoad()"
    onreadystatechange="if (this.readyState === 'complete') this.onload()">
    </script>






  <div id="playlists">
    
  </div>

  <style>
    .playlistImage {
      width: 10%;
    }

    .playlistTitle {
      display: inline-block;
      /* top: 50%; */
      transform: translate(0, -300%);
    }
  </style>