To you what we're going to do in this video so here we can see we have this page where we have random codes displayed over here when we refresh this page or when we click on this new code.
Button so let me just refresh this page and here we can see we have a new code displayed over here and even if you click on this new code button a new code will be displayed over here now we are.
Displaying these codes over here based on an api so we are requesting the api for a code and then we are getting a random code from the api and then we are displaying.
It over here using javascript now we don't have an idea of what codes are available in the api so we don't have any idea of which course will be displayed over here now in this video we.
Will create a javascript array of objects and we will store the codes that we need in that and then we will display the codes from our list now in this way you have a list of codes that will be.
Lot of things like that so it is up to you what information you want to show over here so with this method you don't need the help of any api you can display anything you want so you will have.
Control over all the data that's gonna be displayed over here so let's get started all right this is the code that is.
Responsible for displaying the random course on our webpage now i will leave the link of the source code in the description of this video and i also have videos on how to write all of this.
Code from scratch you can check them out in the description of this video right now let's open this in our browser so i'll just right click over here and click on open with live server.
Right now let's go back and let's go to the main.js file and now the first thing we need to do over here is to create an array of objects so let's create a const and i'll just.
Type codes Wesdigital
And we'll set it equal to an array and now in this array we need to create objects now to create an object you have to type curly braces and in that you.Need to have the properties of the object so the first property that we will have is id and i will set it equal to zero for the first id and then we will.
Add a comma and the next property we need to have is a code or let's just call it content and here you can type the code that you want.
And then the last property that we need to have is the author so i just type author and here you can type the name of the author so this is our first object and the.
First code so let's copy this and let's paste it down here and now this is the second object and we will have the second code over here now in the same way you need to create.
Different objects for different codes so i'll just quickly add some codes over here all right so i have copied all these codes over here and we have seven codes in total now we'll display the.
Codes from this course array instead of the api so let's scroll down and go to the function so here we have this function called next code and in that we have this code.
To fetch the data from the api so i'll just go ahead and comment all of this code so i'll just select all of this and press ctrl forward slash to comment all the code.
And here we can see in this code we are calling this function called update code so let's call that function over here so i'll just type update code and here we will pass the name of our.
Array so here we can see the name of the
Array is codes so i'll just type quotes over here now here we need to pass the index of the array so let's type 0 for the first.Index and now let's save this and let's go back to our page and here we can see that the first code is being displayed over here so if we go back to our quotes.
Array here we can see this is the first code and now the last thing we need to do is we need to display random quotes not just the first code so let's go back.
And what we will do is we will generate a random number from zero through the number of codes that we have over here so here we can see the last id is six so we need to generate a random number.
From zero through six let's go back to our browser and let's open the console so just right click and click on inspect and click on console.
Now in javascript you have this method called math dot random and if i just type math.random over here we can see it gives us a number between zero through one.
So it gives us random number from zero through one right now what we can do is we can multiply the random number by another number so let's type math dot random.
And if i just multiply it by let's say 6 we can see we have this number over here let's run this code once more and we have another number and here we can see we have different.
Numbers so now we have numbers from 0 through 6. now the last thing we need to do is we need to get just this first number over here so we can use a method called math.
Dot floor and in that we can just type math dot random and then just multiply it by any number so let's type six over here.
And now we can see we have number one now we have number two we have number two one four four.
And we have all these random numbers over here from zero through six so let's use the same method to generate random numbers so let's go back to our function.
And here we will type let code id equals and here we will type math.floor and here i'll type math.random.
And now we need to multiply this by the number of codes that we have so for that you can just type quotes dot length and this will give us a value of 7.
Because we have 7 chords over here now when we add a value of seven over here it will generate a random number from zero through six.
And now the next thing we need to do is we need to replace zero with the code id so now let's go back to our website and let's see whether everything is working all right so here we have a code let's.
Refresh this page and here we can see we have another code let's refresh this page once again and we have another code so here we can see different codes are.
Displayed over here from the list of the codes that we have provided even if you click on this new code button we have different codes from the list.
Now it's just a matter of adding all the codes you want over here inside this array so you can add any number of quotes over here and then this function will generate a random code id and.
Display that code over here so in this way you can display random information without using any api now the last thing we will do is we will add this code to our blogger website here we.
Are fetching the code from the api so let's go back to our dashboard and let's go to pages and let's go to our random code generator and we need to make changes in.
Our javascript so let's scroll down and go to the script tag so here we have the script tag so i'll just delete all of this from here and let's go back to our javascript.
And i'll just copy everything from here and let's go back and paste it inside the script tag now we can just remove these lines of code over here.
Now let's click on update and let's go back to our page and let's refresh this page and here we can see we have the code from the list that we have provided.
So every time we click on this new code button or refresh this page we have a random quote from the list so that's it for this video if you have any doubts you can ask in the comments below.
And if you like this video please click on the like button and subscribe to this channel to get the latest video updates thanks a lot for watching have a nice day.