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'" target="_blank"
      v-text="apiUrl + '/votes?videoId=kxOuG8jMIgI'" /><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" target="_blank" v-text="endpointUrl" />
  </div>
</template>

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

</style>

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

</script>