[SOLVED] Web222 assignment 5 overview 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 web store’s static and dynamic web content.

 

You are asked to update the design of your fictional online store.  This time, instead of displaying your products in an HTML table, you will create visual product “cards” that show a picture, name, description, and price.

 

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 Rothy’s, Amazon, 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 like.  Here’s an example, which uses rounded corners, a subtle shadow, different font sizes, and a large photo at the top.

 

 

 

 

 

 

 

 

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, the bike above is 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 createProductCard(product) {

// 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 product image, use the .card-image class

const productImage = document.createElement(‘img’);

productImage.src = product.imageUrl;

productImage.classList.add(“card-image”);

card.appendChild(productImage);

 

// … rest of your card building code here

 

// Return the card’s <div> element to the caller

return card;

}

 

 

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.