Integrate Drawn Currency with airSlate SignNow

Create varied currency

hello everyone in this video we're gonna tackle a beginner react project which is going to teach you everything you need to know about props state management and hooks and react so this is a great project to get started on welcome back to web dev simplified my name is Kyle and my job is to simplify the web for you so if that sounds interesting make sure you subscribe to my channel for more videos just like this one now to get started I have the finished version of our product over on the right-hand side of our screen and on the Left I have the basic implementation of create react app and to get all of this code all you need to do is create a folder that has no uppercase and no spaces in it and then you run the command npx create react app with a period at the end and that will create all of these files that you see on the left hand side here inside of your folder and if you get an error for example that says npx not defined just make sure that you update npm because that's how you are able to use npx and this takes a little bit to run which is why I did it to begin with and now the first thing that I want to do is to remove all the files that we don't need for example we have a bunch of files in our source and in our public folder that we're never going to actually use the public folder we can just leave as is for now that's fine but instead of our source let's remove all these extra files for testing for example we're not gonna worry about that we don't need this logo that's the react logo we don't need a serviceworker and we don't need to set up our test so let's delete all of those and then inside this index j/s we got rid of the serviceworker so we'll get rid of this serviceworker code we also can get rid of this import for the serviceworker and this CSS file here which we deleted all we want is this single render for our app then in the app dot CSS let's just remove all of the CSS we don't want anything in there and in our app jeaious we can get rid of this logo since we're no longer importing that logo we can also get rid of all of this HTML in our return and we're just going to write out our own h1 that just says hello world and now if we run our application by running NPM start it's going to take a little bit to start up but then you can see over here our application is going to open up and we should have a single h1 that says hello world inside of our application and once that finishes loading you can see we get a single h1 that says hello world and if we change our CSS and here to make our body have a background color of red for example you can see that translates over into our actual application so our CSS is hooked up to our application our HTML we can load in here inside of our app component and it will render inside of our web browser so this means that we have everything we need done so that we can actually start building the currency conversion app that we want to build and I have this app right over here I'm going to kind of show you how it works first and then we can work on building it so we have different dropdowns where we can select the currencies that we want to use and then inside of these boxes we can change one currency and it will update the other one so if we wanted to euros converted to Canadian dollars you can see that be 2.9 Canadian dollars and we can change it to 3 4 or 5 and that works perfectly and if we change a Canadian number to 7 for example you can see that's 4.8 euros and we can change euros to something and everything is going to update perfectly no matter what we change which is really really important so to get started with this HTML the first thing we need to do in our app is we want our title here to say convert instead of hello world and then we're going to want to have a row for this currency conversion and a row for this currency conversion but we're actually going to create separate components for those because as you can see these rows are exactly the same so we can create a single component for each one so we can create a file we're just going to call this here currency row dot j s woops J s and inside of here if you have the extension called ef6 snippets you can just type RFC and hit enter and it will generate all this code for you and you can get this extension it's just right here es7 react Redux graphic you'll react native snippets I love this for creating react apps it makes it so much easier but you can also just type all this out it doesn't really matter and for now we're just gonna put the text in here of currency row so we didn't know this is rendering so in our app we can just come up here and say import currency row from we want to do it from dot slash currency row and just like that if we save come over to application over and we actually import our currency row by using it so we just come down here and type currency row and we want to make sure that since we have two elements here we wrap these inside of fragments otherwise it won't actually render if I remove this and save you see we're going to get an error but if I wrap this in fragments by doing this and inventing this properly these are just empty elements that allow you to return one thing in JavaScript and as you can see now we have convert and currency row then between our currency row and convert we're going to want to have here a div and inside this div we're just going to have the equals sign and then we're going to have another currency row down here so we have convert currency row equal and then another currency row which is the same setup that we have over here now let's work on styling our currency row so that it actually has the selects box and the input so instead of our currency row what we need to do is we're gonna have our wrapper div and inside of that we're going to want to first have an input what you're going to have a type of number and this is going to contain our value for our input and then we're going to have a select and inside of the Select we're going to have a bunch of different options for now I'm just going to put a single option which has a value of high and we're just going to give it the text of high as well and now if we save go over here we have that select which that's single option inside of it and we have an input where we can type different numbers so we have all of the base code that we need to start styling our application so that we can make it look like this before we actually go on and make the implementation of our JavaScript so that we can hook up all the interactivity so the first thing I want to do in our Styles is make this centered in the middle of our screen so we can select our body to do this and what we want to do is remove all the margins from our body and we're going to use display flex to line everything up in the center and to do that we can just justify and align our items into the center of our screen and as you can see it aligned everything horizontally but to align things vertically we need to make sure that we set a minimum height to 100 view height and now if we save you can see we have everything lined up vertically and horizontally dead in the center of our screen also we can change our text align to Center and that'll line up our convert and our equal sign text which is exactly what we want now to select that h1 which our convert text we're going to remove our margin from it so that way everything gets pushed up right next to it and there's no margin on the top we're also going to add in a little bit of margin back onto the bottom we'll just save 0.5 REM just to give us a little bit of space between our input and our convert text up here the next thing we want to do is actually select our input elements so I'm going to add a class to these we're just going to give each one a class name which is going to be input now in our CSS we can select that input and start styling at how we want first I want to change our border we're just going to use a 1 pixel solid border and we'll just use this 3 3 3 color it's kind of an off gray like a dark color also we're going to make that border rounded so it looks a little bit better so the 0.3 e/m just like that as you can see we get these nice rounded corners and we'll also add in a little bit of padding 0.25 REM and specify and exact width of 70 m and what that's going to do is make sure that we have is set width because numbers aren't going to get super big when it comes to currency and it's also giving us a little bit of padding between the edges of our input and our actual numbers because if we remove that padding you see it's very squished up together so this looks much better already next thing we want to do is select our select boxes and just give them a little bit of margin on the left or just say 0.5 REM that looks pretty good that just spaces our select box out from our input so they're not touching each other because that doesn't quite look very good and now lastly let's go back into our app jeaious and add a class here so let's say class name is going to be equal to equals and then we can select that in our CSS just make it quite a bit larger so it's easy to see what this looks like so we'll give it a font-weight:bold and we're going to give it a font size of two REM as you can see it just makes our equal sign to really stick out and now our app is styled pretty much exactly the same between both of these different examples which is exactly what we want now that we have all of this styling done we can completely remove these style sheets just close out and we can start working on actually importing all of our currency codes from the web and the way we're going to do this is by using an API here called exchange rates API dot IO and if we come down you can see that we have all these different usages here and the main usage that we want is this very first one which is going to get us all of the latest currency conversions in JSON format and if I just copy this right here this URL and I can just paste this URL into our app so we can say constant base URL is going to be equal to this URL so this is going to get us all the latest currency conversions that we want and then we can actually fetch that API and we want to fetch this API every time we load our application so in order to do that we're going to use an effect so we can come in here and import use effect from react and we can use that use effect and what we want to do is first pass at a function so the very first parameter is a function and the second parameter is an array and whenever the items in that array change we want to rerun this use effect and in our case we only ever want to call this once so we're gonna put an empty array since an empty array will never change this use effect will only get called the first time our application loads and then what we want to do is we want to fetch that base URL and then what we want to do when we get that fetch back we want to convert our response to JSON so we'll say res days on which returns another promise and this actually has our data so just for now I'm gonna console that log out this data so we can see what we're getting returned so if we go over to our application and I inspect our page you can see if I go to the console we get an object being returned which has a rates property and this is just an object which has individual currencies and the rate of conversion and then our base which is what we're converting from so our base you can see here is euros and then we have all of these other different currencies so the one thing I want to do is populate our list of select options from this list of rates here also including the space of euros so in order to do that what we need to do is set up some state for our application so we're going to use the use estate hook as well and what we want is we want state for what our currency list is going to be so this use state function returns an array of options the first option is going to be what our state is the actual current iteration of our state so this is our currency options and the second value is going to be the object or the function that allows you to set that currency options so we're going to call this set currency options is equal to use state and by default we're just going to pass this an empty array because we don't have any options yet when our application first loads now inside of this function here that we get our data back we can actually convert to this data into an array of options and that's actually fairly straightforward to do so we can just call that set currency options function and we want to pass this an array the first value in this array is going to be that data dot base and then the next value is going to be all of those keys from the object in that rates part of our data so we can say data dot rates and we want to get the keys so we can just say object keys and this is going to get us just the key portion of the rates and all we want to do is D structure this array so we just put three dots in the front like this and now what happens is our currency options are going to be set to all of these different values and what we can do is just console the dialogue our currency options just to see what they look like and now if we save inspect our page you can see the first time we run we just get an empty array and the second time we run this we get a list of all of our different currency options as you can see there's 32 of them 33 of them actually so we have all of our different currency options inside of our list and what we want to do is populate those in our currency rows so let's actually come into our currency row and pass in our currency options as a prop so just like that we passed our currency options into our first one and let's do this in our second row as well now each of our rows have currency options passed into them and inside of here we are going to take in a variable called props oops props and what we want to do is be structure that into objects so our very first object is going to be those currency options and we're going to set this equal to props and if you're confused by any of this D structuring or spread operators make sure that you check out my D structure and spread video which is going to be linked in the cards and description below it's going to clarify all of this for you so once we have that currency options we can actually loop through those inside of our select so we can say currency options dot map and this is going to translate our array of currency options into actual options as you can see here so each one of these is going to be one of our options and inside of this function what we want to do is actually return each one of our options and our value for these options is just going to be this option text and the value instead of here is also going to be our option itself and if we save this you can see our list is now populated with all of those options but if we inspect you're going to notice we have an error if I go to our console it says each child in the list should have a unique key prop and since this is a list of objects we need to make sure each one has a value of key which we're just going to set to option this just needs to be a unique value for each one of the children this will react can efficiently update all of our options when they change so now if we save and inspect our application you'll notice we no longer have any errors in here and just our array of options are being printed out so let's go back into our app and remove that console dot log so we don't actually print out these options anymore and right now we have a good base point of our app where we have all of our different currencies imported but we want to have a default currency selected for each one of our inputs so let's actually come in here and create some more state this first one is going to be our from currency this is going to be our first option here and we also need to have that set from currency variable and that's going to be a use state and by default this is just going to be empty next we're gonna copy that down and do the exact same thing for our two currency which is this second select option and we have to have our set to currency and then when we get all of our currencies we want to set our from currency to that base currency so we'll just say database and then we also want to set our to currency and we're just going to get the very first option from this array so in order to do that let's actually get that first currency by just saying it cost currency is equal to data rates and we want to get the keys so let's just say object keys and we want to get just the very first one in this array so we'll just say of zero this will just be whatever the first currency returned is is the one that we want to select so we'll just actually set this to first currency to make the variable better named then when we set our currency we're just going to set it to that first currency so now we have our from currency and our to currency being set and if we save you can see everything is still working so what we can do is actually pass in our selected currency and this first one is going to be our from currency and our second row is going to have our two currency as it's selected currency now inside of each row we can get that prop out of our props so we can say that we want to have our selected currency just like this make sure we spell selected properly and then we can set the value of our select equal to that selected currency now if we save you can see this didn't actually update so let's see if we made a mistake inside of here it looks like everything is right we set our value selected currency let's go to our app and we can see that this should be selected currency not select currency so let's just update that naming save again and you can see that here we have Europe being selected since it's our base value and then here we just have the first option after Europe being selected by default which is great we have all of our select options stuff done but what about when we update it what happens if we update this to CZK when we click you see nothing happens and that's because we need to hook up an on change event for each one of our different currency selectors so let's do that now inside of our currency row we went to select an on change event and inside of here is where we're gonna push a function and we're going to take that function from our props this function is just going to be called on change currency and we're going to pass that function to our on change so every time this value is changed it's gonna call this on change currency function which we're actually passing in from our app so we can say on change currency is going to be equal to a function and this function is going to get the event from our select here and it's just going to be an inline function where we're going to set our here to currency to our event target this is just going to be our select and we want to get the value of that select let's do the same thing up here what we're going to set our from currency and now when we save when we update our European currency to a different one you can see if properly updates and it does it for both of our different options and the reason this works is because in our currency row we're hooking up our own change event to this unchanged currency function we're passing that in from our app and then we're actually setting the from currency which is from our state up here and we're passing in that a target value which is whatever the value of our select option is now that we have our selects all set up we can select and change all we want let's move on to setting up our different amounts so we're gonna have another state which is going to be our amount so our amount and we're gonna have a set amount we're going to set this equal to use state and by default will make our amount one and since we're actually allowing two weight changes for example we could type in an amount in the European version or in the Canadian version this amount variable is just going to be set to whichever one of these we change and then we also need a separate variable to denote if we changed from the two currency or the from currency so if we change this first value or the second value so let's create another variable and this is going to be called amount in from currency oops currency and we want to be able to set our amount in from currency and by default we're gonna set this to true so we can just say use state of true and what this variable is telling us is it saying is their amount that we changed in this first box are from currency or is it our second box down here which is our two currency this will just let us know which one we need to update and then instead of our use effect we also need to make sure we get the exchange rate so instead of here we can say Const exchange rate and set exchange rate is going to be equal to you state and by default again this does not have a value but inside of here we can set our exchange rate which is just equal to our data rates we want to get the very first object which is going to be our first currency and this is going to be the actual rate for our currency we can just log this out for now so we can see how this works so console dot log it change rate and now if we inspect our page you can see in our console at the beginning we get undefined but then we get our exchange rate from European to Canadian dollars which is one point four six zero four which is exactly what we want now the next thing we need to do is we can use our exchange rate our amount and our variable that tells us if we change the to or from currency to actually get the amount in the two box right here and the amount in the front box so let's create some variables which is going to be two amount and from amount this is just for our two different boxes and then do to figure out which variable is set to what value we can just have an if check here for a mount in from currency so if this is true then it means our amount that we have in our state is our from amount so we can set our from amount to our amount and then our two amount is going to be equal to our amount times the exchange rate just like that so now we have our from amount and our two amounts set but if it's the opposite way so our amount is in the two currency we can just say our two amount is equal to amount and then our from amount is going to be equal to the amount divided by the exchange rate and this is just because our exchange rate is always from our two amount to our firm amount so to reverse that we want to just make sure we divide by our exchange rate now we can pass these amounts to our currency row so we can say our first one is our from amount and our second one is going to be our two amount just like that and then in the row let's just put that inside of our input as the value so we'll say value is equal to amount and let's get that from our props now when we save you can see this very first value hasn't one and the second one is one point four 604 so we properly have our conversion taking place which is exactly what we want now we need to make it so we can actually update these inputs as you can see I can type all I want but these inputs don't change we need another on change event so let's do an on change now we want to do this as an on change amount which we're gonna get you to get in here from the promise so on change amount just like that and this is going to work very similar to how we did our on change currency so we can say on Shane amount but this time we're actually going to set it to a variable which is handle from a Mount change just like that so let's create that function which is handle from a Mount change and inside of here we are going to get that eave area below we can actually get the amount so we can set our amount is equal to e dot target dot value and we also want to set our amount in from currency to be true because we changed our from amount so we wanted to note that this amount is from the from currency we're gonna do the exact same thing but for handling our two amount change but we want to set this variable here to false since we're changing our two amount and not our from amount and then inside of here we can just copy down this unchanged amount down here but we want to handle our two amount change just like that and now what's going to happen is if I update this value you can see down here our conversion continues to take place but if I update this bottom value it'll update our top value and that's because of these variables here with the true false it's telling us which box were actually changing so that we know how to do our conversion from the amount and which values to set properly it's fairly confusing but hopefully this explanation I gave made at least a little bit of sense now the next thing we have to do is to allow us to change currencies because when we change currencies our conversion does not actually update and in order to do that we need another use affect so let's just create our use effect and inside of this use effect what we need to do is we need to call this function and we want to call it anytime one of our currency changes so when our from currency or our two currency changes so if this array ever changes which means our from or two currency changed we're going to run the code inside of this function so inside of this function we're gonna do another fetch request and this time we're going to fetch from our base URL so let's get our base URL and this we can pass in the parameters of base to equal something which is going to be here and we can also pass in a value of symbol just like that symbols and this is also going to equal something and the way that this works in the API that we're using is this base value is going to be our from currency so in our case our from currency we're saying where are we converted and symbols is all the values we want to convert to which is going to be our to currency then what we can do is just call or dot then so we can say that then we're gonna get back a response and we want to convert that response to JSON and then we're going to get back some data so we can say dot then of our data and this data is going to be the same data that we had of up here but it's just going to have one single value in our array of rates so we can say data rates then we want to get the rate for our to currency and we're just going to set our exchange rate equal to that new exchange rate so now when we update our currencies we're going to essentially go to this API and get the new exchange rate for our conversion between these two different currencies and immediately after I save this you'll notice we have an error over here it's saying cannot read undefined of undefined and that's because what's happening is this use effect is being called when from and to currency are actually completely undefined so we want to just make sure that our from currency right here and our two currency are actually values so we can say from currency is not equal to null and our two currency is not equal to null then we want to run the code inside of this fetch so let's just pull this all the way up here inside of this if statement and now when I save you can see that that error goes away and if we change this to for example a different currency you can see it updates our currencies as you would expect we can also change this currency down here and it's going to update everything just like we would expect and with that we're finished with our currency converter but if you're interested in learning more about react in depth everything you need to know I have an entire course on react called learn react today which I will have linked in the description of this video for you to check out it's an amazing course that covers every single thing you need to know about modern react and will get you up and running incredibly quickly so I highly recommend you check it out if you enjoyed this video and with that out of the way you can check out some of my other videos linked over here and subscribe to the channel if you enjoyed this video thank you very much for watching and have a good day