Build a Simple YouTube App with Vanilla JavaScript

The Tuts+ YouTube channel is accelerated approaching 1.5M subscribers. Let’s observe this awesome accomplishment by creating thing YouTube-oriented! We’re going to build a simple, yet afloat functional YouTube app pinch Vanilla JavaScript.

The conception will beryllium beautiful straightforward; we’ll build a elemental UI wherever we tin participate nan ID of a transmission and our app will return info astir it.

1. Scaffolding nan YouTube App

Before we commencement creating our app, location are a fewer things that we person to address.

Grab a YouTube API key

As a first and mandatory thing, we should get a YouTube API cardinal that will springiness america entree to nan YouTube Data API. To do so, we should travel nan instructions connected this page and group up a task successful nan Google Cloud Console pinch nan YouTube Data API v3 enabled. In my case, I’ve already done it while building nan app. Now, it’s your move to make an API and see it successful your forked demo.

For accumulation environments, retrieve that it’s ever wise to restrict nan API requests to circumstantial websites, IP addresses, etc.

Grab a Lottie Animation

Optionally, to make our app arsenic unsocial arsenic possible, we’ll drawback a Lottie animation from nan LottieFiles room and play it for channels pinch 1M aliases much subscribers. 

First, we’ll make an plus nexus for this animation and customize it arsenic we wish.

As things move quickly, astatine this point, nan LottieFiles squad suggests utilizing the dotLottie record format alternatively of nan accepted Lottie JSON to trim nan record size.

In our case, arsenic we’re utilizing a CodePen demo, we’ll import nan required .mjs record for illustration this:

Then, arsenic we’ll spot successful an upcoming section, we’ll see nan generated dotlottie-player constituent successful nan markup that represents nan transmission info.

Besides, if you request a refresher astir really to see Adobe After Effects animations connected a web page and Lottie Animations successful general, see nan pursuing tutorials:

2. Define nan Page Markup

Let’s now attraction connected nan app development.

We’ll only specify a conception that will see a heading, a hunt form, and an quiet span element.

We’ll group nan input constituent arsenic required and unit it to hold 24 characters to debar unnecessary AJAX requests. From my tests, I’ve seen that nan magnitude of a YouTube transmission ID is 24, though you tin update nan minlength and maxlength property values if you announcement thing different.

The span constituent will look pinch an due connection nether definite conditions. For example, if we hunt for a YouTube transmission ID that doesn’t beryllium aliases if, for immoderate reason, nan consequence is unsuccessful (i.e. 400 Bad Request, 404 Not Found, etc.). 

Along nan way, we’ll spot nan markup for nan transmission info that will beryllium generated dynamically. 

Here’s nan first page markup:

Find a YouTube Channel ID

One speedy measurement to find nan ID of a YouTube transmission is done nan page source. First, navigate to nan desired transmission page, past position its root codification and hunt for https://www.youtube.com/channel/. The transmission ID will travel aft this guidelines URL.  

Envato Tuts+ Channel ID

Traversy Media Channel ID

3. Set nan Main Styles

As this is simply a ample tutorial, for nan liking of simplicity, we’ll skip nan starting styles and only ore connected nan main ones—you tin position each of them by clicking nan CSS tab of nan demo.

Form Styles

On mean screens and supra (>700px), nan layout should look for illustration this:

On smaller screens, nan shape elements will divided into 2 lines:

Here are nan associated styles:

Channel Styles

As soon arsenic we successfully get backmost from nan server info for a channel, they will look successful a paper layout for illustration this:

The styles aren’t thing excessively complicated, truthful we won’t spell into much item astatine this point:

4. Add nan JavaScript

At this moment, we’re fresh to build nan halfway functionality of our YouTube app. Let’s do it!

On Form Submission

Each clip a personification submits nan shape by pressing nan Enter cardinal aliases nan Submit button, we’ll do 2 things:

1. Stop nan shape from submitting, hence forestall reloading nan page.
2. Grab nan worth that is contained successful nan hunt field.

Here’s nan starting code:

Perform an AJAX Request

Before we spell done nan AJAX request, it’s important to publication nan docs and understand really to building it. In our case, we want to get transmission info, truthful we’ll attraction connected nan channel endpoint and walk nan pursuing parameters:

1. The portion parameter pinch values nan snippet and statistic names. 
2. The API key. Again, you should usage your ain key.
3. The transmission ID we’re willing to get info. In a erstwhile section, we covered a measurement to find nan ID of an existing channel.

We tin moreover research pinch nan HTTP requests done nan helper instrumentality that is disposable connected nan correct broadside of this page. 

With each nan supra successful mind, our petition URL should look thing for illustration this:

We’ll usage nan Fetch API to execute nan AJAX request—I presume you’re acquainted pinch this technique. There’s besides a series if you request a refresher. As discussed previously, we’ll adhd due correction handling for unsuccessful cases. For example, if we hunt for a non-existing transmission aliases nan position petition hasn’t succeeded.

So, our AJAX petition would look thing for illustration this:

Here’s an illustration of nan consequence data:

Build nan Card

With nan AJAX petition successful place, each clip we type a transmission ID successful nan hunt field, nan API will return transmission information if they are available. We’ll past cod only nan required information and connect it to nan page arsenic a paper component.

Two things to statement here:

• The Lottie animation will play only if nan transmission subscribers are astatine slightest 1M.
• We’ll usage nan NumberFormat API to format nan numbers related to nan transmission videos and subscribers. 
• The outer links won’t activity unless you position nan CodePen demo successful debug mode.

Here’s nan codification responsible for this job:

The generated markup arsenic it’s rendered successful nan browser console:

Reset Things

Lastly, aft nan AJAX request, we’ll do nan following:

• Remove nan .card constituent from nan page.
• Clear nan contented of nan .msg element.
• Clear nan worth of nan hunt section and springiness attraction to that field.

Here’s nan related code:

Your YouTube App Is Ready!

Done, folks! This really was rather a agelong journey, truthful acknowledgment for pursuing along! I dream you enjoyed nan extremity consequence and that helped you study immoderate caller things.

Once again, don’t hide to put your ain cardinal for unrecorded app testing!

As a reminder, let’s look again astatine nan app:

As always, acknowledgment a batch for reading!

Next Steps

There are truthful galore things that you tin do to widen nan functionality of this YouTube app. Here are immoderate thoughts:

• Create different conception to show nan latest transmission videos.
• Instead of showing conscionable a transmission each time, modify nan codification to show aggregate transmission info simultaneously successful a grid format, arsenic we did pinch nan upwind app.

If there’s thing other that you mightiness want to spot arsenic an app extension, fto america cognize connected X aliases successful nan demo comments!

Discover More JavaScript Tutorials and Resources

Interested successful practicing modern JavaScript done nosy hands-on projects? If so, cheque retired these JavaScript tutorials: