+

Project 4

Huixin Xu

+Process of Creating the Form

The form isn’t that hard to create as I just based it on what a regular registration form would look like. Textboxes for input and radio buttons for meal choices were used.I thought that this way it would be easy for the user to understand without needing help from a guide.

Note that for some of the textboxes, I had varied the sizes, and others I had limited the length (ie. the postal code and phone number)I had also separated the form using tables.

I placed an “Add Member” button, which I will explain later in the JS section.Also, I thought it would be kind of fun to display the cost in a scroll box like a receipt. As you can see here, the white box will display the receipt with costs listed individually and together when the “Calculate Cost” button is pressed.

+Process of Creating the JS

After getting a basic form page done, I moved on to planning the JS.On top of the page, you can see the global variables used in this JS code. You can see that I used many. This is because I had a maximum limit of 20 members and each member is defined with several variables such as their discount number, their meal preference, etc.

The first function I tried to create was the add additional textbox option upon clicking the “Add Member” button. This was very tedious, as we have not learned how to use innerHTML or the <div> tag. What you see in front of you is the functions for generating each row upon clicking the “Add Button”. Why is there so much text? Well…because each of the textboxes have different ids, I had to rewrite the code for each of the input boxes. The different ids are needed so I can display them later in the receipt.

Ah…but that’s not all I needed to do.Upon each time the user clicks “Add Member”, I needed to count the number of times the button is clicked, up to 20 so that only 20 unique boxes with unique ids are generated. This function shown here called generateRow() will generate a box with a different id according to the number of times the button had been clicked.

Okay, so after the user creates the correct number of textboxes corresponding to how many members are on their team, they will then fill in information about their name and their meal preferences.

This function here called displaymemberarray() will collect information about each member’s first and last names for later use from the text boxes. Why is the code so long? Well, because if I just write in all 20 ids at once, if there are only 3 members for example, then 17 of those ids will be undefined. So again, I had to rewrite the code according to the number of times the “Add Member” button was clicked.

This code called displaycostarray() will calculate each team member’s cost of the registration for later use. It takes into account taxes and the meal discount.Keep in mind the calculation changes in different parts as there are different rates depending on the number of athletes.Also there are 2 sets of data, one for male and one for female, as each have their own rates.

Team Size Cost Per Athlete (male)

Cost Per Athlete (female)

4 or fewer athletes $25.00 $26.00

5 athletes $20.00 $22.00

6-10 athletes $18.00 $16.00

More than 10 athletes

$15.00 $14.00

The cost of the registration is shown above. It is the same as what is mentioned in the Assignment4 rubric.

The coach cost is $20.00 and the assistant coach cost is $18.00

The discounts are the same as well, with a 10% coach discount and a 5% vegetarian discount.

The meal price $10.00 per person.

This function called displaymealarray() will record the user preference for meat or vegetarian meal for the banquet for later use.The data is collected by first checking if the user selected meat or vegetarian, then collect the value of the radio button (ie. either meat or vegetarian) for later use.

This function will calculate the discount for each team member and then totaling it. It does so by first verifying if the member ordered vegetarian. If the member did, then his/her meal will get a 10% discount or 1 dollar off. If not, then the variable remains at 0.

This is a follow-up of the previous function that will keep count of the number of members and only calculate using the corresponding ids. Again, if I use the same function for a team of 2 members and a team of 10 members. The team of 2 members will have undefined ids that do not exist as those textboxes that contain those ids have not been created.

These functions will calculate the coach discount and the coach’s vegetarian discounts. They are the same as calculating the team members discounts, but much easier because you do not need to count with the “Add Member” button: these textboxes’ ids will always be present.

This is the function for calculation of the subtotal. Because this one does not require the use of ids but only the number of times the “Add Member” button is pressed, I did not have to repeat the same code over and over. There still are loops here however because the prices for different numbers of athletes and sexes is different.

These 2 functions shown here will calculate the GST and the total discount. The total discount uses the total of the team member discounts and the coach discounts and adds them together.The GST function will just multiply 6% to the subtotal.

This expanded function shown here is used for calculating the actual total.It is calculated using the data collected for the subtotal, the tax, and the total discount.

This is where the all the data I had collected truly shines. This function called textinreceipt() will record the contact information, team profile, and of course, the cost of the registration in XHTML tags to be used for display when called.

And this is the function for displaying the text in the receipt from the previous function.This function is linked to the “Calculate Cost” button on the form via “onclick”. This means that when the “Calculate Cost” button is pressed, the textinreceipt() string will be projected onto the scroll box like magic!

+Finishing Touches

After writing the excruciatingly long JS code, it’s back to the form to make it look nice and pretty.

I’ve created a very basic layout with nested tables to keep the page neat.I also added a picture and a background image to add some flair to the page.

This is the page the user will face when they access the project.html webpage. It has a brief introduction followed by a register button on one side, and the powerpoint on the other side.

+Challenges and Solutions

Biggest challenge: Increase the number of text boxes when “Add Member” is

clicked This was very tough to do as we have not learned about

the <div> tag nor the innerHTML command. Therefore, I had to go online to search for this and it took me 2 hours to learn how to get it right.

In the end, I still could not figure out how to remove textboxes with a “Remove Member” button

However, I did manage to correctly code the add member function.

+Challenges and Solutions

Javascript Because of the addition of additional textboxes, another

challenge was faced: that is, JS would not allow me to search for ids that do not exist. This is a huge problem as I mentioned many times above. This led to hours of repetitive coding in order to get what I wanted. In case you haven’t noticed, I have more than 5000 lines of code!

Also, I really wanted to do something with arrays. That was why I had called 3 of my functions display___array(). However, I could not really find anyway to use the arrays I made. Perhaps when I am more familiar with JS I could find a way to use them to make my life easier.

+Challenges and Solutions

Debugging There are several times when I forgot to add squiggly

brackets around my functions. This caused hours of painful debugging as the error console in Firefox isn’t particularly helpful in pointing out exactly what was wrong with my code.

And of course with so much code, I had to really watch that I don’t mess up parts of my function with errors such as forgetting the quotation marks before and after + signs, forgetting to write part of the tag, etc. When I really had trouble, however, I would use the handy alert() function to find exactly where my code is wrong. Again, the Firefox error console isn’t specific enough for me to rely on it all the time.

+Challenges and Solutions

Kompozer Kompozer is very bad at keeping track of the JS code

indents and really messes up the code that I sometimes couldn’t read it when I go over to the text editor. I had to reindent several times to make my code look neater.

Also Kompozer crashes frequently and sometimes will not do the command you ask it to do. I overcame this by saving often and correctly the source code manually.

+How to Use Registration Form

On this part of the form, please enter your contact information as directed by the text beside the textboxes.

On this part of the form, select the sport you wish to register in. Select your gender (the default is male).Type in the Coach and Assistant Coach’s names and select whether you would prefer a meat or vegetarian meal for the banquet.Lastly, type in the team member’s names and meal preferences. Keep in mind that every time you press “Add Member” the data from the previous team members disappears, so it is best that you type in the data after adding all the textboxes you needed.

This large white box is a scroll box that will display the receipt to your order when you click “Calculate Cost”.It will help you confirm your order.

After confirming the cost of your order, you can either choose to “Submit Form” or “Clear Data” and start over.

Click on “Back to front page” to go back to the introduction page.

+

The End!Hopefully you had fun reading this!