Description
Overview
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
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:
- https://developer.mozilla.org/en-US/docs/Web/CSS/Layout_cookbook/Card
- https://www.w3schools.com/howto/howto_css_cards.asp
- https://www.freecodecamp.org/news/learn-css-basics-by-building-a-card-component/
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:
- Create a copy of your Assignment 4 project, so you don’t lose your previous work.
- Start simple. In your HTML file, create a single product card (i.e., a <div>) that includes an <img> of the Song/Artist, a heading (e.g., <h2> or <h3>) for the Song Name, a <time> for the Year Recorded, and <span> for the Duration (you can modify the HTML elements you use, these are just suggestions).
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.
- Create rows of cards. Use Flexbox or CSS Grid to create rows that repeat your cards across and down. For now, you can copy and paste your card from step 1 over and over in order to repeat it. Make your page look good with rows of 3 or 4 cards. Adjust the spacing, size, etc. until you’re happy with how it looks.
- Find at least 4 images to use in your cards. You don’t have to find an image for every single song (i.e., you can repeat the same ones), but you should have at least 3 unique images.
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.
- Update your `src/songs.js` file so that each Song Object has an `imageUrl` property. This imageUrl should be the URL or filename (i.e., relative path) of an image to use for this product in your card. Multiple songs can use the same image URL if you don’t have enough unique images for each of the songs.
- Remove the card’s HTML you wrote earlier and write a function in JavaScript that creates them dynamically instead. Your function should accept a song Object from your songs array and create a card in the DOM, using the HTML and class names you wrote above. Here’s some code to get you started:
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;
}
- Modify your page load and button click events so that instead of creating table rows for each song, you call your `createSongCard()` function and get back the card’s <div>…</div> element, which you can now place in the DOM (e.g., using appendChild()). Clicking your artist buttons should show the correct song cards on the page.
- Clicking on the card’s image should open the `url` of the song in a new browser tab.
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.
Coding:
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.
Running a Web Server:
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
Submission:
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.
