Muhammad Usman

Posted on Feb 21

Visualize & Discover Your Love Language with your loved ones.

#frontendchallenge #html #css #devchallenge

This is a submission for Frontend Challenge - February Edition, CSS Art: February.

Understanding how you give and receive love?
Discover your love language and deepen your connections with your loved ones. Learn how you give and receive love for stronger, more meaningful relationships.

Starting with head

SEO Meta for better social preview

I have Implemented the SEO setup for better social preview, that include, meta-title, meta-description, Facebook Meta Tags, og:image, Twitter Meta Tags.

<meta
      property="og:title"
      content="Discover Your Love Language | how you give and receive love"
    />
<meta
      property="og:description"
      content="Discover your love language and deepen your connections with your loved ones. Learn how you give and receive love for stronger, more meaningful relationships."
    />
<meta
      property="og:image"
      content="https://67b85e923dd177a6a5cc2af4--love-language.netlify.app/media/discover-your-love%20language.png"
    />

    <!-- Twitter Meta Tags -->
    <meta name="twitter:card" content="summary_large_image" />
    <meta property="twitter:url" content="https://love-language.netlify.app/" />
    <meta name="twitter:title" content="site" />
    <meta
      name="twitter:description"
      content="Discover your love language and deepen your connections with your loved ones. Learn how you give and receive love for stronger, more meaningful relationships."
    />
    <meta
      name="twitter:image"
      content="https://love-language.netlify.app/media/Discover-Your-Love-Language.png"
    />

Third Party CDN for graphical visualization

Then I have integrated third part CDN for data visualization called jsDelivr, Chart.js a JavaScript data visualization library.

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

The Font-Family I have used in this project

<link
      href="https://fonts.googleapis.com/css2?family=Great+Vibes&family=Poppins:wght@300;400;500;600&display=swap"
      rel="stylesheet"
    />

font-family: 'Great Vibes', cursive;
font-family: 'Poppins', sans-serif;

What's Inside? The Functionalities: Journey

1. Floating Emojis

This feature creates random floating emojis on the webpage.

Emojis Used: ❤️, 💖, ✨, 🌸, etc.
A new emoji is created every 1.5 seconds.
It appears at a random position and floats upwards.
It disappears after 4 seconds.

How It Works?

createEmoji(): Generates a random emoji and appends it to the emoji-container.
setInterval(createEmoji, 1500): Calls createEmoji() every 1.5 seconds.

2. Love Messages

Displays an alert message based on selected love language.

Words of affirmation
Acts of service
Receiving gifts
Quality time
Physical touch

Functionality:

showLoveMessage(language): Displays an alert with a message corresponding to the selected love language.

3. Love Language Quiz

A simple quiz to determine the user’s primary love language.

Questions: 5 multiple-choice questions with different love languages assigned to each answer.
Scoring System:
Each answer increases the score of a particular love language.
Scores are displayed on a radar chart.

How It Works?

Display Questions

displayQuestion(): Shows the current question and its answer options.
Options are dynamically created as buttons.

Answer Selection:
selectAnswer(e): Updates the score based on the selected option and moves to the next question.

Results Calculation:

showResults(): Displays the final love language percentages on a radar chart.
The dominant love language is highlighted.

Chart Visualization:

Uses Chart.js to display results in a radar chart.

Quiz Reset:

resetQuiz(): Resets the quiz and allows retaking it.

Radar Chart Display & Data Presentation

The five love languages are plotted on a radar chart.
The highest-scoring language is highlighted.

Time taken to complete this challenge:

Due to my busy work schedule, it took me one week to complete the design, and functionalities. Of course, I have taken some help from AI for the:

Idea
What should be the functionality?
And with code as well.

In the end, I have finally completely the project.

Show me your love by saving it to your list, like it, and make sure to share it with your loved ones That's all I'm asking for

One more thing, please don't criticize the code base.

Happy Coding!

Demo Link to the website:

Finally, I have published using a free service called Netlify.
Here is the link:

Discover Your Love Language | Understanding how you give and receive love

Inspiration

My inspiration was absolutely to win this contest. And share it with this beloved community

license for the code

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

📍 Find me on: LinkedIn | Medium | Bluesky