DEV Community

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

Posted on

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. šŸ’Œ


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.