- [Voiceover] Over the course of the next several videos, we're going to be working on this website for H+ Sport, a fictitious brand we've created for use in some of our courses. They have a shop page on their WordPress site, and they want to sell some products. What we're going to build is an estimator that can take the number of products they want to order, the state that they're buying from, the shipping method, and then calculate the total. This is where we're starting, but let me give you a little preview of where we're going to end up. So if I enter a few products and choose a state, let's go with California, then when I click the Estimate Total button, I get a total estimate based on the price of each product, the price of the shipping, and then I get a little summary down here of how we arrived at this total.
So back here on my start point, I want to show you what the HTML looks like. So here's my index.html file. It's quite long, and there's a lot going on in here that is not of direct concern to us. It's just building up the site as it is. This being a WordPress site, there are a lot of plugins that were loaded that load CSS files. Whole bunch of stuff here. What we're mainly interested in is going to be a little further down the page after we get past the navigation and we get into the actual HTML of the form where all of this stuff lives.
Also, where possible, it's nice to use HTML5 input elements, so you may have noticed in the browser that when I mouse over each of these text fields, I get a little up and down arrow that lets me change the value. I'm in Chrome, and Chrome has some special rendering for the HTML5 number input type. Instead of using a text field, I'm using number because that way I can specify a minimum quantity. And then browsers that support it, like Chrome, you get these up and down arrows, but then, also, I'm not allowed to type anything that's not a number.
- Working with the DOM
- Creating maps with the Google Maps API