Lab 8: Forms and Tables/Getting Started on Your Project

This lab has two distinct parts: 1) working with forms and tables, and 2) getting started on your project. Here are a couple of relevant links:

Task 1: Forms and Tables

First, we'll create a simple form that asks the user to supply two pieces of information: 1) how much does their favorite cup of coffee cost and 2) how many cups do they consume per week. Once the user has filled out these two form fields, the form performs some calculations. Here is a screen shot of the form:
original form
The user fills in the information in the first two boxes:
original form with user input

When the user clicks on the "do coffee calculations" button, the following three calculations are completed:

  1. The amount of money spent on coffee per week (displayed in the textbox as 63.65 below)
  2. The amount of money spent on coffee per month(displayed in the textbox as 273.7 below -- it's ok that it does not show as 273.70). To calculate coffee costs per month given the weekly cost, there are about 4.3 weeks per month.
  3. The amount of money spent of coffee per year is calculated and displayed in an alert box (shown as 3309.8 below). There are 12 months in a year.
original form with results displayed

Steps for you to follow:

  1. Create a folder on your Desktop called Form and save your page, called coffee.html in this folder.
  2. Create the form, making sure to name each part of your form
  3. Write the JavaScript code to perform the first (cost per week) calculation and display it in the form. Test this one first, before moving on to the other calculations. When does the calculation occur? Where does the result appear in the form?
  4. Continue with the remaining two other calculations, testing incrementally as you build your form.
Useful hints:

Alignment of Form Elements

Take a look at the source code for this variation of the coffee form to see how to align the elements of your form using a table

Task 2: Getting Started on Your Project

Let's look at how to code a sample website. Today's lab should give you some insight into how to efficiently start developing a medium-size team project.

Navigational and File Structure

The website that we will create in this lab will have the following navigational structure (red denotes partner responsibility, and blue denotes a JavaScript application):


The files will be organized in the following way (all images files will reside in the Images directory):

file structure for project

To do