Step 3: Adding Items

Add color swatches, images, and typography cards to the board.

Where We Are

The grid layout works with placeholder cards. Now let's replace those with real, interactive item types.

Remove Placeholders

Remove the placeholder cards. The board should start empty.
Items will be added dynamically when the user clicks the toolbar buttons.

Color Swatches

When the user clicks "Add Color," show a color picker dialog.
After they pick a color, add a card to the board that:
- Shows the color as a large swatch (fills most of the card)
- Displays the hex code below the swatch
- Has a small delete button (X) in the corner
- Clicking the swatch copies the hex code to clipboard

Image Cards

When the user clicks "Add Image," show a prompt for an image URL.
After they enter a URL, add a card to the board that:
- Displays the image, scaled to fit the card width
- Shows a loading state while the image loads
- Shows an error state if the URL is invalid
- Has a delete button in the corner

Typography Cards

When the user clicks "Add Text," show a dialog where they can:
- Enter sample text (default: "The quick brown fox")
- Pick a Google Font name (or use system fonts)
- Choose a size (small, medium, large)

Add a card that displays the text in the chosen font and size.
Include the font name as a small label. Include a delete button.

Delete Items

Make the delete button work on all card types:
- Small X button in the top-right corner of each card
- Hidden by default, appears on hover
- Removes the card from the board with a fade-out animation

Test It

1. Add a few color swatches with different colors
2. Add images using URLs (try a placeholder like picsum.photos)
3. Add typography cards with different text and sizes
4. Delete a few items
5. Mix all three types on the board together

The board should look like an actual mood board.

Checkpoint

• Color swatches add with a color picker
• Image cards load from URLs
• Typography cards display custom text and fonts
• Delete button removes items
• All three types coexist on the grid

What You Learned

• Dynamic DOM creation with JavaScript
• Event listeners and user input dialogs
• Loading and error states for images
• CSS hover effects and transitions

Exercises

1. Build all three item types one prompt at a time, testing each before moving to the next — add a color, an image (try a picsum.photos URL), and a typography card.
2. Wire up the delete button and confirm it appears on hover and fades the card out; then deliberately enter a broken image URL to verify the error state shows.
3. Mix all three card types on one board and judge it as a designer — if it doesn't yet "look like a mood board," send a styling follow-up describing what feels off.