return-youtube-dislike/Website/pages/documentation/fetching.vue

<template>
  <div>
    <h1 class="primary--text">Basic Fetching Tutorial</h1>
    
    
    <span>Example to get votes of a given YouTube video ID:</span>
    <a href="https://youtube.com/watch?v=kxOuG8jMIgI" target="_blank">kxOuG8jMIgI</a><br><br>

    <h2>Example Request:</h2>
    <span><b>Request URL:</b></span>
    <a :href="apiUrl+'/votes?videoId=kxOuG8jMIgI'" v-text="apiUrl+'/votes?videoId=kxOuG8jMIgI'" target="_blank" /><br>
    <span><b>Request Method:</b> <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/GET" target="_blank">HTTP/GET</a></span><br>
    <span><b>Headers:</b></span><br>
    <code class="code">
      Accept: text/html,application/xhtml+xml,application/xml;q=0.9<br>
      Pragma: no-cache<br>
      Cache-Control: no-cache<br>
      Connection: keep-alive
    </code><br>
    <span><b>Response:</b></span><br>
    <div class="code"><code style="background-color: rgba(0,0,0,0);">
    {<br>
        "id": "kxOuG8jMIgI",<br>
        "dateCreated": "2021-12-20T12:25:54.418014Z",<br>
        "likes": 27326,<br>
        "dislikes": 498153,<br>
        "rating": 1.212014408444885,<br>
        "viewCount": 3149885,<br>
        "deleted": false<br>
    }
    </code></div>
    <br><br>
    <v-alert border="left" color="orange" text type="info">
      <span>An invalid YouTube ID will return status code 404 "Not Found".</span><br>
      <span>An incorrectly formatted YouTube ID will return 400 "Bad Request".</span>
    </v-alert>


    <a :href="endpointUrl" v-text="endpointUrl" target="_blank" />

  </div>
</template>

<style scoped>
.code {
  width: 100%;
  background: #353535;
  border-radius: 3px;
}
</style>

<script>
export default {
  data() {
    return {
      apiUrl: process.env.apiUrl,
    }
  }
}
</script>