Styles and Images in Components

In a Vite project, a component can import its own stylesheet. The line import "./ProductCard.css"; adds that file's rules to the page. A rule only styles the elements its selector matches, so the element needs the class. In JSX you write it with className, because class is a JavaScript word.

An image is imported too. import logoUrl from "./logo.svg"; gives you a string: the address the dev server sends the file at, like "/src/logo.svg". It goes in src, in braces. On another component it looks like this:

import "./Banner.css";
import logoUrl from "./logo.svg";

export default function Banner() {
  return (
    <header className="banner">
      <img src={logoUrl} alt="Corner Shop logo" />
    </header>
  );
}

The check opens the page and prints each style with the rule it comes from. In the starting code, the article only gets padding-left: 8px <- article from index.css, the image has no src, and .price matches 0 elements. When you're done, it prints:

article.card "Mug$12Add to cart"
  padding-left: 16px   <- .card
  border-radius: 8px   <- .card
img
  width: 120px   <- .card img
  height: 120px   <- .card img
p.price "$12"
  color: #1a7f37   <- .price
  font-weight: bold   <- .price
img "A white mug with a blue handle": src "/src/mug.svg", the dev server sends the file src/mug.svg

Your task: in src/ProductCard.jsx, the two imports are given. Give the article the class card, set the img's src to mugUrl, and add a paragraph with the class price that shows $ and the product's price.

Assignment
Follow the Coding Tutorial to connect ProductCard to its stylesheet and its image: a class on the card, the imported image address in src, and a styled price.

Hint
A class name is plain text, in quotes. mugUrl is a variable, so it goes in braces: src="mugUrl" would ask for a file called mugUrl.