[SOLVED] Cpsc 1520 assignment 3: album search and save tool

Introduction
You’ve increased the search functionality on your album creator application by having a backend
implementation of the data; you’ve also increased your data
This assignment will test your knowledge of the last few topics of this course by implementing this
album search and save tool. Please refer back to all of the examples and all of the slides to complete this
assignment, but it mainly focuses on the topics of “Arrays and loops,” “Fetch Fundamentals,” “DOM APIs
and Timers,” and “NPM, Tools and ES Modules.”
Note you’ll also be running a separate backend to your project that will be included, so you’ll need to
run the backend and the frontend (your assignment) in different terminals and leave them running.
Overview of functionality
Part 1: Tab Navigation
Here is a sample of part 1. When you click a single tab, you should be able to see the appropriate page.
If you click “Searched Albums,” you should visit this page.
Here is another sample of part 1: If you click “My Albums,” you should see the following tab.
Part 2: Search by an Album with REST API backend
Example for part 2: When you have implemented the search, your application should look like this if you
search for “double.”
Another example for part 2: When you have implemented the search, your application should look like
this if you search for “Radiohead.” Note: the content should reset when you execute another search.
Part 3: Add to My Albums
Example for part 3: When you have searched for “double” and clicked “Add to My Albums,” the album is
removed from the searched list and added to the page “My Albums,” and the button is removed. Here is
the search page after the button has been clicked.
If you then click the “My Albums” tab, the list item is added to the My albums section, and the button
“Add to My Albums” is removed.
NOTE: Duplicates are allowed in “My Albums”.
Bonus Part: Saving Albums using the REST API (Do not ask your instructor this is a challenge)
Every time you save to my albums (please refer to the README.md I the “assignment-3-backend”
project), you’ll make a POST request to the backend saving the album data selected. You’ll need to
create an endpoint for this in your “api.js” file.
If you reload the page, your application should already have loaded your saved albums, and you should
see the saved albums in the “albums_app_db.json” in your “assignment-3-backend”. It should look like
“Part 3: Add to My Albums,” but your albums are still present when you reload the page.
Required Tasks
Part 0: Setup the Project
• Install and run “assignment-3-backend” in a separate terminal and folder than your “assignment-3-
starter”.
o Extract the project and Install all of the dependencies.
o Look at the “scripts” in the “package.json” file and figure out how to run the backend server,
leave this command running in the background.
o Look at the README.md in the “assignment-3-backend” and test the “GET Album Search
Endpoint” and make a request in a REST API client of your choice.
• In a separate terminal, install the packages bootstrap and parcel, and setup the required scripts
using npm.
o Your project should be using parcel and not live server when running the project (it won’t
work anyways if you try it that way).
▪ Your scripts need to be correct and are the same as other projects you have done in
class with your instructor. (This will project will be using parcel refer to the
documentation if you are having trouble running the project
o Once “bootstrap” is installed, import the minified “bootstrap” libraries, and import your
custom CSS at the top of your “main.js” file like below.
/*
Import bootstrap then your css below
*/
import ‘bootstrap/dist/css/bootstrap.min.css’
import ‘../css/cover.css’
// Javascript imports below
o Run your project.
o NOTE: In your solution there should be no node_modules folder or “parcel-cache” folder.
Marks will be taken off if they are included.
Part 1: Tab Navigation
• Get the necessary elements.
o Select the elements with the Ids “album-tab-navigation,” “search-album-tab” and “myalbums-tab” and give them appropriate variable names.
o From the “album-tab-navigation” element, get the nested children that are links and
make separate variables for them.
• Display the correct Tab.
o Add an event listener on the “album-tab-navigation” element that will listen to click
events.
o In the event handler, get the “textContent” from the “event.target” and save that to a
“tabName” variable (also display what it is for yourself so you can see what it is).
o If the “tabName” is strictly equal to “Search Albums” then do the following:
▪ Add the class “active” to the search tab and remove it from the myAlbums tab
▪ Remove the class “d-none” (which is the CSS property “display: none” in
“bootstrap”) from the “search-album-tab” element and add it to the “myalbums-tab” element..
o If the “tabName” is strictly equal to “My Albums” then do the following:
▪ Add the class “active” to the myAlbums tab and remove it from the search tab
▪ Remove the class “d-none” from the “my-albums-tab” element and add it to the
“search-album-tab” element.
Part 2: Search by an Album with REST API backend
• Create a function (that takes a single value as a parameter) in the “api/album.js” file that will
use fetch to call “assignment-3-backend” and return the data from that endpoint.
o The function should be exported (using the named export syntax) from that file and
imported into your “main.js” file.
o You can use the promise syntax or the async await syntax to return the data from this
function.
• NOTE: you’ll need this for the following parts, but it’s strongly recommended that you test this
function.
• Create a function that will create a list element using your knowledge of the DOM API in the file
“dom/albumElements.js.”
o This function will take in one or more arguments which will be the information you need
to display in the list items (depending on the implementation). Please look at the part 2
overview of functionality to see what the list item should look like.
o This function should be exported (using the named export syntax) and import it in your
main.js file.
• In the index.js file, create an event listener to listen to the form submission event (use the form
with the id search-album-form) and make the searched list items based on the searched
value.The form should be prevented from submitting.
o It should remove all previous items from the searched list every time you submit.
o You should loop through the results and use your DOM API functions to add to the list
element.
▪ NOTE: You should use your function from “api/album.js” to get the data and use
your function from “dom/albumElements.js” to create the searched list item
elements
• Once you see results populate the page, then you should move on to the final step.
Part 3: Add to My Albums
• In your index.js file, create an event listener that will listen to the click events on the list element
with the id “searched-albums-list.”
o Check if the “event.target” includes the class “my-album-button” to ensure it’s the
button in the list item that is clicked.
o If the button is clicked, append this element to the list element with the id of “myalbums” and remove the button element. If you are wondering what this looks like,
please look at the part 3 section in “Overview of functionality.”
• NOTE: The instructor will lay out the formatting preferred.
Bonus Part: Saving Albums using the REST API (Do not ask your instructor this is a challenge)
• When you perform a search save, the results in an array of objects in the variable
“searchedAlbums” given.
• Modify your part 3 to get the search album index clicked and save the entire object to the
“myAlbums” section of the backend rest API.
o NOTE: Look at the “POST myAlbums Endpoint” in the README to the backend.
• The second part of the bonus is that when you refresh the page in the “My Albums” section, it
should load the results and populate the list with what you’ve already clicked.
• NOTE: marks on this will only be given if the rest of the application is functional (subjective and
based on the instructor).
Marking key

Tasks Grade Marks Total
NPM and Packages.
• Packages are installed correctly and are in the correct dependency section (dev
dependency vs dependency)
• Scripts are setup correctly and the source attribute in the package.json is setup
correctly.
• node_modules folder and parcel cache are included (if you included them it’s
negative marks on your assignment)
3
3
-5
Fetch
• The fetch request is takes in the search query and returns the data from the fetch
request as a promise OR uses the correct async await syntax.
• The function is in the correct file and exported properly.
• The function is imported correctly in the index.js file
5
1
1
Dom API and Manipulation.
• Tab Navigation works properly, adds and removes on the elements are properly
written so that the proper sections are displayed.
• Create list item element item function is in the correct file and exported correctly.
• The function is imported correctly in the index.js file
• The create list item element function uses ONLY DOM API to create the html
structure (if innerHTML is used this section is zero.)
• The create list item element returns the element created.
• The form is intercepted and prevented from submitting in the index.js.
5
1
1
5
1
1
5
• The event handler of the form calls the fetch api function, create list item element
and attached it to the correct area on the page.
• On the recently search list items an event handler is added and using the DOM API it
appends the searched albums to the my albums section and removes the button
correctly.
3
Bonus
• Selecting correct object and POST request executed properly
and album is saved to the “myAlbums” section of the json
server.
• Load the “myAlbums” from the backend server when the page
is loaded.
5
Code
• Code Formatting and Style
• Errors running the project
-5
-5
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.