An interactive, browser-based biology tool for exploring how physical traits are inherited across generations using the principles of Mendelian genetics. No installation, no dependencies — just open and explore.
- Five trait simulators — Eye color, blood type, skin tone, height, and hair color
- Punnett square visualization — A live 2×2 grid showing every possible offspring genotype and phenotype after each calculation
- Offspring result cards — Randomized children rendered as color-coded cards with swatches
- Dark mode — Persistent light/dark theme toggle with smooth CSS variable transitions
- Responsive layout — Works on desktop, tablet, and mobile; mobile navigation collapses to a hamburger menu
- No build step — Pure HTML, CSS, and JavaScript; served directly from the
docs/folder via GitHub Pages
aponder-dev.github.io/Mendelian-Inheritance-Simulator
All source files live in docs/, which is the GitHub Pages root.
docs/
├── css/
│ ├── style.css # Full design system — CSS custom properties, light theme
│ ├── darkmode.css # Dark theme variable overrides (body[data-theme="dark"])
│ └── layout.css # Compatibility stub
├── js/
│ ├── darkmode.js # Theme persistence and toggle (no stylesheet swapping)
│ ├── nav.js # Sticky navigation bar injection
│ ├── footer.js # Footer injection
│ ├── script.js # Shared utilities
│ └── alleles/
│ ├── bloodType.js # ABO blood type inheritance logic + Punnett square
│ ├── eyeColor.js # Eye color logic + Punnett square
│ ├── hairColor.js # Hair color logic + Punnett square
│ ├── height.js # Mid-parent height estimation
│ └── skinColor.js # Polygenic skin tone simulation
├── pages/
│ ├── blood-types.html
│ ├── eye-color.html
│ ├── hair-color.html
│ ├── height.html
│ └── skin-color.html
├── images/
│ └── mendel-diagram.png
└── index.html # Home page — hero, trait cards, about section
This is a static site — no build tools required.
Option A — Python (recommended):
cd docs
python -m http.server 8080
# Open http://localhost:8080Option B — Node.js:
npx serve docs -p 8080
# Open http://localhost:8080Opening
index.htmldirectly viafile://will work for most content, but the navigation uses absolute paths (/pages/...) that require an HTTP server.
- Navigate to a trait page from the nav bar or home page cards.
- Set the alleles (or phenotype) for each parent using the dropdown selectors.
- Choose the number of children to simulate (1–12).
- Click Calculate Offspring to generate results and a Punnett square.
- Re-run as many times as needed — each run produces a new random sample from the possible outcomes.
- Punnett square visualization
- Offspring result cards with color swatches
- Dark mode with CSS custom properties
- Responsive mobile layout with hamburger navigation
- Additional traits (widow's peak, dimples, tongue rolling)
- Probability percentages shown on Punnett square cells
- Export / share simulation results
- Multi-generational inheritance chains
Pull requests are welcome. For significant changes, please open an issue first to discuss the proposed update.
- Fork the repository
- Create a feature branch (
git checkout -b feature/your-feature) - Commit your changes (
git commit -m 'Add your feature') - Push to the branch (
git push origin feature/your-feature) - Open a pull request against
main
Repository: github.com/APonder-Dev/Mendelian-Inheritance-Simulator
This project is distributed under a custom No-Resale license. You are free to use, copy, modify, and share this software for personal or educational purposes. Commercial resale or redistribution for profit is not permitted without prior written consent from the author.
See the LICENSE file for full terms.
Anthony Ponder
Website: aponder.dev
Email: Anthony@aponder.dev
GitHub: @APonder-Dev