H

ICS 215, Introduction to Scripting

Assignment 4

Due Thu 3/8 on or before 11:59:59 pm

Create a version of your favorite cooking recipe webpage where instead of fixed ingredient measurements, you have user-settable measurements in text input boxes. Initially these text input boxes have the same ingredient measurement values as the original webpage. But when the user changes one of these values (onChange), the rest of the text box ingredient measurements should change proportionately. For example, suppose the recipe calls for 1/4 ounce of dried porcini mushrooms and 1 and 1/2 tablespoons herbs de Provence among other ingredients. If the user changes the 1/4 to 1/2, then the other ingredients would double too. For example the 1 1/2 tablespoons herbs de Provence would change to 3 tablespoons herbs de Provence. Then if the user later changes the 1/2 ounce to 1/8 ounce, the 3 tablespoons would change to 3/4 tablespoons.

Your code should be able to handle values like the above 1 1/2 tablespoons or like 2 2/3 cups both as initial values and as user input. You do not have to allow the user to change the measurement unit types. For example if you have 1 teaspoon for an ingredient measure, the user can change this to 6 teaspoons, but not to 2 tablespoons (which is the same exact amount as 6 teaspoons). Your output does not have to be in fractions, they can be floating point numbers. For example, instead of 1 1/2 tablespoons, you can print 1.5 tablespoons and instead of 2 2/3 cup, you can print 2.6666666 or whatever JavaScript calculates for (2 plus (2 divided by 3)).

If your recipe does not specify how many servings the recipe makes, then add a line that specifies the number of servings. The serving number should be in a text box that also changes values with the ingredient text boxes. If the user changes from the original serves 6 to serves 5, then you would multiply all of the ingredient measures by 5/6. Don't worry about catching measurments that make very little sense such as quartering a recipe that call for 1 drop of vanilla extract (it would be pretty difficult to measure out 1/4 drop).

Add a reset button that resets all ingredient text boxes to their original values when the user clicks on the reset button. If the original values contain fractions or mixed fractions, the reset button should restore those original values and not replace them with their float equivalents.

Put your JavaScript code in a file called measures.js and put your recipe page into a file called recipe.html.

Your measures.js file should contain absolutely no recipe-specific data. You should be able to reuse your code for a different recipe without changing anything at all in measures.js. So in order to reset your ingredient measures and number of servings to their original values, you will have to store those original values in your recipe.html, perhaps in a JavaScript array. You will have to know the name of that array in your measures.js code. Likewise you will have to know the names (id) of the text input boxes to set their values. I suggest you use a system to name them. For example you could give them ids that are consecutive integers starting from 0. You can find out how many text input boxes there are by looking at the length of the array that stores the original values.

In your recipe.html file, be sure to annotate which lines you add/modified from the original by surrounding the lines with comments like (replace my name with your own):

<!-- start lines added/modified by David Chin -->
lines added by you or modified by you here
<!-- end lines added/modified by David Chin -->

Be sure to validate the user's input. It should be an ingredient measure. The only possible ingredient measures are positive integers (all digits), positive floats (zero or more digits followed by a period followed by one or more digits), proper fractions (one or more digits followed by a slash followed by one or more digits) or mixed fractions (one or more digits followed by one or more white space characters such as space or tab followed by one or more digits followed by a slash followed by one or more digits). Make sure you test for beginning and end of line (so an input like a4 or 4a should not match). As you might imagine, a regular expression would be perfect for doing this validation (see Aris Kazuma's Validate numeric data input using javascript for a similar example. If the user's input is incorrect, pop up an alert window and inform the user that whatever he/she typed (show the the actual string typed by the user) is not a valid measurement and ask the user to input a measurement in one of the above listed formats (it would be good to give the user some examples too). Also, focus the user's input in the input text box to make it easier for the user to correct his/her input (this won't work if the user clicked on another textbox after making a change, but should work if the user clicked anywhere else on the page). In the case of incorrect input, do not recalculate the ingredient measures.

IMPORTANT: Before you start working on your assignment, send me the URL of your recipe webpage for approval by email. Your recipe should have at least 6 ingredients.

Hints

After you save a webpage locally and open the local file in your web browser, you may find that some of the images or styles have gone missing. This is probably because the page is using relative URL addresses. To fix this, add a <base href="original webpage base"> tag right after the <head> tag. The original webpage base is the same as the URL of the original recipe webpage, but without the filename section. For example, if the URL is http://www2.hawaii.edu/~chin/215/Assignments/a4.html, then the base would be http://www2.hawaii.edu/~chin/215/Assignments (delete everything from the last slash to the end of the URL). Note that you will have to put your <script language="JavaScript" type="text/javascript" src="measures.js"></script> line before the base line, otherwise your browser will look for measures.js at the original site of the recipe webpage instead of locally.

Be sure to not duplicate data in your javascript code or html. In particular the original ingredient measures should only appear in one place. I suggest you put it in your JavaScript array and then onLoad, call the reset function to write in the inital values into the text boxes.

Some of the JavaScript functions and methods that I found useful include length, split, match, document.getElementById, value, parseInt, test, focus, and window.alert.

My measures.js solution is 34 lines of code not including blank lines or comments. If your program is taking considerably longer, you are problably doing something wrong. Please come see me for help.

Submitting

Submit by uploading your findmusic.pl file to Laulima under Assignment 4.


David N. Chin / Chin@Hawaii.Edu