CS142 Project #3: JavaScript and the DOM

Setup

Although this project has you run code in your browser, you need to have Node.js install on your system to run the code quality checker. If you haven't already installed Node.js and the npm package manager, follow the installation instructions now.

Once you have Node.js installed, create a directory project3 and extract the contents of this zip file into the directory.

You can fetch the code quality tool, JSHint, by running the following command in the project3 directory:

npm install

This will fetch JSHint into the node_modules subdirectory. You will be able to run it on all the JavaScript files in project3 directory by running the command:

npm run jshint

The code you submit should start with "use strict"; and run JSHint without warnings.

Problem 1: JavaScript Date Picker (25 points)

For this problem, you will be implementing two interactive DatePicker displays using a combination of HTML, CSS, and JavaScript.

In your project3 directory create a file DatePicker.js that implements a JavaScript class named DatePicker that can be used as in the following example:

var datePicker = new DatePicker("div1", function (id, fixedDate) {
   console.log("DatePicker with id", id,
       "selected date:", fixedDate.month + "/" + fixedDate.day + "/" + fixedDate.year);
});
datePicker.render(new Date("July 4, 1776"));

The constructor takes an argument consisting of the id attribute for an existing div and a date selection callback function. When a date is selected the callback function should be called with the id argument and an object containing the properties month, day, year with the number encoding of the date (e.g. {month: 1, day: 30, year: 2016}) is the encoding of January 30, 2016.

The object should have a render method that takes one argument consisting of a Date object that selects a particular month (the object can refer to any time within the month). When render is invoked it replaces the contents of the date picker's div with HTML that displays a small one-month calendar such as those you might see in an airline reservation Web site:

The calendar must display the days of the selected month in a grid with one line for each week and one column for each day of the week.
Weeks run from Sunday on the left to Saturday on the right. The calendar must contain a header row displaying abbreviations for the days of the week, such as "Su", "Mo", etc.
Each day of the month is displayed as a number.
Some weeks may contain days not in the selected month. These days should be displayed as the number in their month, but in a dimmed fashion to indicate they are not part of the current month.
The calendar must display the name of the month and year at the top of the calendar. In addition, it must display controls such as "<" and ">" that can be clicked to change the calendar's display to the previous or next month.
Clicking on a valid day of the month should invoke the callback specified on the constructor with the arguments described above<./li>

Once you have created the JavaScript class, create an HTML file datepicker.html containing two empty div elements, plus a bit of JavaScript code that invokes the DatePicker class to display a date picker in each of the divs. One of the date picker should initially display the current month and the other should display the month of January, 2009. It should be possible to change the month of each date picker independently, using the controls on that date picker.

Problem 2: Simple table template processing (15 points)

Create a file TableTemplate.js that implements a JavaScript class named TableTemplate with a static method fillIn. This method takes two arguments consisting of the id attribute for a <table> and an dictionary object. The method must examine all the rows of the table (header, body, and footer) and replace any text of the form {{property}} with the corresponding property of the dictionary object passed to the function. For example if you find a td element that has the text string "The date is the {{day}} day of month {{month}} of the year {{year}}" and the dictionary object argument is {month: "January", day: "30", year: "2016"} you should modify the text of the td to be "The date is the 30 day of month January of the year 2016".

If the template specifies a property that is not defined in the dictionary object the template should be replaced with an empty string. Your system need only handle properly formatted templates. It's behavior can be left undefined in the case of nested templates (e.g. {{foo {{bar}}}} or unbalanced {{. You should and are required to use your cs142-template-processor.js solution from project 2 to help you implement the fillIn method. See the script tag ordering in the html file in the project3 directory to see how your cs142-template-processor.js code would be loaded.

Beware that browsers insert a <tbody> element around all of the <tr> elements in a table, if the table doesn't already contain a <tbody>.

Once your function has processed the entire table you should examine the visibility of the table and if it is hidden update it to be visible.

Once you have created the JavaScript class, open the file cs142-test-table.html in your browser. This file represent an HTML page containing a sample template table that that will run your code and shows what your output should look like.

Additional Requirements, Hints, etc.

You may not use JQuery or any other JavaScript library package in this project (or anywhere else in CS 142). If you were developing a real Web site then you should definitely take advantage of existing JavaScript libraries, but for this class we want you to learn about the low-level JavaScript/DOM features.
You may find some of the following JavaScript built-in functions useful in this project:
- Methods of the Date class.
- parseInt, parseFloat, isNaN.
You may find some of the following DOM element properties useful in this project:
- cells
- firstChild
- nextSibling
- rows
- tagName
- textContent
- innerHTML
The JavaScript function console.log is very useful for debugging. It takes a string argument, which it prints to the JavaScript log. You can display this log with "Tools -> JavaScript console" in the Chrome control menu. If you are having trouble figuring out what is happening in your JavaScript, sprinkle console.log statements around your code so you can see which code is being executed.
You may also find the debugger statement useful in debugging. If the text "debugger;" is executed in a JavaScript program, it causes the program to drop into the JavaScript debugger. This is analagous to a breakpoint, except that your code can control when it triggers.
If nothing seems to be happening in your JavaScript code, it's possible that your code contains an error that is causing it to be aborted. To find out if this is happening, open the JavaScript console to see if there are any errors.

Style Points (10 points)

Your JavaScript must be clean (appropriate use of classes, no global variables other than constructor functions, etc.).

Deliverables

Use the standard class submission mechanism to submit the entire project3 directory.

CS 142: Web Applications (Winter 2016)