TaffyDB Demo 2

Demo of TaffyDB JavaScript database simulator.

by the_voder

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/taffydb/2.7.3/taffy-min.js"></script>
<form id="select-coffee">

  <!-- Milk selection -->
  <fieldset>
    <legend>Milk?</legend>
    <input type="radio" name="milk" id="milk-none" value="none" checked="checked">
    <label for="milk-none">No Milk</label><br>
    <input type="radio" name="milk" id="milk-evaporated" value="evaporated">
    <label for="milk-evaporated">Evaporated Milk</label><br>
    <input type="radio" name="milk" id="milk-condensed" value="condensed">
    <label for="milk-condensed">Condensed Milk</label><br>
  </fieldset>

  <!-- Coffee strength selection -->
  <fieldset>
    <legend>Coffee Strength?</legend>
    <input type="radio" name="strength" id="strength-weak" value="weak" checked="checked">
    <label for="strength-weak">Weak</label><br>
    <input type="radio" name="strength" id="strength-regular" value="regular">
    <label for="strength-regular">Regular</label><br>
    <input type="radio" name="strength" id="strength-strong" value="strong">
    <label for="strength-strong">Strong</label><br>
  </fieldset>

  <!-- Iced/Hot selection -->
  <fieldset>
    <legend>Iced Or Not?</legend>
    <input type="radio" name="iced" id="iced-yes" value="yes" checked="checked">
    <label for="iced-yes">Iced</label><br>
    <input type="radio" name="iced" id="iced-no" value="no">
    <label for="iced-no">Hot</label><br>
  </fieldset>

  <!-- Sugar-Level selection -->
  <fieldset>
    <legend>Sugar Level?</legend>
    <input type="radio" name="sugar" id="sugar-0" value="0" checked="checked">
    <label for="sugar-0">0%</label><br>
    <input type="radio" name="sugar" id="sugar-50" value="50">
    <label for="sugar-50">50%</label><br>
    <input type="radio" name="sugar" id="sugar-100" value="100">
    <label for="sugar-100">100%</label><br>
    <input type="radio" name="sugar" id="sugar-150" value="150">
    <label for="sugar-150">150%</label><br>
  </fieldset>

  <!-- Form submit button -->
 ...

JavaScript

/*
Use TaffDB to select product from simulated database based on options set in HTML form.

Requires TaffDB and jQuery.
https://taffydb.com/

*/

$(document).ready(function() {

  // HTML element to write selection feedback into
  let confirmElement = $("#selection-confirm");

  // Create TaffyDB database
  // 72 records would be required to ensure a product existed matching all possible form selection permutations
  let products = TAFFY([{
      "id": 1,
      "name": "Coffee 1",
      "description": "Our no.1 coffee!",
      "icon": "coffee1.png",
      "milk": "none",
      "strength": "weak",
      "iced": "yes",
      "sugar": "0"
    },
    {
      "id": 2,
      "name": "Coffee 2",
      "description": "Our no.2 coffee!",
      "icon": "coffee2.png",
      "milk": "evaporated",
      "strength": "weak",
      "iced": "yes",
      "sugar": "0"
    },
    {
      "id": 3,
      "name": "Coffee 3",
      "description": "Our no.3 coffee!",
      "icon": "coffee3.png",
      "milk": "condensed",
      "strength": "weak",
      "iced": "yes",
      "sugar": "0"
    }
  ]);

  // Bind to form Submit
  $("#select-coffee").on("submit", function(event) {

    // Collect values from form into array and store in variable using jQuery serializeArray() function
    var formValues = $(this).serializeArray();

    console.log("Form data array: ");
    console.log(formValues);

    /*
    Extract values from form data into individual variables.
    Form data is stored in same order input items appear in form HTML
    0: {name: 'milk', value: 'none'}
	1: {name: 'strength', value: 'weak'}
	2: {name: 'iced', value: 'yes'}
	3: {name: 'sugar', value: '0'}
    */
    var milkSelection = formValues[0]['value'];
    var strengthSelection = formValues[1]['value'];
    var icedSelection = formValues[2]['value'];
    var sugarSelection = formValues[3]['value'];

    // Use variables above to query TaffyDB database.
    // Query will return product(s) matching all values and store it...