Glammed-Up Love Language Discovery 💖 | February Frontend Challenge

HYEONJEONG LEE — Sun, 23 Feb 2025 09:40:52 +0000

This is a submission for Frontend Challenge - February Edition, Glam Up My Markup: Love Language Discovery

💖 What I Built

For the Frontend Challenge - February Edition, Glam Up My Markup: Love Language Discovery, I built a Love Language Discovery Platform based on the provided starter HTML.

Without modifying the HTML structure, I focused on enhancing interactivity and design using only CSS and JavaScript.

The main goal was to create a fun and engaging experience for users to explore different ways of giving and receiving love.

🚀 Key Features Implemented

💕 Heart Effect:

A cute interaction where hearts appear every time the user clicks, adding a lovely touch to the experience.
📱 Bottom Navigation:

A bottom navigation bar to help users easily navigate between different sections of the page.
💌 Discover Love (Card View):

Love languages are displayed in a card format, making it more intuitive and fun for users to explore.
💞 Love Quiz (Quiz Feature):

A quiz feature that allows users to find out their preferred love language in an interactive way.
📖 Love Story (Carousel):

Instead of static text, love stories are displayed in a carousel format for a more engaging and dynamic experience.
🎯 Random Love Language Challenge:

A random daily love language challenge is presented to encourage users to practice different expressions of love every day.

💡 Demo

🔗 Live Demo – Try it out!
💻 GitHub Repository – Check out the source code

🛤️ Journey

This challenge allowed me to explore creative ways to enhance interactivity in a restricted environment, where I couldn't modify the HTML structure. It was a great opportunity to focus on CSS and JavaScript to bring the project to life.

✨ What I Learned

Creativity in a Restricted Environment:
- Working without the ability to modify the HTML forced me to think creatively about how to implement new interactions using only JavaScript and CSS.
Simple Features Can Improve UX:
- Even simple features like the heart click effect and random challenge generator can significantly enhance user engagement.
Understanding the Importance of Future Improvements:
- Although I couldn't implement every feature within the time constraints, I was able to identify key areas for future improvement.

💖 Final Thoughts

This challenge was a great opportunity to focus on interactivity and user experience (UX) within specific constraints. 🚀

I’m excited to see what others have built for this challenge! Feel free to leave feedback or suggestions — I’d love to hear your thoughts. 💌