Placeholder Image

Subtitles section Play video

  • in today's video, we're going to be completely finishing the entire my berry app.

  • So let's get started now to get started with finishing our application.

  • We're gonna tackle all the changes we need to make to the author's pages.

  • So let's start up our server.

  • Let's look at the differences between our author.

  • Page is the only real things that we need to change is the actual authors Index page is slightly different.

  • If we look at our index pager, you see that our name is not being properly positioned, so we need to work on doing that.

  • This is, luckily relatively straightforward.

  • We can just go into our full.

  • They're here for our style, shoots shared and let's add a new style shoot.

  • We're gonna call it off without success, and this is where we're gonna put all of her off their styles.

  • We then want to import that into our main CSS just like that.

  • And now if we go into our view for authors from the index page here, we can make the changes we need for our styles.

  • The first thing we want to do is we want to style are often name, so we're gonna give this a class off her name.

  • Next we want to style the layout of this road.

  • We're gonna wrap the content of the road in a class, but we're just going to call off their room.

  • Here we go close up active and everything.

  • And now if we save that, nothing's changed over here.

  • But if we go into our CSS, we can start styling this room to look just like this.

  • Luckily, this is quite straightforward.

  • First thing we need to do is select our author rope.

  • We want to change the display here to be flex.

  • We want to justify the content with space between so they get separated out just like our header.

  • And of course, we want to add a little bit of margin between each row.

  • So add margin bottom of one RTM then for the author name itself.

  • We just want to make it slightly larger.

  • So we're going to increase the font size won't find five r e m.

  • Now if we say that and go over here, you can see that this now looks exactly the same as our search authors.

  • Paige over here and everything is working as intended The next thing that we need to do to make a few changes is on the actual view page for our authors.

  • If we go over here, you can see that our books are being displayed quite differently on this page, as there are on this page and you may notice, in our entire application, we display the books completely the same in almost every single page in a very similar layout.

  • So instead of having this code copying pasted all over the place because as you can see on our author show page, we're looking through all of our books.

  • We should create a partial that encapsulates how these books should be displayed.

  • And if we go back to our application here, you could see it.

  • These are displayed at a normal size on this page.

  • Our books have displayed very largely, and on our home page, our books are also displayed largely, so we need to be able to determine if we wanted to be a large book grid or a small book, great as well.

  • So let's create that partial down here new file and we're gonna call this a book grid di E.

  • J s and then inside of this partial.

  • Let's just copy over all the code from our author section.

  • Haste that into here.

  • And we're gonna change books by offer to be books, because we're going to have this be a generic partial.

  • That's just going to take a list of books.

  • Also, as I mentioned, this parcel is going to take whether or not this is a large book grid like this or if it's going to be a small book group like this.

  • So we need to determine what it's going to be, and we need to set some variables based on that.

  • The first variable that we want to set is the cover class for the book, and this is going to be equal to locals, which allows us to get our local variables.

  • We passed this dot large, which is what we're going to set if we want a large book grid.

  • So if it is large, then we want this to be book covered large as the class for our cover.

  • And if it is not barge, we just want this to be called book cover, just normal.

  • We also want to do the exact same thing again but we want to set a different variable this time.

  • We want to set a variable for the book Great class.

  • And this time, if it's a large, we want to just set this to book grid large.

  • And if it's not large, we just don't want to set a variable at all.

  • And there we go.

  • Now we can use those variables inside of our loop here in order to set what are books look like?

  • The first thing we want to do is wrap This book's a right inside of a tive, which is going to be our grid.

  • So we have foot grid and we also want to apply another cross of book grid large.

  • Here we go.

  • Now we put our book code inside of that Dave indented all properly, just like that.

  • And the next thing that we want to do is actually apply the classes for a cover so we could do that on the image itself.

  • We can move our heightened with, since those will be determined by the actual classes and then in here we can set a class which is going to be cool to book cover.

  • And we also want to set the class of the book cover class name.

  • So it was going here.

  • We want to set this equal to book cover class just like that and our sources already set, which is perfect.

  • And I noticed appear I put book grid large for this should really say book grid class because we want this to change whether or not we pass in large or not.

  • Also, we don't need this here inside of our locals because it's already being passed in by default.

  • Now it's saying that and that's our book grid complete.

  • And now we can import that into our authors show page.

  • So instead of all this code right here, we can replace this with a single, include, So we can say here include and we want to include from the partials folder just like that, and we will include the book grid, and all we need to do is pass the variables.

  • We want to go in here, which in our case, is going to be books.

  • And we want this to be books by often, just like that.

  • And there we go.

  • That's all because we need to include that now they can say that.

  • And if we go back to this page, go to an individual author.

  • You notice that we're getting on air?

  • This is just because I forgot to close out the parentheses for include method here.

  • Now it can refresh that and you notice we get another air and it looks like it says book si cover classes, not find.

  • So it looks like in our book grid, I just misspelled this variable.

  • Yes, I did.

  • Now you could say that end perfect.

  • We're getting exactly we want we have our books by our author, which is great.

  • And if we go over here are books by author are much smaller.

  • But that's just because we haven't supplied the classes yet for a book cover and both grids.

  • So let's do that now.

  • We can do it in a file here, call the book dot CSS, which is all of our books specific stylings.

  • And again we want to include that right here.

  • Remain that CSS and make sure that I spell that properly Bookstop CSS that we go and to get started was to find a few variables where you're going to determine the sizing of our book cover variables.

  • So the first pair of all we want is going to be the book cover with which is just going to be the standard with of 200 pixels.

  • Next, we wanna have another variable called book cover with, and this is going to be a large variant, which in our case will be 325 pixels.

  • And we also want finally, a final variable.

  • Would you wanna be called book cover aspect ratio And this essentially is going to be the difference between the height and the width.

  • And in our case, we just want this to be 75% still say 750.75 just like that.

  • And now we have an aspect ratio between our wits and our heights, and we also have the width with small and large book cover.

  • So let's get to work style in our book covers.

  • This is going to be our standard book cover.

  • Which one is going to be sitting here?

  • But with is going to be variable, which is just a book cover with just like that and for the height, we need to do a little bit of a calculation.

  • So which one do Cal here.

  • We want to get that variable but a book cover with and we just want to divide that variable by the other very boy we created, which is the book cover aspect ratio.

  • There we go and we have her height and are with for a standard book covers.

  • And if we said that, you see that already are book covers have shrunk down to the proper size.

  • And let's just get our large book covering here as well, so we could go book cover large, and all we need to do is just redefine the book cover with variable once it is variable here, equal to the book cover large just like that.

  • And it would do the same calculations up here because it's going to replace this book.

  • Cover variable with this large book cover variable.

  • But we can't see that because obviously these are not a large grid weaken.

  • For example, view this as a large grid, though we go into our authors show, and we also pass in a very cold large, and we give it the value of true.

  • Now if we say that you see are books have grown in size to the large size.

  • So now that we know that our grids working, let's finish styling our actual layout for the grid.

  • We can use that book great class that we just created to define the grid that we're gonna be using.

  • And we'll be using CSS great for this so we'll set the display to grid.

  • We want everything to be centered.

  • So let's say justified content in the center.

  • We want a slight gap between all of our elements, so we'll use great gap for that and just make that to a R E M.

  • And lastly, we wanted to find out how we want our columns toe layout.

  • So we'll say a great tip.

  • What columns is going to be repeat, auto fill, which essentially means it's going to feel is much space on the width as possible before raps to the next line.

  • And then we want to say what the width of each of the items in our ray will be.

  • In our case, this is just going to be that book covered with.

  • So was this a book cover with just like that?

  • And now we have a array of template columns which are going to be feeling as much basis possible for each one of our books.

  • Now, if we say that, he said that they're spaced out for each other and filling up as much space as possible.

  • And if we shrink this down quite a bit, you'll see that it will wrap down to the next line as soon as it can't fit all of them on a single line, which is perfect.

  • Now a city is accident thing, but for a large cover grid.

  • So both grid large and all we need to do is redefine our template columns.

  • We could just copy this down, and we want to use the large wit as our with spacing instead of a small with so that things don't overlap each other.

  • Now that we have that grid finished, let's use that grid in all the places that it needs to be used.

  • The first places on our index page, for example, soldiers go to our show will copy down this grid code, but our index page and we're just going to replace all this code in here for leaping over our books.

  • Get rid of these extra days since we don't need them, and we just want to make this all large grid.

  • So it's a large true, and our books variable is just called books.

  • Now, if we say that, go to our index page, you say we get an air, and that's because we need to fix our path to say partials.

  • And now if we say that, you'll see that we have a large book grid here, which will also rap as needed when it becomes too small, which is perfect.

  • And the last place we need to do this isn't our actual books index page.

  • So let's go to that as well.

  • We can again cocky this code Good index page, replace all this kind of here.

  • And of course, we need to change the path.

  • And there we go.

  • Now we have a nice book right here, which is really, really good.

  • Let's add a little bit of space in cellars, out of line.

  • Break in there.

  • That way we have a little bit of space between these different elements.

  • And now, before we tackle our final page, which is the book show page, we have one final thing to tackle, which is our error message.

  • If we try to save this, for example, you'll notice are ever message They're showing up as the same color as the rest of our text.

  • And we want that to be a darker red color.

  • So inside of our Arab message partial that we create here, let's just wrap this initiative so that we could give it a class here.

  • We're just going to be a real message and finish that off and close the diff.

  • Now we can select that air message class instead of remained out CSS scroll down to the bottom message and all we want to do is set the color of this text.

  • I was going to send it to be equal to that variable that we have for a danger color.

  • So say color, danger you And of course, we need to make this an H S O.

  • And we want to make it so that saturation is 100% and that the whiteness of this 50%.

  • Now, if we say that, you'll see that our air message is properly showing up as this nice red color for us, and it also scales off of our cue value in case we end up changing us in the future.

  • Now we can finally finish up by going to our books, page, show page and styling This toe look exactly the same as the mock up over here.

  • So let's open up that page.

  • We gotta book show page right here, clothes out of all these unnecessary taps.

  • But it's a lot easier to see what's going on.

  • There we go.

  • Everything's nice and clean, and we can start styling this page as needed because right now there's no style is being applied to it.

  • First thing we want to do this organized the HTML that we have here.

  • We are again going to use grid to style this.

  • So let's break this apartment a different grid section.

  • Right now we have a few sections.

  • We have this grid section on the left here, and we have this crude section on the right.

  • So let's style that accordingly.

  • The first thing that we want to do is you want to wrap everything inside of it did with the class that is going to be book details.

  • This is essentially everything except for the title of our page.

  • Close that off, invent everything and close that Dave Perfect.

  • And now the next thing we need to do is get a different sections rat.

  • So the first section that we have is going to be our buttons.

  • So we need to move our buttons up to be underneath of the image up here.

  • And we want to wrap that in a div.

  • Doesn't need any classroom thing.

  • This is just to separate it from the rest of our content and again wrap that tentative and invent everything has needed.

  • Also, we should apply our class buttons here.

  • So this is going to have a classic here of a button and button primary where we go, we're gonna have the exact same button classes on side of this of you author as well.

  • So that's perfect.

  • And we also want to apply a special class to this view office.

  • It's it's slightly bigger than the rest.

  • So we're gonna say book details, author button so that we know that that is what this button is that we're referring to.

  • Now we can say that, and if we look over here, you Minister buttons have already changed their color, but just not the position yet, which is okay The next thing we want to do is you want to select all of this again and rapid in yet another def.

  • Just these links section.

  • So we're going to just do a diff here.

  • We're gonna give it a class of book details, but Ingrid and this will just allow us to style these buttons in this grid format.

  • So let's invent those inside of active just like that.

  • And that's all we need to do for this top section over HTML.

  • Now we can work on style in his bottom section of our Htoo with all their published eight page count, et cetera.

  • And again, we're going to use grid for this.

  • So let's create another day if we're gonna give this one a class of book details grid.

  • So it's just the details of our book Close off that Dev.

  • And then inside of here, we're going to want to put all over different elements, and instead of putting them in one day, we're going to actually put them into multiple bids.

  • So the first, if there were going to give a class of book details label because this is going to be a label, it's just going to say author with a Sim Coleman after it didn't close that Now we can copy this down four times for each one of our different sections because all of our labels are going to be exactly the same.

  • We just paste all the different sections of our label in there just like that.

  • And now we have all of our labels done.

  • And after each one of those labels, all we want to do is just put a diff that has the content here.

  • So it's copy this and put it inside of a deal.

  • We don't even need any classes on this because our CSS grid will take care of the positioning for us and we'll do the same thing published date.

  • So again put it in a div and page count.

  • And lastly, we want to do the description and we can really all this extra stuff down here and now we have all the ht mo written that we need for our project, and if we go over here, obviously it's not going to look right yet, but that's what we're going to use our CSS here in order to style it using grid so if we look at our example over here, the first thing we want to do is we want to display these buttons sections with the image on the left and this section on the right.

  • We're gonna select that rapper class that we defined cold book details and all we're gonna do is set it to be displayed flex, which will line up everything on the left and right, as you can see here, which is perfect.

  • Next, we can move on to the actual labels themselves.

  • So let's select those labels because these were gonna be fairly easy to style.

  • And all we're gonna do is we're gonna change the font size so that a slightly larger at 1.2 r e m we want to choose the fun to wait.

  • In this case, we're just gonna use 500 we want to align these items inside of their grid container at the beginning, so we'll just say flex start for the alignment.

  • Now, if we look over here that you can see that these labels have grown inside slightly, which is perfect.

  • Next, we want to just fine the grid that these book details are going to lie inside of.

  • So we're gonna select the book details grid, get a set.

  • The display to be grid.

  • Obviously we want to align the content inside of it Flex start, which is just going to line everything at the top of the grid.

  • We want to align the actual items inside of it in the center so that our text will be lined up here in the very center.

  • There won't be any weird things with a Texas of top half bottle.

  • Next, what we want to do is we want to add a grid gap between these items so they are pushed right up against each other.

  • What issues?

  • One r e m, for example.

  • And we want to set up for actual columns.

  • So we'll say Good template Combs.

  • In our case, we're just gonna use auto and auto, so these combs will automatically to find their size based on the content that's in there.

  • Now it's saved that and look over here and you see that everything's being played out perfectly.

  • And the reason we use grid is that we get a nice line here, where everything lines up on the right hand side with the values for the left hand side because if we didn't use grid this Kyle to would be pushed right up against author and so on.

  • But with grid, everything lines up perfectly on the right side.

  • Now we can work on actually styling our book cover and our buttons to style our book cover.

  • We can actually just go into our show a Js here.

  • Remove the width and height from it, but we can add that class of book cover that we already defined earlier.

  • Now, if we say that you see, the book cover is now the proper size.

  • And lastly, we could take a look at this button grid down here so we can select that using book details, button grid, and again, we're going to be putting their display of grid inside of this.

  • We're gonna justify over items at the start.

  • We want a line or items also at the start.

  • That way, everything is a very top left corner inside of its container.

  • And of course, we want to align the content inside of this as well.

  • To be at the start.

  • That means that our buttons will be pushed its high up against this book image as possible.

  • Next, we wanted to find grid template areas.

  • This time we're gonna be using areas instead of actually to find in a rose and comb so that we can use everything by name and easiest way to do this is actually invent on to the next line and we're going to first have our edit button and then we're gonna have to be button.

  • And then after that, our author button is gonna take up two rows.

  • So we're gonna have author and author since we want her off the button to be twice as wide as our other buttons, as you can see here and that with a cynical and then all we need to do is add in the gap.

  • So we'll say Great gap here.

  • 0.5 are Ian.

  • And we want a little bit of space in between the buttons and it image.

  • Same Arjun Top his point final.

  • Auriemma's Well, we could say that.

  • Take a look at what we have over here.

  • And as you can see, our author button is not taking up to full with, even though we said it should right here.

  • And that's because we actually needed to find the great area for that.

  • So let's select that button, which we added a class of book details author Button to and only need to do is tell it we want to use the grey area of author.

  • Now let's say that you see that it takes up that full space, but we wanted to expand to be the full width of these other buttons.

  • So they do that I was gonna say, justify self of stretch, and that's going to make it stretch to be the full width of the other two buttons.

  • And now our page here.

  • What's exactly the same as our other Paige over here and actually every single patient?

  • Our application is now exactly the same as the mark of we created earlier.

  • The only thing left to finalize is on the ad book page.

  • Our cover section is not quite large enough, and this size is defined based on our job.

  • A script, actually, if we go into our JavaScript and we got our file upload, you can see here that we're using 151 100 as our sizes for re sizing this file upload.

  • But Instead, we want to hold these values for our book CSS right here where we have our cover size with our cover with and our cover aspect ratio.

  • Also, I just noticed I spoke this aspect ratio.

  • So let's replace that was do a quick control F and we're going to replace that with book ratios that it's spelt correctly.

  • And then Ugo nothing to worry about there.

  • If we say that, make sure think still works.

  • Looks like it does.

  • And that's perfect.

  • So now it said over file upload here, let's pull those variables from our CSS.

  • One thing to note is that since we're using import inside of our CSS here, this CSS in this import actually gets loaded after our Macy s s gets loaded and after the document gets loaded.

  • So when this Java script runs the CSS, it's set of books dot CSS will not be loaded yet, so we need to make sure to account for that.

  • The easiest way to do that this first we want to check and get the CSS style forever styles.

  • So we could just say Constant Stiles was going to be our main CSS is just going to be equal to a window.

  • Get computer style.

  • We want to get this from the document that Dr Mintz Element.

  • So essentially, this is going to be getting all the styles from the root element of our document, which is going to be all the styles inside of this route tag here.

  • Then we want to use those roots styles, and we're gonna check to see if route styles died.

  • Get property value.

  • We want to check the value of that variable we created, which is a book cover with.

  • We're going to be using a large one for our upload.

  • So we'll say large.

  • We must see if this is not equal to know because it is not equal to know.

  • Then that means this is ready for us to actually access this variable.

  • We're gonna call function, which is called Ready Way.

  • Haven't defined this function yet, which is okay, so let's create that function now.

  • So we have a function, it's going to be called ready and inside of this ready function, we're going to do all the code we were doing outside of it.

  • Close paste this in there just like that.

  • Perfect.

  • And now we need to dynamically get these values of 1 51 100 from our actual CSS here.

  • So to do that, we're going to do it very similarly to how we did our check here.

  • The first thing we want to do is get with, so it's a constant cover with It's going to be equal to the root styles and getting that property value for the large with.

  • And we also want to get the aspect ratio since we need that right here.

  • So that's going to be almost exactly the same.

  • But we're going to get the book cover aspect ratio instead of the width.

  • There we go.

  • Perfect.

  • And now all we need to do is get the height as well, since we need to hate here.

  • So we could just say constant cover height.

  • And this is just going to be calculated so they can say that is equal to the cover with divided by the cover aspect ratio makes your actual name is variable aspect ratio just like that.

  • And now we could take our cover height and actually plug it in here, take our cover with plug it in there and the aspect ratio and put that in there.

  • And the reason that we have to do this check here is to make sure that we actually are ready to use get property value.

  • Because if this style hasn't been loaded yet, this ready function won't be called.

  • So what we need to do instead is actually at an event listener for listening.

  • So it will say, if that hasn't happened, we're going to do is we're gonna get our document and we want to get an element by i d.

  • And in this case, we want to get our main CSS.

  • So we're going to add that I d to our index page.

  • So if we go to our layout, why are you just we have our smelly CSS here.

  • What's at an I.

  • D of Maine CSS.

  • So we can access this in our job description just like this, and all we're gonna do is we're gonna add an event listener, which is going to be a load event listener, and when that gets cold, we want to call the ready function.

  • So this essentially works just like document get event listener to check if the documents loaded or not.

  • But instead of checking if the documents loaded, we're checking.

  • If Macy s s is loaded, because once it's loaded, we know we'll have access to this route style variable.

  • Here and now, you may notice this hasn't actually changed anything over here, and that's because these variables actually returned as strings.

  • So we need to parse this in tow afloat.

  • So what is called horse float on the aspect ratio to convert the aspect ratio into a flute instead of being a string.

  • So that will give us an actual float number, and we'll do the same thing for the width.

  • So what is called Parse Float?

  • And there we go now with is afloat for aspect ratio of the float and our height will be afloat.

  • Now the last thing to do is discovered our cover aspect ratio to the ratio that file pond is expecting, which is just the inverse of our aspect ratio.

  • And if you say that you'll notice that our cover does not actually update its size here, and that's because we need to check both if it's not equal to knowthe, and we want to make sure that we check that it's not equal to 50 string so we can make sure that this check is not equal to an empty string as well.

  • And now if you say that, you'll see that it still doesn't update its size properly.

  • And that's because we need to go into our form fields here for our book.

  • And we need to add a class here of cover look cover because remember, we created this book cover class to define the width of a standard book cover.

  • Now if we said that, you'll see that our book cover is the proper size.

  • And if we browse for cover, for example, right here you can see that up loads perfectly inside of the window.

  • But it's provided, and with that, our project is now complete.

  • Let's exit out of our server, and actually, I'll close this to get so sick.

  • Have, get, commit and we'll just say, finish project.

  • And of course, we'll push this too far removed, and we'll also push it to Hiroko so that we can see the final version of our application deploy.

  • So there we go.

  • Now it's pushing down Moroka.

  • Now that that's done deploying, let's go open it up on Hiroko and you can see that our entire application is here are at book section.

  • Looks perfectly find we can add a new book, for example, but in the page count, hair slept the date and added description.

  • And there we go.

  • We have our book, and everything is working perfectly.

  • We have our hero crap running, and we have it deployed with the database in the cloud already set up for us, and that's it.

  • The entire application is complete and uploaded to hero proofs of the entire Web can access it if you would like.

  • I really want to thank you for going all the way through this incredibly long course and watching all of these videos.

  • And hopefully, Yuri will learn something from these videos.

  • If you did enjoy this course or have any feedback at all, please let me know down in the comments because I want to create more forces in the future, and I want to make them even better than this one.

  • So any feedback that you have would be incredibly useful for me going forward.

  • And with that, I want to thank you all for watching this video.

  • I really hope you guys have a great day.

  • Thank you very much.

in today's video, we're going to be completely finishing the entire my berry app.

Subtitles and vocabulary

Click the word to look it up Click the word to find further inforamtion about it