Week 9 - Wednesday, June 16th
Last updated
Was this helpful?
Last updated
Was this helpful?
Today we're going to learn about tables. They are used for storing tabular data. Basically the equivalent of a spreadsheet.
Historically, before the div element and grid/flex were introduced, web developers often used tables to define the structure of their web pages. Now that these other techniques exists, it is a bad practice to use tables for this purpose. They should only be used to store tabular data.
Here's an example of a table for our zoo exercise. It has four columns, and a row for each type of animal.
The table element is the top-level HTML element required to define a table.
The table element has two child components.
The thead and tbody elements are not required, but good practice, as the web browser uses them to enable scrolling of the table body independent of the header.
Here's a complete table element with one row of data.
First, add a new button to the end of the list of buttons at the top of the page and give it an id="summary-link".
Next, create a function to initialize the summary button with a click event handler.
From within the click handler code, call a new function named showSummaryTable.
The showSummaryTable function should retrieve the div with the id="main-content" and the update the element's HTML with the new HTML content you are going to build for the summary table.
The next step is to build out the HTML for the summary table. The basic structure of the table is pretty straightforward. I've added some bootstrap styles to the table element to make the table look nice. If you remove them you can see the before/after to see what they add.
The next step is to build the HTML for the rows. For each animal type, we will call a new function, named getHTMLForSummaryTableRow, that will build up the HTML for a single row in the table.
For the first step, we'll only build the content for the first three columns and leave the last column empty.
Last, we'll build the HTML content for the last column. It's a bit more complicated, because we want to build up a list of the animals (name, age, sex).
An HTML form provides a way for websites to collect information from users and process requests. Forms can collect small amount of information, for example a login screen requests a user name and password, or large amounts of data, such as shipping and billing information.
Initially, there were very few form elements provided, but there currently is a wide selection for almost every need imaginable. Examples include text input, dropdowns, radio buttons, checkboxes, passwords and email addresses. The critical form element required with every form is the submit button.
In this lesson, we'll learn how to create a form, and define the elements within the form used to collect the information, and how to process the form.
We'll also briefly look at some styling that Bootstrap can provide to make our job easier.
The form element is the container for building a form. One of the essential elements contained within the <form> element are <input> elements. The <input> element is used for text input, but has a type attribute to describe the type of data the element should contain.
HTML supports many different input data types for the <input> element. The web browser will present the appropriate UI control and validate based on the data type specified. The full list of data types supported by HTML5 can be found here. The input type is a client-side attribute to assist in collecting the data and is not sent to with the form data sent to the server for processing. The only form data that is sent to the server is the names of the input fields and their associated values.
In the HTML code sample above, I omitted the elements that I added for the field labels and the CSS to make everything look nice. HTML forms need a lot of CSS to properly position and style their elements. For example, here is what is displayed in the browser with just the minimal HTML from the code block above. There are just two <input> elements of type text, for the first and last name, and a single <input> element of type submit, which will be rendered as a button with default styling.
The <label> element is used to associate a label with a form input element. To associate the two, the label element must have the for attribute set to the value of the id attribute on the associated input element.
The id attribute is necessary to associate a label, whereas the name attribute is necessary to indicate the field name to the POST request.
By default, the <input> and <label> elements are both inline elements, which is causing the entire form to be displayed on a single line. A common technique to get each input field to be in its own row is to wrap each with a <div> element (which is a block element) and add a margin on the bottom of each.
Below are a few of the common input types that are available. As you can see, the browser has provided type-specific input controls to gather and validate the data.
In some cases, the form data is sent directly to the web server for processing. When this is the desired behavior, there are two attributes on the form element that configure this.
There are two ways of processing a form when the submission button is clicked.
send the form to the server to process
process it on the client.
The purpose of the action attribute is to specify the URL to which the form data will be sent when the user submits the form. The method attribute specifies how the data will be sent. This method value typically would be "POST", which indicates that the input data will be included in the request body.
The name attribute is the form field name that will be used when the data is included in the request body.
You can see this output in the Chrome Developer Tools Network tab.
First, we click on the Submit button and we can see that the form was submitted to the page below.
If you scroll down in the Headers area, you can see the form data. The web server would have code waiting to respond to this submission and then it would unpack the form data from the request and process it.
The other option is to register an event-handler on the submit button and process the code directly within the event handler on the client. This is the process we're going to use for the remainder of this exercise as we build a new form to simulate purchasing tickets to the zoo.
A big part of form development is the additional styling that is required to make the form look presentable, as the default styling by the web browser is pretty limited. Additionally, validation of the data is necessary. This functionality is often a selling point of adopting a front-end framework, such as Bootstrap, which provides extensive support for forms.
For this exercise, we're going to use Bootstrap to help make our job of styling the form easier.
Building the Zoo Form
Our goal for this exercise is to create a form that allows a customer to purchase tickets.
After the data is entered and the Submit button is clicked, the form will be processed and the following table will be displayed.
In the previous example, I showed how a div is used to wrap each form element to get the separation between the different input fields. In Bootstrap there is a special CSS class used to style this.
Each input element is surrounded by a div with the class="form-group". It includes space around the elements.
For our form we only have one type of input element. We're using the select element, which allows the form to present a dropdown list of values for the user to select from. This is what we are using to collect the number of tickets for the different categories.
The first step is to setup an event handler to respond to the click event on the submit button for the form.
Next, we need to collect the data from the form elements. After getting the form element from the DOM, there are properties on the form object for accessing the elements.
A short aside. We have not yet introduced an alternate way you can access object properties. So far, we have learned the dot notation.
It is also possible to access object properties using bracket notation.
Bracket notation is useful when you want to dynamically access a property of an object. That is, you do not know the name of the property until runtime. We'll learn about some use-cases for this later. For now we just need to know about this syntax because we are using it to access the form elements.
The code below is getting the values input by the user for each of the select elements. The values are returned as strings, so we need to use the JavaScript parseInt function to convert the string to a number so that we can add them.
Next, we want to do some processing of the data.
We want to calculate the total cost for the tickets. I've added some new data to the zoo data for the prices. We'll use this in our calculations and then, as a first step, just print out the total to the screen.
The next step is to build a table to contain more detail.
Add one additional field on the form that collects a coupon code, which will be used to calculate a discount on the total price. If the coupon code is added, then the total price will include a 10% discount.
The processForm function will need to be modified in the following ways:
get the value from the coupon form element
check to see if the coupon was entered, and if it matches the word "ZOOPASS", then apply a 10% discount to the totalCost.
Add an additional row in the table, just below the last row that give the total. This row has the following HTML.
The output should look like this:
To get the numbers to only show two decimal places to the right, you can use the Number.toFixed method.
I added some code to the ticket page/script to show a carousel of the lions (picked just the lions because the image dimensions are all the same, which is needed for the carousel).
You can click on the next/prev links to slide through the food items.
The challenge is for you to create a new data file and use that data to display in the carousel.
Create a new file, named carousel-data.js, in your local project directory (same directory as scripts.js) and then include that in the tickets.html after the line that is including tickets.js.
Next, build some data for something you want to display. You can just create a variable that holds an array of objects, with each object containing the properties you'll use in your carousel item HTML.
Use unsplash.com to get the images. Pick a set of images that are all approximately the same dimensions so they will look nice in the carousel.
For example, I created an array of food items, I'd create some data like the following. You can create any properties you want.
Note: I had to get a later version of the bootstrap stylesheet to get the carousel to work. Replace the bootstrap link at the top of tickets.html with these two lines.
I'd like you to watch the following three videos introducing Rest API and Node.js.