CPSC 1520 Assignment 2: Top Albums Filtering solved

Introduction This assignment focuses on your knowledge of arrays, loops, objects, and the fetch API. This is essential because, on most web pages, you fetch some sort of RESTFUL API in JSON and render the result on the page. Overview 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.