This is a submission for Frontend Challenge - February Edition, Glam Up My Markup: Love Language Discovery
What I Built
For this challenge, I transformed the basic Love Language Discovery HTML into an engaging, visually appealing, and interactive landing page. My goal was to create a user-friendly experience that not only educates visitors about love languages but also invites them to explore their own through a quiz, stories, and global perspectives. I used CSS to craft a cohesive romantic theme with soft gradients, heart animations, and smooth transitions, while JavaScript powers the interactivity—everything from a dynamic quiz with animated results to an expandable story carousel and a clickable world map. The design is responsive, accessible, and playful, aiming to make the concept of love languages both fun and meaningful.
Demo
Journey
My process began with analyzing the provided HTML structure and envisioning how to elevate it with CSS and JavaScript. I started by designing a warm, love-inspired aesthetic—think pinks, reds, and subtle heart animations—to set the tone. The hero section became a standout feature with floating hearts and clickable cards that update the subtitle dynamically, thanks to JavaScript event listeners.
The quiz section was a fun challenge to code. I built a simple state management system to track user answers, calculate scores, and animate the results into a bar chart. I’m particularly proud of the smooth transitions in the chart bars and the story carousel, where I used CSS transforms and JavaScript to create a sliding effect with expandable story details. The carousel’s indicators and navigation buttons were a nice touch to enhance usability.
Adding the global expressions map was a creative highlight—I positioned markers with CSS and tied them to JavaScript for region-specific info, making it both educational and interactive. The daily challenge section, with its random challenge generator and clickable tracker, added a practical element I hope users enjoy.
I learned a lot about balancing aesthetics with functionality—ensuring animations didn’t overwhelm the experience (with a media query for reduced motion) and keeping the code modular. One hurdle was perfecting the story carousel’s expand/collapse animation, which I solved by switching to max-height for smoother transitions.
I’m thrilled with how it turned out, especially the cohesive look and feel. Next, I’d love to add local storage to save quiz results or integrate a backend for sharing user stories. For now, I’ve kept it simple and licensed it under MIT for anyone to explore or build upon.
Thanks for this fun challenge—it was a blast to glam up the markup into something both beautiful and interactive!
Top comments (0)