[ad_1]
The Tuts+ YouTube channel is speedy drawing near 1.5M subscribers. Let’s have fun this nice success by way of growing one thing YoutTube-oriented! We’re going to construct a easy, but absolutely useful YouTube app with Vanilla JavaScript.
The concept that might be beautiful easy; we’ll construct a easy UI the place we will input the ID of a channel and our app will go back data about it.
1. Scaffolding the YouTube App
Earlier than we commence growing our app, there are some things that we need to cope with.
Clutch a YouTube API key
As a primary and necessary factor, we must get a YouTube API key that may give us get admission to to the YouTube Information API. To take action, we must practice the directions on this web page and arrange a undertaking within the Google Cloud Console with the YouTube Information API v3 enabled. In my case, I’ve already accomplished it whilst construction the app. Now, it’s your flip to generate an API and come with it on your forked demo.
For manufacturing environments, keep in mind that it’s all the time smart to limit the API requests to express internet sites, IP addresses, and so forth.
Clutch a Lottie Animation
Optionally, to make our app as distinctive as conceivable, we’ll clutch a Lottie animation from the LottieFiles library and play it for channels with 1M or extra subscribers.
First, we’ll generate an asset hyperlink for this animation and customise it as we want.
As issues transfer briefly, at this level, the LottieFiles crew suggests the usage of the dotLottie document layout as a substitute of the standard Lottie JSON to cut back the document length.
In our case, as we’re the usage of a CodePen demo, we’ll import the desired .mjs document like this:
1 |
import { DotLottiePlayer } from "https://webdesign.tutsplus.com/https://unpkg.com/@dotlottie/player-component@newest/dist/dotlottie-player.mjs"https://webdesign.tutsplus.com/; |
Then, as we’ll see in an upcoming phase, we’ll come with the generated dotlottie-player factor within the markup that represents the channel data.
But even so, if you wish to have a refresher about the right way to come with Adobe After Results animations on a internet web page and Lottie Animations on the whole, believe the next tutorials:
2. Outline the Web page Markup
Let’s now focal point at the app construction.
We’ll best outline a piece that may come with a heading, a seek shape, and an empty span part.
We’ll set the enter part as required and drive it to attend 24 characters to steer clear of useless AJAX requests. From my assessments, I’ve noticed that the period of a YouTube channel ID is 24, despite the fact that you’ll be able to replace the minlength and maxlength characteristic values should you realize one thing other.
The span part will seem with an acceptable message below positive stipulations. As an example, if we seek for a YouTube channel ID that doesn’t exist or if, for some explanation why, the reaction is unsuccessful (i.e. 400 Dangerous Request, 404 No longer Discovered, and so forth.).
Alongside the best way, we’ll see the markup for the channel data that might be generated dynamically.
Right here’s the preliminary web page markup:
1 |
<phase elegance="top-banner"https://webdesign.tutsplus.com/> |
2 |
<div elegance="container"https://webdesign.tutsplus.com/> |
3 |
<div elegance="textual content"https://webdesign.tutsplus.com/> |
4 |
<h1>Easy App With the YouTube API</h1> |
5 |
<p elegance="label"https://webdesign.tutsplus.com/>Use <mark>UC8lxnUR_CzruT2KA6cb7p0Q</mark> for trying out which refers back to the Envato Tuts+ channel ID</p> |
6 |
</div>
|
7 |
<shape>
|
8 |
<enter sort="seek" minlength="24" maxlength="24" placeholder="Insert a sound YT channel ID" autofocus required> |
9 |
<button sort="publish"https://webdesign.tutsplus.com/>SUBMIT</button> |
10 |
<span elegance="msg"https://webdesign.tutsplus.com/></span> |
11 |
</shape>
|
12 |
</div>
|
13 |
</phase>
|
Discover a YouTube Channel ID
One fast option to in finding the ID of a YouTube channel is during the web page supply. First, navigate to the required channel web page, then view its supply code and seek for https://www.youtube.com/channel/. The channel ID will come after this base URL.
3. Set the Major Kinds
As this can be a massive instructional, for the sake of simplicity, we’ll skip the beginning kinds and best pay attention to the primary ones—you’ll be able to view they all by way of clicking the CSS tab of the demo.
Shape Kinds
On medium displays and above (>700px), the structure must seem like this:
On smaller displays, the shape components will break up into two strains:
Listed below are the related kinds:
1 |
/*CUSTOM VARIABLES HERE*/
|
2 |
|
3 |
.top-banner shape { |
4 |
place: relative; |
5 |
show: grid; |
6 |
grid-template-columns: 1fr auto; |
7 |
grid-gap: 15px; |
8 |
align-items: heart; |
9 |
justify-content: heart; |
10 |
max-width: 1000px; |
11 |
}
|
12 |
|
13 |
.top-banner shape enter { |
14 |
font-size: clamp(24px, 2vw, 32px); |
15 |
top: 40px; |
16 |
padding-bottom: 10px; |
17 |
border-bottom: 1px cast currentColor; |
18 |
}
|
19 |
|
20 |
.top-banner shape enter::placeholder { |
21 |
opacity: 1; |
22 |
colour: var(--white); |
23 |
}
|
24 |
|
25 |
.top-banner shape button { |
26 |
font-weight: daring; |
27 |
padding: 15px 30px; |
28 |
border-radius: 5px; |
29 |
background: var(--red); |
30 |
transition: background 0.3s ease-in-out; |
31 |
}
|
32 |
|
33 |
.top-banner shape button:hover { |
34 |
background: var(--darkred); |
35 |
}
|
36 |
|
37 |
.top-banner shape .msg { |
38 |
place: absolute; |
39 |
peak: 100%; |
40 |
left: 0; |
41 |
}
|
42 |
|
43 |
@media (max-width: 700px) { |
44 |
.top-banner shape { |
45 |
grid-template-columns: 1fr; |
46 |
}
|
47 |
|
48 |
.top-banner shape .msg { |
49 |
place: static; |
50 |
}
|
51 |
}
|
Channel Kinds
Once we effectively get again from the server data for a channel, they’ll seem in a card structure like this:
The kinds aren’t anything else too difficult, so we gained’t pass into extra element at this level:
1 |
/*CUSTOM VARIABLES HERE*/
|
2 |
|
3 |
.card { |
4 |
padding: 4%; |
5 |
text-align: heart; |
6 |
margin-top: 70px; |
7 |
colour: var(--white); |
8 |
background: var(--total-black); |
9 |
border-radius: 7px; |
10 |
overflow: hidden; |
11 |
}
|
12 |
|
13 |
.card .main points img { |
14 |
border-radius: 50%; |
15 |
}
|
16 |
|
17 |
.card .main points .name { |
18 |
margin-top: 10px; |
19 |
}
|
20 |
|
21 |
.card .main points .description { |
22 |
max-width: 80%; |
23 |
margin: 30px auto 0; |
24 |
}
|
25 |
|
26 |
.card .total-videos { |
27 |
place: relative; |
28 |
z-index: 1; |
29 |
margin-top: 30px; |
30 |
}
|
31 |
|
32 |
.card .total-subscribers { |
33 |
place: relative; |
34 |
show: inline-grid; |
35 |
grid-template-columns: auto auto; |
36 |
grid-gap: 10px; |
37 |
align-items: heart; |
38 |
font-weight: daring; |
39 |
margin-top: 60px; |
40 |
background: var(--red); |
41 |
}
|
42 |
|
43 |
.card .total-subscribers dotlottie-player { |
44 |
place: absolute; |
45 |
peak: 50%; |
46 |
left: 50%; |
47 |
become: translate(-50%, -50%); |
48 |
}
|
49 |
|
50 |
.card .total-subscribers .outer { |
51 |
padding: 10px; |
52 |
}
|
53 |
|
54 |
.card .total-subscribers svg { |
55 |
fill: var(--red); |
56 |
background: var(--white); |
57 |
padding: 5px; |
58 |
box-sizing: content-box; |
59 |
}
|
4. Upload the JavaScript
At this second, we’re able to construct the core capability of our YouTube app. Let’s do it!
On Shape Submission
Each and every time a consumer submits the shape by way of urgent the Input key or the Post button, we’ll do two issues:
- Forestall the shape from filing, therefore save you reloading the web page.
- Clutch the worth this is contained within the seek box.
Right here’s the beginning code:
1 |
const topBanner = record.querySelector("https://webdesign.tutsplus.com/.top-banner"https://webdesign.tutsplus.com/); |
2 |
const shape = topBanner.querySelector("https://webdesign.tutsplus.com/shape"https://webdesign.tutsplus.com/); |
3 |
const enter = topBanner.querySelector("https://webdesign.tutsplus.com/enter"https://webdesign.tutsplus.com/); |
4 |
|
5 |
shape.addEventListener("https://webdesign.tutsplus.com/publish"https://webdesign.tutsplus.com/, (e) => { |
6 |
e.preventDefault(); |
7 |
const channelId = enter.price; |
8 |
});
|
Carry out an AJAX Request
Earlier than we pass during the AJAX request, it’s vital to learn the doctors and know how to construction it. In our case, we need to get channel data, so we’ll focal point at the channel endpoint and go the next parameters:
- The
phaseparameter with values thesnippetandstatisticsnames. - The API key. Once more, you need to use your personal key.
- The channel ID we’re to get data. In a prior phase, we coated a option to in finding the ID of an current channel.
We will be able to even experiment with the HTTP requests during the helper software this is to be had at the proper aspect of this web page.
With all of the above in thoughts, our request URL must glance one thing like this:
1 |
const BASE_URL ="https://webdesign.tutsplus.com/https://www.googleapis.com/youtube/v3/channels?phase=statistics,snippet"https://webdesign.tutsplus.com/; |
2 |
const API_KEY = "https://webdesign.tutsplus.com/AIzaSyAHupLf37J-vEziyQ-pItfoaLS5XUqdVq8"https://webdesign.tutsplus.com/; |
3 |
const channelID = enter.price; |
4 |
|
5 |
const url = `${BASE_URL}&identity=${channelId}&key=${API_KEY}`; |
We’ll use the Fetch API to accomplish the AJAX request—I suppose you’re acquainted with this method. There’s additionally a sequence if you wish to have a refresher. As mentioned in the past, we’ll upload correct error dealing with for unsuccessful instances. As an example, if we seek for a non-existing channel or the standing request hasn’t succeeded.
So, our AJAX request would glance one thing like this:
1 |
...
|
2 |
|
3 |
shape.addEventListener("https://webdesign.tutsplus.com/publish"https://webdesign.tutsplus.com/, (e) => { |
4 |
...
|
5 |
|
6 |
fetchYTStatistics(channelId) |
7 |
.then((knowledge) => { |
8 |
if (typeof knowledge.goods !== "https://webdesign.tutsplus.com/undefined"https://webdesign.tutsplus.com/) { |
9 |
createCard(knowledge); |
10 |
} else { |
11 |
msg.textContent = "https://webdesign.tutsplus.com/Please seek for a sound YT channel ID 😩"https://webdesign.tutsplus.com/; |
12 |
}
|
13 |
})
|
14 |
.catch((error) => { |
15 |
msg.textContent = error; |
16 |
});
|
17 |
});
|
18 |
|
19 |
async serve as fetchYTStatistics(channelId) { |
20 |
const url = `${BASE_URL}&identity=${channelId}&key=${API_KEY}`; |
21 |
const reaction = look ahead to fetch(url); |
22 |
|
23 |
if (!reaction.adequate) { |
24 |
go back Promise.reject( |
25 |
`One thing is not running as anticipated. Error: ${reaction.standing}` |
26 |
);
|
27 |
}
|
28 |
const knowledge = look ahead to reaction.json(); |
29 |
go back knowledge; |
30 |
}
|
Right here’s an instance of the reaction knowledge:
Construct the Card
With the AJAX request in position, each and every time we sort a channel ID within the seek box, the API will go back channel knowledge if they’re to be had. We’ll then gather best the desired knowledge and fix it to the web page as a card factor.
Two issues to notice right here:
- The Lottie animation will play provided that the channel subscribers are no less than 1M.
- We’ll use the NumberFormat API to layout the numbers associated with the channel movies and subscribers.
- The exterior hyperlinks gained’t paintings except you view the CodePen demo in debug mode.
Right here’s the code accountable for this task:
1 |
serve as createCard(knowledge) { |
2 |
const allData = knowledge.goods[0]; |
3 |
const { customUrl, name, description, thumbnails } = allData.snippet; |
4 |
const { default: thumbnail } = thumbnails; |
5 |
const { videoCount, subscriberCount } = allData.statistics; |
6 |
const div = record.createElement("https://webdesign.tutsplus.com/div"https://webdesign.tutsplus.com/); |
7 |
div.classList.upload("https://webdesign.tutsplus.com/card"https://webdesign.tutsplus.com/, "https://webdesign.tutsplus.com/container"https://webdesign.tutsplus.com/); |
8 |
|
9 |
const markup = ` |
10 |
<div elegance="main points">
|
11 |
<img width="https://webdesign.tutsplus.com/${thumbnail.width}" top="https://webdesign.tutsplus.com/${thumbnail.top}" src="https://webdesign.tutsplus.com/${thumbnail.url}" alt="https://webdesign.tutsplus.com/${name}"> |
12 |
<div elegance="name">
|
13 |
<a href="https://www.youtube.com/${customUrl}" goal="_blank">${name}</a> |
14 |
</div>
|
15 |
<p elegance="description">${description}</p> |
16 |
</div>
|
17 |
<div elegance="total-videos">
|
18 |
<a href="https://www.youtube.com/${customUrl}/movies" goal="_blank">Browse</a> |
19 |
<span elegance="rely">${formatNumber(videoCount)}</span> movies |
20 |
</div>
|
21 |
<div elegance="total-subscribers">
|
22 |
${ |
23 |
subscriberCount >= 1000000 |
24 |
? `<dotlottie-player src="https://lottie.host/5fa38a1c-c8ba-4c3d-83b5-1a99b8796da3/jJFC2WMsxa.lottie" background="clear" pace="1" taste="width: 300px; top: 300px;" loop autoplay></dotlottie-player>` |
25 |
: "" |
26 |
} |
27 |
<span elegance="outer">
|
28 |
<span elegance="rely">${formatNumber(subscriberCount)}</span> |
29 |
Subscribers
|
30 |
</span>
|
31 |
<svg xmlns="https://www.w3.org/2000/svg" width="40" top="40" viewBox="0 0 24 24">
|
32 |
<trail d="M4.652 0h1.44l.988 3.702.916-3.702h1.454l-1.665 5.505v3.757h-1.431v-3.757l-1.702-5.505zm6.594 2.373c-1.119 0-1.861.74-1.861 1.835v3.349c0 1.204.629 1.831 1.861 1.831 1.022 0 1.826-.683 1.826-1.831v-3.349c0-1.069-.797-1.835-1.826-1.835zm.531 5.127c0 .372-.19.646-.532.646-.351 0-.554-.287-.554-.646v-3.179c0-.374.172-.651.529-.651.39 0 .557.269.557.651v3.179zm4.729-5.07v5.186c-.155.194-.5.512-.747.512-.271 0-.338-.186-.338-.46v-5.238h-1.27v5.71c0 .675.206 1.22.887 1.22.384 0 .918-.2 1.468-.853v.754h1.27v-6.831h-1.27zm2.203 13.858c-.448 0-.541.315-.541.763v.659h1.069v-.66c.001-.44-.092-.762-.528-.762zm-4.703.04c-.084.043-.167.109-.25.198v4.055c.099.106.194.182.287.229.197.1.485.107.619-.067.07-.092.105-.241.105-.449v-3.359c0-.22-.043-.386-.129-.5-.147-.193-.42-.214-.632-.107zm4.827-5.195c-2.604-.177-11.066-.177-13.666 0-2.814.192-3.146 1.892-3.167 6.367.021 4.467.35 6.175 3.167 6.367 2.6.177 11.062.177 13.666 0 2.814-.192 3.146-1.893 3.167-6.367-.021-4.467-.35-6.175-3.167-6.367zm-12.324 10.686h-1.363v-7.54h-1.41v-1.28h4.182v1.28h-1.41v7.54zm4.846 0h-1.21v-.718c-.223.265-.455.467-.696.605-.652.374-1.547.365-1.547-.955v-5.438h1.209v4.988c0 .262.063.438.322.438.236 0 .564-.303.711-.487v-4.939h1.21v6.506zm4.657-1.348c0 .805-.301 1.431-1.106 1.431-.443 0-.812-.162-1.149-.583v.5h-1.221v-8.82h1.221v2.84c.273-.333.644-.608 1.076-.608.886 0 1.18.749 1.18 1.631v3.609zm4.471-1.752h-2.314v1.228c0 .488.042.91.528.91.511 0 .541-.344.541-.91v-.452h1.245v.489c0 1.253-.538 2.013-1.813 2.013-1.155 0-1.746-.842-1.746-2.013v-2.921c0-1.129.746-1.914 1.837-1.914 1.161 0 1.721.738 1.721 1.914v1.656z" />
|
33 |
</svg>
|
34 |
</div>
|
35 |
`; |
36 |
|
37 |
div.innerHTML = markup; |
38 |
record.frame.appendChild(div); |
39 |
}
|
40 |
|
41 |
serve as formatNumber(quantity) { |
42 |
go back new Intl.NumberFormat("https://webdesign.tutsplus.com/en"https://webdesign.tutsplus.com/, { |
43 |
notation: "https://webdesign.tutsplus.com/compact" |
44 |
}).layout(quantity); |
45 |
}
|
The generated markup because it’s rendered within the browser console:
Reset Issues
Finally, after the AJAX request, we’ll do the next:
- Take away the
.cardpart from the web page. -
Transparent the content material of the
.msgpart. - Transparent the worth of the quest box and provides focal point to that box.
Right here’s the comparable code:
1 |
...
|
2 |
|
3 |
if (record.querySelector("https://webdesign.tutsplus.com/.card"https://webdesign.tutsplus.com/)) { |
4 |
record.querySelector("https://webdesign.tutsplus.com/.card"https://webdesign.tutsplus.com/).take away(); |
5 |
}
|
6 |
msg.textContent = ""https://webdesign.tutsplus.com/; |
7 |
shape.reset(); |
8 |
enter.focal point(); |
Your YouTube App Is Able!
Completed, other people! This in reality used to be somewhat a protracted adventure, so thank you for following alongside! I am hoping you loved the result and that helped you be informed some new issues.
As soon as once more, don’t fail to remember to place your personal key for reside app trying out!
As a reminder, let’s glance once more on the app:
As all the time, thank you so much for studying!
Subsequent Steps
There are such a lot of issues that you’ll be able to do to increase the capability of this YouTube app. Listed below are some ideas:
- Create some other phase to turn the newest channel movies.
- As an alternative of unveiling only a channel each and every time, regulate the code to turn a couple of channel data concurrently in a grid layout, as we did with the elements app.
If there’s the rest that you could need to see as an app extension, tell us on X or within the demo feedback!
Uncover Extra JavaScript Tutorials and Assets
Eager about practising trendy JavaScript thru amusing hands-on initiatives? If this is the case, take a look at those JavaScript tutorials:
[ad_2]
