JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

workshop demo. search by ingredient or finished product name. a pet must have enough skills for each recipe.

<div id='tab-button-container'>

    <button class='tab-button' data-tab='1'>Search by Ingredient</button>
    <button class='tab-button' data-tab='2'>Search by Final Product</button>
    <button class='tab-button' data-tab='3'>Search by Ability</button>
    <button class='tab-button active-button' data-tab='4'>Recipe Reference</button>
    <button class='tab-button' data-tab='5'>Item Reference</button>
    
</div>
<div id='tab-content-container'>

<div class='tab-content' id='tab-content-1'>

    <b>Search by Ingredient</b>
    <p>Got a pile of clay that needs using up? Or other materials you're not sure what to do with? Find inspiration here.</p>

    <div class='autocomplete' style='width: 200px;'>
    <input type='text' id='ws-name-ingredient' max='30' placeholder='Enter an item name'> 
    </div>
    
    <button id='ws-search-ingredient' class='ws-search-btn' data-search='ingredient'>Search</button>
    <div id='ws-itemNames-ingredient' class='ws-itemNames-list'>...</div>
    <div id='ws-recipes-ingredient' class='ws-recipe-list'></div>

</div>
<div class='tab-content' id='tab-content-2'>

    <b>Search by Finished Product</b>
    <p>So you want to make some fancy Beads for jewellery, or maybe a cute Doll... but what kind, exactly? Browse the options here.</p>

    <input type='text' id='ws-name-product' max='30' placeholder='Enter an item name'> 
    <button id='ws-search-product' class='ws-search-btn' data-search='product'>Search</button>
    <div id='ws-itemNames-product' class='ws-itemNames-list'>...</div>
    <div id='ws-recipes-product' class='ws-recipe-list'></div>

</div>
<div class='tab-content' id='tab-content-3'>

    <b>Search by Ability</b>
    <p>Choose a Mythic from the list and find out what they're capable of.</p>
    <select id='ws-ability-mythic'></select>
    <button id='ws-ability-btn'>Check</button>

</div>

<div...

CSS

div, button, img, p, input, select {
    box-sizing: border-box;
}


.autocomplete {
  /*the container must be positioned relative:*/
  position: relative;
  display: inline-block;
}
.autocomplete-items {
  position: absolute;
  border: 1px solid #d4d4d4;
  border-bottom: none;
  border-top: none;
  z-index: 99;
  /*position the autocomplete items to be the same width as the container:*/
  top: 100%;
  left: 0;
  right: 0;
}
.autocomplete-items div {
  padding: 10px;
  cursor: pointer;
  background-color: #fff;
  border-bottom: 1px solid #d4d4d4;
}
.autocomplete-items div:hover {
  background-color: #e9e9e9;
}
.autocomplete-active {
  background-color: DodgerBlue !important;
  color: #ffffff;
}




.ws-recipe-list {
    max-height: 200px;
    overflow: auto;
    border: 1px solid silver;
    display: flex;
    flex-flow: row wrap;
    background-color: #eee;
}

.ws-recipe-list .ws-recipe-thumb {
    background-color: #fff;
    padding: 5px;
    width: 120px;
    height: 100px;
    margin: 5px;
    text-align: center;
    cursor: pointer;
}

/* Display recipe details */

.ws-recipe-container {
    position: relative;
}


.ws-itemNames-list {
    margin: 5px 0;
    font-size: 12px;
}

/* Reference */

.ws-reference-container {
    padding: 5px;
    margin: 10px 0;
    border: 1px solid silver;
    background-color: #eee;
    max-height: 500px;
    overflow: auto;
}
.ws-reference-table {
    width: 100%;
    border-collapse: collapse;
}
.ws-reference-table td {
    border: 1px solid silver;
    padding: 5px;
    background-color: #fff;
}
.ws-reference-table ul {
    margin: 0;
    padding: 0 0 0 15px;
}


/* Tabs */

#tab-button-container {}

.tab-button {
    position: relative;
    top: 1px;
    left: 20px;
    padding: 5px 10px;
    border: 1px solid grey;
    border-radius: 5px 5px 0px 0px;
    cursor: pointer;
    background-color: lightpink;
    transition: 0.3s;
}
.tab-button:hover {
    cursor: pointer;
    background-color: ivory;
    transition:...

JavaScript

const db = {
    
    pets: [
        {
            id: 1, name: "Echo", breed: 1, sex: 2,
            energy: 90, itemsCrafted: 0,
            skills: [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]
        },{
            id: 2, name: "Whisky", breed: 2, sex: 1,
            energy: 80, itemsCrafted: 0,
            skills: [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]
        },{
            id: 3, name: "Tango", breed: 3, sex: 1,
            energy: 100, itemsCrafted: 0,
            skills: [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]
        },{
            id: 4, name: "Oracle", breed: 4, sex: 2,
            energy: 100, itemsCrafted: 0,
            skills: [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]
        },{
            id: 5, name: "Spark", breed: 5, sex: 1,
            energy: 85, itemsCrafted: 0,
            skills: [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]
        },{
            id: 6, name: "Thunder", breed: 6, sex: 1,
            energy: 60, itemsCrafted: 0,
            skills: [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]
        },{
            id: 7, name: "Blaze", breed: 7, sex: 1,
            energy: 75, itemsCrafted: 0,
            skills: [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]
        },{
            id: 8, name: "Frosty", breed: 8, sex: 2,
            energy: 95, itemsCrafted: 0,
            skills: [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]
        },{
            id: 9, name: "Dune", breed: 9, sex: 1,
            energy: 100, itemsCrafted: 0,
            skills: [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]
        },{
            id: 10, name: "Rainy", breed: 10, sex: 2,
            energy: 100, itemsCrafted: 0,
            skills: [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]
        }
    ],
    
    petBreeds: [
        {id: 1, name: "Unicorn"},
        {id: 2, name: "Pegasus"},
        {id: 3, name: "Hippogriff"},
        {id: 4, name: "Aquila Griffin"},
        {id: 5, name: "Minoan Griffin"},
        {id: 6, name: "Marlik Griffin"},
        {id: 7, name: "Brythonic Dragon"},
        {id: 8, name: "Wyvern"},
        {id: 9, name:...