Daily Challenge #10 : The "Zero-Script" Shopping Cart 🛒

It is February 22nd. Today, we’re proving that you don't need a heavy JavaScript framework to handle basic state logic. Your mission is to build a functional (visual) shopping cart.

The Mission

Create a product gallery where users can "Add to Cart." The cart should update to show which items have been selected, and a "Total" should be calculated—all without a single script tag.

The Rules 🚫

1. NO JavaScript Allowed : No state variables, no .push(), and no calc() based on JS values.
2. Pure CSS/HTML only : Use a hidden checkbox or radio button for every single product.
3. The Calculation : While you can't do complex math like $19.99 + $5.40, you can use CSS Counters to "count" how many items are currently selected.

The Goal 🏆

When a user clicks "Add to Cart" on an item, it should appear in a "Your Bag" sidebar. If they uncheck it, it should disappear.

Pro Tip : Use counter-reset: total; on the parent and counter-increment: total; on every :checked input. Then, display the result using content: counter(total); in a pseudo-element!

---

How to enter

Drop your CodePen or GitHub Repo in the comments!

• Bonus Points : If you style the "Add to Cart" button to change to "Remove" once clicked.
• Extra Credit : If you use CSS Grid to make the cart layout look like a real checkout receipt.

Have fun!