This content originally appeared on DEV Community and was authored by Divya
This is a submission for Frontend Challenge - February Edition, Glam Up My Markup: Love Language Discovery
What I Built 💖
For this frontend challenge, I started with a basic outline( given already) and set out to sprinkle more content, interactivity & features across every section. Here’s what I did:
- Hero Section Interactivity: A playful twist where clicking a specific area reveals a hidden message and expands the div—only to hide it when you click elsewhere 🫣.
- Interactive Quiz: I added all the quiz questions and answers, complete with a smooth question sequence that guides users through the experience.
- Dynamic Results Bar Graph: The results section stays hidden until user completes the quiz, then pops up as a sleek bar graph showing their performance📊.
- Story Expansion: I enriched the story section by deepening existing themes and introducing a couple new tales to keep you hooked.
- Global Love Expressions: Using a realistic map image, I pinpointed regions based on their true positions so that clicking on any area brings up that region’s unique love expression 🗾🗺️ .
- Daily Challenges: Five engaging challenges are lined up for you—with a special message waiting after you’ve explored them all 🤗.
- Social Media Revamp: I replaced the social media plain text with vibrant icons and polished the X section (my personal fave 😅) to give it a modern edge.
-
Aesthetic Enhancements: Background images were added to every section (except the
#global-expressionsarea) to create a visually immersive experience 👩🏻🎨.
Demo 🚀
Curious to see it all in action?
Check out my site live here:- Love Language
Or you can watch it in action here:-
And if you’re into the coding 👩🏻💻👨🏻💻, feel free to explore my GitHub repository here.
Love Language Discovery
A beautiful and interactive website to help users discover and understand their primary love language. This project helps individuals better understand how they give and receive love through an engaging quiz, stories, and daily challenges.
Demo
Try it out at:- Love Language Discovery
Features
- Interactive Love Language Cards: Learn about the five love languages with practical examples
- Personalized Quiz: Take a comprehensive quiz to discover your primary love language
- Dynamic Results: View your love language distribution through an interactive chart
- Love Stories: Read heartwarming stories about different love languages in action
- Global Perspectives: Explore how love is expressed in different cultures worldwide
- Daily Challenges: Complete daily tasks to practice different love languages
- Progress Tracking: Track your journey with a visual completion tracker
- Social Sharing: Share your results on various social media platforms
Getting Started
-
Clone the repository:
git clone
…
My Journey 🛤️
Building this project was nothing short of an adventure. Sure, there were moments when a missing } or ; caused unexpected hiccups, but every challenge was a lesson in creativity and perseverance(please remember it!).
Highlights:
- Creative Choices: I had a blast selecting background images 🎨, crafting quiz questions, and expanding the narratives in the story section.
- Interactive Delights: From the first section’s reveal-on-click feature to a quiz that unfolds step-by-step, I focused on making the user experience as engaging as possible.
- Dynamic Storytelling: Each story in the narrative section expands with a click, while interactive buttons let users scroll seamlessly through the content.
- Global Connection: In the "Love Around The World" section, the interactive map isn’t just for show—it lets user explore love expressions from real-world regions.
- Fun Challenges: The daily challenges add an extra layer of excitement, with a sequence of buttons that guide users through tasks and end with a message when they are done.
- Social Media Makeover: Upgrading from text to icons, with some playful play with Instagram gradients and a cheeky message for X, brought a fresh vibe to the design.
Every step of this journey has been incredibly rewarding. It wasn’t just about coding; it was about storytelling, creativity, and adding that personal touch that makes a project truly special. 😊
If you’re still reading— thank you so much! ☺️🙏💗
Please share your thoughts, feedback, and suggestions in the comments below 🗨️
This content originally appeared on DEV Community and was authored by Divya
Divya | Sciencx (2025-02-19T06:14:02+00:00) Decoding Your Love Language: An Interactive Voyage 💖✨. Retrieved from https://www.scien.cx/2025/02/19/decoding-your-love-language-an-interactive-voyage-%f0%9f%92%96%e2%9c%a8/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.