This is a submission for Frontend Challenge - February Edition, CSS Art: February.
💖 A Celestial Love Quiz
Love is in the air, and what better way to celebrate it than with a fun, interactive love quiz? But wait—this isn't your regular "type-your-names-get-a-random-love-score" quiz!
I wanted something more... celestial. ✨
🌟 Inspiration
Love and astrology have always been intertwined. People look to the stars for guidance in their relationships, so I thought— why not blend zodiac compatibility with romance and make a quiz out of it ☺️😁?
And thus, this Celestial Love Quiz was born! 🥰💫👼🏻
This web app asks for two people's dates of birth, calculates their astrological signs, and then determines how well they match based on their celestial compatibility. Instead of just a boring number, I also wanted to make it more story-driven, so each couple gets a unique great love story from the stars. 🌠
🎬 Demo Time!
🚀 Experience the magic here: - Celestial Love Destiny
📽️ See it in action:
💻 Or try it directly here itself:
👩💻 Or, if you are more of a coding person, check out the code below:
✨ Celestial Love Destiny Calculator
A magical web application that calculates cosmic compatibility between two people based on their names and birthdates. Experience the mystical journey of discovering your celestial love destiny!
Demo
Try it out at:- Love Fate Simulator
✨ Features
- Calculates love compatibility based on names and birthdates
- Beautiful cosmic-themed user interface
- Interactive form with real-time validation
- Responsive design that works on all devices
- Engaging animations and transitions
💫 How to Use
- Enter your first name
- Enter your partner's/crush's name
- Input your birthdate (mm/dd/yyyy format)
- Input your partner's birthdate (mm/dd/yyyy format)
- Click "Reveal Cosmic Destiny" to see your compatibility results
⚡ Installation
To run this project locally:
- Clone the repository:
git clone https://github.com/divya4879/Love-Fate-Simulator.git
- Open the project folder:
cd Love-Fate-Simulator
- Open
index.htmlin your preferred browser
🌟 Accessibility Features
The application is designed with accessibility in mind:
Keyboard Navigation
- All form fields are keyboard accessible
- Tab order follows a…
👩🏻🔬👩🏻💻👩🏻🎨🤓 My Journey – A Tale of Curiosity, Chaos, Grit & Glory 💻💘
Bringing this project to life was a rollercoaster of code, creativity, and a lot of trial & error! 😅 But here are some of the coolest things I learned and built along the way:
✨ 1. A Sky Full of Stars
I wanted the background to be more than just a static image. It had to feel alive, representing the night sky, in all its glory 💫🌃✨
So, I created a dynamic starry night where stars:
- Twinkle in different colors
- Move at different speeds
- Vary in size to represent depth
It wasn’t easy, but it turned out great. ☺️☺️
♈♉♊ 2. Zodiac Matchmaking – The Cosmic Connection
Finding zodiac signs from a date of birth? Easy 😆🙂
- I researched zodiac compatibility and created a system that assigns love scores based on the harmony between signs(not really, it was random scoring 😅😁).
- While planetary positions matter more than just the date, this was a fun way to create a dreamy, astrology-based love quiz.
📖 3. AI-Generated Love Stories (The Unexpected Twist)
Originally, I wanted the love stories to be AI-generated in real time, but... 😭 the Gemini API ghosted me sometimes, leaving some results empty.
So, I pre-generated the love stories using AI, then curated them to ensure each story felt romantic and celestial. Now, every couple gets a beautifully written love tale! 💕
❤️🩷🧡💛 4. Love in Living Colors 💚💙🩵💜
Different love scores = different colored hearts.
This subtle touch makes the quiz results feel more alive and personal. Every love story gets the color it deserves.
🔗 5. Share the Love!
What's the fun in taking a love quiz if you can't share your cosmic fate?
At the bottom of the results, I added a share button for X (ex of Twitter) so people can spread their celestial love scores with the world. 🌍💌
🚀 What’s Next?
This is just the beginning! Here’s what I want to improve next:
✅ More interactive elements – Maybe an animation when the love score appears? 🎇
✅ Custom-generated love stories per couple – Making each story even more personalized. 💞
✅ More zodiac accuracy – Factoring in more astrological details! 🌠
📜 License & Open Source
This project is open-source under the MIT License!
Feel free to check out the repo, fork it, and make it even better. 🛠️✨
👉 GitHub – Celestial Love Destiny
💬 Final Thoughts
If you made it this far—THANK YOU! 🥹💕
Celestial Love Destiny was a fusion of code, creativity, and cosmic wonder ✨💖. From dynamic stars to celestial love stories, every detail was crafted to make love feel magical. It was a journey of learning, experimenting, and storytelling— one that truly felt written in the stars. 🌌💕
🚀 I’d love your feedback! Drop a comment, tell me what you think, and if you tried the quiz, let me know your love score! 💘
Happy coding, and may your love be as infinite as the stars! ✨💫
💖 P.S. If you liked this, please give it a heart on Dev.to! It would mean the world to me. 😊💝
Top comments (13)
✨💖🌌 Wishing you an amazing journey as you explore the cosmic magic of love and destiny! Best wishes for your incredible submission ! 🌟💫
But there is a problem🥹
What problem?
How to know this is true.
This is not 😅
Firstly, I didn't add any compatibitlity matrix about the zodiac signs.
Plus, this is not really something that can be calculated, it's too unpredictable 😅
Ok ok😅
😅I just wanted to clarify, stuff like this isn't logical and can't be predicted 😁
I took it seriously - maybe a little too seriously🤔 - and started hunting for a second name like a detective on a big case.😆😂
😅
No need to do that
😔
Your work is nice and funny! The Celestial-Love-Destiny stories are creative!
Thank you Hirushi ☺️
I used Gemini for them 😅
@divya4879 just checked this love it, but some suggestions for you on discord.
Thank you for your feedback.
I'll update it soon.