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. š
Top comments (2)
so creative and cute š
i was under the impression that this was supposed to be a static web page, not web app format? looks cool though.