Requirements
You should start by familiarizing yourself with the contents of the files
provided. Examine the HTML elements that are provided, including any ID
attributes. Examine the JavaScript files to read the comments guiding your
work.
Step 1: Generate an HTML table
Your work starts in table.js. To simplify your work (and
avoid unnecessary repetition), we have defined a helper function called
buildTableRow(). For now, just think of this as similar to
functions/methods that you've seen in other languages. This function takes
one parameter, which is an object containing information about a JMU CS
course. You'll build and return a string based on this object.
Once you've completed this function, look for the comment near the bottom
of the file for "Step 1." Use the function above with a loop, along with the
JavaScript document.write() function to generate the HTML table
dynamically.
Step 2: Respond to a custom query
In the previous step, the table contained HTML links that included query
strings. For instance, the text CS 149 would link to
course.html?cs-149. The course.html file contains
a definition list with fields that have no information. Your task is to
complete the code in course.js to add information to these
fields based on the query string.
Given a particular query string, you will need to search through the array
of courses to find one with a matching name. Later in the course, you will
learn about better ways to search through the array, but a simple
for-loop is fine for now.
Once you've found the course, set the definition list fields based on
the object's data fields. Recall that you can update the text shown in any
HTML element with the following line of code (assuming the element has the
id="my-data" attribute):
document.getElementById('my-data').textContent = 'new text';
Step 3: Forms and queries
Finally, you will need to create and use an HTML form to filter the course
data based on a search box. Start by creating an HTML form in
index.html based on the comments. Note that the text box should
not use type="text". This <input>
element is a search box, so it needs to use the appropriate type. You can
learn about the various types at the
MDN input HTML reference.
Once you've created the form, you should be able to type into it and submit
the form by hitting the enter key. When you do this, the page
should reload with a query string based on what you typed. If you typed the
word data into the search box, then the page should load as
index.html?terms=data. Based on this search term, only include
a course in the table if its description field contains
data as a substring. (For simplicity, we are only doing exact
matches; do not try to deal with upper- vs. lower-case versions.)
The simplest way to do this would be to create a new empty array of
courses. Loop through the full course list; if the description matches the
search criteria, add the course to this new array. You can then use this
array with your loop from Step 1.
Optional: Taking the next steps
For this lab, you only have to search for a single term using an exact
match. But what if the user enters multiple words, such as
graph stack. The browser will replace the space with a +
character, making the URL index.html?terms=graph+stack. Extend
your implementation so that you split the search string into the separate
terms graph and stack, then return only the classes
that have both terms.
You can propose your own additional variations, as well. Extend this
implementation so that any arbitrary number of terms can be entered. Or do a
case-insensitive search so that both graph and Graph
would be shown in index.html?terms=graph. You could also make the
search match words instead of substrings, so the search term graph
would match graph but not graphics.
