HubSpot.Extend() Workshop 2022 | Building a Rental Equipment Checkout App

We're going to take everything we've learned previously and we're going to put it all together. So my section, we're going to build our custom web app. So let's look at what our basic web app is going to look like. So in this web app what is going to happen is we are going to create a calendar and a form. The calendar is going to represent visually the different AV rental equipment periods and the different equipment that you can rent. All of them will be color coded as you can see, although some of the text color is not great. I think that black one is just, you can't read it. But we'll, we'll make sure that it all works. But what it will do is if you have the MacBook Pro 14 and you have another MacBook Pro 14 at a different time, it'll be all the same color for each rental equipment type and it also show the different times that you have. Then you have a form. This form is just going to be a very simple HTML form and it is going to allow you to reserve a specific equipment for a rental period. And then once we click reserve your equipment, it will refresh our page for us and then it will add our rental equipment and it'll show up on our calendar. So in this section I'm going to show you how to import your sample data via a CRM Import API and Postman. Postman is a third party application that allows you to work with different APIs, allow you to create test calls and those kinds of things. So we're going to use it in order to import our sample data into our custom object. So inside of our GitHub repository we have some sample data in samplerentals CSV which we are going to put into our HubSpot account. And we also have this import request JSON file. Now this import request JSON file has everything that we need in order to properly map over the different things inside our sample rental CSV. A big important notice is that in this import request JSON file you do have to update the column object type id. Since we are using a custom object. This will be determined on your actual machine in your actual account and it will be the number that shows up in the URL. And so it's going to be a number, usually starting with two dash and then a string of numbers there. So make sure that you update that. For right now it should say something like your custom object id. So just go ahead and change that if you want to change that really quickly. A really easy way to do so is to highlight one and then if you click Command D in VS code, it will highlight all of the ones that are the same. And then you can easily do Command V when you've copied over your custom object URL in order to change it all the change it quickly. So now that we have this information, what we're going to do is we are going to copy over this import request JSON and then inside of Postman, what we're going to do is we're going to create a new post. So we're going to click the plus button in the top left corner and then instead of it being git, we are going to switch it to post. That's very important. If we think about crud, we are creating new data. So the C in crud, we're creating new data and that data is going to be added to to our HubSpot account. And so we're going to use post, which is the HTTP method that goes along with create. Our URL is going to be HTTPs API.hub API.com Again, that's our base URL. We're going to do the CRM side, we're going to use v3 of the API and then we're going to do imports. So that's what we need to do in order to do our data upload. We go to authorization and we're going to choose bearer token. So the bear token here is where you're going to put in your token that you received from your HubSpot account. And if we go to our HubSpot account, we are able to grab that when we go into our settings, then we go into integrations, private apps. Then we're going to go click here and show token. Copy that over. And then back in Postman we're going to paste that in. Now in the headers we have to set some key value pairs. We're going to set a content type and we want this type to actually be multi part, slash form data because we're sending along a CSV file. And then the next thing that we're going to do is we're going to set the body. Inside of the body we want to choose form, form data. This first key is going to code, import, request. And inside this value is where we're going to put in what's in that import request JSON. It's okay that it has all of these returns. It will work just fine. And then the next key that we have to do, we're actually changing this from text to file. We're going to call this Files. We're going to select our files and then what we want to do is we want to check off our sample Rentals CSV. And now all we have to do is click Send and this should go ahead and process our request. So it says it started. It takes a while to update the data. So if you want to check what your data is looking like, simply go back over to your HubSpot account, click on AV Rental Equipments. And now what you can see is that our import works. So we've got all of our imported data in here. And you can also see information here on the import page that this worked, this new record here worked. So our data went in properly by using our HubSpot CRM API. And so now that we've got our sample data, we can start working on our actual app. I'm very excited for this part. So now that we've got all of this, let's just talk through a couple of these files that we have inside of our GitHub repository. We have our index JS, this is our backend, our our server side file that we're going to be working in. And then we have these two different folders called Public and Views. So all of the stuff that is in Public and Views, these are what show up on the front end and our client side. So in our Public we have a CSS folder and a dist folder set up for you already. And the main thing that we're going to focus on is this calendar JS file. And I have some notes in here for you to help you know what we're doing. And then in our Views we also have index PUG file. So to help us make this a little bit quicker for everyone, we're using the templating language pug, which was also known as Jade previously. So it's basically just an HTML templating language in which you can write code a lot faster without having to write in all of the HTML tags. So that's why we're using that. It's also really nice because you can send along data from your back end to your front end very nicely with pug. So those are our three main files that we're going to be working with. If you have any issues with any of these files not working, we have this finished folder here. This finished folder has all of those three files that I talked about that are going to be the ones that we use. And you can just copy and paste anything in here. If, if your is not working, you can copy Paste from here and that will work for you. And if you, if you can't, if you, if you like, find your code not working. So the first thing that we're going to do is I'm going to open up a new terminal window. And so because this is a node app, we gave you a package JSON file here. This package JSON file is going to tell you all of the dependencies that you'll need in order for this to work. So to install all those, all you have to do is run NPM install and that will install all of the node modules that you need and it will add them to the nodemodules folder as well as create this package lock JSON file. Package lock JSON file. And so now that we've got all that, we can start working. One of the things that you will need to set up is a env folder file. We did not create that for you, but. But all you have to do is click the new file and then name it env. And this is where we're going to keep our environment variables. So in here, our environment variables is going to be called private underscore app underscore access. Make sure that it's all uppercase like this. And this is where we're going to put in our personal access token again, like we had previously. I think I, nope, I don't have that saved to me to mine anymore. So again, just go back into your settings integrations, private apps, and then custom objects, and then you can show the token, copy it over, and then put this into your env. The reason why we have our ENV file is we don't ever want any of this information to end up in an online repository. The ENV file allows us to do that as long as we create a gitignore file. The gitignore file is where you put in all of this stuff. I do not want to add to my online repository. So here we don't want to add our node modules or our package lock JSON. We don't need to put our HubSpot config YAML in there as well, because that also has sensitive data. We don't need any system files like DS Store or Thumbs DB if you're using a Mac like I am. And then our secret keys all live in our env. So just make sure that you have the ENV set up and that you have a gitignore file inside of your account. Again, just to make sure that none of our stuff gets leaked. So now that we've got all that. We're going to go into our index JSON index js file. And so up here we have a lot of these constants already that you don't need to worry about. All of these are basically just running different node modules that we're going to be using. We're going to be using Express and Axios. Those are going to help us do all the things that we need to do. We also have this require env config that's going to allow us to use our env file and all of the different variables that we put in there. And we also are going to use this Express static. And this is going to allow us to use all of that public folder that we created up there. So the first thing that we need to do is we need to create a route. We need to create a route at the root, which is the slash where our web app will appear. So here's where we're going to start writing some JavaScript. So the thing that we are going to use is we're going to use app, which is, and this is an Express thing. So if you don't know that much about Express, you can check out their documentation and understand that a little bit more. But we're going to use app.get because we're going to get our data and then we're going to open up our brackets, I mean, open up our parentheses. And the first thing that we have to do is tell it what route we want. Again, we're going to be at the home route, so we're going to just use our slash. And then what we're going to do is we are going to create an anonymous function. So to create an anonymous function, all you have to do is open up some more brackets. We're going to send along some variables, although we probably won't use these variables, but I just like to add in the variables just in case you ever need them inside of your anonymous function. And then you're going to do an equal sign and a carrot. And this is going to be how we create our anonymous function. And then we open up some curly brackets. And then I always like to make sure that in JavaScript I always end my lines with the semicolon. Sometimes it will work without the semicolon. But just to make sure that everything is good, use the semicolon. And now we're going to do is we're going to do res, because that was one of the variables we set up. We're going to use a function called dot Render and inside of this dot, render, because we're using PUG as our view engine, and we set that as our view engine. What we do here is we call that pug file and we call the PUG file index pug. So here we just have to do index. And then after that we're going to put a comma, and then we're going to create a new object inside of this object. We're going to send along a variable to our front end and we're going to call it title. So this is going to be that HTML title tag. We're going to send that along and I'm just going to call it AV rental equipment and then put a little binder there. HubSpot APIs. All right. And then again, end it with a semicolon outside of the parentheses and save that. Great. So now that we've got that, we can actually open this up in our local host. I created a app, listen here to listen on port 3000. So you don't have to worry about that. So how we're going to do it is run it with nodemon, which is another node module that we added to your package JSON. So if you did that NPM install, it's already installed locally. So all you have to do to open that up is just inside of your terminal run nodemon. And nodemon is spelled N O D E M O N. Excuse me. You can click enter and that will go ahead and start your local host. Then you click on. And I added a nice little link here, so you can click Command plus to open that up into your HubSpot in to this. It opened up on a different screen for me, so I'm just gonna go ahead and pop that up there. So now you can see we're on our localhost 3000 and right now we don't have our calendar or our our form here, but we've got it open. We've got our stuff. Hello, world. We've. We've really. We've really done it. Great. Awesome. So after we've done that and we've installed our dependencies and created our reroute, we're going to use the API now to get our data. To get our data, we added our private app token to our env file. We use the HTTPs API.hubapi.com CRM v3 object/object type endpoint. We need to set our headers with our bearer token and content type, just like we were doing inside of Postman. But this will be inside of our actual app. And then we're going to send all of this via Axios get, which is another function, and it uses the HTTP method of git, which is what we said earlier when we're talking about crud, we're going to read. So we need to use the git method. All right, so now that we've got that to help you a little bit so that you don't have to remember that string of numbers, I created this constant called your custom object id. And so I have this inside of my import request JSON, and you probably have it there as well. So we can just copy this over and put it inside of this constant here so we don't have to keep remembering that number. And then what we're going to do is, just like we did earlier, we're going to use our app get, and we're going to open up and this one, this route is going to be at git slash git data, sorry, git data. And then we're going to create another anonymous function. So with our anonymous function, we just do our parentheses request results as our variables and then we do our equal sign caret. To open up our anonymous function, make sure you use your brackets. Open that up so a little more space. Put our semicolon on the end. And now inside of here we have to add a couple of things. So the first thing that we're going to do is we are going to create a constant and it's going to be called our API call. So this is where we're going to put in our API URL. So we're going to be using template literals inside of this, which means that we're going to be using a variable inside of a string. So in order to do that, you use the backticks to find the backticks on your computer. On your keyboard, it should be the button right beside number one in that line of numbers at the top of your keyboard. And so now we're just going to call that HTTPs request API.hubapi.com CRM v3/objects/ and this is where we're going to use our template literal. So to use a template literal, you use a a US dollar sign and brackets, and then you can call whatever that was, and we called it your custom object id. And then whenever we're getting data from a CRM object inside of HubSpot, you have to add on some parameters, and to add on the parameters you just do a slash and then you do a query. So you add a question mark and so Our query, our parameters are going to be a limit. So we're going to limit it to only showing 50 values and then to string on multiple parameters, you use the ampersand sign. We're going to use archived equals false because we want it to not show any that are archived. Another ampersand. And this is going to be properties, and this is going to be the properties that we want to show up whenever we call this data. So we're going to call name start. I'm going to wrap this. So if you're in VS code and you want to wrap your code to see it easier, if it's having issues where it's too far, you can click option Z on your keyboard and that will wrap your information so it's a lot easier to read. And then we're going to do name start, underscore date comma end, underscore date, and then make sure that you end your line with a semicolon. Now that we've got our constant API call, the next thing that we're going to need to do is, is put in our headers. So with our, we're going to create a new constant headers. And so headers are an object, so we have to create an object. So to create an object, you just open up brackets, and inside of here we're going to set one, our first one, to be our authorization. And so this is where we're going to use our backticks as well. And this is how we're going to call our envelope variable. And this one is going to be bearer. We'll use our dollar sign and our brackets to open up a temporal temp template literal process.env. private app access. And again, the way that we know how to do this is we're using a node module that allows us to use env files and inside envy variables inside of our index js file. And then we're going to do a comma, because we have a second key that we need to add. And this one is our content type. And just like we had a specific content type for our import request, this one, our content type is going to be set to application/JSON. All right, so now that we have got our headers, we can now start to create our call. And so because we are calling the API, we are getting where it's returning a promise. And we don't want this to run unless the promise is returned properly. So we're going to use a try catch. And this try catch is going to allow us to, if there's any errors, it's going to error out and send us the error message. So all you have to do to do a try catch is write try, open up your brackets and then do catch. And then this one is going to have a variable called error in it. And then inside of here we're going to console error. And these are all just regular like JavaScript built in functions. So if I'm going a little fast with this and you don't understand some of these functions, just know that these are built in JavaScript functions. And so the next thing that we're going to do is we're going to create a constant resp that's going to stand for response, constant response. And then we're going to do our Axios get, like I talked about Axios git. And before we do this, Axios get because it is awaiting a promise, we're going to turn this into an asynchronous function just to make sure that nothing really messes up. So we're going to use async await. So we're going to call async here in the anonymous function aisle area. And then we're going to before Axios we're going to do await and that'll just again make sure that we're not getting this data until the promise is actually returned. And then inside of here we're going to send along those two variables that we created, our API call variable. And then we also need to send along our headers, because our headers is an object, we have to put this in curly brackets for it to work. And then we just call our headers here, make sure that you put your semicolon on the end of your line and then create a new constant underneath this one. This constant is going to be called data because when we do our response, our response is going to come back with a whole body of information that we don't need. So our data is just going to make it so that when we call this data, it's going to just give us only the specific stuff we want. So this data is going to be using dot notation, we're going to call response.data.results. so that's the only part of this call that we actually need is the dot result section. And lastly we are going to do res JSON and this is going to render out our data as JSON onto our page. So now that we've got that, we can save this and we can go over to our localhost URL here and we can type in getdata here. And this is going to show up all of our wonderful data that we've got. These are all of our sample data that we created. So now that we've got this, we are going to start working on getting the data into our calendar. So to get our data inside of our calendar, we're going to go inside of our public folder and then we're going to go into our calendar JS file and inside of this calendar JS file that we've created, we are going to create an asynchronous function called Create calendar. And then I have a bunch of to do things that we're going to do first. So we first want to wrap everything inside of a Try catch for error handling. This is just good practice, just good practice for anything that you're doing, especially if you're calling data that you want that you need to wait on for it to show up. You always want to make sure that you do your try catch, write your catch error and then in here I'm going to just console log the console error the error. So then that'll tell us what we are doing. And so then I'm going to move all of these to DOS inside of our try catch inside of our try section because we know that it doesn't need to be in our catch section. So now that we've got our to do's in here, the first thing that we want to do is we want to fetch our data from the get data route that we just created. So in order to do that we have to write another constant response. So const response. And this is why we created it as an asynchronous function because again we're calling a promise. And so we're going to do const response equals to await and then we're going to use fetch. And fetch, all we need to do is send along that URL that we're using. So here our URL is going to be HTTP, not HTTPs because we are just using this as a local host. So don't do HTTPs, it's not secure. And then slash, slash local host colon 3000 and then get data and then make sure we put our semicolon at the end of our line. Now what we want to do is we want to write an if statement statement to await the response status code of 200. And again this is just making sure that our code is not going to run if it's not working. So we're going to create an if statement if and then our what we're going to wait on is if we're going to say response status is triple equals to 200, which 200 is the status code for. Okay, Then we're going to open up our brackets and then we're going to put our else here. After we've opened up our brackets, we're going to do an else, open up those brackets and we're going to do throw new error with a big E. And then we're going to do our backticks because we're gonna send another template literal. We're gonna do something went wrong colon and then dollar sign brackets for our template literal response status text. Then if we do that, we get our error. We get our error if we don't come back with a response status of 200. All right, great. So now what we're going to do is we are going to call the data from our response. So we're going to set up a new constant called data and we're going to call that. We're going to make this another await. We're going to await response.JSON that's going to get our data into a JSON format that we can work with. And now what we're going to do is we are going to take our to DOS again. We're going to move them and we're going to keep adding them inside of our if statement because we want all of this to only work if we have a status of 200. So the first thing that we have to do is, is we have to create some data that's going to go into our constant. Calendar from Toast UI has a very specific way that they set up their objects. If you have any questions specifically about why we're writing it this way with these different key value pairs, that's because we're following their way that they set it up so that our data will be called properly inside of it. So we're going to create a new constant. This constant is going to be called data map. And then it's going to be equal to data map. And map is another JSON function. So we're going to open that up and then we're going to create an anonymous function inside of our function. So we're going to send along a variable called rental and then again to make your anonymous function = caret and then open up more brackets, as always, lots of brackets. And then we put in our semicolon and then what we're going to do is we're going to return an object and this object. So the data Map is going to take all of that data that we have from our account and it's going to loop over it. So that's what a mapping does and it adds it to a new array. So we're going to return an object for every single item inside of our data that we created, our sample data, and it's going to create an array of objects. So we have a couple of things that we need to set up in this object. So if you are following along and having an issue, you can go into that finished folder and go to the public folder and then copy over all of this stuff that is in this ID return. Because there's a couple of things that we have to add in here. And if you can't follow along, just go in there and just copy paste rental properties name. And like I said, I'm not going into this very in depth because this is from the calendar from Toast UI settings that they did. So if you want to understand more of that, go to their documentation. But this will just be using our data from our HubSpot account and creating an array of objects from it. We have to set a category all day because it's a rental period for 3 days due date class, we don't need that. So we're just going to set this to an empty string. We're going to do the start is going to be our rental.properties. start date. And so now you can start seeing here with this rental dot properties. This is where we're actually calling our properties that we have inside of our HubSpot account. Rental properties end date. And then all of that should be good to go. And now that we've created our constant data map which is our array of objects, I like to always just console log and this is how you can make sure if anything's not working Console logging that data map. And then inside of the front end it will show us a array of objects and it'll just make sure that when we're doing all this that all of our stuff is being properly called. The next thing that we need to do is we need to create a. We need to create an empty array because for the, for this to work, one, we need to create an array of objects that has each different instance of the data from our HubSpot account. And then we have to create a new array of objects. And this array of objects is going to be so that each different window type that we have is going to have a different color for their calendar. So like how I was talking about where that MacBook 14 is going to be the same color on each line. That's what we do when we create this new array of objects. So we're going to call this Const Calendars and this is going to be set to an empty array. And then to add to this array, what we're going to do is we are going to use a foreach on this data map. So we're going to do data map dot for each and then we're going to do foreach rental and then put our equal sign carrot and we're going to open that up, put our semicolon on that line and then we're going to make a new constant in here called construct AV calendars. And we're going to set this equal to another object. So again, this new object, new calendar that we created, a new array we created called Calendars is going to be another array of objects. And so in here we're going to add an ID rental calendar id. Then we're going to add a name which is going to be rental title. And lastly we're going to do background color. And this is how we get those colors to be different. So in order for these colors to be different, but us not to have to like know how many are in the array and all that kind of stuff, we're going to set and act. We're going to do some, we're going to create another template literal and inside of this template literal we're going to do some JavaScript functions. It's going to be a math one, it's going to be math dot, floor and then we're going to do math random. And then basically what we're doing is we're getting a random hex code. So we create that random, we're going to multiply it by 616-777-7215 because oh, crazy, crazy numbers. When we're working with hex code. And then we're going to do top two string and this is going to put it in that base 16 for our to make it a hex code. And then we, of course we're going to end that. And then outside of our AV calendars to get our, our new objects that we created. Each time we loop over the data map, we have to do calendars because we call the empty array we did. And we use the JavaScript function called push. And this will push all of those objects into our new calendars. And there we go. And then again, just to make sure that this is working, we're going to use our Console log calendars. All right, great. So now that we've got our calendars, we've got, remember we have two array of objects that we have created. Now we've got our const calendars and we've got our const data map and both of those are arrays of objects. So now we can create our calendar instance. So this is again using the Node Calendar Toast ui. So if you have any questions about that, you can look at the Toast UI stuff. But to call a new calendar in that we do a const calendar and then we do equal to new calendar. Again, the way that we're getting this calendar to show up is we imported it via ES6 modules and we import calendar from the Toast UI calendar. And this is actually hosted inside of this node modules file. So now we have our new calendar and then in order for our calendar to show up, we have to bind it to a div with a specific id. So we're going to make that ID calendar and then we have to send it along an object with some information in it. The first thing that we have to do, make our semicolon. The first thing we need to do is do our default view. And our default view is going to be month, just so we can see all of that in the month. Then we're going to click, then we're going to do our comma and then we're going to do our calendars. And this is where we send along that calendars array of objects that we created so that each of our calendars for each equipment type is going to be differently colored. And then what we have to do is we have to add the individual events to the calendar. So now in this line we just do we call our const calendar that we created. We do calendar dot create events and then we add our data map here and that's going to create all of those instant singular instances of the of when people are filling those forms out. And the last thing that we're going to do just to make it a little bit easier for us to read, is we're going to add a heading above our calendar to show the month and the year. So to do that we're just going to do a new constant called month and we're going to do this called calendar.get date and these are functions that come from that calendar Toast UI stuff that we're using. And then we're just going to use some vanilla JavaScript and call our document getelementbyid. The ID that we're going to use is we're going to use one called month heading. And then we're going to do a dot inner HTML and this inner HTML again, we're going to use my favorite backtick so we can have our template literals. And then we're going to do our dollar sign brackets. And then we're going to do new date. And then we're going to have our month. We're going to add in our month variable, and then we're going to string along another function called to locale string. And we are based in the US as a company, so we're going to use in dash us. But if you're based somewhere else in the world, you can change this to be your locale, no problem there. And then we have to say how we want it to look. And so we send that along in an object. So we want our month to be set to long. And again, this here means that our month is going to be showing up as October instead of Oct. So the full name. And then we're going to say how we want the year to show up. And we want the year to be set to numeric. So it's going to show up as 2020. And again, I didn't wrap my code. So just click option Z on your computer and that will wrap over your code. And then the last thing that we're going to do is add in our semicolon. We're going to save it. All right, awesome. So the last thing that we have to do to get our calendar to show up is go into our index pug. And here in this calendar section, I've already written some CSS and some HTML in here for you using the PUG templating language. But we do have to instantiate our calendar here. And it's super easy to instantiate a an a div with an ID in pug. All we have to do is call that. Call that id. So we call that calendar. And then we open up this because we want to send along some inline styling and we're going to just send a height over and this is going to help us. So how we call that is you do style equals, and then you do curly brackets, and then you call whatever CSS property you want to use, which we're using height here, and we're going to just make it a height of 800 pixels, and that's all you got to do. So in order to bundle this all together, bundle the calendar JS code that we just wrote, we do have to use our webpack. And in order to use webpack, you have to do NPX webpack, and that will package up our files and send it along so that it will work on our node mon on our local host. So it'll take a second. That took about three, three seconds. But now our code is built. So now when we're in here, we just go back to our root route and there we go. Our calendar is now populated with all of that data that we created. Okay, so now that we've got all that and we can see our calendars working. Yay. Awesome. So now we're going to work on parts two, which is the form. So the form, we're going to use our PUG templating language. We're going to just call a regular HTML form, and we're going to use our custom objects post endpoint. And so to create the form to build it, we're going to use the PUG templating language. We're going to create the HTML form and set the method to post. We're going to create a select dropdown with all of our options and we're going to create inputs for our start date and our end date. So inside of our index pug here, inside of the form, I have this little to do here. This is where we're going to add in our code. And again, PUG makes this super simple to do. So it's going to be called form. And then here, inside here, we're going to do our method again. We are adding stuff to our HubSpot account. So we're going to use our post method, which is create in crud. We're going to give it an id. And this ID is going to be rent equipment, not rental equipment, rent equipment. So just make sure that you have that. And then the first thing we're going to do is we're going to create a label for our select. And this is going to be, we're going to set our four, and this is going to be choose equipment. And we're using camel case just to make it easier to read. And our ID is also going to be choose equipment. And then our label is going to be called equipment to rent. And then we're going to create a select. And there are a lot of different options for this. So I'm going to show you the different things that we're going to add to this select. But then I'm going to copy over the option values and you can go ahead and copy over the option values as well inside of the finished index PUG file. Just because there's so many different options. So we're going to make sure that this name is Choose Equipment, because we had our label for Choose Equipment. And then we're going to do our ID and we're just going to set up an ID of equipment, and then we are going to say form, and this is going to be connected to that Rent equipment up there, because we named the form that or we gave it an ID of that. And then we're going to make this required. So all of our things on our form are going to be required. So people can't submit without adding this information in. And again, we. Like I said, there's several different options. So I'm just going to copy and paste those options over and put those and nest them inside of our select. So when you're using pug, what you do have to remember is that you have to put. You have to put in your spacing here, because then that will nest it inside of that select section, just like how you have an HTML tag you would want to like nest in your code. That's what we're doing the same thing here with our index PUG file. And now we're going to create our next label. Our next label is going to be for Choose Start Date. So we're just going to call that Choose Start Date. And then we're going to call this rental period start. And then on the next line, we're going to put in the input and we're going to set the input type to be a date. We don't want them to put in any other type of data. We're going to create an ID for it called Choose Start Date. We're going to name it Choose Start Date again so it'll match the label for. And we're also going to make this a required section. And then because the rental period start and that one is the same, I'm just going to copy the label over here. And then we're just going to change this from start date to end. And that just makes it super easy. So we're just going to use that command D again like we did. So highlight all of the last once and then we can just quickly change that to the word end. And now all of our label and input for this stuff is for our Choose End date instead of our Choose Start date and our now we've created our HTML form so we can go in to our here. And then if we refresh this, now we've got our HTML form showing up, which is awesome. And I forgot to Add a button to. We've got to make sure that when we input our button we add a submit button. So we're just going to add a submit button really quick. Let me see. Oh, this is our input type. Sorry, input type. And this input type is going to be to submit. Got to make sure we have our submit button where people can actually submit the form. And then this value is just going to the what's inside of the button is going to say reserve your equipment. And then we're going to refresh our page and now we've got our shiny reserve our equipment button. So if I try and do this right now. So if I try and like put in a date, so it's a three day period. So the 27th tomorrow extend. Oh yeah, it's very exciting. To Sunday October 30th and then if I click reserve your equipment it's going to give me an error and that's because we haven't actually given it anywhere to go. So this is what we are going to work on next. We are going to work on using the API to post our data. So to post our data we're going to use the objects endpoint again. We're going to set our headers, we're going to create an object with the data from the form and we're going to send all of this via Axios post. Again, thinking about our crud create our HTTP method is post. Okay so this, this information is going to go inside of our index js file. So inside our index JS file we're going to scroll down and the last thing that we're going to do is we're going to create this app post. So instead of get, we're going to use app post and then we are going to have this also live at the root route. So we're just going to put our little slash there, open up our anonymous function, add some variables, use our equal sign, caret key brackets, semicolon, you've got the gist by this. So the first thing that we're going to do is we're going to create a new constant. This constant is going to be called new equipment rental. And this constant is going to be our object. And this is going to take our data from our form and put it into our HubSpot account. So we're going to create a key value pair called properties and this properties is going to be another several different options inside of here. So we're going to have our name and this is where we can call our data from that form that we just filled out. So we're going to do request dot, body dot choose equipment and these are all connecting with those ideas that we created on our HTML form. And then we're going to do our start date and we're going to do request body dot choose start date. And then the last one is going to be our end date, of course. And this one is going to be request body dot choose end date. And then we've got all of our properties that we're sending along. Great. The next thing that we have to do is set up our URL that we're going to be calling again our URL. We're going to put that in a constant as well. Const post new rental. Again, you can name your. You can name all of these variables, something different. But I try to use semantic naming just so I know what these different things are, what they're for. So if you want to name them other things, that's totally fine, just remember to call it properly. But again, I just try and keep my naming semantic so it's easier for other people to understand as well as myself. And again, we're going to use our template literals, we're going to use backticks, we're going to Type in our API URL CRM B3 objects and then we're going to open up our template literal with our dollar sign brackets and we're going to do our your custom object ID Again, we're going to end the line with a semicolon and then we're going to create another constant called headers. And this is going to be the same one that we used up here in this get data so we can just copy and paste this so we don't have to rewrite that headers. We're going to copy and paste that over and then we're going to write another try catch to make sure that we have issues. Because again, we're doing a lot of promises and we don't want any of these promises to mess up. So we're just going to make sure if we have an error, it's going to give us that error message and tell us what we did wrong so we can fix it. And inside of our try we're going to await. So we're going to turn this into an asynchronous function. So async await and we're going to do axios post and this we're going to send along the different things. We have to send it in a very specific order. The first thing that we have to do is send it the URL that we're calling. So post new rental is the URL that we're calling. Then we have to give it the actual new equipment rental which is the the information from the form. And then we have to send along our headers and then we in that line and then once we have this, we're going to do res dot redirect and we're just going to have it redirect back to the page that we're on, which is our root route. And so that will actually update our calendar as well so that you can see in real time that new calendar showing up. Okay. If rec body returns an empty hash, it's probably because we haven't filled out our form. So let's just go back here and let me refresh the page just so we can make sure that we're all on the right stuff. I'm going to rent so I'm going to rent the MacBook Pro 16 and I'm going to rent it from the 24th to the 27th so it should show up under this Canon Rebel T7 once we have sent it along. So 24 to the 27th and then we are going to click reserve our equipment. It'll refresh and TADA. Our MacBook Pro 16 has shown up on our calendar.