[SOLVED] Web222 assignment 5 this assignment is designed to have you practice building more complex html and css layouts.

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.

Assignments are to be submitted by the due date posted on the blackboard.  All late submissions will be assessed a penalty of 25% of the total possible grade for the assignment, regardless of the number of hours late up to but not beyond 72 hours. After 72 hours, the assignment will be assessed as zero(0). Assignments should be submitted on time, on a regular basis, to enable you to stay on track within the class. THERE ARE NO EXCEPTIONS TO THE LATE MARK PENALTY.

 

Cards

 

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 card

const card = document.createElement(‘div’);

// Add the .card class to the <div>

card.classList.add(“card”);

 

// Create a song image, use the .card-image class

const 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 caller

return 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.