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 π¨οΈ
Top comments (12)
Really well done! β₯οΈ
Thank you π
Good job! I like the moving backgrounds
Thank you π
Yup, I like them as well βΊοΈ
π Congratulations, Miss Divya! π
π You are the proud winner of the Frontend Challenge - February Edition. β¨ποΈπ
Thank you Mr Robin π₯Ήπ₯Ή
I would love to be the winner, but results aren't out yet.
Aww, thatβs the spirit! π₯Ήπ No matter what happens, youβve already put in the effort and thatβs what truly matters. But Iβve got a feeling youβll come out on top! ππ₯ Manifesting all the good vibes your way! β¨π€π«
Thank you so much π₯Ήπ₯Ή
Yup, I want to win, hence 4 projects for this challenge π
Four projects? Youβre not challenging yourself, youβre challenging the entire universe! ππ₯
Not the entire universe π
I just wanna win π₯Ήπ₯Ή
I tried it!
It was an awesome, wholesome experience.
There were so many sub-sections, and I enjoyed every part of it.
Your hard work makes the experience seamless.
Good luck Divya βΊοΈ
Thank you Adarsh π
Glad you liked it.
Also, thank you again π₯Ήπ₯Ή
I really wanna win this
Some comments may only be visible to logged-in visitors. Sign in to view all comments. Some comments have been hidden by the post's author - find out more