DEV Community

Cover image for Daily Challenge #2 : The "Secret Valentine" Decoder 💌
bingkahu (Matteo)
bingkahu (Matteo)

Posted on

Daily Challenge #2 : The "Secret Valentine" Decoder 💌

Happy February 14th! Today we are playing Cupid, but instead of arrows, we’re using pure CSS logic. Your mission is to build a secret message reveal.

The Mission

Create a "Love Letter" UI. Initially, the page looks empty or has a placeholder. When the user interacts with it, a secret message is revealed.

The Rules 🚫

  1. NO JavaScript Allowed: No onclick, no addEventListener, and absolutely no localStorage.
  2. Pure CSS/HTML only: You must rely on checkboxes, :checked states, :hover, or :active selectors to trigger the reveal.
  3. The Reveal: The message shouldn't just "be there." It needs to be triggered by a specific user action (like clicking a "Seal" or hovering over an envelope).

The Goal 🏆

Make the reveal feel magical. Use transitions, opacities, or transform scales to make the message "pop" out of the envelope.


How to enter:

Drop your CodePen or GitHub Repo in the comments below!

  • Bonus Points: If you use the "Checkbox Hack" to make the message stay open after being clicked.
  • Extra Credit: If you style it to look like a vintage wax-sealed letter. ✉️

Have fun and Happy Valentines!

Top comments (0)