DEV Community

Cover image for Cozy Hearth: An Interactive Comfort Food Sanctuary & CSS Art Kitchen 🍲
swatiicfai
swatiicfai

Posted on

Cozy Hearth: An Interactive Comfort Food Sanctuary & CSS Art Kitchen 🍲

#devchallenge #frontendchallenge #webdev #javascript

Frontend Challenge Perfect Landing Submission 🍲🥧

This is a submission for Frontend Challenge - Comfort Food Edition, Perfect Landing

What I Built

Cozy Hearth is a digital sanctuary dedicated to the foods that make us feel at home. It combines both challenge prompts (CSS Art and a Perfect Landing Page) into a highly polished, interactive experience.

🌟 Key Features:

  • Interactive CSS Art Canvas: Three beautiful, pure CSS graphics representing comfort classics—a steaming bowl of Ramen, a warm cup of Hot Cocoa, and a golden toasted Grilled Cheese Sandwich with tomato soup.
  • The Kitchen Playground: Users can customize their dishes in real-time! Toggle toppings (egg, nori, green onions, marshmallows), adjust steam speed, change mug colors, choose soup broths, or pull the grilled cheese to adjust elasticity.
  • Real-time CSS Variables Viewer: A built-in terminal block showing exactly how CSS Custom Properties (variables) update dynamically inside :root as you interact with the controls.
  • Interactive Cooking Tracker: Clicking "Cook This Dish" slides out a dynamic recipe drawer. It features an interactive checklist to tick off prep ingredients and a step-by-step progress cards to guide you through the cooking process.
  • Community Recipe Vault: A fully validated, local-storage-backed form allowing users to publish their own custom comfort recipes, which instantly render into the visual catalog.
  • Accessibility First: Designed with fluid layouts, semantic HTML5 structure, full keyboard navigability, and ARIA attributes.

Demo

Journey

My goal was to prove that CSS Art doesn't have to be static. By tying pure CSS graphics to user-controlled JavaScript state, the food actually comes alive:

  • Ramen: Constructed using organic, multi-layered border-radius values (like 50% 50% 50% 50% / 60% 60% 40% 40% for egg-whites) and keyframes that wiggle noodles.
  • Hot Cocoa: Modeled bobbing marshmallows using independent @keyframes delays to simulate natural floating on dark cocoa liquid.
  • Grilled Cheese: Created stretchable cheese strings using CSS border parameters and scaling transforms controlled dynamically.

What I Learned & What I'm Proud Of

I'm incredibly proud of the Recipe Drawer and Step Tracker. By breaking down recipes into interactive steps, the landing page is not just beautiful to look at, but genuinely useful. Coding the real-time CSS variables viewer was also a fun challenge—it turns the playground into a mini educational sandbox demonstrating how CSS custom properties react dynamically to JavaScript events!

Top comments (0)