[SOLVED] :web222 assignment 4 prototype a fictional music app

This assignment is designed to have you practice working with HTML and the DOM in order to create both static and dynamic web content. You are asked to prototype a fictional Music App.  Your app will focus on a specific music genre and allow users to browse different artists and find specific songs.  Because your app’s artists and songs will change frequently, we often separate our data from its UI representation.  This allows us to quickly make changes and have the app always use the most current music catalogue. NOTE: in a real music app, our data would be stored in a database.  We will simulate working with a database by using JavaScript Objects and Arrays in separate files.  You need to decide on the following details for your app:       Each artist needs three things:     Here’s an example of what an artist might look like: {artistId: “AID-51234”,name: “Artist Name”,urls: [{ url: “https://link-to-website.com”, name: “Website” },{ url: “https://instagram.com/name”, name: “Instagram” }]}  Each song needs the following things:        Here’s an example of what a song might look like: {songId: “SID-13423453”,artistId: “AID-51234”,title: “Song Title”,year: “2020”,duration: 196,url: “https://www.youtube.com/watch?v=dQw4w9WgXcQ”,explicit: true}  Your artist and song data will go in `src/artists.js` and `src/songs.js` respectively.  See these files for technical details about how to code your data. Take some time now to enter all of your app’s data.             Your app’s HTML file is located in `src/index.html`.  A brief HTML skeleton has been created, and you are asked to fill in the rest using your information above. Some of your site will be static (i.e., coded in HTML directly in index.html) and never change.  Other parts of the site will be dynamic (i.e., created using DOM API calls at run-time) and will update in response to various events and user actions. Here is a basic wireframe of what your site needs to include, and which parts are static or dynamic.  NOTE: don’t worry too much about how it looks.  Focus on the structure and functionality.       App NameSlogan/Description… Artist1               Artist2                Artist3                …  Artist1 Name (Twitter, Instagram, SoundCloud)         All of your app’s dynamic content will be written in JavaScript in the `src/app.js` file.  Here is a list of the tasks you need to complete:  In your solution, you will likely require all of the following:  You are encouraged to use what you learned in the first 3 assignments and write proper functions and semantic HTML.  Use the website starter project in the assignment ZIP file.  Install all dependencies by running the following command in the root of the assignment (e.g., in the same directory as package.json): npm install Your code should all be placed in the src/ directory.  You can start a local web server to test your code in a browser by running the following command: npm start This will start a server on http://localhost:1234, which you can open in your web browser To stop the server, use CTRL + C  When you are finished, run the following command to create your submission ZIP file: npm run prepare-submission This will generate submission.zip, which you can hand in on Blackboard.