 What is going on everybody, my name is Roddy and you're watching my channel, Roddy the Brand. In today's video, we're going to create a smart assistant like device using web technologies. This is another video that I had to delete because the intro was far too long, but some of you might find it interesting or useful. So here it is. Anyway, let's have a look at the demo before we begin. The APIs that we will be using today include YouTube API, OpenWater API and the Unsplash API. For the transitions of the subscriber count, we will be using the audio meter JS and for the voice command, we will be using Anyang. If you're new to this channel, please consider subscribing, I upload weekly web development and design videos just like this, like the video and if you have any questions, please comment below. Now, let's jump on the computer and get started. I've created a new project and I've opened the project in Visual Studio Code, but of course you can use your favorite editor. I'm also using for this project the Live server, which is basically a development local server that allows me every time I save a document to refresh the page automatically. So I don't have to press F5 or reload the page manually. That's all. Next thing we need to have a look at is all folder structure. This is not so important, but I've organized everything in folders. So all styles will be under the CSS folder and I've created an empty styles.css file. Then I have an images folder and inside the images folder, I've downloaded an image from unsplash.com, which I will link in the description below. Then we have the JS folder, which will hold obviously all the JavaScript files, but at the moment is empty. We'll focus on this later on. I've also zoomed in quite a lot, so you can see a little bit better. And now that we're ready, let's get started. So the first thing I'm going to do is open index.html and make sure that we have the styles.css open. Then I'm going to close the Xflora so it doesn't get in a way. And now we can start building the HTML file. First of all, let's create a new HTML file document and let's give it a name. Then let's make sure that all styles.css is linked to this document. To do this inside the header of our website, we can just do a link with CSS and then the folder for me is called CSS and then the file of styles.css is inside. Now that we are done with this, the next thing I want to do is include a font, a custom font. The custom font that I want to include is called WorkSense. And you can find this font under fonts.google.com. So let's select this font. This will pop up. Then we can go to Customize and then we can select the font weights that we want. So in this case, I'm going for regular and bold. That's all I want. And then we can go to Embed and we have two options, the standard option, which we can put in our HTML and the import option, which you can put in your CSS. Let's go for a standard option, copy this link and paste it in the head of your HTML file. So this should do the job. The next thing I want to do before we close this page is copy the CSS rows for this. So we don't forget. Okay, I can close this now and focus on building the rest. So let's start by building a few of the elements here. And the first element I want to create is a wrapper. This will be a div element with the class of wrapper. And basically this will wrap all of our elements. So inside here, we will have a few sections. So let's create two sections. And basically each section will be an individual screen. So each section will take the full width of the browser and the full height of the browser. So when we start, you probably won't see the second section. And this is how I'm going to do the pages. But of course, if you like, you can create separate HTML files that would also work. For some people, it might be better to create separate files just so your workspace is cleaner. But this is not going to be so complicated. So I think one file is actually a better option for me. So the first section will be my homepage. This will entail having the time, the YouTube subscribers, the notifications and so on. So let's give it a unique identifier and let's just call it home. Let's call it what it is. And then the second one, I will give an ID of weather. And you're now probably wondering when, well, right, why didn't you just put the weather inside the home? I could have done that. But I just wanted to show you what we can do with the voice API. And I just wanted to come up with a few sections. And I did come up with another section, which was like giving you inspirational quotes, but I'm not a big fan of air. So let's stick to something else and we can always change it and improve it later on if we have to. So let's space them out a little bit and focus on one section at a time. So first of all, we'll focus on the home. So before we focus on the home section, let's start by writing some styles and then we'll hop over to the HTML and we'll have to go backwards and forwards as we build the layout just so you get a clear understanding of what we are doing step by step. So first of all, let's open the styles.css and let's reset a few things. So the first thing I want to do is I want to show that element. Every element on this website has the box sizing set to border box. So our padding and width don't get mixed up. So we don't get any problems with the paddings and the widths. The next thing I want to do is because we're having multiple sections and basically once we're going to have to scroll from one section to another, I want to make sure that the scroll is actually smooth. To do this, we can actually use the scroll behavior element. So let's go for HTML and inside here we can do scroll behavior and we can just put this to smooth. Hopefully this will give us the smooth scroll behavior and we can revisit this later on if it doesn't work, but that should hopefully work. The next thing I want to focus on is the body. Let's reset a few things. So first of all, I want to make sure that there is no margins or padding or anything like that. Let's go for margin zero and padding zero. Then the next thing I want to do is obviously paste the font family, which we copied earlier and you can use your own font if you like. I'm also going to set up some sort of a background color. This is not, you don't have to do that, but I'm going to do it anyway. And the next thing I want to do is add a nice image for the background. So we can do background image URL and inside the URL, the image folder will be dot dot images and my image is called SF1, which stands for San Francisco. So let's save this and see whether this is working so far. Okay. So the automatic reload did not work for me, but let's start the live server again. And okay, that seems to work. So as you can see, we have San Francisco, but I want the image to cover the screen a little bit better. So what we can do is go back to the CSS and just do background image, sorry, background size and we can set this to cover. So when we save this, you'll see, I don't know why the live reload isn't working anymore. Close my browser and try it again. Okay, hopefully the live reload will work. So I don't have to refresh automatically all the time. So as you can see, the image is now a lot better. It's taking the full screen and this will work for all sorts of sizes. The next thing we need to focus is the wrapper, which will wrap all of our elements. So let's do that wrapper. We already know that it's a class and then I want to ensure that the wrapper is always taking the 100% of the view width. And I want to ensure that it's taking 100% of the view height. The next thing I want to make sure is that the wrapper, obviously we need to height the overflow. I don't want any scroll bars or anything like that. So we can just do overflow hidden. Save this and see what we have. No scroll bars, but obviously in the section we don't have anything yet. So let's now focus on the sections. So for the sections, I'm just going to give create a global section styles. And for the section, first of all, I want to make sure that they are positioned relative and then I want to create some padding around. So we give it this, we give it a little bit of white space and the application looks a little bit more professional. So let's put something like padding like 1m and you can use whatever you need to like, percentages, pixels, ms, rems, whatever is comfortable for you. So the width for the sections, I want to ensure that they are also 100% of the view width and I want to do the same with the height, 100% view height. The next thing here I want to ensure is that each section has the font size of 3m. This is basically making the font size a little bit bigger and we could have done this in the body actually, but it doesn't really matter and we only have them, but it doesn't really matter. This project is purely for fun so we can do whatever we like. So now that we have the section, let's have a look at what everything is working. Yep, everything seems to be looking good and let me explain what the plan is. I want to develop this website or application, whatever you want to call it. I want to make it very easy for the elements to be positioned around. I want the sections to be reusable and we can do this very easily with grit. So what I want to do is this page, I want to create one column which is taking the full width of this section. Obviously we have a little bit of padding if we inspect it. You can see the padding here. So I want the section to take full width, sorry the column to take full width and I also want to create three rows which we can position elements into. So we can have a top row, middle row and bottom row. So let's do that. So inside this section we can actually convert this into a grid. So display grid and by the way you can do this in so many ways. You don't have to do it with grid. You can use flex box and so on. But grid makes it quite easy and it's a good thing to learn I guess. So let's create a column. So first of all we need to do grid template columns and for this we can do one fraction of the screen. So we only have one grid, sorry one column. Then what I want to do is do grid template rows and this time I want to use the repeater which means we can put on three rows and those three rows will be one fraction each. Okay and let me show you what this does. So here if you are using Firefox and I'm sure some of the other browsers have the same option you can see this little tiny grid icon if we click on it. You will see that all grid is now split into three sections. One column, three sections, one, two, three. So the next thing I want to do is name those sections so we can make the position of our elements a little bit easier and we can position them something like top, middle or bottom or we can just give them a name of ABC. Whatever you like. Let's do this with ABC just because it's less to type I guess. So we can create grid template and our template will go like this. So the first row will be called A, the second row will be called B and let me let me do this and the third row will be called C and actually we don't probably need this. That is the last element all we can do here. Now if you go back now you actually won't see the names but this now should be A, B and C. This means that we can now position the elements. This also allows us to put all HTML elements in an order that we like. So they don't have to be organized from top to bottom or anything like that. We can do whatever we like and then just assign them a letter. Let me show you what I mean. So for example, let's start by creating the time and the notifications. So let's create a div with the idea of time. So this will be our current time and just for the demo let's copy the current time from my PC and this will be 1909 and let's also create another one and let's create a bellow just so you see what's happening. So div, ID and this could be all notifications and also these will be replaced with JavaScript later on. So let's see what happens now. So as you can see, we have the time at the top, notifications here in the second row. So they each take in a row and by the way, let me first change the color super quickly as well. If we go back to the body and just set the color to be white so it looks a little bit better. Okay, that's good. Now this is looking better. So now we obviously want to position the time to be at the bottom. That's how I want it. So we want to move this at the bottom and we want to move notifications here at the top. The way we can do this is by using the grid template. So let me show you how and then we can start the elements individually after. So first of all, let's pick up the time. So for the time we can assign a grid area and we know that we want to assign the time to be at the bottom and the bottom one is called C. So let's assign it there. And also let's assign the notifications in here and we know that the grid area for notifications is going to be one as that's the top. So let's see what happens when we save this. As you can see, if we turn on the grid, the time is now in the bottom row and the notification is the top row, which is awesome. So we can continue positioning elements like this and of course we have another section below which you can't see yet. But this is kind of like a grid which we can reuse and simplify or layout. So let's go back and do some styling. So first of all, for the time, obviously I wanted to be at the bottom and so I wanted to be always on the left side and I wanted to be here in the bottom. And to do this, we can go back to the time element and justify self we can set to left, which means it's going to be on the left side always and we can align self to be end. So let's see if this works. Okay, this seems to work. Also by the way, you can use Flexbox or whatever you like. Even if you wanted to use a position absolute that would do the job too. The only thing I'm seeing here is the line height is a little bit more than I would like. I would like it to be roughly down the line, but that's just a minor guess and we can reset this 0.8. 0.7 seems to be okay. Okay, this seems good actually. Okay, let's do that. The next thing I want to make sure is that the time is a little bit border. So let's do font weight set to 700, which is the boat and I think we're pretty much done with time. So let's have a look how it looks. Okay, this looks good to me. Obviously we can give it a shadow if you want to change it to a bright image and so on, but these are slight design changes that we can always work on. The next thing let's focus on is the notifications. So for the notifications, we have to do the same. It's already at the top. So all we have to do is here is justify self and so it's going to position it at the end. Let's do that. Justify self and bam, the notification is on the top right corner. But obviously let's give this a little bit of style because those notifications look too big for me. So let's just make it ever so slightly smaller and this could be 0.5 and let's have a look. Okay, this looks good to me. It doesn't take too much space. It's nice. The next thing I want to do is the demo. So I'm going to have some sort of a demo showing what you can say to the gorilla and I'm not exactly sure what to call this element, but let's call it a demo. Diff, ID, demo, and the demo will be something like say, gorilla show where and also because we are signing those elements, assigning them to the grid template, they don't, it doesn't really matter how they're positioned, I can position this at the top and as you can see, there won't be any difference. The element is still assigned to A and C. So let's bring them back just because it looked tidier like this and we need to style the demo. Let's go back to style CSS and create a demo and for the demo, we obviously want, I wanted the demo to be at the bottom, which is number C and I want to justify it and align it to the right, right bottom, basically. Let's do that. So first of all, we need to give it the grid area of this will be C, ABC and justify self will be end and align items will be set to empty as well. Let's make the font size a little bit smaller as well as we are here. The font size can be 0.5 M and let's make sure that this is set to italic. So font style italic and let's make the opacity a little bit down as this is not so important. So I don't want it to be, I don't want it to look too obvious. So something 0.6 might do the job. Okay, I've made a mistake instead of align self, I've done align items, which is wrong. So let's save this and have a look. Okay, now we have the Griller, set Griller up, show weather and I'm not going to do this, but that might be a challenge for you. It would be pretty cool to have this change with the options that you can say and you can do this with JavaScript or just like do some CSS magic, but I won't be focusing on this. I'm just going to focus on the other elements. So the next element that we want to do is the YouTube counter. I want the YouTube counter to be in the middle of this page, right here in section B. Let's do that. So first of all, we need to obviously create the HTML elements and I can just create them in here as the order doesn't matter. So we can give it a div ID of subscription counter. So sub sub count and inside here, we'll have another two elements. The first one will be a div of ID and let's say sub count title. So copy the sub count. Oh, copy this sub count and this goes title and this will be where our title will go. So YouTube, so my YouTube subscribers and then we're going to have another div with another ID and this is where the actual number will come. So let's do sub count number. OK, and for now, let's put just like a dummy number. OK, and let's have a look at what we have. So as you can see, this is actually gone to the second template, number B. But I want to position it properly. So let's do that. I want to position it and style it properly. So let's do that. Let's go back to the styles. I'll copy this to help myself a little bit. So sub count, we need to set it to the grid area of B. And then I want to justify self to center. And then I also want to align self to center. And last, but not least, let's see how this looks. OK, last but not least, I want to ensure that this text is always aligned in the middle. So text align center, let's say this. And actually that works quite well. Here is so you can see the grid. OK, so let's style the top bit first. And the top bit is the sub count title. So we can either do it like this, sub count and then title. I think this should do the job. And we can just let's change the font size actually to 0.5, 0.5. OK, let's have a look. So the title is a little bit smaller. And it would be cool if I put a little bit of drop shadow on this. But maybe we can do that later. The number seems to be OK. We might need to add some styles for the number later on. OK, so far so good. But we also need to do the weather section. So let's select this for a second and just comment it out so we can view the weather section. And inside the weather section, we are going to have just like a weather icon and a background image and stuff like that. And we can build this later on as well. But let's quickly build something just for now. First of all, let's create a div with the ID of weather stuff or just weather. OK, weather stuff just so we don't duplicate the ID from there. And in the weather stuff, we're just going to have to add a bunch of stuff. Let's we'll have a div with a class of weather icon. And then this will be our icon. I'm just going to do a dummy one here. And then we have another div with a class of weather title. OK, that should do the job. Let's see what we have. OK, we obviously need to position this in the middle of the page. So let's do that super quickly. So we need to position weather stuff. And because section is a global one, this is a global one is kind of like we've created this template. I can use the same template. So what I can do is do weather stuff, grid, area, and that would be B. So let's have a look. OK, we're already here in the middle, which is great. And we also need to centerline this just like we did here, I think. So let's do that. Justify, cell, center, align, self, center, text, text, align, center, everything center. And I also want the text, now text transform to be capitalized. So all the letters are big. OK, later on, we'll get the icon from an API and we'll get the weather from the same API. I'm probably not going to focus too much on this, but I will bring the data just to show you how easy it is. And now the next thing we need to ensure is that the two pages, the animation between the two pages works. So let's do that. The first of all, the way I'm going to do this is with anchor points. I think this is probably the easiest way without writing any JavaScript. So let me show you what I mean. So what I'm going to do in the each section, I will create a link. And let's give it an ID of, OK, now let's give it a class name because it's going to be used multiple times. Test link, that doesn't matter. It's just for testing purposes, really. And then we're going to have to create a link in here. So H ref and the link we will do in a second. So this one will be or we are at the home section and we want to create a link to the weather. So let's create an anchor for the weather. And with you can create, you can link anchors with the what is it called? Hashtag. I don't know what is the original name anymore because the hashtag. But let's put anchor weather. That would do. But now we need to actually create the anchor point. And I'm going to create the anchor just outside the this section. So let's do that. And that's a name. And the name will be this anchor weather. OK, and OK. Do we need to close anchors? But also now I need to say where the weather where this link is going to be on the page. Because as you can see, it's somewhere in here and it's pushing up the time. So let's quickly do that. So test link. Let's give it a style. And for this, let's give it the grid area of A and justify content to be start. Let's just give it a font font size of 0.5 and let's see how this looks. And that's OK. So now if we click on this, you see that the that we've gone to the weather. But I've noticed something that the animation didn't work, which isn't good. And also I need to add a link back to the weather to home. So I need to create another anchor in here. And for this, let's call it the same. So anchor home. And I can actually copy this link, paste it inside here and just change the anchor home. Oh, OK. So this will be go weather and this will be go home. So if we click go home, it goes to home. And if we click go weather, it goes to weather. And this is how our application will work. But obviously we're going to have to hide this and this will be done automatically on voice. Now, the first thing I'm noticing is that the animation is not working. And this is not good. I think the reason for this is because I probably have to do the scroll behavior smooth to either the body or the wrapper. Let me check the wrapper because that might be it. OK. OK, so I put because the wrapper is actually scrolling, I think. Yes, because the wrapper is actually scrolling, we need to put the scroll behavior in here instead. So we probably don't need this now. Let's have a look. Yes. OK. So as you can see, the animation is super smooth, works really well. We didn't have to write any complicated JavaScript, which is a win win here. So far, so good. The next thing that we need to do is start doing the JavaScript. Obviously, we're going to have to bring a YouTube API. We're going to have to do a little clock and so on. First of all, let's go. We're probably done with the styles for now. But let's go to index.html. And first of all, we need to create or JavaScript file. So let's link or JavaScript here at the bottom. And we'll probably need to link a few APIs as well. But maybe we can do this later on. So first of all, let's bring our script. And we can do source. And the source for this will be JS. And let's call it script.js. I think that should be OK. And obviously, we need to create the file inside the folder here. Script.js. OK, now that we've created this, open the script.js. And we can start writing our application. So first of all, shall we do the time? Let's do the time. So we know that the time has the idea of time. Excuse me. And also, we can probably remove this now. Let's remove it. And OK. Now let's open script.js and get started. So let's do the time super quickly. And for this, I'm going to do an interval, which will be set to one second. So let's do set interval. And so I want this interval to run every second. And to do this, we can do... We can put one second in here. And hopefully, this should work. This should run every second. Let's create the date. And for this, I'm going to use let's. I'm going to create a new variable with let today equals new date. And then I'm going to do let h for hours equals today.getHours. Is what we want to get. And then I want to get the minute. And to do this, I can do let minutes equals today.getMinutes. And then I want the two dots. I don't know what you call them. I want the two dots in between the time. So it will be something like, for example, we have 19, 35. So I want the two dots. And to do this, we can do something like let time equals h plus then I need the two dots and then plus the minute. So that should give us the hour, the two dots in the middle and the minute. And then what we have to do is we need to insert this data into the document. And to do this, we can do document getElementById. And the idea that we need to get is time. Now that we get the time element, then we need to inner HTML. So inner HTML means we are inserting this into the HTML. So let's insert time into the HTML and save. OK. I don't know if you saw this, but this actually worked. Refreshes every second now. And if I was to do console login here of time is ticking, we will see in the console that every second, oh, a millisecond we are getting. Yeah, you will see that the time is working. And let's remove this, actually. I think this is a millisecond, isn't it? So I think, yeah, sorry. And if you wanted to make it a second, it's basically one with three zeros. One problem that we will run into is when we have a lower number than 10. So we probably won't get the zero. So basically I want to have zero in front of the nine when the number is less than 10. Unfortunately, you won't be able to see it now. But let's fix it because I already know that this is going to happen. Let's just fix it. I want to create, let's create a function first of all. And the function will be called check time. We're going to pass, we're going to pass something in this function, a number, and we can just call it I for now. And let's say if I is less than 10, what I want to do is I want to make sure that I is equals the string zero plus the number. And you see what I mean. And then we obviously need to return I, okay. So now every time, every time get minutes is less than 10. So for example, eight or nine is going to check. And if it is, it's going to add zero to it. And then what we have to do is obviously do M equals check time. And we need to pass the time. Okay. So unfortunately, you won't be able to see it now, but we'll have a look later. Hopefully this will work for us. Now that we are done with the time, we can move on to the next one. So the next thing I want to focus on is the notification. For me, I wanted a notification that says something like, for example, around me every Friday, the bits get collected. And I'm one of them people that always forgets about it. So let's do a notification about Friday. And today happens to be Friday. Let's do that super quickly. So obviously you can have also, you can create a notification for yourself. And I'm also thinking of including like new comments notification, like from YouTube. But I don't want to do that right now. We'll see when we get the YouTube API. Maybe I can show you how to do that too. So let's do that. First of all, let's do notifications. Okay, let's do the notifications function now. And this will be fairly simple as well. So let's do a function. And I'm going to call this function get weekday. And then inside here, we're going to use the date class. And for this, let's create a variable called new date. And then we can do equals new date. This is how we get the date. And for the date, let's do to let today, let's get today. And we can get today by having the new date dot get day, just like we got the time. And then I want to get the notifications ID. So let's do that. Let notifications message. Let's create a variable that's going to select the notification ID, which is this one. So let's do let notification message is equals document dot get element by ID and the element that we want to get is notifications. And then after this, now the dates, sorry, the days come as numbers from here. So one will be Monday, two will be Tuesday, three will be Wednesday and so on. Obviously, at this case, I know that five is is equals Friday. And I just want to know when is Friday. So I get a notification, get the bins out. So let's do that. So I can do if today is equals five, then I want the notification message to be we need to insert into the HTML and then I want the message to be get the bin out dot dot dot. Okay. So it's Friday, we're not getting anything. And obviously, this isn't working because we need to run the function. So let's do that in here. Save. And as you can see, it says get the bin, get the bin out, which is great. Okay. If we go back, obviously, I want to do an else. If it's not Friday, I just want to display something else. So at this stage, I just want to say no new notifications. So notification message will be in a HTML, no, no new notifications. Okay. Save this. And let's have a look. So obviously it's Friday. So we're going to get get the bins out. But if it wasn't Friday, let's say if it was Thursday, we're going to get no new notifications, which is great. And obviously you can create more notifications for yourself. You can, instead of that, you can use cases, case and so on to create multiple ones. But for this example, I think this is fine. All I want is a notification to when to get the bins out and this is fairly cool so far. The next big thing is the YouTube subscriber stuff. So obviously we're going to have to go and create YouTube API. So let's do that. Okay. Let's do that. So, okay. So I had to pause and this is the second day of me recording this tutorial. So that's why the date has changed and obviously the time. But let's continue with doing the YouTube subscribers. Now the first thing that we need to do is get the ODOMETER API and you can find this in GitHub and the URL would be in the description below. It's github.hubsport.com, ODOMETER and let me show you. So if we go to, you can either, basically, if you read the documentation, you can see that you can use this with simple JavaScript and also you can use it with jQuery quite easily and they give you some advanced settings but I walk you through this. It's fairly easy to set up. So first of all, make sure you go to the download. You can download this folder or if you go to github, let's see where it is, you go to github. The only two files that we'll need is this minified JavaScript, ODOMETER.min.js and the other file that we will need is the default CSS which I'm trying to find now, so things and we'll need the ODOMETER-team-default.css. So download these two files and let's include them in our project. So I'm going to go back and as I said, I've already downloaded them, so I'm just going to include the CSS in here, link star sheet and the star sheet I want to link is under CSS, ODOMETER-team-default.css, I'm going to dominate this. The next thing that I need to do is include the ODOMETER class name in here and by the way you can check all these things under the API. So class ODOMETER is where your number will be so we need to add this and also we need to include the JavaScript somewhere around here, JS and I'm not too sure whether this might need to be above the ORJS file so let's do it like this. This should do the job, we're now set up and we are ready to write the subscription count JavaScript. So let's navigate to the JavaScript.js file and here is where we're going to start writing the JavaScript stuff. Now first of all we're going to need a YouTube API key and also a username that we want to get some details from. So let's create two variables. First one is going to be YouTube key and this is where we're going to paste the YouTube key and I'm going to show you how to get that as well and the second one is going to be the YouTube username and this will be the username ID which I will show you how to get as well. So first of all let's get the YouTube key. To get the YouTube key I will put the link in the description below but to get the YouTube key you have to go under HTTPS colon slash console.developers.google.com slash APIs slash library. So this is the link you can all this and the thing that you want to obviously you will need a Google account sign up it's free and you can make the obviously limited calls that you can make and then you can pay for more if you like but today we're going to use the free API calls so let's go. So the thing that you're going to look for is YouTube obviously and the API that we need is YouTube data API v3. Let's click on this and I've already enabled mine but you're going to have a big blue button here saying enable. Just click on that and that should lead you to some sort of a dashboard like this and if you don't have any projects yet it will probably ask you to create a new project and you can create a new project and clicking on here the top bit and just adding a new project. So now that you've added a new project your dashboard should look something like this but let me remove my credentials so I can show you exactly how it will look. So once you create a project this is how your dashboard is going to look and you have to find this create credentials button click on it then choose YouTube data API v3 and then choose web browser JavaScript then we need to choose public data and click on the blue button that says what credentials do I need now this is going to give you an API key copy this API key and make sure you paste this in here. Obviously I will be removing this after the video so you can't abuse it and one thing that you might want to know is that you can also restrict the API key to specific API address or an app and so on but for this tutorial I'm going to leave this and just click done. So we are now done with the API key and we should be able to make some calls to it and we'll check this out in a few moments. The second thing that we need to do is obviously find the YouTube channel that we want to get the data from so let's navigate to YouTube and find the account that you want as you can see this is my account here slash rally the brand but I don't think that we can use this ID and to get the ID navigate to somebody's account you can use mine whatever and if you click on videos it should actually give you the ID in here so this is the ID that we want to copy after the channel and before the videos so let's do that I'm going to copy this and I'm going to paste this in here so that's perfect so another thing that you want you might want to notice is that at the moment I don't have many subscribers but the number is 894 so you can see that the number that we're getting from the API is correct so let's go back to the project and also by the way if you enjoyed this video please help me out by subscribing to my channel and share the video if you find it useful so let's go back now and the next thing that we need to do is we need to select the this class name with JavaScript so we can use the odometer JavaScript library so let's do that I'm going to copy this and let's do it in here we can do it with let's say we might as well do it with const again so const odometer is equals document dot query select in this case because we have a class name and it's easy and this should select the odometer class name from here for us and we'll use it in a second and now we can start writing the function to get the YouTube subscriber account for us so first of all let's create a simple function and I'm going to collect get subscribers in this function I'm going to be using the fetch API and fetch makes it super simple as a default fetch uses the get method so we won't have to do too much first of all we need to actually find the URL and the fetch URL the Google one the API URL that we are going to use and I think I found the API I will paste it in the description below and my blog but I think I found it in the overview and then if you go try in API Explorer or you can learn more and this gives you all sorts of data on how you can use the API and I think this is where I found the euro in fact this is the euro that we need so let's grab this and we need to fetch it and then I'm going to use the slanted I don't know what they called but basically they allow you to insert variables into in here very easily I keep forgetting what the name is but anyways so HTTPS column slash slash www.googleaps.com slash YouTube version 3 and then we need to access the channels and then we need to access parts equals statistics and the ID is the ID of the channel that we need to access so this will be YouTube username and then we need to add the key so key equals YouTube key alright this is perfect and by the way you can find all this in this link here you can see all the methods that you can use and so on okay let's go back to this and continue the next thing we need to do is then get a response and then the response will be returned as a JSON which is very easy to use and then we need to get the data from the response and let's console log the data to see if it works so console log and also if you wanted to catch any errors we can do this by putting catch in here but I'm not going to be doing this now for this video but you can catch any errors in here so let's save this actually we need to run this function first of all so get subscribers let's run it let's save this and see what up we get the API I'm gonna inspect the file the page click on console and as you can see we are getting an object in here so if I open the object we're getting an items array and inside this items array we get another object and this object contains the statistics that we need so basically I'm looking for the subscriber count in here and we can access here and the items statistics subscribe account let's do this so we can go let's create a var let and we can call it a subscription count and then because this is actually this is not a number this is a string we might want to convert it to a whole number so to do this we can do pass in and then and then we need to get the data items select the first object of the tree then we need to access statistics and then we need subscriber count and I think subscriber count is with a capital letter in here yes so let's do this and now to use the JavaScript audio meter library we can simply use the variable that created here that we created in here to insert the data into the this HTML element so what we can do is use this audio meter and with a normal a JavaScript inner HTML we can insert the data and the data that we want to insert is obviously sub count okay let's see what we get and as you can see this is working really well I don't know if you saw the animation but it's super cool this is a live number obviously from YouTube as you can see in here and this is so far awesome now the next thing you might be wondering is obviously if we leave this this is no longer gonna refresh this will no longer give us the latest details and because I'm using the free API I can only make so many calls a day or a month I think so I need to be careful of how many times I request this obviously I can pay for it but if I'm being careful maybe we can use maybe we can check for new subscribers every 10 minutes oh so instead of like every second so let's do that let's do that next we're gonna have to run the function first of all so we get a response straight away and we get a number straight away but then we can set an interval let's actually create create a variable with a delay so we can do let's actually let's do another const delay and the delay is gonna be 60 I think I believe this is 10 minutes in milliseconds to double check that 10 10 minutes in milliseconds and let's do the set interval in here so let's start it's just like the time that we did above let's do a set interval and for the interval we need to add the delay that I just done we can to refer we can write it in here as well it doesn't matter so delay and then we need to run the functions so for example get subscribers and maybe let's run the get weekday as well so let's let's move this in here where all the functions are so we can do run functions and then we can run those functions every 10 minutes I believe so let's save this go back to the page and obviously we're not gonna see this now because it's gonna take 10 minutes but if you like I can change this just for a demo I can change the number let's change it to something less than that okay this is gonna be okay that's every second now and as you can see this is every second but obviously I don't get so many I don't get too many subscribers at the moment so the number doesn't change unfortunately but this should work they should bring the latest subscribers for you so let's see what we have next the next thing we have is the weather so if we click on weather you will see that we are not getting an icon and we need to bring the weather so for this I'm going to use another API called open weather map and it's really powerful and super easy to use so first of all obviously we're gonna have to you're gonna have to sign up for the API it's free and then once you sign up they will give you the API keys in here and they will give you the URL that you can request the data and so on so let's have a look and also I'm using the free plan which means that we can do 60 calls per minute which is fairly good and three hour forecast five days and so on so if you click on API basically what I will be using is the current weather data but look at this there you got so much stuff that you can use so this will I will be using API docs yes here is some of the API calls that we can use just like we did with the YouTube and I think for now I'm just going to be using this the London one so let's do that so basically let's go I'm going to copy this might as well okay so let's go back to the JavaScript and we can do this let's do it let's do it here get right okay so first of all obviously we need to get the API key okay let's do this one slightly differently let's let's just start writing the function and we'll include the API key inside the URL as this is another alternative method you can do whatever is easier for you so let's do a function and this time I'm going to go to get weather and then inside here we're gonna have to do exactly the same thing as the YouTube we're gonna have to do the fetch we're gonna have to use the fetch API because it makes it super easy to do and basically let's do fetch the URL I've already copied which I showed you but we're gonna need to put HTTP and then slash slash API dot open weather map dot org data 2.5 weather question mark Q as query equals London UK and then we're gonna need the API key which I'll show you I showed you how to get up ID is equals and this is where I'm going to paste my up ID and let me go back to API I think I need to go back okay this is where my API key is so this is the one I will be using and of course I'll probably remove this later on okay so let's copy this and we can just add in here instead of having a variable whatever is easy for you now we need to get the response just like before and then we need to bring the data and let's console of the data first of all to see what it works and also let's do the catch any errors again just so you have it so we need to run this function as well and let's go back to the page and this is the weather that we are getting so everything looks good we are getting in terms of information and I think the information actually want to get as you can see you can get like the coordinates humidity pressure temperature yeah so there is a lot of information that you can get and also you can explore the API in more detail and see how you can bring the data in like bring the degrees and all that stuff and so on but I'm not going to explore that too much I'm sure that there is like other tutorials online as you can see like there is all sorts of stuff in here but let's see what we need so first of all first of all I'm going to need this weather object to access this weather object and what I want to get is the description and icon I think okay let's get the description first of all and see how things go okay first of all to insert the data into the weather which is here for the title we have what a title and then we have an icon we're gonna need both of them let's let's get those elements so in here what I can do is let's do const document get what am I doing it's a document dot query selector and then is the weather now this was this is gonna be the weather icon so okay and then the next one is the weather title so let's do the same thing const okay so that's good and now we need to get the data and insert here into those two diffs now we just select it so let's select the weather title first title and the weather title we can do inner HTML is equals the data object dot then weather is what we want to access and this is the first object which you can see in here so whether and then we need the this object and then we need the description so let's do that weather first object and then description okay and then we need the weather icon okay for the weather icon we're gonna have to wait a second because I actually want to bring an icon for this okay let's see if we get the description first of all as you can see we get the description the moment so in London we have a clear sky which is exactly what we want and one of the things that we have done on the demo is I changed the image and the image actually came from the unsplash API and I'm going to show you how to do this as well but first of all let's see how we can change the icon and okay so to get the icon we're going to use this API again and want to go under the weather then object then you will see that we're getting this icon ID we're going to use this to bring an icon that that reflects the weather obviously and to do this I found this really cool CSS library called OWFont and basically it has symbol for all the open weather API map stuff and as you can see you can see them in here so each ID corresponds to one of them icons which is awesome so first of all download this this will download a few files for you a CSS file a font and yes a CSS file and a font so first of all I'm going to also link this in the description below and I'm inserting the font now and I've got the CSS in here downloaded for me so let's include those two things so first of all let's include the CSS link CSS no that's not the one okay and we don't need this and then we need to actually add a class name to the div that we want to insert the icon so in here OWF is the class name of where the icon is going to appear I've already included the font which is obviously the font will be the CSS will look to grab the font from the font folder in here and hopefully that should bring the icons for us so let's do that this one will be now slightly different we're going to need to insert a class name to this div here let's do that it's super easy so first of all let's grab the weather icon variable that we created and let's do let's add class name to it so to do this we can do classlist.add and then we need to get the we need to add a class prefix of 0WF- and then we need to get the data basically the id that comes up from the API here that I showed you earlier so let's do that that would be data.weather and again we need to get the first object and then we just need the id so hopefully if I say this we are getting clear sky and we're getting the icon that corresponds to clear sky which is brilliant obviously you can bring more details like visibility and all that kind of stuff but we'll I don't want to spend too much time on this the next thing I want to do here is I actually want to bring an image from unsplash.com and let me close some of these things now so if you go to unsplash API dash it and then if you log in and register that should give you an API which you can get all sorts of login and go to unsplash.com developers and dash it and then you need to create an API key to access all this data and the data you can get in jason modern jason and so on so basically just like what we did with youtube and the weather we can do exactly the same thing with the unsplash stuff so I'm not going to waste too much time but you can go under view documentation and the API is amazing as well so I can get all sorts of stuff like later photos random photos photos by names and so on so today what we want to do is we want to use this string of clear sky to get an image from unsplash and display here so basically every time the weather changes we're gonna have a different image which is that corresponds to the weather which is super cool let's do that now I'm not going to waste too much time looking at the API so let's just go and do this super quickly so unsplash image so first of all let's get the we need to I want to insert basically I want to insert this image as a background on this section so we're going to need to get the weather ID let's do that and we can do const selector and the query selected that we want is this okay then let's do function that we're gonna let's do another function for the fetch method so we can get some data from the unsplash API so let's call this get weather photo get weather photo so function and we probably need to we'll probably need to pass some weather details in a minute so let's do what the weather is we're gonna have to pass this but I'll show you in a second and then in here we can do const unsplash API is equals and the unsplash API for me I've already copied my key and so on so what I will do is copy of this and I will explain it so this is the API which you can find under the documentation and basically what I'm looking for I'm looking for a photo with my client ID which is inserted in here that's your API key and then let me enter that and then we are only looking for page one one result and then we're only looking for one page with one result and then last but not least we actually need to query the weather so this will be clear skydiver we actually need to query this and to do this we need to do and query equals we can do plus weather okay I think that should work but obviously we need to pass the weather and in a second and so on now this is looking a little bit ugly let's do it like this I think it's because I've zoomed in so much but yeah we're gonna have to deal with it anyways so let's do a fetch and this time we're gonna fetch this unsplash API then actually let's put this as let just in case and so we're gonna fetch this and then we need to get the result the response the response will be return return in json format again and then we need to get the data just like above the the step that we done above I'm trying to rush in now now we need to add the image to the weather section and to do this we can set an attribute so we can copy this and set an attribute to a weather wrapper dot set attribute and the attribute that we want to add is style and the style will be obviously a background image URL the URL that we need here is plus we need this as well plus data dot result zero dot urs dot regular plus and then we need to close this I think this looks good so basically you can get the if you look at the API this is how it's structured data results the first object urs regular that's how the API is structured structured and then last but not least if you want to do any errors of course catch okay so first of all this is obviously not gonna work at the moment we need to pass the weather and to do this what I can do is use this function in here and just pass the the weather description so let's do that I don't have a variable for it I can literally copy this this is what we need to pass so this is gonna pass the weather description which is the moment clear sky into here this function is gonna get the clear sky and then we're gonna query clear sky and then get a response and then insert a background image into the section in here and we probably need to do a little CSS work have a look so let's save this did I save it save this save this and let's run it okay this is awesome this is kind of working we're getting clear sky with some random image yes so far that's awesome the only thing that I think we need to do is probably cover image cover on this so if we grab the weather ID got to the tiles did I know style weather where's the weather stuff okay I can just do this I guess background size cover save and this so the image will look a little bit better than usual and I know we're getting this random space in here but don't worry this I think this should work later on when I remove some of the yeah don't worry about this for now we can probably fix this later the next thing that we want to do is do the voice recognition so the voice recognition is actually is not so bad to do and what we're going to do is we're gonna write the voice recognition and I'm just gonna do yes let's let's just begin the voice recognition that we are going to use is called Anyang and Anyang it's really easy to use like super easy you can do all sorts of math stuff with it but I'm just going to show you the basics and also you can use it with any language which I can try to demonstrate in here so let's go first of all we obviously need to bring Anyang and you can go go Anyang cdn and that will give you some cdn stuff and I think the one that I'm using is the Anyang minified so let's copy this URL go back to index.html and bring that somewhere in here so script oh no no we need it as script source is equals the Anyang stuff and then we need to close it close it okay my tapping is getting worse now I don't know what's going on anymore okay save this so now that we have Anyang we need to we can start using it so we need to first of all initialize Anyang and basically we need to first of all check whether we have Anyang or not and also let's I'm thinking of putting all the functions in here together just so we are a bit more organized let's see if this works okay everything's working fine so is there more maybe we can just wrap all of them together that probably is it doesn't matter I just wanted to structure it a little bit better than it is at the moment but that's fine it's looking good anyway so first of all we need to check to check if we have Anyang working and okay so I believe that Anyang is basically written on top of the web APIs and that's the web speech API and you can use this instead but Anyang makes it a lot simpler for us and obviously this does not work on all browsers I think Chrome is one of the browsers that work so we might have to switch to Chrome in a second so this is the API that we are kind of using in the background just so you know and the language is supported Anyang the language is supported it's actually like a really big list these are all the languages and I can show you some of them how to make that work and also if Anyang does not work you probably need to run it under HTTPS but we'll see how it goes okay let's continue so first of all now that we've included Anyang we need to check if Anyang is working if it's available for us so for this we can just do if Anyang and then then we can even like do console like if this works as you can see this is not working in here so maybe we need to switch the browser to Chrome and refresh okay so let's have a look okay as you can see now I think this is zoomed out so much as you can see now we as you can see now we have Anyang which is good obviously we'll see we might need to so that so far that's good Anyang is working on this browser now the next thing that we need to do is set a few commands to do this we can do a var with command and equals this so what I want to do is I want to create a few functions and one so basically we can create two functions underneath here function one will be let's say home and this is going to be allow us to navigate to the home to the first section of our page and then we're going to make another one called let's say weather and this will allow us to navigate to the weather using the location hash and we can obviously create more and more but to do this first of all let's create a few commands and for me I'm going to create I'm going to create something like gorilla herb show home and then this is going to be equals the home function then I'm going to create another one just exactly the same show home and this will be again home and then I can create another one maybe like gorilla herb show weather and then that will be that will be equals the weather function and then I can do the same show weather and that would be equals weather and then you can just like carry on adding more and more but for this example let's keep a simple because we've spent so much time on this obviously in here you can add another language and I can I can show you this in a second as well if everything is working correctly so for the home if this runs let's do accounts or log of home so we know that this function is running and then we need to remember that I added those what I could location hash anchor names basically we need to make sure that when this function runs we can navigate to this section and obviously you can make this with pages and so on so what I can do is location doc hash equals and then this is the anchor name then I can do exactly the same thing in here let's copy and paste and this will be weather and I can copy the weather one paste and hopefully if the next thing we need to do is add some of the commands and so we need to do this by Anyang dot commands add add commands and the commands that we need to add is the commands by the way this is all listed on the API and you can have a look in more detail and then the last thing let me comment this add commands and then the last thing is we actually need to initialize Anyang to start listening so start listening and to do this we can do Anyang dot start okay if everything worked correctly hopefully okay let's refresh the page usually this would ask you for permission but I think I've already given the permissions here I've allowed my microphone to be accessed I'm just going to use my microphone that I'm working on with now and I'm not sure whether this will work but let's just hope for the best done so hopefully as you can see this red icon means that the web page is listening to us right now we have Anyang and everything is working so technically speaking if I say one of those commands hopefully we should get it to work so let's try this one and let's go back to the browser click this I'm going to refresh show weather and as you can see this is actually the first time and it works right away so let's see whether it works with show home okay I think it was listening to me a little bit but as you can see it's actually working quite well so let's try it again gorilla up show weather gorilla up show home as you can see this is working really well I'm really happy with this obviously we can remove those testing links now so the page looks a little bit more presentable and we can just in fact instead of removing them it's always nice to keep them in here just in case and as I said you can add more sections just the way I did it and add more good stuff to your smart device let's go that way and I also promised you that I'm going to show you how to do the language and if you go to the language second set if you go to the github page of Anyang with the frequency ask questions and what languages it's supported you will see that after each language they've got this this short code for the language so find the one that you want and that I can only speak two languages I think almost three maybe I can only speak I can also speak Bulgarian so let's do that and to do this it's actually really really easy and let's put it to the test so here in the command obviously we're going to have to remove the English ones now in fact I'm going to copy this paste it in here so we can just have it and I'm going to copy this we're going to have to remove the English ones of course and also we're going to have to set a language before we do anything to do this you can do Anyang dot set language and the language I want to set is BG Bulgarian then if we go down you're going to have to write this in your own language but we can keep the functions in English so let's write this you can write this in your own language and let's say for home I'm going to put something like first page so in Bulgarian this is pervastranica and as you can see I'm writing in Bulgarian now which is really cool and then for the weather I'm just going to do another one for the weather in here I'm just going to say vreme which means weather I think that would do let's save this and see whether this understands Bulgarian or instead I can say second page or whatever let's in fact yeah let's let's see so I'm going to go to Chrome again and just in case I'm going to refresh and let's give it a go and by the way let's remove this hash just in case as you can see this understands Bulgarian as well which is amazing and if you remember from yesterday yesterday was Friday and I had the notification that I need to get the bin out this is no longer here because today is Saturday and yeah let's have a look at what else do we need to do I think this is actually everything from this tutorial is taking a while to do I really hope that you liked it and you learned something cool today I know it's a little bit long please subscribe to my channel give this tutorial a like share it with your friends and family and help me grow this channel so I can show you more cool tutorials like this thank you very much for watching as always my name is ready a new watching my channel ready to brand see you next time friends