DEV Community

Cover image for Glammed-Up Love Language Discovery πŸ’– | February Frontend Challenge
HYEONJEONG LEE
HYEONJEONG LEE

Posted on

1

Glammed-Up Love Language Discovery πŸ’– | February Frontend Challenge

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


πŸ›€οΈ 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

  1. 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.
  2. Simple Features Can Improve UX:

    • Even simple features like the heart click effect and random challenge generator can significantly enhance user engagement.
  3. 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. πŸ’Œ


AWS Security LIVE!

Join us for AWS Security LIVE!

Discover the future of cloud security. Tune in live for trends, tips, and solutions from AWS and AWS Partners.

Learn More

Top comments (2)

Collapse
 
iqahishamm profile image
Syafiqah Hisham β€’

so creative and cute πŸ’•

Collapse
 
st3adyp1ck profile image
Ilya Belous β€’

i was under the impression that this was supposed to be a static web page, not web app format? looks cool though.

AWS Security LIVE!

Join us for AWS Security LIVE!

Discover the future of cloud security. Tune in live for trends, tips, and solutions from AWS and AWS Partners.

Learn More

πŸ‘‹ Kindness is contagious

Please leave a ❀️ or a friendly comment on this post if you found it helpful!

Okay