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-expressions area) 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.
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.
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 🗨️
Divya
