3 min read
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 clipboardImage 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 cornerTypography 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 animationTest It
- Add a few color swatches with different colors
- Add images using URLs (try a placeholder like picsum.photos)
- Add typography cards with different text and sizes
- Delete a few items
- 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