日本欧洲视频一区_国模极品一区二区三区_国产熟女一区二区三区五月婷_亚洲AV成人精品日韩一区18p

代寫EECS 493、代做Java設計編程

時間:2024-04-09  來源:  作者: 我要糾錯



Assignment 5: Artist Search
EECS 493 Winter 2024
Released: 3/17/2024
Due: 4/7/2024 at 11:59pm
Submission Instructions
● Please submit your work to Canvas as a zip file, named "a5_<your_uniqname>.zip".
○ Remove the angle bracket when naming your zip.
○ Renaming (e.g., “-1”) done by Canvas is fine.
● This zip file should contain a single directory containing all files and directories provided
in the starter code.
○ i.e. The zip file should have the following structure:
a5_uniqname.zip
└── a5_uniqname
├── README.txt (OPTIONAL)
├── img
│ ├── 1.jpg
│ └── 2.jpg
├── index.css
├── index.html
├── loading.gif
└── script.js
○ Please keep the existing directory structure and do not add any more folders/files
(other than the README.txt for bonus credit).
● Not following the submission instructions will result in a penalty.
Assignment Objective
The objective of this assignment is for you to gain practical experience with the MVC pattern
using Vue.js, a web application development framework, and Bootstrap, a CSS framework for
responsive design.
Project Overview Video
Assignment 5 Intro Video
Remark: The search results from the video may not be up to date. Please refer to the
screenshots below for more recent, accurate results.
Grading Breakdown
We would like you to create a digital “Artist Search” website as outlined in the attached spec
below. The application has 6 main components (denominator of 100 points):
1. Search Bar - 25 points
2. Artists Grid - 30 points
3. Navigation Tabs - 5 points
4. Track Information - 5 points
5. Genre Selection - 20 points
6. Sort Menu - 15 points
7. [Optional] Bonus Features - up to 10 points
Starter code
You will use the starter code we provide to finish this assignment: a5_w24_starter_code.zip
The starter code we provide includes the following files:
1. script.js: Placeholder for one Vue.js instance [Put your JS code in this file]
2. index.html: HTML page [Put your HTML code in this file]
3. loading.gif: Show this gif while waiting for artist information to come back [Optional]
4. index.css: Additional customized style [Do NOT modify this file]
5. img/1.jpg & img/2.jpg: Two image placeholders [Your final code won’t need them]
Remarks:
● You aren’t required to use any of the starter code, but it’s there to help you.
● Unless you know what you are doing, please do NOT modify anything inside the <head>
tag in index.html.
● Please refer to Piazza for any modifications and clarifications.
● Make sure that your application (webpage) behaves properly on the latest version of
Google Chrome. Your graders will use Chrome.
● To make sure your code runs correctly, it might be helpful to test it on a different
computer.
Screenshots
Homepage with search bar:
After searching for an artist:
“Track Info.” tab for the left two results:
Sort menu:
After sorting by “Collection Name”:
After sorting by “Price”:
After (resetting sort to original and) selecting the “Dance” and “Pop” genre selections:
Ground Rules
1. The primary point of the assignment is to use MVC pattern in developing the
application using Vue.js. Therefore, reference and direct modification of HTML
elements (such as $(".class"), append(), document) in JavaScript and jQuery are NOT
allowed.
a. For example, using jQuery or JavaScript code that access HTML elements is
NOT allowed (will result in significant deductions).
2. We’ve given you some starter code, and you’ll only need to write JS code inside Vue
instance(s) (in the JS file) and Vue directives in the HTML file.
a. We already created one Vue instance for you. You may add other instances if
you prefer, but NO extra JS code should be written outside of Vue instances.
3. Every style-related element of the assignment MUST be done via Bootstrap. You are
NOT allowed to use inline styling or define/use any custom CSS class/id other than
the ones we provided in index.css.
a. i.e. Do NOT modify index.css
4. The provided index.html file includes (links to) jQuery, Bootstrap, Vue.js, and Axios.
a. In order for index.html to work properly, make sure you
i. Have internet connection,
ii. Do NOT modify anything inside the <head> tag in index.html.
b. Note that index.html has some hard-coded data. This is just to show you an
example, but the hard-coded data should eventually be replaced.
5. Follow the submission instructions at the beginning of the spec.
6. After unzipping your submission, the index.html file should work by directly opening it in
Google Chrome, as long as there is an internet connection.
7. This assignment uses the iTunes API, which again requires internet access. Plan
ahead if you will be in a situation that has no internet access. It is your responsibility to
read the documentation and figure out the data structure of the JSON object.
8. This assignment heavily requires online search and reading the documentation of
Vue.js and iTunes API that we use. The assignment may include materials that are not
covered in class. We believe that, in today’s programming practice, searching and
mining information from online materials is a significant part of a programmer’s
expertise.
9. Check out Piazza frequently for any changes or additional information.
Requirements
We outline requirements for each of the game components below. Everything listed below,
unless labeled as “Suggested”, is required. Please be sure to examine the provided video
closely to understand the expected behavior. You are allowed to change anything in
“index.html” and “script.js”.
Please see the Hints & Resources section for really helpful hints & resources!
General
a. Ground rules - max 50 points off if not followed
1. Search Bar (30 points)
a. There is one input textbox provided in the HTML file.
b. When a user types a keyword and presses the “Enter” key, the entered string
should be used to make an AJAX call that requests a json object.
i. Hint: Use v-on:keyup to check if the key was “enter (keycode:13)” or not
c. The entered string will be used to search artists whose names contain the
keyword.
d. Do NOT use jQuery $.ajax, but instead use Vue.js AJAX call – Axios – or
simply use fetch().
e. The URL that you need to make an AJAX request and the data structure
of the returned json object are specified here:
i. iTunes Search API: https://goo.gl/UXwDce
ii. When sending the request, all media types & entities should be
included.
iii. When a query has over 50 results, it should only return a maximum of 50
tracks.
f. Print out the returned json object in the console, using JS console.log(),
when making requests for the APIs.
i. This should be the only thing that is printed in the console.
ii. We will take off points if the above requirements are not met.
g. When there are no artists returned from iTunes, alert the user, using JS alert(),
that no artist was found with the keyword.
h. “Total N found” message should display the total number of artists (N) returned
by the iTunes API.
2. Artists Grid (30 points)
a. The returned artists should be displayed in two columns, where each result grid
contains both an image and 5 types of related information displayed right next
to each other (when the browser is in full size).
b. One exception will be the last row that may have less than two artist grids
depending on the number of artists returned.
c. Please use the Bootstrap Grid system to accomplish the above requirements.
Check out this web page for more detail. Make sure you understand how it
works because it is a great way to realize layouts we learned from the class.
d. When correctly implemented with Bootstrap, the layout will naturally be
responsive (e.g. resizing the browser will automatically resize the images and
the nav-tabs, and shift them to the next row).
e. Typically, iTunes will provide an image URL for each artist. Use the first URL
in the list in general.
f. Note: We provided screenshots of the search result when a user searches for an
artist. When unsure, please refer to these (and the project intro video), your web
page should look pretty much the same as the one in the screenshot.
3. Navigation Tabs (5 points)
a. The returned artists should also have their information displayed next to
them in the navigation tabs.
b. Please use Bootstrap’s nav-tabs (and other related classes) for this and next
part (i.e. 4 and 5). Note that we already provided some example nav-tab
code in the starter file. For more info, check out the Hints & Resources
section.
c. The ‘Description’ tab should contain: artist name, collection name, price, type,
and preview link. They can be found in the response JSON data.
i. If the price is not provided, set the price to 0.
ii. Else, if one of the returned values is an empty string, display
“No information provided” instead.
d. Clicking the preview link should open the preview of the song (or any other
media) from this artist in another tab or directly download it (both are fine).
4. Track Information (5 points)
a. When clicking the ‘Track Info.’ tab, the system should display the Track ID (which
is a unique identifier) & Country for that particular search result.
b. This means, whenever you click on the ‘Track Info.’ tab, the unique identifier will
change for each different ‘Track Info.’ tab you click on. Here’s an example for a
query with ‘Shreya Ghoshal’:
i.
c. Hint: The key to getting this section to work is figuring out how to get only that
particular div to change when you click on that ‘Track Info.’ tab. Check out the
Hints & Resources section if you would like a more specific hint.
d. When clicking back to the ‘Description’ tab, the five types of information should
still be there.
5. Genre Selection (15 points)
a. Create a list of tags of which genre labels are available from the search results.
(See screenshots/video above)
b. As a user toggles a genre, only the artists that are categorized in the selected
genre should appear in the grid.
i. The number of results should update as well.
ii. You can select and deselect genres
iii. The genres selected should be indicated by the change in the background
color.
c. Once you select other genres besides ALL, the ALL button should indicate the
change in the background color.
d. Please use Bootstrap’s btn (and related classes) for this part. Note that
different button colors can and should also be achieved using Bootstrap. For
more info, check out the Hints & Resources section.
e. If a user has multiple genres selected, the artist shown in the grid should be
categorized in one of the selected genres at least (not necessarily all genres
selected). (The more genres that are selected the more results should be
displayed)
f. If ALL is selected, the other genres are deselected and return to the original list
sorted by the current sort selection. (see Sort Menu)
g. The genre selected should automatically reset to ALL when you search for a new
artist.
6. Sort Menu (15 points)
a. A “Sort list of results by: “ button that displays a dropdown menu when clicked.
i. There are three options in the menu:
● Reset to original
● Collection Name
● Price
b. For “Reset to original”, reset the displayed results to the original order.
i. This should be the default selection.
c. For “Collection Name”, sort results alphabetically by collection name.
d. For “Price”, sort results by increasing price.
e. The selected option should be indicated by a distinct background color.
f. Please use Bootstrap’s dropdown (and related classes) for this part. Note that
different background colors of the options can and should also be achieved using
Bootstrap. For more info, check out the Hints & Resources section.
g. When multiple genres are selected, the list of results should still be updated by
the sort selection (collection name and price).
i. In other words, when you select a genre, the sort option should not reset.
h. The sort should automatically reset when you search for a new artist.
The following bullet points provide another example of what the sort menu should look
like and how it works.
i. In the dropdown menu, initially, it should be set as the “Reset to original”
indicated below by blue background selection
j. When selecting a different option, it should be changed to that selection, for
example, selecting “Collection Name”, indicated by the blue background
k. After an artist search and sorting by “Collection Name”, then selecting different
genres should still update the list by “Collection Name”.
In other words, if the user sorts by Collection Name, it should update the list
sorted by collection name; after that, if the user picks a genre, e.g. Anime, it
should update the Anime list sorted by collection name too.
l. This should work when selecting any of the three sort options.
7. BONUS (10 points max)
a. This is completely optional.
b. If you have added any feature, please include README.txt file in the submission
and explain what you implemented; otherwise we won’t grade this task (this is the
only time you are allowed to add a file to the directory structure).
c. DO NOT CHANGE ANY EXISTING REQUIREMENTS FROM THE SPEC!
d. Add a “play” button to each of the ‘Description’ tabs (as shown below). After
pressing the play button, it should start playing the song, and on the button,
“play” should change to “stop”. When the “stop” button is clicked, it should stop
playing the song and revert back to “play”.
i.
ii.
e. Add a button after ‘Sort list of results by:’. After clicking the button, a popup
should appear that displays all the song (track) names returned by fetch grouped
by collection name.
Note about CORS Headers
In doing this project, you might run into your search results being rejected with a “CORS”
message. This error is largely server-side, so there is no simple solution. The success of the
request will change depending on what browser you are using, if you are hosting the page on
the server, and the configuration of the iTunes server the artist you are requesting is stored on.
One solution that often works is adding "&origin=*" to the end of your search query. This
will often resolve the error if you are running your code directly from a file.
There are other ways that might help if you still encounter this issues:
- Test with an artist that isn't the one shown in the example video. We suspect that iTunes has
changed the way it processes requests coming from the UMich wireless network for the
example artist, since there are suddenly several hundred identical requests every minute in the
exact same format from the exact same location. Suggesting a different artist to search would
be self-defeating, but you should be testing your implementation with a variety of artists anyway.
- Ordering matters in the iTunes API call, so you can play around with the ordering of your
added keys to the query
- Do not open the file as a local server (localhost:XXXX/<file path>). My IDE automatically
opens HTML files in a server rather than opening the raw file in a browser (<filepath>), and
opening it as a raw file stopped it
Again, many of these errors are configuration dependent. If you continue to have issues, please
come speak to us in office hours or post on Piazza.
Hints & Resources
The following tutorial contains a list of programming syntax that can be useful for this
assignment and the link to their corresponding documentation.
Vue 3
● Get Started using createApp: https://vuejs.org/guide/quick-start.html#without-build-tools
● Vue Cheat Sheet w/examples:
https://www.vuemastery.com/pdf/Vue-Essentials-Cheat-Sheet.pdf
● Template: https://vuejs.org/guide/essentials/template-syntax.html
○ Dynamically update HTML text using {{ }}
○ Dynamically update HTML attributes using v-bind
○ Single JavaScript expressions can be used in {{ }} for text and “ ” for attributes
● Binding Classes (v-bind): https://vuejs.org/guide/essentials/class-and-style.html
○ Dynamically toggle a class depending on certain conditions
● Conditional Rendering (v-show, v-if): https://vuejs.org/guide/essentials/conditional.html
○ Dynamically render a block (e.g. <div>) 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. <div id=’[something unique]’> </div>). 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.

請加QQ:99515681  郵箱:99515681@qq.com   WX:codinghelp























 

標簽:

掃一掃在手機打開當前頁
  • 上一篇:CS 1501代做、代寫Python/Java程序設計
  • 下一篇:代寫COP4600 File Systems編程代做
  • 無相關信息
    昆明生活資訊

    昆明圖文信息
    蝴蝶泉(4A)-大理旅游
    蝴蝶泉(4A)-大理旅游
    油炸竹蟲
    油炸竹蟲
    酸筍煮魚(雞)
    酸筍煮魚(雞)
    竹筒飯
    竹筒飯
    香茅草烤魚
    香茅草烤魚
    檸檬烤魚
    檸檬烤魚
    昆明西山國家級風景名勝區
    昆明西山國家級風景名勝區
    昆明旅游索道攻略
    昆明旅游索道攻略
  • NBA直播 短信驗證碼平臺 幣安官網下載 歐冠直播 WPS下載

    關于我們 | 打賞支持 | 廣告服務 | 聯系我們 | 網站地圖 | 免責聲明 | 幫助中心 | 友情鏈接 |

    Copyright © 2025 kmw.cc Inc. All Rights Reserved. 昆明網 版權所有
    ICP備06013414號-3 公安備 42010502001045

    日本欧洲视频一区_国模极品一区二区三区_国产熟女一区二区三区五月婷_亚洲AV成人精品日韩一区18p

              久久亚洲一区| 国产真实久久| 99亚洲精品| 9久re热视频在线精品| 亚洲精品综合在线| 一区视频在线看| 国产亚洲精品一区二区| 国产自产2019最新不卡| 136国产福利精品导航| 亚洲高清视频一区二区| 亚洲午夜电影在线观看| 性欧美大战久久久久久久免费观看 | 亚洲网站在线看| 午夜免费日韩视频| 欧美 日韩 国产精品免费观看| 欧美日韩视频免费播放| 国产日韩精品视频一区| 狠狠入ady亚洲精品经典电影| 91久久久亚洲精品| 久久综合影视| 国产精品色婷婷| 一区二区黄色| 久久人人爽人人爽爽久久| 欧美精品一区二区三区蜜桃| 国产精品视频一区二区三区| 亚洲啪啪91| 久热国产精品视频| 在线成人欧美| 久久永久免费| 国产精品国产三级国产aⅴ9色| 亚洲区国产区| 欧美系列精品| 一区二区三区导航| 国产精品国产三级国产专区53| 亚洲免费大片| 久久中文字幕一区二区三区| 另类春色校园亚洲| 国产精品视频免费一区| 亚洲欧美日韩国产| 国内精品视频一区| 久久躁狠狠躁夜夜爽| 精品成人乱色一区二区| 乱码第一页成人| 99国产精品国产精品毛片| 国产精品国产三级国产普通话蜜臀| 中日韩男男gay无套| 久久国产精彩视频| 国产一区二区三区四区| 欧美成人亚洲成人日韩成人| 亚洲自拍电影| 在线观看国产成人av片| 国产精品伦子伦免费视频| 久久亚洲影音av资源网| 小辣椒精品导航| 一本大道av伊人久久综合| 国产精品v欧美精品v日本精品动漫| 久久精品国产69国产精品亚洲| 9久草视频在线视频精品| 怡红院精品视频在线观看极品| 欧美午夜在线| 蜜桃伊人久久| 欧美国产国产综合| 免费在线一区二区| 久久久久久久999精品视频| 亚洲尤物精选| 午夜精品短视频| 亚洲欧美一区二区精品久久久| 一区电影在线观看| 亚洲看片免费| 性欧美videos另类喷潮| 欧美亚洲视频在线观看| 一区二区三区视频在线观看| 这里只有精品电影| 亚洲欧美激情四射在线日 | 午夜亚洲激情| 午夜欧美视频| 久久久青草婷婷精品综合日韩| 性色一区二区| 性色av一区二区三区在线观看 | 欧美色一级片| 国产综合久久久久久| 亚洲高清久久久| 亚洲黄色在线观看| 亚洲欧美日韩综合一区| 玖玖玖国产精品| 欧美日韩亚洲成人| 韩国视频理论视频久久| 日韩午夜在线| 老司机免费视频久久| 欧美日韩中文字幕在线视频| 国产日韩在线亚洲字幕中文| 亚洲国产视频一区二区| 欧美一激情一区二区三区| 久久久精品网| 国产午夜精品麻豆| 亚洲欧美伊人| 欧美日韩国产美女| 亚洲人成在线观看网站高清| 欧美一级播放| 欧美激情一区二区三区高清视频| 久久久久久久激情视频| 亚洲欧美自拍偷拍| 国产精品99一区二区| 韩国欧美一区| 麻豆精品一区二区综合av| 国产精品一区二区三区观看| 亚洲人成网在线播放| 欧美人成在线| 国产精品99久久久久久有的能看| 久久蜜桃精品| 亚洲欧洲精品一区| 欧美日韩精品久久久| 一区二区三区国产精品| 国产精品日韩专区| 久久se精品一区精品二区| 国产亚洲欧美激情| 欧美电影免费观看网站| 亚洲小说春色综合另类电影| 国产精品一区2区| 久久综合福利| 午夜欧美电影在线观看| 国内久久精品视频| 欧美日韩高清区| 久久久精品动漫| 中文国产成人精品| 有码中文亚洲精品| 欧美日韩蜜桃| 蜜臀av在线播放一区二区三区| 亚洲日本激情| 亚洲国产一区二区三区在线播| 欧美日韩一区二区在线播放| 久久手机免费观看| 亚洲视频综合| 日韩一区二区久久| 在线观看一区二区精品视频| 国产精品人人爽人人做我的可爱| 欧美激情精品久久久久久蜜臀| 欧美一区二区视频97| 亚洲一区免费观看| 亚洲免费电影在线观看| 精品999在线播放| 国产在线一区二区三区四区| 国产精品主播| 黄色成人精品网站| 在线不卡免费欧美| 好吊日精品视频| 最新精品在线| 9人人澡人人爽人人精品| 亚洲夜晚福利在线观看| 亚洲电影免费在线观看| 在线观看日韩专区| 亚洲美女在线视频| 日韩一二三区视频| av成人福利| 午夜精品久久久久久久99黑人| 亚洲欧美精品一区| 美女久久一区| 欧美日韩在线亚洲一区蜜芽| 欧美日韩视频在线第一区| 国产欧美精品一区二区三区介绍 | 中文一区二区| 午夜在线精品偷拍| 欧美精品首页| 影音先锋亚洲电影| 亚洲综合丁香| 久久久av水蜜桃| 久久久国产成人精品| 欧美国产1区2区| 国产欧美在线看| 亚洲欧美视频一区| 欧美mv日韩mv国产网站| 国产精品美女在线观看| 亚洲另类黄色| 美女成人午夜| 国产在线精品一区二区中文| 亚洲一区二区三区四区五区黄| 久久精品国产69国产精品亚洲| 欧美日韩亚洲一区二区三区| 亚洲欧洲另类国产综合| 欧美综合二区| 国产亚洲欧美一级| 欧美一区二区三区在线| 国产伦精品一区二区三区免费 | 欧美日韩成人精品| 亚洲精品久久嫩草网站秘色 | 欧美日韩你懂的| 亚洲图色在线| 国产视频一区在线| 欧美**字幕| 亚洲一二三区精品| 欧美午夜宅男影院| 欧美在线视频免费观看| 亚洲国产美女| 国产精品欧美日韩一区二区| 亚洲午夜免费福利视频| 国产精品一区二区男女羞羞无遮挡| 亚洲一区三区在线观看| 激情av一区二区| 国产精品一区二区黑丝| 蜜臀av性久久久久蜜臀aⅴ四虎|