# Bulk edit review table > A light product table: three rows are ticked, a bar appears, 10% is applied and the new prices replace the old ones. - Category: Developer tools - Version: 1.0 - Source: https://ownlyplans.com/bhaskar/bulk-edit-review-table/ ## Overview A bulk-edit screen. Three checkboxes tick one after another, a dark action bar slides up, Apply is pressed, old prices are struck through and green new prices appear with a success chip. Topic inspired by OpenDesign's public dashboard prompt list; this prompt and design are written from scratch. ## Tech stack - CSS - Dashboard - HTML ## Build steps ### 1. Paste the prompt The AI builds the table, the action bar and the chip. Prompt: ```text Build a single-file HTML bulk edit review screen, 1280x720, pale background #f4f6fb, ink #1b2540, accent blue #4f7cff, success green #12875a. System fonts, no libraries. Header: H1 "Bulk edit" and a muted line "Select products, change a field once, review before you apply". A white rounded table (20px radius, soft shadow) with columns Product (name + SKU), Stock, Price, Group and five rows: Linen shirt $48.00, Canvas tote $29.00, Wool beanie $22.00, Leather belt $64.00, Cotton socks $12.00. Each row starts with a 22px checkbox. Bottom centre: a dark navy action bar (600px wide) saying "3 selected", "Price: increase by 10%" and a blue "Apply changes" button. Motion (8 second loop): rows rise in with a stagger. The first three checkboxes fill blue with a white tick one after another. The action bar slides up. The Apply button presses (scale .9). The three old prices get a strike-through and fade, and new prices $52.80, $31.90 and $24.20 fade in beside them in green. A green chip "3 products updated" appears top right, then everything fades and restarts. Respect prefers-reduced-motion. Return only the complete HTML. ``` ### 2. Check the ticks Three checkboxes should tick one after another. ### 3. Check the prices Old prices should be struck through and new ones appear. **Done when:** You can see it working in the browser. ### 4. Make it real Apply the change to your products and add an undo. ## Assets ### prompt.md — The full prompt. ~~~~ # Bulk edit review table Copy this prompt into Claude, Cursor or Lovable. ```text Build a single-file HTML bulk edit review screen, 1280x720, pale background #f4f6fb, ink #1b2540, accent blue #4f7cff, success green #12875a. System fonts, no libraries. Header: H1 "Bulk edit" and a muted line "Select products, change a field once, review before you apply". A white rounded table (20px radius, soft shadow) with columns Product (name + SKU), Stock, Price, Group and five rows: Linen shirt $48.00, Canvas tote $29.00, Wool beanie $22.00, Leather belt $64.00, Cotton socks $12.00. Each row starts with a 22px checkbox. Bottom centre: a dark navy action bar (600px wide) saying "3 selected", "Price: increase by 10%" and a blue "Apply changes" button. Motion (8 second loop): rows rise in with a stagger. The first three checkboxes fill blue with a white tick one after another. The action bar slides up. The Apply button presses (scale .9). The three old prices get a strike-through and fade, and new prices $52.80, $31.90 and $24.20 fade in beside them in green. A green chip "3 products updated" appears top right, then everything fades and restarts. Respect prefers-reduced-motion. Return only the complete HTML. ``` ~~~~ ### index.html.md — Complete code of the result in the video. ~~~~ # index.html The finished result as one file. Save it as index.html and open it. ```html Bulk edit review

Bulk edit

Select products, change a field once, review before you apply
3 products updated
Product
Stock
Price
Group
Linen shirtSKU LS-204
In stock
$48.00$52.80
Apparel
Canvas toteSKU CT-118
In stock
$29.00$31.90
Apparel
Wool beanieSKU WB-077
Low stock
$22.00$24.20
Apparel
Leather beltSKU LB-310
In stock
$64.00
Apparel
Cotton socksSKU CS-045
In stock
$12.00
Apparel
3 selectedPrice: increase by 10%
Apply changes
``` ~~~~ ## Build instructions by tool ### Claude Code Open a terminal in an empty folder, run `claude`, then paste the prompt. ```text Build the "Bulk edit review table" app from the OwnlyPlans blueprint at https://ownlyplans.com/bhaskar/bulk-edit-review-table/. Stack: CSS, Dashboard, HTML. Follow the plan's steps in order: Paste the prompt → Check the ticks → Check the prices → Make it real. Download the full plan (Markdown) from the link above and keep it in the project root as PLAN.md. Ask me before adding anything not in the plan. (Prepared for Claude Code.) ``` ### Cursor Open an empty folder in Cursor, start an Agent chat, then paste the prompt. ```text Build the "Bulk edit review table" app from the OwnlyPlans blueprint at https://ownlyplans.com/bhaskar/bulk-edit-review-table/. Stack: CSS, Dashboard, HTML. Follow the plan's steps in order: Paste the prompt → Check the ticks → Check the prices → Make it real. Download the full plan (Markdown) from the link above and keep it in the project root as PLAN.md. Ask me before adding anything not in the plan. (Prepared for Cursor.) ``` ### Lovable Start a new Lovable project and paste the prompt as your first message. ```text Build the "Bulk edit review table" app from the OwnlyPlans blueprint at https://ownlyplans.com/bhaskar/bulk-edit-review-table/. Stack: CSS, Dashboard, HTML. Follow the plan's steps in order: Paste the prompt → Check the ticks → Check the prices → Make it real. Download the full plan (Markdown) from the link above and keep it in the project root as PLAN.md. Ask me before adding anything not in the plan. (Prepared for Lovable.) ``` ## Definition of done - Every build step is complete and the app runs locally. - The main user flow works end to end. - Share your build on OwnlyPlans with a demo link, build time and tool.