Transcript for:
Asynchronous Programming in JavaScript

Master asynchronous programming in JavaScript from the code lab you learn JavaScript promises a sync await and the fetch API then you'll use your new knowledge to build three projects hey there guys welcome to the codb channel and welcome to part one of this two part tutorial where we're going to be learning everything you need to know about asynchronous programming before we get started guys if you like the content don't forget to like And subscribe and make sure you hit the notification Bell so you never miss an update so as mentioned in the intro guys this tutorial is a two-part tutorial in this first video we're going to be learning everything there is to know about a secret programming so we're going to take a look at what secret programming is a syence programming taking a look at callbacks and then a thing called callback Hill JavaScript promises and then an even better way to write promises with a syn8 and then we'll use everything we learn in part one by creating some really cool projects in part two using apis so before we get started on that just a few prerequisites you're going to need a basic understanding of HTML a basic understanding of CSS and also a basic understanding of JavaScript so without wasting any more time let's get into the video so before we actually dive into what asynchronous programming is we'll first take a look at what synchronous programming is now synchronous programming as you can probably tell from this slide here is that it just follows a strict set of sequences so when the code runs in synchronous programming it will follow each step in order so it will do task one and then it'll do task two and then it'll do task three it will never do task three first or task two first it will always follow in a synchronous manner so it'll be sequential so let's go into vs code now and just take a look at some synchronous programming to really drill in this concept so we're in side this code here and as you can see when we take a look at the code here we've got a list of things to do to make a chocolate brownies now I'm logging all these tasks to the console so when I uncomment them we'll take a look at the console here and we'll see how this is working synchronously so we'll go ahead and do that now un comment these and as you can see from the console it's doing it sequentially so it's log in the first one then log in the second third fourth fifth sixth and then finally seventh and this is what I mean by synchronous program in the code will execute the tasks in the order that you see them and then it will just wait for um each task to be completed before moving on to the next one now the problem with this kind of programming or synchronous programming is that it can be problematic in certain situations and that's particularly evident when you're dealing with tasks that take a significant amount of time to complete so let's say for example that a synchronous program performs a task that requires um waiting for a response from a remote server or an API the program will actually be stuck waiting for the response and actually and won't be able to do anything else until the response is returned and this sometimes be known as blocking and it can lead to a lot of applications appearing as unresponsive or frozen which is what we want to avoid and the way we can avoid that is with asynchronous programming asynchronous programming is going to be the process that allows the application to run a second set of instructions while also focusing on its primary or basic process and several of the benefits of a syn programming is things like improv the application performance um wide application to different code languages and it's just better for overall user experience and a few used cases of a syn programming um includes reduced inefficiencies from an application as well as efficient data collection which we will focus on in part two of this tutorial and to really um drill this concept home in a real word example you can sort of think of asynchronous programming is essentially application multitasking where we're doing multiple things at the same time so as I just mentioned asynchronous programming is going to allow us to run a program and for that program to continue working on other tasks while we're waiting for external events such as uh Network requests to occur so let's go ahead and look at a basic example of asynchron programming using the set timeout method so we're going to be using the same console logs as we did for the chocolate brownies we're going to be building this basic app but of course with a set timeout function before do that let's just number these so we know which order they're in [Applause] and I'll speed this up just to save some time you can see now I've put these all in set time out function but if you take a look at the console now you can see they're not firing off sequentially anymore see it's actually firing off number eight first um and then number one and then three and then 7 2 4 6 so it's not running sequentially and it's not running in the order that we want it to this this list now doesn't really make sense and the reason why this is happening is obos is because in this example the set time out function method execute a function after a specific time so all of these numbers that you see here is represented in milliseconds so 1,000 milliseconds is equal to 1 second so first one is 1 second second one's 2 seconds second and a half 3 seconds 4 seconds 3 seconds and a half 1.8 seconds and then half a second so the function passed to the set time out functions will be executed and asynchronously which means that the program will continue to execute the next line of code without waiting for the other set timeout to complete so this is just a basic example of what asynchronous programming is using the set timeout function now so that we want to file these off in the correct order what we can do is use these set timeouts put them inside functions and then use callbacks to fire them off which I'll explain it just a moment what callbacks are but first let's just put these uh set timeouts into functions so we just go and start the first one and we'll say function task one and then set task one inside of there and then we'll do the same for the second one and I'll just speed this up because obviously you guys get the gist of what we're trying to do so we got our functions here and the way that we're going to fire this off in the order that we want it to we're going to insert a callback inside each of the tasks as an argument so essentially what call back is is just a function that's passed in as an argument to another function that will then execute the Callback based on the result so essentially they're just basically functions that are executed only after a result is produced and callbacks have been quite an important part of a Ayn programming so we got our functions here and the way that we're going to fire this off in the order that we want it to we're going to insert a callback in each of the tasks as an argument so essentially what callback is is just a function that's passed in as an argument to another function that will then execute the Callback based on the result essentially they're just basically functions that are executed only after a result is produced and callbacks have been quite an important part of a synchronous programing so what we'll do is of the task one we'll give it an argument of callback and then we need this to S inside of here so we'll say call back and then we'll do the same for task two and again I'll speed the this up so now we've included our callback as a parameter and then every time a section is complete we then execute the Callback to the next function and this is just going to give us the ability to now fire off this list in the correct order so the way we'll do that we'll go at the bottom here we'll grabb task one and then because task one takes a parameter taking that call back but we're just going to use an aror function here so when task one is complete we then want to grab task two task two Tas two also takes in a callback sorry task two and then after task two is completed want task three which also takes in a callback and then task four again taking a call back task five task six task seven and then finally task eight so if you take a look at the console now you can see is starting to load in the correct order so it's going to load task one once that's done task two then task three task four task five task six task seven and task eight you can see it was taken the amount of time that we've actually included in this callback the set timeout function so you can see task five there took the longest because it was 4 seconds long or 4,000 milliseconds now you may have noticed that after all this nesting that it's starting to form like a pyramid format and this is what we will call callback Hill is where you run into the trouble of nesting loads of callbacks inside of other callbacks and if these functions weren't written so methodically it can actually be quite un manageable and really difficult to read so that's what's called callback hell let's take a look at a more practical example of callback hell just so we can really drill it in so say in this example we just want to write a simple message display in the console but we want to do it asynchronously using callbacks so what we'll do is we'll just create a uh function here which we'll call let's just call it show message and this is is going to be a arrow function and then this Arrow function is going to take a callback so we'll just put in here callback just like we did in the previous example and then what we want to do is just console.log that call back so we've got a message here that we want to display and then what we want is a function to First display the first part of the message so we'll say const let's say uh first message this is also going to be a callback and we'll give it an argument of callback and we'll say set time out it's going to equal an error function which is also a callback so inside of the set timeout function we want to trigger this show message and which is going to display that first message so we'll say so show message we want that to display hello and then after that we want to fire off our callback and we want this to be let's say 2,000 milliseconds long it's 2 seconds long and then for the second part of the message we want to create another function so we say cons second message this is also going to an aror function and then we want to grab the show message function again then we want to write our second word which is going to be world and then to fire this off let's call that function so we'll call first message and inside the first message we want to give it a call back which is going to be that second message and if we take we wait 2 seconds you see it prints out hello world now it's quite a simple explanation of just using two words but you can see already that writing it this way using callbacks can quickly become unreadable and really hard to work with if we start adding more functions inside of this you can see it's going to become unmanageable so let's say we want to add more words like a third message using the show message function here we're going to have to insert it in our second message and then if we want to add another one we'll have to insert that inside the next function and again that's just going to create a massive headache for you and then lead to cool back hill so to combat this we now use a thing called promises so what exactly is a promise a promise is essentially just an assurance or a guarantee that something's going to happen in the future so in real world terms a person can promise another person a specific outcome or result programming terms A promise is an object that holds the future value of an async operation so for example requesting some data from a server the promise promises us to get that data which we can then use in the future now before we get into all the technical stuff let's actually just break down and understand the terminology of a promise in a programming sense now a promise in JavaScript just like a promise in the real world has three states so it can either be pending it can either be fulfilled or it can be rejected so when a promise is pending it essentially means that the result is not ready are. it's actually waiting for something to finish so for example an async operation will be stuck on pending if it's not ready now depending if the promise is fulfilled or rejected then if a promise is fulfilled it means that the promise has been resolved and the result is available whereas if the promise is rejected it essentially means in a programming term that an error has occurred which you would need to address so now that we know what A promise is and we also know the promise terminology let's go back into vs code and look at we has the promises now before we create a promise I just want to highlight that most of the time you'll actually be consuming promises rather than creating them but again it's still really important to know how to create promises just so you can really drill the concept and how it works in your head so the syntax of a promise looks something like this so first let's just create a const and we'll just call this promise and this is just going to equal a promise Constructor so we need the new keyword and then we'll use the promise now inside of the promise Constructor this takes a single argument which is essentially a callback this take two further callbacks the the resolve and the reject so we'll put in here resolve and reject and this is going to be an aror function and then we'll just close this off and that's the simple syntax we use to create a promise and then inside the Cod braces we of course just have code that we want to execute now in terms of the promise this Arrow function inside here that we just created that has the resolve and the reject callback is immediately executed when this promise is created and then once the promise is created it's either resolved by calling the resolve call back or it's rejected by calling the reject call back let's look at a really simple example so we'll just create variable and we'll call it uh let's say con uh let's create a Boolean this can actually accept anything so it can accept Boolean numbers strings arrays or even objects but we'll just keep it simple and use a Boolean so we'll say uh let's call this all went well so this equals true so we'll have our if statement in there so if all went well is equal to true then we want to grab the resolve call back and then we'll just log in here all things went well else we then have the reject which we can say oops something went wrong now let's log this into the console and see what we get you promise take a look the console now you can see now the promis is in the fulfilled State and then let's just showcase what would happen if it fails this so let's just set all wet well to false you can see now the promise is in the rejected state which probably oops so you can see from that example the two different states that are presented when we're creating promises now remember with promises that there's also a another state which we saw in the slide which is the pending State it's essentially just when the promise is pending if the if the result isn't ready the state of the promise is going to be set to pending so let's take a look at another example to fully understand three states of promises so we'll just take this off and we'll go inside here and we're just going to create a variable which is going to be a random number generate a random number we're just going to need the math. flo method and then math object again grab the random and then we want this to be between 0 and 9 say times 10 that's how we can generate a random number between uh 0 and n and then we'll use the set timeout function which is going to accept that resolve and reject so we're going to say if random number is less than four we want to grab the resolve and we want it to display let's say Well done you guessed right else we'll grab the reject and we'll say oops you guessed wrong and lucky and then we'll make this so it's 2 seconds long now if I log this to the console so I log in the promise you can see that initially is set to pending and then after 2 seconds it then hits the reject so it's saying oops you guess wrong unlucky and that's how you can see when a promise changes its different states when the promise is first created it will be in the pending State and then after two seconds from the set timeout function the promise is then either going to be resolved or rejected randomly and you can see in this case it's been rejected and then again that's just a simple way we can demonstrate how a promise works so initially when you set a promise it's set to pending or it's in a pending State and then depending on the outcome it will either resolve or reject so those are the three different states of a promise so now we've grasped at the three different states of a promise we can't actually do anything with this data at the moment despite it being fulfilled or rejected we actually need to consume consum the promise to then access that data so using this example let's understand how to actually consume an already created promise so if I just get rid of this console log here the way we actually consume A promise is well there's actually a couple methods but let's learn the older methods first and then we can learn the newer ones in just a moment so the older methods of consuming a promise was was using methods such as then and catch now the syntax of then and catch just makes it a little bit more easier to read and consumer promise than it was previously before when we're using um nested callbacks or so let's just dive into this example and you guys will be able to see so again we're using this example if I grab the promise and then I apply a then method to this the then method itself actually takes a call back when the promise is resolved takes one argument now the argument is actually this content here so whatever's inside the resolve this is what's going to be outputed so let's just call this let's call this value so it makes a bit of sense and then all we can do then all we need to do here is just console. logus value and if you take a look at the console now you can see we're getting the content inside of the resolve and we're getting the actual content we're not just getting a fulfilled promise and it's quite important to distinguish this now as well as a then we've also got a catch so in case of a reject so under this then we can grab the catch method this also takes a callback and again this is just going to be the value that the reject outputs so let's just say let's call this error and then let's do the same thing in console.log the error and you can see now instead of getting that red error like we did before we're actually getting the output from the reject so we're actually getting the value from the reject call back of the promise so you can see how this is actually a lot cleaner than using the conventional way of callbacks or nested callbacks so let's just quickly go over all of these steps so how we got to this value so we create the promise and when the promise is initially created it's going to be in a pending State meaning that it's just waiting for a result now promise accepts two parameters the resolve and the reject and then when we set a condition we either want it to resolve or we want it to reject so depending on whether the random number is less than or greater than four it's going to resolve or reject and those are the three states of a promise down to its Bare Bones but we're not actually able to access the data yet whether it's resolved or rejected because we need to as I mentioned in majority of cases is actually consume that promise and the way we consume that promise in this example is just using the do then do catch which themselves accept the call back and the the values inserted inside of that parameter is going to be the values that are inside the resolve or the reject and that's how we get into our value here and again you can see how much cleaner it is to actually write this promise and then consume it now another good thing about then and do catch in relation to promises is that we can actually chain promises onto other promises so let's just create a few more promises from this so what we'll do is we'll just have a resolve in here and this is just going to say well done promise one is resolved and then let's just duplicate this a couple more couple more times say promise two promise three and then we'll say Well done promise two is resolved and then promise three let's actually reject promise 3 so it fails rejected unlucky so then again what we can do from here is actually chain onto these so we can fire off these promises so we'll leave the dot catch for now and we'll say what we can actually do because this is chaining on we can make this look a little bit neater so we can say dot then inside of this value we Conant log that value and then we'll just return promise to then after that dot then we'll create another dot then or we'll chain another dot then and then we can also log that value be this paste that here and then we'll fire off third promise prom but the third promise we want this to actually fail so let's comment the catch put that in there and obviously change that up there so we can see how now that's actually firing off of three different promises we have our first promise which we have a then method attached to it and that value is going to be the value that we have in the resolve so we log that to the console and then we return promise two after that which fires off the second promise using the dot then then we access that value of that resolve and then we return promise three promise 3 is rejected we then use the catch method to log that value so that value of this reject to the console and you can see how now that's fir enough synchronously while using asynchronous programming and again you can see how much neater it is writing the do then and Dot catch methods when working with promises or when consuming promises compared to how asynchronous programming before used to work when we're using um coolback functions and then eventually run into callback hill now a common mistake from beginners is that they might make the mistake of nesting promises inside of other promises which is essentially similar to callback hell so if we take a look at example console.log just the do then for now then inside of here what we'll do is actually grab our second proom we'll grab promise two and we'll apply a then method on here to then display that data and then we just console. log the data and then L the third promise inside of here so L promise three and we'll just put in here data as well and we'll just put in here data cons. log data and then on this we can just attach the catch log error then you might even have a do catch after this so you can put another console log which just log us to the now although this actually works perfectly fine as you can see in the console it's considered to be quite a poor style and just really makes our code pretty difficult to read and if we have a sequences of promises to resolve it's actually better just to chain the promises one after the other just like we had before instead of nesting them like here because then this is extremely this is actually quite difficult to read we've got several catch methods and it just essentially defeats the point of chaining our promises and we're essentially just going back to callback Hill so it's much better to just keep it simplified if we revert it back to how it was where we're just chaining the promise prises one after the other so that's a common mistake you should definitely avoid before we move on to some of the other ways we can consume promises I just want to touch on a particular method that can sometimes be useful now this method is particularly useful when you've got a bunch of promises um that you want to fire off or that you want to check and that if one of them gets rejected then it all fails so you're essentially just checking if the promises are fulfilled one of them from that bunch of promises fails then the whole thing fails so that method is actually the DOT all method so let's just take an look at an example of what that looks like so what we'll do is just create two promises so promise one set that equal to new promise and of course have our resolve and we reject and then inside of here we'll just have a set time out function which is just going to resolve so we'll say promise one solved and we'll just make this 2 seconds long so that's one promise and then let's just do duplicate this change it to PR two let's just make this say one and a half seconds long so what we can do now is group these promises together to fire off these resolves at the same time or if they're fulfilled so the way we do that is we'll just grab the promise dot all method and then we'll insert our two promises in here so in an array format so we'll insert promise One Promise 2 and then to consume this we just have the do then method this is going to accept a value we'll just call it data and then what we want is just to conso by log that data so for the first array it's index so it's going to be zero and then for the second one it's going to be index. one and then let's just apply a catch method to this because we'll need it in just a moment so we'll put the error console do log error oh it's console do log so as you can see now after the set time out function is fired off you can see we get both of our promises in one line because we fired it off here in the console so that's how we can consume several Promises at the same time using the promise. All now this is especially handy the second situation where just in case you have say you've got five promises and you want to check that all of them are fulfilled before shooting them off to the console if one of them fails then the whole thing fails so what we'll do is we'll just set a reject here and we'll say promise to rejected and you can see now instead of firing off both of the promises it's only fin off the rejected one because now essentially the whole thing has failed and that's what we can do with the promise. all method so again this method is particularly useful when you've got more than one promise and you just want to know when all of the promises have resolved so for example if you're requesting dat from a different API and you actually want to do some of the data but only when all the requests are successful if one of them fail then you want the whole thing to fail so that's just a method that you might find useful in the future when working with promises so now we've seen how promises work under the hood let's take a look at the final and current stage of how we can work with promises or how we can work and consume promises and that's using the asyn away now asyn way is essentially just syntactic sugar built on top of promises to make it easier to work with asynchronous code so essentially an async function will return a promise and then you can use the await keyword inside that function to await for the promise to resolve and the idea being essentially that the code looks more synchronous and easier to read so let's use that example like we did before where we created chocolate brownies so we'll create four functions that are going to return promises and then we're going to use the async away to consume those promises so we'll create our first function here we'll say con say preheat oven and then we're going to use an aror function and then what we'll do is just return a promise then we'll have our resolve and reject and then inside of this we'll just have a set timeout function which is just going to have a variable inside of it which we're just going to set to pre heat oven is equal to true and then we'll just have a simple if statement so if preheat oven is true then just resolve then we'll just have some text in here saying preheat oven to let's say 180° and then we can also have an else so we'll say failed oh sorry we need to actually put it inside the reject just say failed task and then we'll just make this let's say we'll say 1 second long so we've got our first function that we're going to use or our first instruction we'll just duplicate this couple more times so that we can use some more functions so for the second one uh let's just these quickly the second one we'll call let's call this one this is going to be add sugar and choco chips open this up and just change a few things around so we'll just say add we'll say choco add choco if that's equal to true in here we'll say Place butter and chocolate chips stir until melted and melted and smooth so that's going to be for that function and then we'll have another function and we'll call this one this instruction is going to be add the flour cocoa and salt we'll say in here add salt flour add salt flour and then for the Resolve say add flour cocoa and salt and stir until smooth and then finally we'll have one more which is just going to be baking the mixture and then we'll say bake mixture in there if bake mixture is true we just want to say bake bake for 24 minutes for really gooy Center so that's all the functions or essentially all the tasks that we're going to need again these are all going to be returning promises and now we all have our function promises to bake and brownies we can then use the asynchro we function to write these asynchronous promises in a synchronous manner so like before we might use the dot then we can actually just use the away keyword inside of an async function instead making it look synchronous so let's go ahead and create that function so this function let's call it const bait chocolate brownies and then to make this an async function we're going to need to use the async keyword before brackets and because we've now defined this as an async function we can then use the await keyword inside of this async function so let's do that first with our first task which is to preheat the oven so we'll just say cons task one equals the aw keyword and we want this to return preheat oven and then all we need to do is just console do log this so C we log task one and then we actually need to call this function so we'll say bake chocolate brownies and as you can see it's telling us to pre the oven to 180° you can see we're using the async keyword here to make this an async function then we're using the aw keyword which await a promise being the preheat oven task and then once it's completed that promise but either resolved or rejected then it logs it to the console once we call this async function and you can see it's logging it to the console and again the beauty with this now is that if we do it for the other one so const task two equals a wait so we're going to wait the add sugar and choco chips then log that to the console task two just create a space between these and then we'll do a const task three equals a weight add flour and salt we'll also log that console log that to the console and I'll just comment that out at the moment so it's not far enough so we say task three and then finally we can do one more for the last one so const task for equals a weight bake exture and we'll just console. log this task four and then once that's done console one one last message saying enjoy your perfect brownies chocolate brownies that's important so now we'll uncomment this and if we take a look at the consolle say pre the oven Place butter and chocolate chips add the flour and cocoa bake for 24 minutes for really good Center enjoy your perfect chocolate brownies so you can see now using the async away we're writing asynchronous code in a synchronous manner so first it waits for the first This Promise logs to the console once that resolves waits for the second promise to resolve then the third then the fourth and then finally this last console. log which I think you can agree makes using promises now look much neater much more readable and just easier to work with and as I mentioned it's important to note that these keywords are linked so if I tried using the a inside of the without without defining this function as an async you can see we're getting an error a we is only valid inside async functions so just make sure you make this an async function before you use the await keyword now in regards to handling errors what we can do is actually just use a TR catch block to store all of these promises inside the try and then if there's any errors catch the errors so we'll do try we just grab all of these then underneath the try we'll do a catch got this down and then we'll just and then inside the catch we'll log an error so we'll say console do log the error if there is any errors and what we'll do is actually just create an error so it fails one of these promises so we'll just do it with the first one so we'll make this false and you can see now it's failed the task and just to make it a bit more clearer failed task one so you can see now it's hitting the reject and then it's also just catching that error in the try catch so again you can see how easy it is to write async functions and use them with promises now that's going to be it for part one I hope you guys enjoyed the video and I'll see you guys soon for part two hey there guys welcome to as program in part two in this video we're going to be using everything with part one about the async we fetch API and applying those to three projects as always guys if you like the content make sure subcribe and turn on notifications so you never miss an update so let's just have a quick recap to refresh our memories regarding promises so the evolution of promises started with callbacks because as we learned JavaScript was signal threaded meaning it executes line by line in order we first use callbacks to help us write Ayr code to create an async function and to call an async function we first had to pass a call back as an argument like you see on the screen here but as you can see this quickly led to callback is becoming deeply nested and this led to what we called earlier as callback H so to solve this issue JavaScript introduced promises as part of es6 and this essentially just simplified working with callbacks and made for better syntax so what you would do is you create a promise and then one of the most powerful features of S6 was the ability to chain asynchronous operations together so this allowed us to perform sequential operations in a more readable and organized manner chain promises would use the then method which takes a a callback function as its parameter the Callback function receives the resolve value of the previous promise as its argument and then inside that callback function we return a new promise to continue the chain or if we wanted to have errors we would just use the catch method which as we saw earlier is cool when any promise of the chain is rejected now even this approach wasn't fallproof and chaining would have similar drawbacks to that of just regular callbacks meaning that even chaining could lead to callback Hill does to tackle this JavaScript with the release of so this approach was an excellent way to avoid the previously discussed callback H but async we actually takes this even further with async we you can see it's much easier to read to follow and maintain and essentially just came about as a way to improve the code readability for asynchronous operations and this is the modern way now of using promises now the fetch API is basically just a feature that allows you to make HTT requests to a web server so you can make like get requests post requests put requests or delete request and what's really cool about is that it's built into modern browsers so you don't need any additional libraries or packages to use fetch API and simply put the fetch API just makes it easy to get information from a website and do something with that data in your browser or whatever environment you're working in the fetch API itself is incredibly straightforward to use and offers an unmatched level of flexibility through the use of drama promises for making requests from the web browsers now the fetch API syntax is relatively straightforward all you need is the uro of the resource you want to fetch plus some additional code that tells the browser what to do with the response from the server so again the fetch function accepts two parameters you got the URL to send the request to and this is actually the required parameter you need to give it a URL and then the second option here things that you want to put in the request such as the request method I.E a post or a get but this is actually an optional parameter but we will be using it in this video because it's pretty powerful so as I mentioned under the hood the fet API function actually just Returns the promise so for this example actually we're just going to use the then and catch but later on we're going to be using asyn we because it's much more easier to use manage and it's much more readable now because the fetch is a promise you can add then and catch to handle the response and handle any errors so what we'll do is just uncomment this and we'll say do then then we'll say response and we actually just do this all in one line consult response or we can have the do catch which is going to handle any errors for us now a couple things that you can see here um by default the fetch API is a get request so you can see here it's actually trying to get some information from a remote server and you can see in the response that we've got the status for 404 again saying that it's not found that's because we haven't included a URL which again as I mentioned is actually required for the fetch API now the URL we're going to use for this example is just going to be some dummy API which just returns us some information that we can work with so I'm just going to paste that in here and this is basically just called dummy jon.com so if you guys want to use this for your API examples it's really easy to use and work with so you can see now in the response inside of the console we're getting a status 200 because now we've actually given it a URL and you can see that the body property here contains that readable Stream So to use the readable stream in our JavaScript application here to we just need to convert this to the Json so instead of logging into the console get the response and turn it into ad Json and then obviously we need to add another then method to then log this to the console say data now let's log data to the console and as you can see now the Json method converts the readable stream into the JavaScript Json object so it's just a bunch of key value pairs so it's basically just some information about the um iPhone 9 so you've got the description you've also got the uh ID got some images you got the pricing you've got the rating and now that we have this data object we can use these values in any way we want so for example if we wanted to create a website with which displays loads of products with a bunch of information we can now do that using the fetch API and it really is that simple to use and that's how we send a get request using fetch API and now again as I mentioned we can Now display this data in the HTML now if you want to send a post request instead of a get request we need to define the second argument when calling the function which is the option object which is this object here so inside of this we need to Def find a method property and then specify which request we want so the method that we want is the post method now when you send the post method we also need to set the request header and the body properties to ensure smooth process with the request so for the header we need to add a content type and then set that to application SL Json so we'll say headers and content type and we want this to be an application Json and then we need to specify what data we want to send we're going to need to create a body property in Json format so after the headers we have the body and then use the Json stringify method to send the data through so if we actually want to post something with this dummy text when regards to the products we actually we actually need to change this to add change this to add after the forward slash you can see it's already actually adding one extra product so you can see it's got an ID of 101 and the reason it has that is because products itself if I just get rid of the ad you can see we've got a total of 100 products so the first product is obviously that iPhone 9 that we had because we specified the first product in our example which was the iPhone 1 so if we want to add to this you see the ID now you see it's already actually been added and it's given it the ID of 101 now we want to give it a few extra properties like a description a price an age and a rating so we'll say say description iPhone 19 and then as well as the description let's also add a price this is going to be say 1,000 and then let's also do a rating and let's say it's n out of 10 so you can see now we've successfully added a new item to our products here using the second parameter of the fetch API which is the option object so all we need to do in this is just specify which method we want to use we need to include the headers so the content type we want to create is an application. Json and then in the body is where we include all the data that we want to add so that's how we can create a post request let's now create a put request which which we're going to use to update an existing product so we'll just grab our first product again and then create a put request and as you can see uh let's change it let's change the title actually to the iPhone 19 and then in the description can say changed to iPhone 19 and if we open up the description you can see spell that wrong you can see now we've updated our product here using the put method and then last what we can also do is actually just delete this product entirely with a delete request and we get rid of all this stuff don't need let in this to delete and that's how we can delete a product so now let's go ahead and use the fetch API and work with it using a syn8 so just get rid of all this I'm just going to create a function say uh con get all products it's going to be an async function and then let's just first create a variable which which is going to be equal to our fetch API so say const response and this is going to equal use the aw keyword Fetch and we're just going to paste our URL in here which is just going to get all of our products and then we want to turn this into Json so we'll say cons Json is going to equal another promise which is going to be our response. Json so we get our response in a json. format and then we'll just console.log h on so you can see how easy and much more readable it is to work with a syn away when working with with promises so we'll actually put this in a try catch so we'll paste that in here we say catch error so if we need to catch any errors and then now let's call this so I get all products and as you can see now if we open this up getting an AR of 30 of the products 30 out of the 100 products see all the products we get in there using the async away and using the fetch API and again you can see how easy it is to read and how easy it is to work with using asyn we combined with the fetch API so now we've learned about the fetch API and all the different requests we're going to combine the fetch API with a syn away and we're going to be creating three projects using these two topics like I said the first project we're going to build here is this Chuck nor jokes API so if you see here we've got a title got a paragraph section here and then we've Al got this button as well as this pretty funky Chuck Norris image quite simply all this is going to do is just load Chuck Norris jokes so if I click on load another you can see now it's loading us of Chuck Norris jokes so when Chuck Norris makes cupcakes the frosting on them is blood just not his very good and then if we load another one one time Chuck Norris was crossing the street without looking both ways he ran over a car again another good joke that's what we're going to be building in the Chuck Norris API we've got Visual Studio code open here so fresh empty project we've got an index.html file a style. CSS file app.js file and then also got the image folder which has this image of CH Norris the first thing we want to do in the index.html is just build the structure of the project so we'll just say here truck Norris jokes inside the body we'll have a div with the ID of container which is just going to house everything and we're going to have H2 which is going to say Chuck Norris API then inside of that we'll have another div which is going to contain our joke so we'll say joke container paragraph and this is also going to have an ID of loading joke and this is just going to say press load another for joke and under this our button so it's going to hold joke BTN it's say load another and then underneath that we'll have our image which is just going to point the image folder Chuck so Chuck moris photo then we'll also give this an ID of truck and then we'll just open this up with live server so page here obviously it's got no styling at the moment do that next so first we need to link di sheet style. CSS and then while we're here we also link script file so now we're ready to install our app here and then we'll work with Fetch and as init so we can retrieve Tru J so we'll head into the Styles sheet and then first we'll just Target everything so we'll say box Siz in Border box set the margin zero padding to zero and then let's also set the font family to monospace and then we grab the container and then we'll set the position of this to relative because we're going to be positioning the chuck noris image um absolute in a moment so I'll set the background color of this to be # 1 F1 F1 F1 sorry just one F and then we'll make the height of this to be 100 vort Heights we'll set the color everything to be lime green and then the font size let's make it 1.5 six R actually it's nice and big maybe a bit bigger actually 1.8 and then we'll text the line everything to the center overflow let's just set that to Hidden just in case and then we just add some padding on the top and bottom and zero on the left and right and then let's just make sure the width is 100% the container then we want to grab the par graph of what the joke actually loads in um we'll say container p and we'll say line height for that is going to be 1.2 R sorry M and just add a bit of margin top to this so 20 pixels and let's also add some margin bottom of 10 pixels font size let's make it 1.3 Rim that's too small let's say 1.8 nice and we set the width of this to be 100% of the container let's just add a little bit of pattern on the left and right this do look good and then as for the container itself we want to make this a fixed height so we say J container the div which wraps around this the joke we'll say set the height of this to be 200 pixels and then we'll Target the load button uh so we'll say uh this is load load joke etn this is going to have a background color is actually going to be transparent uh let's say border one pixels solid line green uh let's Al set the color of this to be lime green uh set the cursor to the pointer let's set the font size to be 1.4 R see what that looks like maybe a bit bigger let's say 1.6 that's good uh add some padding about 10 pixels uh let's set the text to be uppercase and then let's set the margin to be 35 pixels top and bottom and then Auto and Auto on the left and right and we actually need to display this as block that centers everything puts the button in the right place let's focus on the Chuck Norris image so this has an it of trus image so this is going to have a width of 100% we'll set the position of this to be absolute say bottom zero right Z and then left zero so that's looking just like the example we've seen all we need to do now is just be able to load the jokes once we click on this button here so we'll do that with a fetch API and asyn away so we'll go in the appjs we just create a variable say load joke it's going to be it's going to equal an async function which is going to be an arrow function need to make a function and then we'll use the try catch so inside the try create a variable which is going to be let's call it Chuck Norris Fetch and this is just going to equal of course the fetch API and then paste API or the URL in here and then this obviously takes another parameter inside this parameter we're going to give it a header and this is going to be a head off for application SL Json so that's the um waiting for the fetch then we need to convert this to Json so we say const joke data it's going to equal thewa again and Chuck noris fetch Json which is going to turn it to Json format for us and then we need to get the actual value from this joke data to display in our app here so we're going to say document. get element by ID we're going to Target the load in joke ID then we're going to taret the inner HTML which is going to equal joke data do value which is going to be the joke and obviously we'll have the catch uh which is just going to cons log an error for us if there is an error and then lastly to get the joke we need to Target the button here and add an vent list now so when we click on this loads this function here which is an acing function which is just going to get a random joke for us or random Truck N joke for us say document do get element by ID we want to grab the load joke BTN and add an event listener on this it's going to be a click event and we're going to Target the load joke function this should load us a Chuck joke when we click on this so if I click on the load another joke so you can see it's giving us a joke straight away if I click on it again it gives us another joke and it'll keep giving us random jokes about Chuck noris so that's the first um project that we created really simple to create a really simple use of the fetch API just turning it to Json and then changing it in HTML whenever we click on the button using an event listener let's now move on to the second project which is going to be a weather app all right guys so this is going to be the second project that we're going to be building which is going to be this weather app so at the top here you see we've got a search bar so we type in um any City within the UK and when we press the search bar it's going to give us some information about the weather for that particular City so it's going to have the date it's going to have the city and then it's going to have an icon which displays what type of weather it is describe the weather also going to have the current temperature and it's going to have some extra information here so the highs and lows for that day and then if we typ in another city let's say Newcastle we hit enter it shows us the data for Newcastle so in Newcastle it's currently raining temperature there is 16° highs of 18 and lows of 15 so this is the weather application we're going to be building in this in this part of the video so we've got our blank canvas here again we start our async projects got a body and we've got our Bare Bones HTML we're go inside the body and we're just going to have a container class and this is going to be called app inside of app we're going to have the search bar so we just put come in here say search bar and this is going to be a div with the ID of search bar and then we're going to have an input which is going to be the type of text we going to have the ID set that to search bar input and then we'll just have a placeholder on this so by city underneath that we're going to have our button just going to be which is going to be that search icon so we'll give this an ID or search icon and this is going to be an icon we're actually going to get from font awesome so we'll paste that in here and then we'll also paste font awesome CDN so there you go we get our little magnifying glass now to represent the search bar so there's the input so we can type in a city and now we've got the button to submit the data that we type into here so underneath the search bar I have the date and the city so we'll give us a rapper class of in paragraph ID of date and underneath that we'll have a three which is going to have the ID of City then underneath that we're going to have the description so the description of the weather have an ID Des description underneath that we going to have Temp and then finally we're just going to have that animation at the bottom which is the high and the low which is this data here going to say let's say extra info so so this is going to have an ID extra info then we're going to have two div columns in here and then also another class which is going to contain a header and then going to contain a paragraph which is going to show that extra data we'll say high H5 we say highs and then we'll have a paragraph the ID temp Max duplicate column lows we have 10 minut so just to go over that again we're going to wrap the whole thing inside of an rapid div which has the idea of app then we've got our search bar div which contains our input we've also got a button which has a sort of search icon which will get from front awesome so just copy and paste this link inside the GitHub which I'll leave in the description below so then you can use the icons from front awesome so that's our search bar then we've got the date in city which is just this data here so the current date of that day and then the name of the city that we search then we've also got some description so this is going to be the description that you see here so the rain and then the temp is obviously the temperature here and then we've got the extra information which is the two columns so the highs and then the lows so that's all the HTML we're going to need for this section let's just now link the script tag the app.js and then this also link the sty sheet so we can work on the CSS so let's go ahead now install this so we head inside the sty sheet and this is going to be quite a large Styles sheet so let's get started we'll grab everything and we'll say box size in to be border box set the margin and Pad in to zero and let's set the font family let's say it to monat and then if that fails set to s z so let's grab the app which is the container we're going to set the position of this to be relative set the width to 414 pixels we'll set the height to be 420 pixels so display block margin let's set that to Auto so it's in the middle and we'll say text the line put that to the center give it some padding on the top and bottom overflow set that to Hidden and then let's give this a border radius of about I say about 45 pixels and then the background image for this is going to be a color a linear gradient so I'm just going to copy and paste it in here cuz I'm not going to write it all out because there's quite a few values so there's our app there so that's going to contain everything we'll Now work on the search bar so we'll grab the search bar we set the value to display flex and let's set the color to be white and then we'll start the input so we'll say search bar input this is going to have background color of none we'll set the border of this to be none so we'll basically just strip it of all its uh styling so we'll set the outline To None width let's make it about 90% let's actually add some padding for the search bar on the left and right so we'll say padding zero on the top and bottom but 40 pixels on the left and right and then let's add a bit of margin the bottom of this too so about 30 pixels and then let's also just set the background of this it also be transparent set the color of the text to be white and then let's just add a little Bard bottom of this a bit solid one pixels make it let say light blue so that's starting to take some shape now let's also change the um input text or the placeholder so we'll Target the placeholder attribute and we'll say color let's make that white and then opacity let make it slightly see through and then for the icon we'll say uh let's target the icon and then we'll remove the border for this we'll make the background of this transparent to we'll set the color to be white and then we'll make font size of the icon 1.5 Rim so it's nice and bigger um let's now Target the extra info here so we'll say extra info position this at the bottom so we'll say position absolute say from the bottom about 5 pixels set the width of it to be to be one 100% and we'll set the display of this to be Flex justify content space around set the color to be uh let's say make this white as well and then let's add some padding to the bottom of this 30 pixels and then we'll Target The Heading and the paragraph so we'll say extra info H5 we'll set the font size of this to be a bit bigger so 1.1 R and then we'll also make this uppercase so that's the extra info um and let's also add a bit of margin to the top of that um app here uh let's say about 20 pixels just to get a bit lower down so now what we're going to do is actually go and fetch the data first because we can't see the data at the moment so I don't want to put the styling on until we can actually see the data or how we can input it inside of our app here so we'll go ahead and do that first now for this API we're going to be using the um open Weather API now this actually requires a um API key but all you need to do is just sign up to this and then you'll get your free API key to use to work on your projects and then all you need to do is just paste it where you need to put the API key to then retrieve the data which I'll show you guys in a moment anyway so we've got our API key there so I'll just copy this and I'm just going to paste it in there as a comment so we'll go back to our app here and the first thing we want to do is actually Target some of the stuff here that we want to display when we get that data so we want to Target things like the date the city the description the temp we want to Target the temp Max here so we're going to need to create variables for them so we'll say const We'll Target the date first this is going to equal document. get element by ID and this has the ID of date so we've got that then we're going to need one for the city so document. get element by ID this has the ID of city and then we'll do the same for for let's do the same for temp also do the same for temp image which we'll work on in just a second so this has the idea of temp and then and then I actually forgot to include the temp image div so let's just call this image or weather image doesn't really matter and this is going to have the ID of temp image so we'll Target that here then we want to Target a description description and then just a couple more so the max the temp Max and the temp Min so we say const temp Max equals document do get element by ID this has the ID of temp Max and then obviously we've got the last one which is min now to display this date which has got the uh month the actual date and then the year we're going to need to create an array which is going to have all the months of the year so we can set it to that depending on what the current dat is so first we'll just do con say months this is going to equal an array of all the months so we got January febuary March April and I'll just paste the rest in because it's too long to type so that's all the months of the year we then need to create a new date object so we can Target the month and the day as well as the year so we'll say let grab the date equals new date object so a new instance of that say date object actually so we've got the DAT object and let's grab the month from that so we'll say this is going to equal months Target the date object dot get UTC month and what this is basically doing is just targeting the date object then using the fun of the date object to get us the month which is inside the month's array so it's just going to essentially equal whichever month it is and then display that month so now we've got the month let's do the day day it calls the date object get UTC date plus one so that's the day and then we'll get the year so let year equals date object. get UTC full year and then all we need to do is just display this in our app here we say date do inner HTML is going to equal month the day and then the year and it's currently not displaying it so let's check out the console Target the actual dat object so as you can see now that's displayed so obviously we haven't got any styling on this but we'll do the styling in just a moment let's actually fetch the data now to work with this so let's first we actually first need to Target the whole app say const app equals document. getet and by ID probably should have put that at top but it doesn't matter it says the ID of app and then we'll say const get weather it's going to be an async function and we're going to have a try catch so we'll say const weather data fetch this is going to equal the await fetch API and we're just going to paste the URL for that in here so we'll past the um open Weather API URL in here so at the moment we're hardcoding the city that we put in but we're going to make this dynamic in just a moment but we just want to display some data so obviously we're going to need our app ID so we got it set up here in there also put the catch in here do log the error in case and then obviously we want to put some headers in here this is going to be exactly the same as the other one this is going to be an application Json and it's not liking something so we need to put the head up inside of here and then we need to add a header and this is going to be application SL Json so that's our fetch API we a you now need to turn this into Json format so we'll say const weather data equals await weather data fetch. Json so that turns that into Json format so now we can log this to the console see what it returns us weather data so let's call This And as you can see now it's returning us some data so it's returning Us London and then it's got loads of other properties that we can work with so it's returning us the temperature and then also returning us things like clouds the coordinates it's also got time zone the actual weather itself so we've got things like the cloud the icon that will display um the description that we're going to be using so all of these properties now we can work with and then display in the front end so now what we need to do from here is Target all of these variables that we created which targets all the IDS of all the HTML elements and then use the properties that we get from the fetch to change in HTML of these so we can display them on the app here just like we've done with the date so we'll First grab the name so it displays the city name so we'll say uh city. inner HTML it's going to equal let's use back Texs and this is going to Target the weather data and it's going to Target the name if I refresh this we should now get the name you see we got London let's now do the same for the image so the way we're going to do the image is we're going to grab the variable of 10 image then we're going to grab the inner HTML and then we're actually going to create an image tag which is going to have the source attribute which is just going to equal the open weather map URL which is for the image so I'm just going to paste that in here and that's going to grab our weather icon and then we'll do the same for the description so say inner HTML and we're going to Target the weather data again say dot weather and then we're going to Target the index number which is zero and then we're going to Target the main so you see we get clouds so just to see what that looks like we fetch the weather data we go inside the weather property we go inside the index number of zero it has the property of main which is the clouds which is our description and next we want to Target the image so we'll say temp image or not the image the icon that we're going to be displaying we'll say dot in HTML equals and then we're actually going to create an image tag in here and then set the source attribute to the open weather map URL and then put the custom data that we fetch from the API so we get the correct icon so this is going to be the image tag I'm going grab the source attribute and this is going to be equal to that URL so it's going to be HTTP open Weather Matt or image and then we're going to grab the custom data from the fetch API and then this going to be the weather data Dot weather property and we're going to grab the index number of zero and then we're going to grab the icon and we'll say at let's make it 2x. PNG then we'll close this off and you can see we're now getting that icon and the way this actually goes and gets that icon is that we're grabbing the weather data we're getting the Json response and then we're go inside the weather property going in the first index and then we're grabbing the main property which is is equal to clouds and we're grabbing the icon which is a specific string which will display the clouds icon or whatever icon we get from the response so that's how we include the image and then all we need to do is just include the actual weather as well as the um highs and lows so we'll do that here we'll grab the temp do inner HTML and then this is going to equal a H2 and we're going to round this to the nearest number we'll say math. round and then Chuck that property in here so weather data main. temp and that's going to be our temperature there and then let's just put degre Celsius in here close that off and then we'll do the one for temp Max start inner HTML and this is just going to equal pactic weather data do main. temp Max and then we'll do Min and then we'll just get the degrees Celsius in there for those two so now I've pretty much got all the data the only thing that's left to do is just make the data here Dynamic so when we type in a name it will display that name but before we do that let's just go ahead and finish the style it for this so we head back in the stylesheet let's first style the date and the city so this say the idea of info so let's just do that after the input there we'll say info so we target the info and let's let's make line height of this to be 0.5 room make the color white and then let's target the H4 which is the city name say font size let's make this pretty big just say 40 pixels this is a H3 I think this is actually a H3 not H4 and let's make the font weight let's make that bold let's text transform it to uppercase and then let's add some margin there so margin let's say 2 m say5 m get maybe a little bit bigger there you go and then we've got the icon let's target the description so this is going to have the ID of description let's just make this text transform set this to uppercase let's also change the color of this to White probably because it's all white we could literally just Target the color in the um global global settings but doesn't really matter for now but you could do it that way because it's pretty much all why so the last thing to Target is the actual degrees itself so the temperature so we'll go underneath the description we'll grab the temperature temperature and this has just the idea of temp so we say color make this white font size let's make it about 40 pixels see what that looks like too big let's try 20 pixels be small let's try 30 looks good add bit of let's actually make the icon a bit smaller we just remove the um so we'll just remove the size property here so we'll just remove the size in the URL there for the source so that just makes it smaller cuz we don't really need it that big um cuz we're more interested in the temperature so let's add some margin top to that say 20 pixels yeah it's looking much better um so that's pretty much it for the styling I think now all we need to do is just make this Dynamic so when we type in a city name it will display that name and display the name of the city the date and then also the temperature as well as some description and an icon so this is actually really easily done all we need to do is just Target the value attribute of whatever we type in here in the input so we get that then we dynamically add it to the fetch API in here so we change this to um whatever the variable is going to be and then it grabs the input value of what it inserts and uses that value for the Fetch and we'll get the data for the city that we want so we'll just go about this say const city name equals document do get element BYOD I'm going to get the search input search bar input sorry I think it's got the idea of search bar input yeah so just copy that to make sure so we want to grab the value attribute of this so whatever we enter in into our input here is what the value is going to be in this case we want it to be a city name and then to make this Dynamic and then where we've hardcoded London we need to add the city name in here but we actually need to put this in back tick so that works now it's currently going to return us under five and it's not going to be able to get us the data because it's calling this right now so it's fetching nothing cuz there there's no value that we've inserted inside of our input here so we actually need to get rid of it here because we don't need to call it we only need to call this when we hit the search bar so we go in our index.html and then where our button is we add an on click attribute so on click and that's going to be equal to our fetch API variable so get weather uh spell click wrong so now this button has that has the on click attribute which is going to call our get weather fetch API and it's going to retrieve us the data that we want so if we type in a city name in here so we just type in London this now that we input here is going to be equal to this value which is then going to be equal to the parameter that we need inside of our URL to retrieve us the data so now if we search this you see we're getting London again with all the data that we had before when it was hardcoded if we want to get another city let's get Ken give us K and then we'll do one more and then let's say glasgo it returns us the data for glasgo so a really cool Dynamic application using the fetch API and asyn we we're now going to move on to our final project which is going to use the Pokémon API as for our last project we're going to be building this Pokedex which if you're familiar with Pokémon you'll know what this is and what we're going to be able to do here is that if we type in a Pokemon name it will display that Pokémon image for us so we've got Charizard as our first example let's say if we want to display Bulbasaur we'll just type it here bulb saw and if we enter that we're getting an image of bulbur now in the Pokedex screen and whatever Pokemon we type in here if it's inside the Pokemon API which we're going to be using in this example it will fetch that image for us and display in the screen so that's what we're going to be building in our last project here so we've got a blank HTML file here and we've got our blank web browser the first thing you want to do is just link our two Styles sheets so we say style one and then style two and the reason we're doing this is because it's going to be quite a lot of CSS styling here so I want to separate the one half of the Pokedex style it in one Styles sheet and then style the second one in another Styles sheet and then lastly I'm just going to copy and paste the front awesome CDN in here so we can use the icon for the search bar so that's all we're going to need for that now inside of the body we're going to wrap all of this inside a container and then we're just going to have a comment here saying first half of poex and this is going to be this half here so we'll wrap this in a div with the ID of Poker x one and then insert the Pokedex one section we're going to have another section which is going to house the screen here and then all these little buttons at the top here and then we'll have a div which is going to house all of these buttons here so we'll build the first section here first so we'll just call this the top and then we'll have the section for this bit so we'll go top square square right and then the top square we have the circle we have this circle here so we'll give this a ID of button white and then inside of that you can see we've got another Circle so we'll give this an ID of button blue we've got that section there then underneath that top square another section which is this section here which is these three buttons so that's going to be really simple it's going to be top square square top square two and this is just going to have three divs one is going to be but turn red duplicate that two more times and then button green and then button yellow and then we'll have the screen underneath this so we give this an idea of screen and inside of the screen you can see we've got a red button so we'll give it an idea of button red screen and then we've got two bars that you can see here so we'll say of bar bar one and bar two and then you can see there's also like a mini screen in inside of this which is going to have the image so we'll say screen two inside of that we'll have image tag we'll leave the source attribute Mt at the moment we'll work on that in a bit we'll just give this an ID of Pokemon image don't need the alt so that's the top section of the first half let's now build a bottom section so underneath the div of top we'll go underneath that just put common here as well top half botom so this is just going to have the idea of bottom and then it's just going to be a bunch of divs which is going to represent all of these buttons here so first we'll have one for the blue turn blue be an ID say two because we already have an idea of button blue then we'll have one for yellow and then we'll have one for the d-pad it's going to be two actually because we're going to fix these in The Styling so we'll say dpad or zontal and then d-pad vertical and then finally we have one more oh sorry two more actually we need to select we need these buttons here so that's going to select and the start so that's the first half of the Pokedex we're now going to move on to creating the hinge and then the second half so underneath the top half here just fold that we'll have the hinge which is quite simply just going to be a div the IDE of hinge and then second half of poker deex this is going to have a similar sort of layout to first half of the poex so we just call this poker de 2 and in this you can see we're going to have like a sort of hidden div here so it lines up with the first Pokedex so if this was to fold in a rolloff example it would look consistent so we'll just have the ID of top square and then this going to have a div hidden and then we're going to have the search bar underneath this which is going to have the input type text and this is going to have the ID of search name and then placeholder we'll say and then we'll have a button underneath this which is going to have an icon class with a class of fa Das fa- search and we'll set the area and we're going to work on this button in just a moment we're also actually need to give this an ID of search PN so now there's going to be three other sections so we're going to have the sections for the blue squares this section here for these two buttons so after the search bar we're going to have these three sections here so we got one section two section three sections which again are just divs so we'll do this bit here which is going to be using the grid layout so we'll go underneath the search bar go we'll wrap these in a div called section two and then we'll create divs for each of these sections so there's going to be eight different boxes so eight divs we'll give the class of squares so we'll do this eight times so 1 2 3 4 5 6 78 so that's going to be for it for that section then we've got third section here which is just three divs so we'll give this we'll wrap this sorry in a div of section three and then we'll have a diff for these two buttons of the Pokedex we'll give this let's give this uh of two squares then we'll have two div with the ID of two and then we'll have one for the yellow button so we'll just give this an ID of bottom yellow BT and then lastly we have this section here which is just two divs so we'll say section four and we'll have two divs with a class of bottom two so that's all we're going to need for the HTML if we head into our browser here you can see how much styling we're going to need to do for this because all we've got right now is the search input and the search bar icon button so as you can see I've split the Styles so we've got style one which is just going to be for the top section of the Pokedex so the Pokédex one which is this section here and then style two is going to be styling this one so we'll go ahead and crack them with that now because it's quite an extensive stylesheet so first we're just going to grab the body and this is just going to Center our Pokedex so display flex line items to the center Justified content to the Center Height will be 100% width will be 100% And then let's give a background color of this to say FC e 386 and then we'll just give a pad on top of this let's say 20 VH so you can see now it's centering our Pokedex with that let's grab the first half of the Pokedex and style that so we'll say it's got the ID of Poker x one which is this ID here and this is going to have a width of 350 pixels height of 520 pixels set this display of block margin set that to Auto and then the background of this is going to be that red color so F c22 43 so there's the first half of the Pokédex and we'll set the Z index for this to also be three and then we'll Target the container of top which has a width of 75% we also set the display to be block and say margin Auto height say 50% so the position of this to be relative background of none border radius 0% and then we'll set the Z Index this to be one next let's target the top half of this Pokedex so it's this ID there so we're going to position we'll first display this as block um let's give it a width of 55% margin let's give it auto give it a dark the darker background color 50 625 so Z index of this to be one and then the height of this to be say 25% so there's our little block there and then let's position this to be absolute and then from the left say - 16.5% so that puts it in the little corner there now let's target the buttons inside of this so we got the button White and the button blue so we'll say button white we give us to say background color of white border radius of 50% uh let's give it a width of 50 pixels height of 50 pixels display of block margin say Auto a little bit differently so position absolute from the top say about 10% and then from the left about 5% and then a z index of two and then we'll Target the blue the blue circle inside of this next so this has an ID or blue this is going to have a background color of a light blue so 71 CD F4 border radius so this is going to be 50% width let's make it 85% height also 85% display of this to be block margin be zero and then we'll do some more positioning absolute so the margin should Beal to so we'll say from the top about 8% and then from the left about 3% and we'll have a z index of three so it's on top of everything and now if we' got the Border radius so border radius so 50% from the left actually sorry let's push it a little bit more to say 8% so it's more Central it's looking good now next we'll Target the uh top square here which has these three buttons there um but firstly I forgot to actually put this inside of top square div otherwise it's going to look really funky so let's do that first make sure you do that and then we'll grab the ID of top square two and we'll set the display of this to be block the margin to be Auto let's set the background color of this to be same color there dark red set the zindex to three and then we'll set the height to be 60% width to be 162% and then we'll position this a little bit differently so position absolute and then from the left let's say 80% so that pushes that along and that completes that top section there so now let's just Target those buttons so first we'll Target the red button so this has a IDE of button red so this will have a background color of a lighter red Oro radius of 50% width will be 15 pixels height will be 15 pixels set the display to block and then position this absolute let's also get rid of let's also set the margin to Auto and say top 45% left - 18% and Z index set that to two so that's the red button there copy let's just duplicate this now for the other three because they're quite similar so it would be button red and then button green and button yellow so they're going to have some different styling so button green is going to have a different color of course so 5 8 PB 69 button yellow is going to have FFC f54 now obviously the position is going to be a little bit differently so for button green it's going to be minus 8% and then for button yellow it's 2% so there's all our buttons there that's completed the top half let's now do the screen so which is this section here which is going to have the picture so we say body of screen be position absolute background color of slightly grayish color E6 e 6 E6 we set the display of this to be block say margin Auto border radius of 5% say position of this to be absolute uh let's also see this now so let's set the height to be 75% and the width to be 100% so we need to do now just position this a little differently so we'll say from the bottom say minus 10% oh minus that positions our screen let's create the second screen inside of that screen two so the position is to be absolute it's actually pretty similar to this one so paste the details in there and then we'll just change a few things so the width of this is going to be 80% and then top is going to be 10% left is going to be per and the background of the color of this is going to be a little bit different so it's going to be EF E5 F6 FC and the Border radius is going to be a bit bigger so 8% so there's our screen there so we nearly completed the first half of our Pokedex so now let's target the bottom section say bottom set the width of that to be 100% display of that to be block margin set it to Auto height 50% uh let's set the Border radius for this to be let's just say something small like 5 pixels and then set the position this to be relative now we're just going to Target the buttons of all of this so we've got the blue button the select and start d-pad and then this button here but first let's just do the start which set the cursor to a pointer set the width to be 15% set display of block margin 10 pixels Auto the 10 pixels top and bottom and then turn on the left and right set the height of this to be 8% then this absolute so say from the left we'll say 48% and then from the top say 30% and then let's just give it this color so background color it's going to be f071 147 so there's our select let's add a border radius to this of 30 pixels and then we'll do the same for the select so it's quite similar so we just duplicate this actually do the select and the select has a different color so 58 EB 69 so it's like a greenish color and then from the left it's going to be 30% so it's next to the the start button so that's the two buttons let's now the two other buttons so the blue and the yellow one so this has the ID of button blue two this is going to be a cursor pointer a background color of 169 7 99 so the Border radius to be 50% width to be 50 pixels to be 50 pixels set the display to block margin again to Auto and then set the position this to be absolute and then say from the top 29% from the left 5% and then the Z index to be two so there's our button there we'll duplicate this for the yellow one so button yellow two this will have a more yellow color so FFC 54 and then the top is going to be 59% and then from the left it's going to be 25% showing oh sorry actually didn't duplicate this so again this Sor is going to have the color of FFC F 54 be that yellow color and then from the top go again so 59% the top and then 25% on the left and let's actually make the width most to be 120 pixel and the Border radius is going to be just 5% so there's that button there all that's left to do now is just include the d-pad so go underneath this and we'll grab the d-pad horizontal and this is going to be again a cursor pointer background color this is going to be a slightly grayish dark grayish color 40440 height is going to be 80 pixels the width is going to be 23 pixels and then we'll position as a we'll set the display sorry to block again set the position of this to be absolute we'll say the width and sorry and then we'll say top is going to be 32% from the right percent and then let's just duplicate this for the other d-pad so this is d-pad vertical and then of course this is going to be a little different so the width of this is going to be 80 pixels and the height of it is going to be 23 pixels and then of course from the from the right it's going to be 8% and then from the top it's going to be 42% so as you can see that completes our Pokédex I'm just going to make the screen two here to be bit of a less of a border radius so as you can see now that's completing our first half of the Pokedex which is this section here so it's looking pretty good now let's move on to the hinge and the second part of the Pokedex so let's move to the second style sheet the first thing I'm going to do is just grab the container which is wrapping around all of this and we'll set the display to flex and we'll grab the hinge and this is going to have a width of 20 pixels background color of D5 0 625 and we'll set the Border radio for this to be let's just say five pixels set the height to be 470 pixels and then margin top to be 45 pixels so there's our hinge now let's target the second Pokedex or the second half of the Pokedex Pokedex 2 set the width to be 350 pixels set the height to be 4 50 pixels so the display to be block margin top let's make it a little bit lower so 70 pixels so it looks consistent so the background color to be FC FC 2243 Z index 2 3 set position relative we have a bit of an issue here and that's Pi the margin top not margin all the way around and then now let's target the hidden element which is this section here so it just looks consistent with the other side of the Pokedex so this is so this has an ID of hidden set the position of this to be absolute we'll set the background color of that light red light to be 30 pixel I'm going set the width to be 60% and then from the top let's say minus 30 you see now it's looking more consistent let's now style the search bar we'll grab the ID of search bar so the background color of this to be black display of flex height of 50 pixels and then say margin top let set that to 60 pixels margin left set that to 20 pixels so it's looking a little bit funky now but we'll fix this don't worry so let's target the name so search name it's going to have a width of 90% so the border to do none background color to a light gray so 444 set the color of the text to be Azure outline let's remove it again let's make the height 50 pixels to the left and then font size say 1.6 r so that's the search name let's also grab the placeholder style that so this is just going to add font size six frame and then let's just add a bit of margin left to this too of five pixels and set the color of it to be light gray so now let's target the button it's going to have a color of white a background color that dark or sort of light gray set the height to be 52 pixels and then say the font size for the icon let's make it 20 pixels so that's it for the search bar and the search button let's now Target the second section which is the squares here so this has the wrapper of section two this going to have height of 100 pixels a width of 80 p a width of 88% margin set it to 20 pixels set display to grid and then grid template columns are going to be repeat of four columns and then a width of one fractional unit and then we'll say grid cap of five pixels squares so this has the ID of squares all they all do all of those divs sorry the class of squares we set the background color of that to be Aqua ni squares so now Target third section so this has the IDE of section three set the height of this to be 70 pixels the margin to be 10 pixels and then display of flex Justified content is going to be space between squares to squares you have the two squares container so width is going to be 100% and display of flex then let's target those two dibs which have the class of two so this just going to have a background color of beige width is going to be 60 pixels and the margin of say five pixels get the yellow button so yellow button so the width of this to be 50 pixels height to be 50 pixels background color let's make it like a yellowy orange FC F 54 then margin right 30 pixels margin top to be 10 pixels and then the Border radius to be percent and it's not showing cuz it's got a different ID let's make the Border radius a little low that one see what 40% looks like now let's go back to 50 and then set that be 60 pixels and the height also be 60 pixels so that's looking better now let's do the bottom two two buttons these sections here so grab section four so the width of this to be 91% margin to be 15 pixels display Flex and then justify content space between and then we'll just Target those two divs so section four bottom two set the height of these to be 40 pixels width to be 130 pixels and then lastly just grab the back color which is going to be that's 4404 at 40 40 40 so that completes our styling for the Pokedex now let use the fetch API and async Away to then type a Pokemon name in here and then display the image on the screen so we'll head inside the app.js and we'll say const get Pokémon equals Ayn in and then we'll put this in a try and we'll say let's first get the data so const Pokemon data equals be await grab the fetch API use back ticks and then we'll paste the uh Pokemon API inside of this so this is htps uh and then it's called Pokey api. Co SL API slv2 for version 2pokemon and then after this Pokemon we have another slash which is where youd put the Pokemon name in the parameter but we're going to be making this Dynamic so we're going to put in the actual Pokemon name that we type in here so it's just going to follow a similar sort of thing that we did in the weather API so let's just do some validation here so we'll say if the Pokemon data is not okay so using the exclamation mark at the start there then we'll just throw an error saying new error could not find Pokemon so after that validation we'll just fetch the DAT turn it into a Json format so we say con data equals a away then we'll grab the Pokemon data which we'll be awaiting and then we'll return it as Json and then we want to grab a property inside of that which is going to be the Pokemon image say const pokeon image is equal to the data that we return the Sprite property. the front default which again is just a property inside of the data that gets returned back and then we need to display this image so we're going to grab the image ID so display Pokemon equals document do get element by ID Pokemon image and then we're going to grab that which is the image and we're going to say display Pokemon grab the source attribute of that Pokemon and set it equal to Pokemon image which change the name there slightly and then we need to display this so we're going to have to set the display Val the star value of block so we'll say display Pokémon do style dot display is equal to block we'll set the catch on this we say error console.log error if there is any errors and then all we need to do now is just assign the value the input value that we get from this input and set it to the um the parameter of the Pokémon API so we'll go above this say cons Pokemon name is equal to document do get element by so really similar to how we did it in the weather API this is the search name input so uh this input here we want to grab the value of that but also set the value that we put in here automatically set it to lowercase so using the lowercase method so every time we type in a value it will always turn it to lowercase and then all we need to do is just insert it into this parameter here pokon image sorry Pokemon name so now we have that parameter so whatever value we put in here will display our Pokémon inside of the screen there and we actually need to call this method in the search bar here so we'll go back to the index to HTML inside of the button we'll have it onclick and we'll set that to uh whatever the so it's get pocorn method past that in there and now if we click on the search if we type in a Pokémon so we'll put in Bulbasaur again if we search that now you see we getting that image of Bulbasaur we just need to start this now so it fits the whole screen so we'll say poker Pokemon image we set the Z index to 1,000 just so it's always on top and set the width to 100% And then let's set the height to 100% see now it's working just as our original example and if we type in another Pokémon so let's say Charizard and hit enter you see now it's playing as Charizard Pokemon and whatever Pokémon is inside the Pokémon API will now work so that's it for our last project I hope you guys enjoyed this tutorial and I hope you learn a lot about how we can work with fetch API using async away and working with apis create cool projects