TaffyDB Demo

by the_voder

HTML

<html>
<head>
	<meta charset="UTF-8">
	<title>British Fish Breeds (TaffyDB Demo)</title>
</head>
<body>
	<div id="wrapper">
		<div id="filters">
			<button id="freshwater-fish">Freshwater Fish</button>
			<button id="saltwater-fish">Saltwater Fish</button>
			<button id="big-fish">Big Fish</button>
			<button id="little-fish">Little Fish</button>
			<button id="bad-query">Bad Query</button>
		</div>
		<main>
			<!-- Filter title -->
			<h2 id="filter-title"></h2>
			<!-- Container element for query results -->
			<div id="result"></div>
		</main>
	</div>
</body>
</html>

CSS

* {
  box-sizing: border-box;
}

body {
  margin: 10px;
  background-color: #eee;
}

#filters {
  margin: 20px;
}

button {
  margin: 5px;
}

#result {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

.item {
  margin: 10px;
  width: 300px;
  padding: 20px;
  border: 1px #aaa solid;
  background-color: white;
}

.item span {
  font-weight: bold;
}

.item-photo {
  width: 100%;
}

JavaScript

/////////////////////////////
// CREATE TaffyDB DATABASE //
/////////////////////////////

// TaffyDB docs: https://taffydb.com/
// This could be in a seperate file

var fishes_db = TAFFY([
  // Freshwater Fish
  {
    id: 1,
    name: "gudgeon",
    type: "freshwater",
    weight: 0.06,
    description:
      "The gudgeon is the barbel’s smaller cousin, its body is small, slender and very straight.",
    photo:
      "https://badangling.com/wp-content/uploads/2018/06/gudgeon-fish-species.jpg",
  },
  {
    id: 2,
    name: "eel",
    type: "freshwater",
    weight: 2,
    description: "The eel is a long, slimy, snake-like fish with a small head.",
    photo:
      "https://badangling.com/wp-content/uploads/2018/06/Eel-fish-species.jpg",
  },
  {
    id: 3,
    name: "perch",
    type: "freshwater",
    weight: 1.4,
    length: 25,
    description:
      "The perch is without a doubt one of the most colourful and striking freshwater fish in the UK.",
    photo: "https://badangling.com/wp-content/uploads/2018/06/perch-fish.jpg",
  },
  {
    id: 4,
    name: "tench",
    type: "freshwater",
    weight: 5,
    description:
      "The tench is a stocky fish with a humped back that gradually slopes up from its rounded head.",
    photo: "https://badangling.com/wp-content/uploads/2018/06/tench-fish.jpg",
  },
  // Saltwater Fish
  {
    id: 5,
    name: "bass",
    type: "saltwater",
    weight: 6.35,
    description: "The bass is a commonly caught fish in British waters.",
    photo:
      "https://badangling.com/wp-content/uploads/2017/06/Bass-Dicentrachus-labrax.jpg",
  },
  {
    id: 6,
    name: "red bream",
    type: "saltwater",
    weight: 2.72,
    description:
      "The red bream is identifiable by its thin, oval-shaped body and a high lateral line; it has a crimson back, orange/gold sides and a silvery-orange underbelly and also particularly large eyes",
    photo:
     ...