Inspiration
The project was inspired by a desire to simplify complex Mendelian genetics for poultry breeders and backyard chicken keepers who want to predict egg shell colors—like blue, green, olive, and chocolate brown—in offspring without having to perform manual genetic calculations. It calculates all possible chicken egg shell colours that offspring will lay based on parent chicken genotypes or selected breeds.
What it does
It automatically generates 2x2, 4x4, or 8x8 Punnett Squares depending on whether 2, 4, or 6-letter genetic codes are entered.
It provides a visual egg colour map along with exact percentage probability statistics for each outcome (such as blue, green, olive, tan, brown, or white eggs).
How I built it
Front-End & Interface: Built using standard HTML5 and CSS3, featuring a custom dark-mode interface optimized with a zero-external-network system font stack for fast loading and clear visual contrast. Core Logic: Implemented with Vanilla JavaScript to power the dynamic genotype permutation engine, calculating gamete combinations, grid outputs, and percentage probabilities without external dependencies. Hosting & Deployment: Hosted and deployed on GitHub Pages using Git version control for continuous updates and repository management.
Challenges I ran into
Complex Grid Scaling: Dynamically rendering 2x2, 4x4, and 8x8 Punnett square grids based on varying allele inputs (2, 4, or 6 letters) while keeping the user interface clean and mobile-responsive. Readability & Contrast: Ensuring high text contrast against varying background colors for white, tan, blue, green, and olive egg outcomes across both dark mode and light mode interfaces. SEO & URL Indexing: Managing Google Search Console indexing and search engine optimization (SEO) across GitHub Pages' parent-child repository structure to avoid blank homepage issues and maximize click-through rates (CTR).
Accomplishments that I'm proud of
What I learned
Applied Genetics & Algorithms: How to translate complex Mendelian genetic inheritance rules into dynamic JavaScript algorithms to calculate gamete permutations and phenotypic probabilities for monohybrid, dihybrid, and trihybrid crosses. Front-End Design & Accessibility: How to implement a zero-external-network system font stack for ultra-fast loading speeds and refine color palettes and contrast to ensure UI elements are accessible across diverse egg outcome shades. SEO & Deployment Workflows: How to manage GitHub Pages root and repository deployment structures, optimize search engine listings with structured Schema markup and Open Graph metadata, and track site performance using Google Search Console.
