Description
For this assignment, you’re going to continue the album creator, and you’re going to implement a page
where users can filter the top albums on the site, which are loaded via a RESTFUL API.
Below are screenshots of the application design showing the functionality you’ll need to replicate in this
assignment.
Please refer to the “Required Tasks” and the “Marking Key” sections for instructions on completing this
assignment.
Sample Functionality
Here’s an example of what the application should look when you load the page.
Below is what the application should look like if you search for “dark”.
Below is what the application should look like if you have a minimum rating of 4.3.
Below is what it should look like if you search for “beatles” with a minimum rating of 4.2.
Bonus part if you click on the “average rating” or “# of reviews” column headers it should sort by that
date.
Required Tasks
• Part 1: Fetch the albums and render them on the page.
o Create a function to get the album data from our local server.
▪ Use fetch API (using either the promise syntax or the async await syntax) in a
function and return the fetched data from that function.
▪ Reassign the variables “topAlbums” and “topAlbumsFiltered” to the data that
was fetched from our REST API. This can be done in the function defined above
or in a separate function that should be called when the page is loaded.
▪ The data should be loaded when the page is loaded or refreshed.
o Render the Albums on the page.
▪ Use map to loop through the arrays of objects that are fetched.
▪ Append the table rows to the correct part of the HTML table element.
• Part 2: Albums can be filtered by the search query and the minimum rating.
o Add an event listener and handler to the form.
o Get the search query and minimum rating values from the inputs the same we’ve been
doing throughout the course.
o Create a couple of functions that will filter the minimum rating and the album names.
▪ The first function should filter the albums on either the “Album Name” or “Artist
Name” properties on the album data that has been fetched. The search
functionality should be case-insensitive.
▪ The second function should filter the albums on the “minimum rating” property
on the talks that have been fetched. The talks shown should have a greater
rating than what is entered.
o Using the functions created in the last point, filter the album data and render them on
the page. Quite a few examples above show you what this should look like.
• Bonus Part: Sorting Average Rating and Minimum Reviews
o If you click on the Average Rating and Minimum Reviews heading, it should sort from
highest to lowest.
• Challenge Part: (not for marks): Sort by Release Date
o If you click the Release Dates heading, it should sort from highest to lowest
• The code style will be specified by your instructor.
Marking key
Tasks Grade Marks Total
Fetch and rendering.
• Fetched Album data successfully, correct syntax.
• Album data rendered properly.
• Map used for looping over the talks.
• topAlbums and topAlbumsFiltered variables are reassigned properly as the result of
the fetch call back.
5
3
1
1
Loops and Filtering
• Successfully added event listener and prevented the form from submitting.
• Search query filtering function (not case sensitive) filters album data correctly.
• Minimum Rating filtering function filters album data that has more than the value
specified by the user.
• The filtered album data is rendered correctly.
• Filtering functions will only be called if the inputs have values.
1
5
5
3
3
Bonus
• Sort columns ascending if the columns are clicked 3
Code
• Code Formatting and Style
• Errors running the project
-3
-3
Marking Rubric
Marks 5 Marks Criteria
5
Task was completed with the highest of proficiency adhering to
best practices and followed subject matter guidelines all tasks
were completed to a professional standard.
4
Task was completed well some minor mistakes. Well above
average work shows good understanding of the task and high
degree of competence
3
Satisfactory work some features missing or incorrectly
implemented. Show a moderate level of understanding in the
task with room for improvement.
2
Below average work. Task was poorly complete. Show
understanding of the task and the requirements to implement
but implementation was poorly executed.
1
Some of the task was completed. Showed a lack of
understanding in the subject matter and very poorly executed
0
Not completed.
Marks 3 Marks Criteria
3 Proficient shows a high degree of competence in completing
task.
2 Capable above average degree of competence in completing task
1
Satisfactory shows a satisfactory degree of competence in completing
task.
0 Shows a limited degree of competence in completing task.
Marks 1 Marks Criteria
1 Task Completed satisfactorily
0 Task was not executed.