COMP 307 Assignment 3

COMP 307 Assignment 3
This assignment is to be completed individually.
Introduction
In this assignment you will be creating a simple spreadsheet application using HTML, CSS, and
JavaScript. Start by downloading spreadsheet.html which is given to you. Open it in the
browser and you will see the following:
This is a spreadsheet for entering information about students. The New row button at the
bottom is for adding new rows to the spreadsheet. Each row has 3 action buttons on the right:
• The Up button moves a row up
• The Dn button moves a row down
• The Del button deletes a row
If the Up button is clicked for the first row or if the Dn button is clicked for the last row, then
nothing happens.
Currently, these buttons do not do anything. It is your job to implement these row operations
using JavaScript.
In addition to these row operations, you must implement a row highlighting functionality.
When the user clicks anywhere on a row (i.e. inside the text field of a row), the background
color of that row needs to turn yellow, and no other row’s background color should be yellow.
For example, if the second row is clicked, then we should see
Example Use Case
Below we present an example use case. Suppose the user starts by entering some data into the
spreadsheet.
Now, suppose the user clicks on New row. Then a new row is added to the bottom, which can
be used to add an additional entry.
Suppose the user then clicks on the Up button for the 3rd row, then this row moves up and
becomes the second row.
Finally, suppose the user clicks on Del for the second row. Then the second row is removed.
Requirements and Restrictions
• You are not allowed to use any JavaScript libraries (i.e. jQuery) for this assignment.
Directly work with the DOM API provided by JavaScript.
• You must write all of your code inside spreadsheet.html. Do not use any external CSS or
JavaScript file.
• Feel free to modify the HTML code provided in spreadsheet.html in any way that you
think would be helpful. Also feel free to write additional CSS rules inside
spreadsheet.html
Methods to Read About
Before starting on the assignment, you need to understand the difference between each pair of
DOM methods listed below. We discussed childNodes vs children during class. The other pairs
follow a similar idea. You can find information and examples for all of these methods at
https://www.w3schools.com/jsref/dom_obj_all.asp. These methods will be helpful to you for
this assignment, and you need to know these methods for the final exam.
• childNodes vs children
• parentNode vs parentElement
• nextSibling vs nextElementSibling
• previousSibling vs previousElementSibling
Suggestion
You should keep the console in the developer tools open when doing this assignment. We have
discussed the developer tools several times in the lectures. In chrome, you can open it with
Ctrl-Shift i (Windows, Linux) or Cmd-Option-i (Mac). You can use the console.log() method to
print things out to the console, and you can see errors on the console when your program
throws an exception.
What to hand in
Hand in the completed spreadsheet.html