Begin by starting with a template that uses the Bootstrap 4 framework to get things going. All of the libraries like underscore, bootstrap, and other plugins have been preloaded.
- [Instructor] Let's take a look at the template we are using to get started with this project. I'm using Bootstrap to build my interface and this course uses version four of that framework. At the very top of the page, you can see that I'm importing the Bootstrap CSS. And in many of these different tags, I'm adding Bootstrap classes in order to make the form look a certain way. I'm not talking much about how I do this in this course since we're just focusing on jQuery.
One change I've made here is to load the regular version of the jQuery library. Now, normally when you work with Bootstrap, you'll load a version called jQuery Lite. jQuery Lite is a smaller version of jQuery, and if you look at the Bootstrap documentation, it shows you to load this instead of the regular version. However, in this course, I'm going to be using Ajax to load external content. So I need the regular version of jQuery. I also have a link to my own script file, and this is where we will be spending most of our time in this course.
Right now, that file is completely empty. At the very top of our page, you'll notice that I have also loaded the font awesome library. Version four of Bootstrap doesn't have any icons, so I need to load these myself. And we'll be able to use things like this checkbox right here, and this little plus sign whenever we need them. Now, there is some minor CSS that I've written for this project and if you take a look at that file, it has some overrides for some of Bootstrap's colors as well as different fonts that I'm loading from Google Fonts.
The rest of my HTML is pretty simple. I have this section right here that I have put under the id main-app which contains most of the applications. So this is where we'll be spending most of our time. You can see that we have a series of containers, as well as a header. This is just a section right here before the form and when the app starts we have a section for this add appointment form, and if we collapse that, you can see that it is a card in Bootstrap four, and there's a bunch of code in here to make this form nice and responsive, and appear in multiple columns when it's wide.
The next section here is this search functionality that we are going to build with an input field to type in a search, as well as this drop-down right here. And you can see that is in this section, and then finally, we have a little bit of code that will allow us to load up all of our data from an external file. That's in this petList section, and in addition to that, you'll notice that there is a data that JSON file.
So I've taken care of setting up most of the HTML and the CSS for you. We'll start working with jQuery in the next video.
- Loading external data
- Managing events
- Sorting items
- Searching data
- Formatting, adding, and editing data
- Reviewing the Bootstrap template