This is the first assignment in which you must use JavaScript that you write yourself. The next assignment will build off this one, so it is important that you write your code clearly in this one so that you can modify it for the next one. The task itself is straightforward, but it has a lot of parts. You will need to familiariarize yourself with a number of techniques needed to build this program and the debugging facilities available in you browser of choice.
For this assignment you will create a table completely dynamically based on parameters entered in an HTML form. First, you must create a a form that accepts the starting and ending numbers for both the horizontal (multiplier) and vertical (multiplicand) axes of a multiplication table. Second, you will use the numbers entered into the form to create a mulitplication table completely dynamically. What you will create is commonly called a “single page web app” (or application).
Here’s what a reasonable multiplication table looks like.
1 2 3 4 5 5 5 10 15 20 25 6 6 12 18 24 30 7 7 14 21 28 35 8 8 16 24 32 40
Note that the numbers that go along the side of the table and those that go along the top (the multiplier and the multiplicand) are arbitrary. The point of this assignment is for you to create a program that can display the table given any arbitrary starting and ending numbers for the multiplier and multiplicand. The human factors part of this assignment is that there are many interesting things that can happen when users enter the four numbers, and we will discuss those in class.
Hint: The
:nth-child()and other CSS3 pseudo-classes are particularly useful for styling the top row and the left column. These are covered in our textbook on pages 439-441 of the 2nd edition of the CSS textbook, but have been moved up to pages 74-78 in the 3rd edition. In addition, there are some very helpful examples of the:nth-child()pseudo class at css-tricks.com/useful-nth-child-recipies. There is also a good reference on all the CSS3 pseudo-classes at reference.sitepoint.com/css/css3psuedoclasses.
http://yourusername.github.io/repositoryname/filename.ext
One further note: It is worth repeating that you will use the code you write for this assignment in the next one, so we encourage you to do this one carefully.
As always, submit your assignment using the Assignment Submission Form. This form will lead you through providing all the information we need to evaluate your work, confirming that it is correct, and then e-mailing that information to our teaching assistant and me with a copy to yourself. Be sure to select 91.461 Assignment No. 6: Creating an Interactive Dynamic Table from the assignment drop-down list on that form.
Important Note: If you do not receive an e-mail in your CS account within a few minutes confirming that your assignment has been submitted, something has gone wrong. Try submitting again or contact me.
This assignment will be graded on a 20-point system with points awarded as follows. Please note that the lists of features provided below are not meant to be exhaustive. They are merely representative of the types of things we are looking for in each grading category. As always, 20% of your grade is for documentation.
| Criteria (numbers in parentheses are the points that can be earned for that bullet item) | Possible Points |
Program Integrity / Design
|
16 |
Source Code Documentation and Formatting
|
4 |