) under certain conditions
● List Rendering (v-for): https://vuejs.org/guide/essentials/list.html
● Events (v-on): https://v2.vuejs.org/v2/guide/events.html
○ Listener
○ Method Handler
○ Modifier (prevent page from reloading)
○ Keyboard events (listening for specific keys)
● For making api calls, we can use the following. Both are supported in Vue 3.
○ Axios:
■ https://vuejs.org/v2/cookbook/using-axios-to-consume-apis.html
■ https://axios-http.com/docs/example
○ fetch: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch
Bootstrap
● Intro: https://getbootstrap.com/docs/5.3/getting-started/introduction/
● Button (btn): https://getbootstrap.com/docs/5.3/components/buttons/
● Dropdown: https://getbootstrap.com/docs/5.3/components/dropdowns/
● Navigation tabs: https://getbootstrap.com/docs/5.3/components/navs-tabs/
● Grid System: https://getbootstrap.com/docs/5.3/layout/grid/
JavaScript
● Object.keys():
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Obj
ect/keys
● Object.entries():
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Obj
ect/entries
● Array.prototype.sort():
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Arr
ay/sort
● Array.prototype.forEach():
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Arr
ay/forEach
● Arrow functions:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_fu
nctions
iTunes API
● Constructing Search
○ https://developer.apple.com/library/archive/documentation/AudioVideo/Conceptu
al/iTuneSearchAPI/Searching.html#//apple_ref/doc/uid/TP40017632-CH5-SW1
○ Hint: Most useful parameters are term and attribute
● Search Examples
○ https://developer.apple.com/library/archive/documentation/AudioVideo/Conceptu
al/iTuneSearchAPI/SearchExamples.html#//apple_ref/doc/uid/TP40017632-CH6-
SW1
● Understanding Search Results
○ https://developer.apple.com/library/archive/documentation/AudioVideo/Conceptu
al/iTuneSearchAPI/UnderstandingSearchResults.html#//apple_ref/doc/uid/TP400
17632-CH8-SW1
Additional Tips/Hints
When trying to toggle the ‘Description’ and ‘Track info.’ tabs, take a look at this tutorial and play
around with the code. Note how this can be achieved simply using Bootstrap and HTML.
Specifically, quoting directly from it: ‘Add data-toggle="tab" to each tab, and add a .tab-pane
class with a unique ID for every tab and wrap them in a .tab-content class.’
If you have trouble (e.g. clicking on 1 Description tab changes all Description tabs, or no matter
which Description tab is clicked, only 1 Description tab changes), make sure the stuff bolded is
implemented correctly. Put into context of our assignment, each ‘Description’ and ‘Track info.’
tab must have its own unique ID (i.e.
). In other words,
suppose there are 50 songs returned by the API call, then there will be 50 ‘Description’ and
‘Track info.’ tabs, so we need 50 unique IDs for ‘Description’ and 50 unique IDs for ‘Track info.’
Note: This is not the only way to achieve this behavior, but it is in my opinion the easiest way to
do so.