DEV Community

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

Posted on

8 3 4 7 3

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 Q Developer image

Your AI Code Assistant

Automate your code reviews. Catch bugs before your coworkers. Fix security issues in your code. Built to handle large projects, Amazon Q Developer works alongside you from idea to production code.

Get started free in your IDE

Top comments (3)

Collapse
 
iqahishamm profile image
Syafiqah Hisham โ€ข

so creative and cute ๐Ÿ’•

Collapse
 
ansellmaximilian profile image
Ansell Maximilian โ€ข

Congrats!

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.

๐Ÿ‘‹ Kindness is contagious

DEV shines when you're signed in, unlocking a customized experience with features like dark mode!

Okay