JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

Loop and turn strings into HTML as soon as page is loaded. This means PHP does the minimum, and all rendering is client-side.

<!-- Not visible -->
<span class='animal_data' data-animal='3' data-breed='1' data-sex='1' data-stage='1'>1122334455</span>
<span class='animal_data' data-animal='5' data-breed='4' data-sex='2' data-stage='3'>1122114411</span>
<span class='animal_data' data-animal='9' data-breed='3' data-sex='1' data-stage='2'>1155332255</span>
<span class='animal_data' data-animal='12' data-breed='2' data-sex='2' data-stage='2'>5544114433</span>

<div id='animal_list'>

<!-- Initially empty, will be filled -->
<div class='animal_box'>
    <div class='animal_thumb' id='thumb_3'></div>
    <span class='animal_name'><a href='/animal/3'>Magic</a></span>
    <span class='animal_title' id='title_3'></span>
</div>
<div class='animal_box'>
    <div class='animal_thumb' id='thumb_5'></div>
    <span class='animal_name'><a href='/animal/5'>Fluffy</a></span>
    <span class='animal_title' id='title_5'></span>
</div>
<div class='animal_box'>
    <div class='animal_thumb' id='thumb_9'></div>
    <span class='animal_name'><a href='/animal/9'>Smoky</a></span>
    <span class='animal_title' id='title_9'></span>
</div>
<div class='animal_box'>
    <div class='animal_thumb' id='thumb_12'></div>
    <span class='animal_name'><a href='/animal/12'>Star</a></span>
    <span class='animal_title' id='title_12'></span>
</div>

</div>

CSS

body {
    background-color: #ddd;
}

img, div {
    box-sizing: border-box;
}

a {
    text-decoration: none;
}

/* Hidden spans */
.animal_data {
    display: none;
}

#animal_list {
    display: flex;
    flex-flow: row wrap;
}

.animal_box {
    min-width: 230px;
    border: 1px solid silver;
    background-color: white;
    margin: 5px;
    text-align: center;
    padding: 10px;
}

.animal_box .animal_thumb {
    width: 200px;
    height: 150px;
    border: 1px solid silver;
    margin: auto;
    position: relative;
}

.animal_box .animal_thumb img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.animal_box .animal_name {
    font-size: 16px;
    font-weight: bold;
    color: #222;
    display: block;
}

.animal_box .animal_name a {
    color: #222;
}

.animal_box .animal_title {
    font-size: 14px;
    color: grey;
    display: block;
}

JavaScript

/*
// Find all spans with certain class.
// Which is better?
var spans = document.getElementsByClassName("animal_data");

var spans = document.querySelectorAll(".animal_data");

// Loop through them, render each animal.
for(var i = 0; i < spans.length; i++){
     var span = spans[i];
     var animal_id = span.dataset.animal;
     var breed = span.dataset.breed;
     var sex = span.dataset.sex;
     var stage = span.dataset.stage;
     var genotype = span.innerHTML;
     
  // Single object to use for image gen.
  var animal = {
    breed: breed,
    sex: sex,
    stage: stage,
    genotype: genotype
  };

  var image_html = generateImage(animal);
  var title_html = generateTitle(breed, sex, stage);

  // Display HTML for this animal.
  document.getElementById("thumb_" + animal_id).innerHTML = image_html;
  document.getElementById("title_" + animal_id).innerHTML = title_html;
     
}
*/

// Find all spans with this class...
$('.animal_data').each(function(){

  // The ID of the animal.
  var animal_id = $(this).data("animal");
  // Breed, sex, stage of animal.
  var breed = $(this).data("breed");
  var sex = $(this).data("sex");
  var stage = $(this).data("stage");
  // The string of genes. All numbers.
  var geno = $(this).text();

  // Single object to use for image gen.
  var animal = {
    breed: breed,
    sex: sex,
    stage: stage,
    geno: geno.toString().replace(" ","")
  };

  var image_html = generateImage(animal, "thumb");
  var title_html = generateTitle(breed, sex, stage);

  // Display HTML for this animal.
  $("#thumb_" + animal_id).html(image_html);
  $("#title_" + animal_id).html(title_html);

});


function generateTitle(breed, sex, stage) {
  var html = getStageName(stage) + " " + getSexName(sex) + " " + getBreedName(breed);
  return html;
}


function getBreedName(num){
  var names = ["Horse", "Dog", "Cat", "Rabbit"];
/*
  var sex_names = [
    ["Stallion", "Mare"],
    ["Dog", "Bitch"],
    ["Tom", "Queen"],
    ["Buck", "Doe"]
  ];

  var...