Description
Problem 1: JavaScript Date Picker
For this problem, you will be implementing two interactive DatePicker displays (https://www.google.com/search? tbm=isch&q=datepicker&gws_rd=ssl#) using a combination of HTML, CSS, and JavaScript.
In your project3 directory create a le DatePicker.js that implements a JavaScript class named DatePicker that can be used as in the following example:
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 a travel reservation website:
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 when displayed in the date picker may contain days not in the selected month. These days should be displayed as the number in their respective month, but in a dimmed fashion to indicate they are not part of the current month.
All weeks displayed should contain at least one day belonging to the current month. Most months will display 5 weeks, but some months may display 4 or 6 depending on the days. The number of rows in your calendar should not be xed.
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 current month should invoke the callback speci ed on the constructor with the arguments described above. Clicking on days belonging to months other than the current month should not invoke the callback.
Once you have created the JavaScript class, we have provided a le datepicker.html (you do not need to modify this html le) 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 pickers initially displays the current month and the other displays 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.
The provided html le has no styling so please create a stylesheet with the lename datepicker.css to apply styling to the calendars and make them look nice. The corresponding link tag that requires the css le has already been added for you in the html le.
Problem 2: Simple Table Template Processing
Create a le TableTemplate.js that implements a JavaScript class named TableTemplate with a static method fillIn .
Requirements for the fillIn method:
This method takes three arguments consisting of the id attribute for a <table> , a dictionary object, and a string columnName .
The method must rst examine the header row of the table and and replace any text of the form {{property}} with the corresponding property of the dictionary object. It then lls in all {{property}} elements in the column speci ed by columnName if there exists such a
column.
The method assumes that the rst row of the table holds the column names. You are guaranteed that the column names of the input table are unique.
If no columnName argument is speci ed, the method should process the entire table.
If the speci ed columnName is not matched, the method should return without replacing any text in the columns. Note that you should still replace template strings in the header row regardless of whether the speci ed columnName is matched.
For example if you nd a td element in the matching column (assuming columnName is speci ed) 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 update the text of the td to be “The date is the 30 day of month January of the year 2016” .
Calling TableTemplate.fillIn(“table”, dict, ‘Part Number’) , where “table” is the table on the left and dict is a dictionary of strings, should generate the table on the right:
If the template speci es a property that is not de ned in the dictionary object the template should be replaced with an empty string. Your system need only handle properly formatted templates. Its behavior can be left unde ned in the case of nested templates (e.g., {{foo {{bar}}}} or unbalanced {{ ). You do not need to handle nested tables or complex table cells.
You should 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 le 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 property of the table’s style and if it is hidden update it to be visible .
Once you have created the JavaScript class, open the le cs142-test-table.html in your browser. This le represents an HTML page containing a sample template table that that will run your code and shows what your output should look like. Do not modify this le.
