JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

<div id='container'>

<p>Light grey cells = homozygous. Light blue = dev.</p>
<hr>
Perfect only? <input type='checkbox' id='perfect-list'> - 
Your pet: <select id='select-pet-1'></select> Other pet: <select id='select-pet-2'></select> <button id='pet-related-btn'>Are they related?</button>
<br>
<div id='related-result'></div>
<hr>
Colour: 
<select id='select-colour1'></select>
<select id='select-colour2'></select> - 
Pattern: 
<select id='select-pattern1'></select>
<select id='select-pattern2'></select>  - 
Perfect only? <input type='checkbox' id='select-perfect'>
<br><br>
<button id='search-matches-btn'>Search for matches for <b><span class='current-pet-name'>[None]</span></b></button> - 
<button id='search-all-btn'>Search all pets</button>
<hr>

<p id='show-message'></p>
<div id='pets-container'></div>

</div>

CSS

#container {
    width: 900px;
    margin: 20px auto;
    text-align: center;
}

select {
    max-width: 160px;
}

table {
    border-collapse: collapse;
    width: 100%;
    max-width: 900px;
}
table th {
    background-color: #ddd;
}
table th, table td {
    padding: 3px 5px;
    border: 1px solid silver;
}

JavaScript

let pets = [
    {
        id: 1, name: "---", mother: 1, father: 1, 
        sex: 1, available: 0, badGenes: 0, cols: "./. ./."
    },{
        id: 1718407, name: "Gorgeous", mother: 1710404, father: 1714281, 
        sex: 1, available: 1, badGenes: 2, cols: "Black/Chestnut Cat/Cat"
    },{
        id: 1714281, name: "Carlos", mother: 1710669, father: 1709933, 
        sex: 1, available: 2, badGenes: 0, cols: "Black/Chestnut Cat/Cat"
    },{
        id: 1710404, name: "Josie Wales", mother: 1701771, father: 1691143, 
        sex: 2, available: 2, badGenes: 1, cols: "Black/White Cat/Pigeon"
    },{
        id: 1701771, name: "Darkside of the Mountains", mother: 1553122, father: 1693582, 
        sex: 2, available: 2, badGenes: 5, cols: "Black/? Cat/?"
    },{
        id: 1691143, name: "Triavere", mother: 1413415, father: 1661764, 
        sex: 1, available: 2, badGenes: 5, cols: "White/Piebald Pigeon/Owl"
    },{
        id: 1709933, name: "Snowy Wings", mother: 1706500, father: 1575027, 
        sex: 1, available: 0, badGenes: 0, cols: "White/? Cat/?"
    },{
        id: 1710669, name: "Tiger's Raven", mother: 1679840, father: 1665762, 
        sex: 2, available: 0, badGenes: 0, cols: "Chestnut/? Cat/?"
    },{
        id: 1575027, name: "A Better Day", mother: 1, father: 1, 
        sex: 1, available: 2, badGenes: 3, cols: "Black/Piebald Cat/BOP"
    },{
        id: 1706500, name: "Snowshoe", mother: 1, father: 1, 
        sex: 2, available: 0, badGenes: 1, cols: "White/? Cat/?"
    },{
        id: 1665762, name: "Art's Tiger", mother: 1664188, father: 1542190, 
        sex: 1, available: 0, badGenes: 1, cols: "Chestnut/? Cat/?"
    },{
        id: 1679840, name: "Matt's Raven", mother: 1, father: 1, 
        sex: 2, available: 0, badGenes: 1, cols: "Black/? Cat/?"
    },{
        id: 1693582, name: "Midnight", mother: 1, father: 1, 
        sex: 1, available: 2, badGenes: 6, cols: "Black/Black Cat/Cat"
    },{
        id: 1553122, name: "Luna", mother: 1,...