[SOLVED] :web222 assignment 5 this assignment is designed to have you practice building more complex html

 This assignment is designed to have you practice building more complex HTML and CSS layouts.  We will continue to iterate on your previous Assignment 4 Music App static and dynamic web content. You are asked to update the design of your fictional Music App.  This time, instead of displaying your products in an HTML table, you will create visual product “cards” that show an image, song name, year, and duration. You must do all the work for this assignment on your own.  You may consult your notes, use the web for inspiration, but you should not copy code directly from other sites, or other students.  If you need help, ask your professor.  Cards on the web, much like trading- or playing cards, are rectangular areas that allow you to visually present a lot of related data.  We often see them used in online stores, social media, and anywhere that we want to mix images, titles, and text in a rectangle.  Here are some real-world examples from Spotify, Amazon, SoundCloud, and AirBNB:    There are lots of resources you can use to learn more about creating a card, for example: Update Your Store to Use Cards Modify your solution to Assignment 4 in order to replace the HTML table with rows of cards.  To do this, you should follow these steps:   Use CSS classes on your card’s elements in order to apply colours, fonts, margins, padding, borders, etc. until you have something that you think looks good.           Make sure you optimize the images so they are not too big to download (i.e., don’t use a 5000×6000 image in a card that uses 400×200). You can use https://squoosh.app/ for images that you download.  Or you can also use a trick with https://unsplash.com/ images to resize them automatically via the URL.  For example, this bike image https://unsplash.com/photos/tG36rvCeqng.  Here’s the full-sized image https://images.unsplash.com/photo-1485965120184-e220f721d03e (it’s 3.8M in size, and 4440×2960).  We can reduce that image by adding some parameters to the image URL: ?auto=format&fit=crop&w=750&q=80 to crop and resize it to 750 pixels wide, and reduce the quality a bit to 80%, like this: https://images.unsplash.com/photo-1485965120184-e220f721d03e?auto=format&fit=crop&w=750&q=80 See https://unsplash.com/documentation#dynamically-resizable-images for more details.   function createSongCard(song) {// Create a <div> to hold the cardconst card = document.createElement(‘div’);// Add the .card class to the <div>card.classList.add(“card”); // Create a song image, use the .card-image classconst songImg = document.createElement(‘img’);songImg.src = song.imageUrl;songImg.classList.add(“card-image”);songImg.appendChild(songImg); // … rest of your card building code here // Return the card’s <div> element to the callerreturn card;}  Unlike in previous assignments, the CSS and visual styling of your assignment does matter this time.  Take your time to make something visually pleasing and functionally complete. Use your copy of the website starter project in the assignment-4 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:8080, 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.