Page so whenever we click on this new code button or whenever we refresh this page we want to have a new code displayed over here and also the author of the code displayed over here so we'll.
Be doing that using javascript and we will use an api for that so let's get started now the first thing we will do is we.
Will get the link of the api so just google for quotable api and you will find the link of the api over here so let's go to the link and this is the api so we need to get.
The link of the api so let's scroll down and here in the example we can see different ways of using this api so if you use forward slash random then it will generate a random code for you and.
Here we can see we also have the option of filtering the codes with tags so here we can see we can add tags technology and famous codes and then we can get the codes regarding these two tags and if.
The code and also the maximum length so there are a couple of options that we can use and if you just type forward slash quotes then it will display a list of all the.
Codes and here we can see we have the query parameters and we can get the author by just typing dot author and we have all these options over here and here we can see all the query.
Parameters are displayed over here and let's scroll down and here we can see the examples of how to display a specific page number inside a list of all the codes now one page will display.
20 codes and let's scroll down we can also filter by author so we can just type author equals and the author name right now let's scroll down and let's find an example.
Here we can see a code example so i'll just copy this code from here and let's go back and let's go to the main.js file and i'll just paste the code over here right now let's go back.
To our design and let's open the console Wesdigital
Because here we can see that we have displayed the content and the author inside the console so i'll just open the console i.Just right click over here and click on inspect and let's open the console and here you can see we have a code displayed over here and we also have the author displayed over here right now.
That we know that the data from the api is being fetched correctly let's go back and let's add the data to these elements over here so instead of this text we need to have the code and instead of.
This text we need to have the author so let's go back and here we'll also type question mark max length and we'll set the max length to 100 so that we don't have a long code.
Displayed on our page right now let's include this code inside a function so i'll just create a function over here i'll just name it next code and.
We will add this code inside the function and we'll just cut this code from here and we will add it inside the function now the next thing we will do is we will.
Remove this console log from here because we don't want to display it in the console we want to display it in the html so let's go back to our index.html file and we need to reference some of.
These elements from here inside the javascript so we need to reference the code content we need to reference the code author and also the new code button so let's go back to our main.js file and.
Let's create some constants so here let's type const code content equals document.queryselector and here i'll just type code container.
Code content
Because if you go back to our html we can see that we have this code container division and in that we have the code content.And then we also need to have the code author so let's reference that so i'll just type const code author document dot query selector.
Code container code author and then we also need to reference the new code button so let's tab const new code button equals.
Document.queryselector and code container new code button now the next thing we will do is we'll.
Create a function to display the data inside the html elements so let's create a function called update code and now we will call this function from the fetch api.
So here i'll just type update code and i'll just pass this data variable now in the data variable we will have the content and the author so we'll just receive it over here i'll just name it.
Data you can name this anything you want so here i'll just type code content dot inner html and here we'll type data dot content and codeauthor dot inner html equals.
Data dot author so what we are doing over here is that we are getting the data from the switch api and in that we have the content and the.
Author and we are adding them to the code content and the code author html elements now here i will run this function next code because we need to run it at the time of page load and we.
Also need to run this function when we click on this new code button so let's add an event listener for that so i'll just type new code button dot add event listener.
And we will listen for the click event and here i'll just create an arrow function and here i'll just type next code now this should fetch new code when we.
Click on this new code button and let's go back to the html and here instead of this code i'll just type loading code and i'll just remove this author from.
Here and let's go back and here we can see we have a new code displayed over here and we also have the author let's click on the new code.
And we have new codes displayed over here every time we click on this new code button and even if you refresh this page you will have a new code displayed so let's refresh this page and here we.
Can see we have a new code displayed so that's basically how you create a code generating website using html css and javascript all right 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.