In the name of all things RoMaNcE this Valentine's February, The Love Riot web app showcases the Love Compatibility Calculator. Based on zodiac star sign compatibility, users can calculate a potential compatibility score with their partner or crush and send the results on by email.
Compatibility scoring is displayed as a percentage match of the astrological star-signs of each person - adapted from numerologysign.com!
The Am I Responsive? link can be found here - Am I Responsive?
A deployed link to the live website can be found here at Love Riot
When it comes to the complexities of love and relationships, many people 'look to the stars' in order to analyse the potential of a budding romance between two people. We decided to build our Valentine's themed application as a Love Compatibility Calculator which is both fun to use and shares some insights into the compatibility of the astrological star-signs.
Our opening statement on the landing page for users:
"Feeling lost in the maze of love? Wondering if you're on the right path to happiness? Unveil the secrets of your relationships with our Love Compatibility Calculator! Say goodbye to uncertainty and hello to lasting connections."
In the spirit of Valentine's day, our objective was to create a functioning love compatibility calculator game which displays a percentage compatibility score after the user has input two names and two zodiac star-signs.
The target audience of this game is anyone interested in learning about astrological star-sign compatibility in romantic relationships. It can also be played as a light hearted game for all ages, especially around Valentine's Day, where the results can be forwarded to friends (or a crush) by email.
- Simple and intuitive user interface
- Explanation of how the site works is easy to understand
- Calulator game works as expected and is fun to play
- Clear presentation of the content
- Option to learn more about the page / access help with knowing which star-sign to choose
- Design that is visually attractive
- Accessibility
- Features and navigation system works as expected
As a user I would like:
- to understand what the app is about and how to use it.
- to calculate a love compatibility score using the interactive calculator on screen.
- to have access to more details of zodiac compatibility to complement the calculator results.
- for the animation and scoring to appear smoothly and accurately.
- to have some help with choosing the correct star sign for myself or my crush.
- to navigate through the elements of the game / website easily
- the option to access more information about the app and Cupid&Co.
- to enjoy the experience of using the site with a visually appealing format.
Considering the user requirements and expectations, the table below shows the features that should be implemented to make an appealing and functional interactive Love Calculator for users. Due to time constraints, some of these features are not implemented at this stage.
[X] indicates opportunities that were considered at the planning stage but were deemed not viable/feasible for this project sprint. Y / N indicates a Yes / No as to whether each opportunity was acheived and implemented at this stage.
| Opportunity | Importance | Viability / Feasibility | Outcome |
|---|---|---|---|
| Love Calculator game grid for interactive compatibility scoring | 5 | 5 | Y |
| About page for more information about the Cupid&Co Team | 4 | 5 | Y |
| Landing page (before starting the game) | 4 | 5 | Y |
| Functioning user input form for game calculation | 5 | 5 | Y |
| Loading spinner during calculation process | 4 | 5 | Y |
| Visual indicator of compatibility result | 3 | 5 | Y |
| Info modal to give users guidance on selecting the correct star-sign | 5 | 5 | Y |
| Reset option that clears the calculator form | 5 | 5 | Y |
| Option to send results by email to a friend (via an email form) | 4 | 5 | Y |
| Results page with descriptions of zodiac pair compatibility | 4 | 4 | Y |
| Pricing page for users to access extra brand services [X] | 3 | 2 | X |
-
Landing Page
- Landing page explains to the user what the site is about and invites them to play the calculator game via the 'play' button. Clicking the 'play' button opens the game grid.
-
Love Calculator Game Grid
- The Game Grid consists of an text input for 2 people's names, and select options for their 2 star signs. These inputs are required before clicking 'Calculate Love %' will start the calculation process to reveal the score.
- Info (i) and reset buttons are accessible from within the grid to allow users to find out more information about the star signs / reset the form.
-
Star sign Select Tool
- Star signs for compatibility pairing can be selected from the list (required input for the calculation).
-
Infographic modal (via the 'i' info button)
- To help users who are not sure which star sign to choose for themselves or their crush's, the helpful inforgraphic displays all 12 signs and the dates which align with them. This opens as a modal which can be closed easily by clicking the X button or the website behind.
-
Send Results by Email
- Calculator results can be sent on by email using the feature below the game grid. Users who input a valid email address into the text box and click 'Send' will be given a confirmation message that the email has been sent successfully.
- Below is an example of the email that is received which includes the details of the couple's match and their compatibility score.
-
Results Page (zodiac compatibility details)
- Access to the Results page is either by a link after the calculator has been run, or via the 'Full Results' link in the navbar.
- 'Full Results' consists of 12 interactive cards containing more information about the compatibility matches for each zodiac star sign.
- Star sign information and images were gained from various sources online (see Credits for references).
- The user can click the 'View' button to reveal full details of the potential matches with other star signs (which opens the card as a Modal, closeable by clicking X or the close button etc). This is a great feature for users to learn more about the astrological star signs and how they might link to romantic relationships.
-
About Us Page
- Page describing the contributors of the Love Riot app with a scrolling tool for easy access to their details.
- Adding a horoscope API for generating detailed compatibility / prediction reports along with the results.
- Adding a pricing page for user to subscribe to our services such as reiki healing, cosmic realignment etc.
Wireframes for the website were created using the UI wireframe tool, Balsamiq, to plan the layout with a mobile-first approach.
The layout and design was kept consistent across the pages / devices as much as possible.
Mobile Device Love Calculator with pre-game layout (left) and results page layout (right):
Note - The square boxes with X inside was used to illustrate a decorative / animated image. And in the early planning stages we had not yet decided between using 'birthdate' or 'star-sign' user input.
The JS logic used to calculate the percentage compatibility scores were based on the Zodiac Signs Compatibility page by [numerologysign.com] (https://numerologysign.com/zodiac-signs-compatibility/).
We initially decided on calculating our own scores based on a compatibility grid such as this one from astrology-zodiac-signs:
However, we decided it was easier to calculate scores based on numerical data from a similar grid found at numerologysigns.com:
The data for zodiac pairs was transcribed into a JS object (compatibilityData) which was then used in the calculation functionality of javascript.
To display different visuals associated with positive / negative scores, 'if/else' statements were run in the JS script depending on % brackets.
- EmailJS account was setup and linked to a custom Gmail account loveriot1402@gmail.com
- An HTML email template was created and uploaded into EmailJS.
- Images used in the email template are hosted on AWS for public accessibility
- Agile development methodology was impletemented through the use of kanban board and timeline via GitHub Projects. The board can be viewd here
Brand name and Logo options:
The following details were decided as a Team:
Brand name: Cupid&Co
And app name: Love Riot
Cupid&Co's slogan: Connecting hearts, one shot at a time!
Logo image:
Logo with brand name (against pink website background):
Colour palette:
The following colour palette was created using Coloors based on the theme of 'love' :
The following set of Flaticon stickers were then found which aligned well with the pink theme (see Credits for attribution):
- HTML,
- CSS,
- Javascript,
- Bootstrap,
- GitHub and Github Pages - used to securely store the code and to host and deploy the live project
- GitPod - used as a cloud-based IDE for development
- Chrome Developer Tools - used for testing and troublshooting code, along with Lighthouse auditing
- Balsamiq - used to create wireframes during project planning
- Cloud Convert - used for resizing and converting image files to webp format
- Coolors - used to generate a color palette for the website design
- Google Fonts - used to generate a visually appealing font
- The Noun Project - used for generating the logo icon
- Flaticon - used to generate love-themed stickers
- ChatGPT - used to help research javascript logic and for general coding queries
- Canva - used for creating graphics, banners etc
- Amazon Web Services - for cloud hosting the email template images
- EmailJS - email sending framework used to email results from the page
- Favicon - for converting the logo into a favicon.ico file
- beautifytools - used for beautifying code
- JSHint - used to validate JS code
- W3 HTML validator - used to validate HTML
- W3 Jigsaw - used to validate CSS
- AmIResponsive? - used to create a mockup of the website
You can access our project on GitHub here
For all testing, please refer to the TESTING.md file.
The site was deployed to GitHub Pages. The steps to deploy are as follows:
- In the GitHub repository, navigate to the Settings tab.
- In the general settings side menu, open Pages.
- From the source section drop-down menu, select Deploy from a branch and then Main Branch, and click "Save".
- The page will be automatically refreshed with a detailed ribbon display to indicate the successful deployment and link to visit the site.
The live link can be found here
This project can be cloned or forked in order to make a local copy on your own system.
You can clone the repository by following these steps:
- Go to the GitHub repository
- Locate the Code button above the list of files and click it
- Select if you prefer to clone using HTTPS, SSH, or GitHub CLI and click the copy button to copy the URL to your clipboard
- Open Git Bash or Terminal
- Change the current working directory to the one where you want the cloned directory
- In your IDE Terminal, type the following command to clone my repository:
git clone https://github.com/yamesjamess/feb-24-hackathon-love-riot.git
- Press Enter to create your local clone.
Alternatively, if using Gitpod, you can click below to create your own workspace using this repository.
Please note that in order to directly open the project in Gitpod, you need to have the browser extension installed. A tutorial on how to do that can be found here.
The following media resources were used:
- Logo (Cupid icon) generated from The Noun Project
- CSS Scan - CSS button by 'Duolingo'
- HTML-shark - used for zodiac symbols / emojis
- zodiacsign - used for compatibility content on the Results Page
- Flaticon stickers created by MrHamster
- numerologysign.com star-sign inforgraphic:
The Cupid & Co Team: