Unlock Efficiency with Our Quote Generator API

Quote generator api

[Music] hello everyone and welcome to another javascript master video today I have something interesting prepared for you today we are going to build a full react application from scratch this application is going to use an API to actually display some data and that data is going to be advice today we are building an advice app using a device API so what do we have right there we have a nice motivational City type background and then in there in the middle we have random advice some are going to be funny some are going to be useful but yeah let's check it out so never run a marathon in Crocs yeah that's definitely advice and yeah you should never actually run a marathon in Crocs let's go for some more in here we have some nice slight button animation right there so let's show that out your smile could make someone's day don't forget to wear it okay definitely make choices and don't look back okay great try to pay at least one person a compliment every day okay so so far so good all of this have been really useful cars are bad investment okay who would have said great yeah so basically we are going to build this today this application is beginner friendly so whether you're just starting with react or you already have some experience you're going to find this really easy we are going to go over the basics and you should have no trouble following along and if you're an advanced react developer you can also build this and just add it to your portfolio for you advanced react developers many more interesting videos are coming we have two or three projects already prepared so yeah without further ado let's dive right in we are currently in an empty Visual Studio code window right there let's go ahead and open a folder right there inside the projects I'm going to create a folder called let's say advise project like that and we are going to open it inside of there we are going to open a tour window we can do that by going above and then view and right there there is terminal right let's extend it a bit clear the console and now we can type MPX create react app dot slash this means that the project is going to be created inside of the current directory current directory being advise project we can run that and we can wait about a minute or two and we'll be right back okay great now our basic react boilerplate is installed and we are ready to go right there we have our SRC folder SRC folder has the most important thing when it comes to react it's going to have our components it's going to have our index is also the Styles everything is going to be contained inside of this SRC folder since we have a lot of the files right there what I like to do at the beginning is I like to delete it completely because we don't need many of these files so let's create a new one SRC and the only thing that we are going to need for now is the index that is this is the file that every react application needs okay so how is it going to look like first we need to import react from react great we need that in all files that contain react components but only for the index the J's file we also need react dawn from react - Dom we do this so that we can actually hook on to that element in which our whole react application is going to be contained in we're going to see that in a moment just below we are going to import app from that slash app this is going to be our main component it doesn't exist yet but we are going to create it and then below we are going to write react on that render first parameter is the component that we want to render that is the app and the second parameter is the element we want to hook onto so let's check what that is this is going to be interesting especially for people who are new to react so if we go into the public and then index.html we have a lot of stuff right there but the only thing that we are really concerned with is the body more specifically there is only one thing in the body that one thing is something that you'll all seen and it's a simple dip that has an idea of route so we need to target a div and our whole react application is going to be contained inside of that div so let's do that document that get element by ID and we simply pass route that's it our index.js file is good to go now let's create an application so app that Jas with a capital A and while we are here let's also create an app that CSS because we are definitely going to need to use it in react most often you are also going to have a components folder and some more components and styles but since this is a really simple application we're going to building all of our code in fjs so what are we going to have in there import react from react and now we can create a basic class-based component so class app extends react that component of course the render and be returned in which we can write for example just h1 for now that says app that's it of course we need to return our components so exports default app ok great and do we need anything else in there let's just import the Styles since we know that we are going to need to use them so import that slash app that CSS ok great in this app component we are going to have a state so state is like a global object that contains all of the most important thing when it comes to that specific component right there we are talking about the app component so in there what should our state have well only one field and that one field is going to be a device so we are getting a string of advice and we are going to store it in here since this is a really simple object with our property we can just write it like this great now comes the question on where and how are we actually going to call or make that get request to get the D API if you remember how the final version looked like some random advice is going to be fetched at the beginning for that we use a component did mount lifecycle method so react has some sort of life cycle method every component goes through a life cycle first we have a render then we have a component did mount component did update and then finally component will unmount there are many of these life cycle methods but definitely the most important one is the component did mount this executes exactly at the render of our component so let's do a console that log in there console log component did mount and we are also going to import Axios from Axios we need to it first we are going to use that to make a get request to this certain API so let's that NPM there they're safe Axios great simple as that while that installs we can create a new terminal window right there by clicking this plus icon or you can just wait for this dependency to be installed and then in there we can write MPM start which is just going to start our application now we can close a terminal because that's going to be done and now our application should pop up in the browser our app is up and running on localhost 3000 right there we know that because we can see this app right there and that is coming directly from our JSX right there and if everything is working correctly we should also see the component did mount console.log so let's go back open the console by right-clicking the page and then clicking inspect and then finally in the console dot log we can see component did mount and rate so right now what we need to do is instead of that console.log we need to fetch the actual advice using Axios and of course using the advice api so we can do that either here so in here we can make a get request Axios that get but we are going to need to call the fetch function two times on the component bid mount as well as on the button click so instead of creating it just here we are going to create a separate class method called fetch the device like this and it's going to be equal to an arrow function why don't we need the Const right there const fetch the device well because this is a function inside of a class and that makes it a method a method simply means that it is a function that belongs to a class that's it so we have that right there and now we are actually going to do Axios that get inside of the fetch advise this is the official documentation of the advice application or the advice api advice slip json api there are a lot of possibilities we can get the random advice advice by ID search for advice and so on and so on but we are going to use just this one simple method which always returns a random advice we need to make a get request to this URL we can actually check that in the browser so if I click that and now right there we can see that we get back an object that has yet another object inside and now there is the advice with the actual advice string and the slip ID which is the ID of that specific advice okay let's refresh this get another one okay rule number one try not to die rule number two don't be a dick okay this is definitely a funny one but yeah we are not interested in all of this we just want to get back this a string of a simple advice so let's first try getting all of this into our console into our application and then we'll actually try to dis structure it to get back only what we need inside of our application we need to make a get request to the specific URL and that's going to be this one right there I'm going to leave the link in the description but you can also just type it right there HTTP API that advice live.com and then forward slash advice using that then and that catch syntax we can get the response how we like it so that then and then that catch just like this of course we can use the data and that catch syntax but for simplicity of this video we're just going to go for that then and that catch first parameter to the callback function of that that is the response and the first parameter to the callback function of a catch method is the error so in either case we are going to console.log what we get back so console log response and just below console log here that's it so now let's test it currently we just have a function declaration right there or rather a method declaration we are never calling this function so let's call it what do you think we're should we call it since we are going to need a data initially on the class render we just want to do it in the component did mount so we're going to call the function by calling this that and then fetch advice because that's a method that belongs to this app class if we do that and save it and go back to the application and close this in our console we do get our response there are a lot of things there we have the data which contains the actual advice also we have status status text headers config requests the only thing that we are really concerned with is the data let's try to an error so instead of advice let's call for advice see for example what shouldn't exist and if we go back we indeed do get a 404 not found error and in there is our console dot log great now we can turn that back into the advice and we mentioned that we want to get response that data so let's cancel Hawke just that right now okay we still didn't get the advice we got the slip so let's go one level deeper that's slip and we still got an object we still didn't get the advice so let's go one level deeper into advice and if we go back we finally get back the advice never run a marathon in Crocs okay definitely a good one what I like to do right there and what is generally considered a good practice is the structuring so we can destructure this advice and take it out from the response so right there we can do cons we say we want to get the advice and then from response that data that's limp that's it now we don't have to console.log all of this we can just console.log the advice let's see if that works great a common regret in life is wishing one had the courage to be once to yourself okay definitely inspirational so what do we want to do with this advice right now well we'd want to display it right there in this h1 so advice right there but you can see we get an error the device is not defined we don't have access to advice in this scope it's only in this little scope of that then from line 15 to line 19 how do we get it out can we do something like this well we cannot because this belongs to the function and then we need to use we need to do that then on this Axios get so how are we going to do that well for that specific purpose we have the apps state so this advice is currently empty all that we need to do is populate it with actual advice so we can say this that says state he's going to be an object we need to use this syntax to actually update state properties in class-based components and then inside of there we are going to say a device is equal to advice in just basic plain JavaScript there's a rule that if you have the property and the value all have the same name you can just omit the latter so you can just have advice this means set the advice value in this one to the advise property right there that's it and now we have access to this advice just by calling it this that state that advice and what we may do is also the structure this so we're just going to have a device const advise is equal to this that state we just get it out from the distance tape so we can just call it a device that should generally be it now we have access to this advice it belongs to the state and if we go back into our application and we can see the advice right there it is easy to sit up and take notice what's difficult is getting up and taking action well props to you you're watching this video and creating this application with me while you're at it you can also smash that subscribe button and let's move one further now we can start adding some structure so instead of just having this h1 let's give it some dips so that we can actually style it properly ok great so first we are going to have a div with a class name of app that's going to be our whole app right there in between that we're going to have another div that's going to have a class name of card inside of the card we are going to have an h1 which is going to have advice in it so we put advice in curly braces and it is going to have a class name of heading that's all that we need for now let's go back to the browser and check it out ok currently nothing changed so let's apply some styles I'm going to open app that CSS on the side and we are going to collapse this so we can see everything nicely okay great so let's start with applying the styles now we're going to see some boilerplate react styles the people often applied so that's route HTML and the body so we target all of these at once and we set the margin and B padding to zero that's just to remove some default margin or padding from the HTML on the body we are also going to give it a height of 100 V H which stands for vertical height if you give it a vertical height of 100 it's going to take a full height of the monitor and also box-sizing off a border box that's it now we can move on to styling the app represents our entire background so we're going to give it a height of 100 percent and now in there we need an image we don't yet have an image but let's add it so in there in the SRC I'm going to create a new folder called images and then inside of there I'm going to copy the picture of a city which is called city data JPEG it looks really nice looks motivational they travel the city right there you can place any image you'd like if you'd like to use this one I'm going to leave the link in the description ok so now we can say background and we can specify the URL and then say that / images city that's it for this image to be visible we still need to apply some more styles so we're going to say background size of cover as well as the background position of center while we are here we can also give it a display of Flex justify content to Center and a line items center we use this to Center the card inside of the app both vertically and horizontally we can also say text align Center to align all the text on the page in the middle awesome so with this out of the way let's go take a look great I mean our text is not visible yet and it's not in the card our image is too bright when we have an image a background image specifically we want to darken it we want to make it not stand out so much so let's do that to darken an image we need to use linear gradient linear gradient accepts two color stops we can say that we want pitch black color for the first one so it's zero zero zero and we are going to give it an opacity of 0.3 then we can add a second color which is just going to be the first one copied and we need to add a comma right there and we should be good to go if we go back and save great there's our darkened image we still cannot see the text but let's add a card to make that more visible that's going to be inside of the dot card we are going to give it a background color of white smoke that's just some white color that's not like completely white we're going to give it a width of 40% as well as the height of 20% just below that we need display flex and our standard justified content Center and a line item center to Center the card both vertically and horizontally below that we need a flex direction column because we are going to have a button just below this h1 we currently don't have that but but we'll use that in a moment so let's let's see how it looks okay looks good enough we have just this box right there so let's style it a bit let's add some border radiuses some shadows maybe some padding's let's check it out so let's add a border radius of 25 pixels as well as the 2 percent of padding so padding 2 percent great and let's add a box shadow of 10 pixels and 10 pixels and we should be good to go with the card right so this already looks much better if the text is clearly visible we have nice border radiuses here this shadow is not so good and you should never actually do like so large and so black shadow but since this application by itself is ironic and all of these advice are actually ironic we can leave it like that it adds to the character of the whole application now let's style the having our having being the h1 element or the actual advice so that having inside of there we are going to have a display of Flex align items off center height of 580 pixels I found that to be working best and then let's see how it looks great that's that's exactly how it looked we just needed to apply these tiles for when we actually add the button do you think we need to change the font I'm going to go ahead go to the google fonts and I'll be back in five minutes but for you that's going to be an instant and we are back this looks much much better much more believable some of life's best lessons are learned at the worst times great we have this I think I personally think this font looks much better so what I did is I went to the google fonts found a font that I like for example this Spartan font and I click select this font right there it's going to give you a link you can copy this link go to the index dot HTML and then just paste it just above the title right there after you do that you can copy the font family and paste that to the heading so font family having right there and that's going to change our styles so let's go take a look one more time that looks really good it added to the value of this application the thing that we are going to add next is the buttons so right there we can say button and then inside of there we are going to have a span and inside of the span we can passive-aggressively say give me advice exclamation point since there is a lot of CSS code for just the button I'm just going to copy it and give you the snippet of code in the description you can just copy and paste it if you'd like you can go through it and see what it is but I know that many of you don't feel like just retyping all the CSS so that's why we are going to make the process a bit faster so let me just paste that in there yeah we have some keyframes with some rotations but most importantly these are the styles for our button right there just at the end we are also going to add some media queries so at media only screen and then max what that's going to be for example 6 your pixels so for mobile devices the only thing that we are going to say is that card we are going to increase the width on mobile devices to for example 80% and also increase the height to 30% we can also do 40 but let's try 34 now now we can close this CSS file and see how our application looks like okay great much much better we have this button right there you can see this light little animation great enjoy a little nonsense now and then okay that's definitely good advice you sometimes need to just chill a bit and have some fun and we want to display a new advice a new piece of advice so how do we do that this is a great exercise for you so right now you can pause the video and see how you would implement this feature on your own so what we need to do is call this fetch advice function on the button click let me show you how to do that so right there on click we can add an on-click property to the button and we can say this that fetch advise is that it is it really it so will this work will this actually fetch the advice on each button click let's go back to your application and let's take a look identify sources of happiness yeah that's definitely great so let's click it and it actually works just with one simple property now we can actually fetch more and more advice okay great now that we are done building our application the only thing left to do is to actually deploy it so you can send the link to your friends or just showcase it on your portfolio as a live service version so what we need to do is go to github if you already don't have a github account I would greatly suggest you to create one there you will be able to showcase all of your projects if you're looking for a job it's great to have a github account because your employers can see that you're actually building projects and working on becoming a developer what you need to do right now is to create an account if you already don't have one if you do just login and then on the top right corner there you'll have this plus icon you can click on it and create a new repository right there you can enter a repository name for example advice app react something like that and you can create a repository there will be greeted with a series of steps that we need to do to publish our application so we need to first add everything then we have to commit it remote add origin this means that we need to connect our project with this actual repository online and then we need to push to the master branch so how do we do this it's pretty simple we go back to our application and in here we'll just close our terminal with control C and let's clear our console so in there we can say get in it which is going to initialize empty repository right there and you can go ahead and do get add dot this is going to add all the files to our get repository then we need to run git commit dash em and then in here you specify the message for example you can say initial commit and then you can go ahead and go back to the browser and copy this get remote add origin and paste it right there like this for me it currently won't work because I already have this running and then finally you can say get to push you origin master again just copy the line right there awesome so that's it that's the only thing that you have to do now the code should be live on the branch master let's go ahead and check it out right there that's it this is the code for our application live push the github this is great also feel free to leave some stars or if you want to just copy the code you can forward the repository right there it greatly helps with the channel I'll leave the link down below so you can actually reference to the code and just leave a star there let's make this project great as the chat application that we provided recently awesome so now that we have this ready you can go to the Netflix nexif I is the hosting website so you can create an account there by just clicking login and I suggest you login with github once you do that you can click new site from get right there and you can connect your github account after you do that you can find your application for example advice app right there click on it and just click deploy site that's going to be at size deployment in progress you're going to get some random domain name but that's okay and finally after a few minutes your app should be up and running right there you'll see deploys for elephant color right there for me for you is going to be something different we can click on the link and the website should open right there don't eat non snow colored snow that's a great one so that's it the whole deployment process in less than five minutes awesome that's it it looks simple but we've done a few things we used life cycles we use state we created a method called fetch advice which fetches real data from the real advice API then we get the advice with the structure it and set it to the state okay never cut your own fringe don't promise what you can deliver that's definitely good one why wait until Valentine's Day for a romantic gesture okay that's a good one that's definitely useful so for all of you who have a partner just go ahead and just create a nice gesture this was a project aimed more towards beginners and people who are new to react but if you're already familiar with react don't worry on this channel we'll do many more projects we have real-time chat application using socket IO as well as the YouTube clone application both built in react we are also starting with some more react projects as well as the main stack project so just stay tuned and subscribe if that's something that you want to learn that'll be it for this video thank you so much if you liked it feel free to subscribe and see you in the next one [Music]