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.