Jquery and javascript

I am making a site where I need to utilize youtube API as well as twitch API.
I followed this tutorial https://www.youtube.com/watch?v=9sWEecNUW-o and most of the js part was written in jquery.

but when it comes to the twitch API, the documentation examples were given in vanilla JS.

<html>
  <body>
    <!-- Add a placeholder for the Twitch embed -->
    <div id="twitch-embed"></div>

    <!-- Load the Twitch embed script -->
    <script src="https://embed.twitch.tv/embed/v1.js"></script>

    <!-- Create a Twitch.Embed object that will render within the "twitch-embed" root element. -->
    <script type="text/javascript">
      new Twitch.Embed("twitch-embed", {
        width: 854,
        height: 480,
        channel: "monstercat"
      });
    </script>
  </body>
</html>

now the issue I am facing is that if I embed the above code inside my HTML page, I can kind of got it working, but if I put it inside the app.js file, it does not work.

how do I convert the above code to jQuery?

jQuery is a library that can be used inside JavaScript, so it adds functionality but doesn’t take any functionality away.

You can just use paste this javascript into the app.js file.

      new Twitch.Embed("twitch-embed", {
        width: 854,
        height: 480,
        channel: "monstercat"
      });

And make sure the app.js file is linked as well as the twitch API, so your HTML will look like this:

<html>
  <body>
    <!-- Add a placeholder for the Twitch embed -->
    <div id="twitch-embed"></div>

    <!-- Load the Twitch embed script -->
    <script src="https://embed.twitch.tv/embed/v1.js"></script>
    <!-- Load the app.js file. -->
    <script src="app.js"></script>
  </body>
</html>

note that the src inside of the script tag for app.js will depend on where you have the file in relation to your html file. So if you have it in a scripts folder it should be src="/scripts/app.js"

1 Like

thank you for the tip!

Another question I wanna ask you, when building project, is it normal to spend a huge amount of time reading API documentations , I feel that if I want to really build what I imagined for the youtube section , i need to spend many hours just skimming through youtube’s API page to find what I want.

I don’t think that’s uncommon, really depends on how good the documentation is and how complicated what you are trying to do is.

In general I think you will get faster at finding what you are looking for the more docs/APIs you work with.

1 Like

I see. Thanks! (20 characters)