🠄 Back

Card Generator Studio Guide

Learn how to create beautiful custom cards using the Card Generator app.

1. What This App Does

The Card Generator Studio allows you to create custom cards visually. You can:

Controls Panel

Update Card

Live Card Preview

Image Preview
Sample Card

Your custom text appears here.

2. Uploading an Image

Click the Upload Image button and choose an image from your computer.

The JavaScript uses a FileReader to display the uploaded image instantly.

📁 Choose Image → 🖼️ Preview Appears

3. Editing Card Content

Change the Title

Type into the Title input box to change the card heading. 

Title Input:
--------------------------------
| My Awesome Card             |
--------------------------------

Preview:
My Awesome Card

Change the Text

Use the text area to edit the paragraph shown on the card. 

Textarea:
--------------------------------
| This card was created with  |
| Card Generator Studio.      |
--------------------------------

4. Styling the Card

Background and Text Colors

Use the color pickers to customize the appearance of the card.

Purple Background Example

Border Controls

The app lets you control:

  • Border Width
  • Border Color
  • Border Radius
Rounded Border Example

Shadows

Enable:

  • Text Shadow for glowing text
  • Box Shadow for floating card effects

Shadow Effects

This card uses both text and box shadows.

5. Updating the Card

After changing settings, click the Update Card button.

This runs the JavaScript function: 

updateBtn.addEventListener('click', updateCard);

The updateCard() function:

6. Generated Code Section

The app automatically creates reusable HTML and CSS code for your card. 

Generated HTML:
--------------------------------
<div class="card">
  <h3>My Card</h3>
  <p>Card text</p>
</div>
--------------------------------

Use the Copy buttons to copy the generated code into your own projects.

7. How the JavaScript Works

Main Functions

User Changes Input
        ↓
updateCard()
        ↓
Live Preview Updates
        ↓
generateCode()
        ↓
HTML + CSS Output

8. Features Summary