JSFiddle - React, Tailwind, and code Playground

by michaelschmid

HTML

<h1>Javasript Demo: </h1>
<ul>
  <li>Search in Array (array.find)</li>
  <li>Add listitem</li>
</ul>


<div id="json">

</div>

<h2>
Template List
</h2>
<ul id="templates">

</ul>

JavaScript

// create the template swith: every switch must exist in templates!
let myTemplates = [
  { name: "tmplpatchcard_expand", caption: "Patch Card", description: "gaga" },
  { name: "tmpltile", caption: "Tile", description: "Normal Tile Template (list)" },
  { name: "tmpltile1", caption: "Tile1", description: "REview for clear design" },
  { name: "tmpltilesmall", caption: "Tile Small", description: "Reduced size for getting good overview" },
  { name: "card", caption: "Card Properties", description: "card attributes" },
  { name: "tmpltilearticle", caption: "Tile Article Status", description: "Article Status" },
  { name: "tmplinlinelist", caption: "Inline list floating", description: "Article Status" }
];

document.getElementById('json').textContent = JSON.stringify(myTemplates);

const list = document.getElementById('templates');

// add list items
myTemplates.forEach( function (tmpl) {
		var li = document.createElement('li');
    li.appendChild(document.createTextNode(tmpl.caption));
    list.appendChild(li);
});


let tmpl = myTemplates.find(
	templ => templ.name === "tmpltile"
);