1. Function: loadTableWithFilters This function will take all of the data from the global "petData" array (located within js/data.js) and render it as rows within the element in the main.html file It must use the global filter values, ie: filterType (possible values: "cat", "dog", "bird", or ""), filterAgeMin (any positive number) and filterAgeMax (any positive number) to conditionally show rows depending on a pet's type, or age values. For example, if the value of filterType is "cat", the value of filterAgeMin is 1 and the value of filterAgeMax is 3 then only pets with type: "cat" who are between the age of 1 and 3 (exclusively) will be added as rows within the element. Before any rows are added to the element however, it must be cleared of all existing data. This can be done using element.innerHTML = "" Lastly, this function must be invoked inside window.onload to ensure that the element is initially populated with all of the pets inside the "petData" array. As an example of how each new row must be rendered, consider the following example for Bella the dog: Data: image: { src: "https://scs.senecac.on.ca/~patrick.crawford/shared/winter-2017/web222/assignment4/pets/Bella.jpg", alt: "Bella", width: 120, height: 160 }, name: "Bella", age: 0.5, description: "Bella is a bright young pup who loves being around other dogs and doesn't mind the odd cat. Her favourite treat is bacon - anything bacon.", type: "dog" Rendered HTML ( element):

Bella

Bella is a bright young pup who loves being around other dogs and doesn't mind the odd cat. Her favourite treatis bacon - anything bacon.

Age: 0.5 years old. NOTE: You will notice that the description for all pets contains HTML code. For us to render this properly in our

element, we must use the innerHTML property ( ie: p.innerHTML = petData[i].description ) 2. Function: filterDog This function simply sets the global filterType variable to "dog" and invokes the loadTableWithFilters function again to refresh the table. This function must be invoked when the user clicks "Dogs" 3. Function: filterCat This function simply sets the global filterType variable to "cat" and invokes the loadTableWithFilters function again to refresh the table. This function must be invoked when the user clicks "Cats" 4. Function: filterBird This function simply sets the global filterType variable to "bird" and invokes the loadTableWithFilters function again to refresh the table. This function must be invoked when the user clicks "Birds" 5. Function: filter_zero_1 This function simply sets the global filterAgeMin variable to 0, the filterAgeMax variable to 1 and invokes the loadTableWithFilters function again to refresh the table. This function must be invoked when the user clicks "

element 2. Add a new background colour to the

andelements 3. Style the element using at least 2 properties 4. Style the using at least 3 properties. One of these properties must be setting the font to a "web-font", available on the Google Fonts CDN 5. Style the using at least 3 properties, two of which must be to ensure that it has: a maximum height value a vertical scroll bar This will allow our table to scroll, instead of taking up a ton of vertical space on the page. 6. Add at least 4 style properties to the elements inside the

element. This will ensure that the top (stationary) row of our table looks distinctive. 7. Add at least 4 style properties to the elements inside the

element. This will ensure that the cells within our main table have appropriate spacing and are styled to match the rest of the page. 8. Add at least 2 properties to all elements that are used for the description of the pets. These elements will be located inside

elements within the

element. This will ensure that anytime a element is used in the description of a pet, the text will be highlighted.