Free Zodiac Calculator Website
I wanted a simple zodiac calculator. Not one covered in ads, horoscopes, pop-ups and a million other things I didn't care about. Just a really nice-looking calculator.
So I built one. Just because I could.:) Took a bit to name it; I eventually went with Zodiacl, which is a shortening of zodiacal. Works in both English and Spanish. (and really worked with getting a domain: zodia.cl)
Zodiacl includes both Chinese and Western zodiac calculators. The Chinese calculator is a little more complicated than it might first appear, since Chinese zodiac years don't begin on January 1. It takes the actual Chinese New Year into account, along with the five Chinese elements, to return the correct animal and element for a given birthdate.
I designed and developed the site from scratch, including the interface, calculator logic, responsive layout, graphics and individual result pages. For this project I selected the Splitian template from the Publii Content Management System (CMS) as the base of the site. I then brought the essentials from the old site into the new design. We keep the emblematic logo of the previous versions.
I wanted the results to feel different from one another without turning the site into a collection of unrelated designs, so each of the five elements has its own background treatment. The backgrounds are built entirely with CSS, combining radial and linear gradients to create the different colors, lighting and textures rather than relying on large background images. There is also a small animated star field running behind the site. It's subtle, but it gives the otherwise simple pages a bit of movement without getting in the way of the calculator.
The Western Zodiac calculator section of the website has a similar setup, with each sign showing a custom background based on one of the four elements associated with signs (fire, earth, air and water).
The site is built as a static website, with the calculators powered by JavaScript in the browser. I also built the English and Spanish versions into the site structure from the beginning, rather than treating the Spanish version as an afterthought.
The goal was to keep everything simple and easy to navigate. Enter a birthdate, get your result, learn a little about it, and move on. No account, subscription or complicated interface required.
It's a project I built because I wanted something that didn't exist (or at least I couldn't find one). Every once in awhile it's exciting to build something just because you can.